{{-- Shared 80mm thermal receipt for all reports --}}

<style>
    /*
     * Thermal printers use 80mm paper, but the actual printable
     * content area is normally around 72mm.
     *
     * Keep the receipt content inside that safe printable width.
     */

    #thermal-receipt {
        width: 72mm;
        max-width: 72mm;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 2mm 0;
        background: #fff;
        color: #000;
        overflow: hidden;
    }

    #thermal-receipt .thermal-line {
        width: 100%;
        box-sizing: border-box;
    }

    #thermal-receipt .thermal-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 2mm;
        width: 100%;
        box-sizing: border-box;
    }

    #thermal-receipt .thermal-label {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #thermal-receipt .thermal-value {
        white-space: nowrap;
        text-align: right;
    }

    @media print {

        html,
        body {
            margin: 0 !important;
            padding: 0 !important;
            width: 80mm !important;
            min-width: 80mm !important;
            background: #fff !important;
        }

        body * {
            visibility: hidden !important;
        }

        #thermal-receipt,
        #thermal-receipt * {
            visibility: visible !important;
        }

        #thermal-receipt {
            position: absolute !important;
            left: 0 !important;
            top: 0 !important;

            /*
             * 72mm content on 80mm paper.
             * This leaves approximately 4mm safe area on each side.
             */
            width: 72mm !important;
            max-width: 72mm !important;

            box-sizing: border-box !important;

            margin: 0 auto !important;
            padding: 2mm 0 !important;

            background: #fff !important;
            color: #000 !important;

            overflow: visible !important;
        }

        @page {
            size: 80mm auto;
            margin: 0;
        }

        #thermal-receipt .thermal-row {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) auto !important;
            column-gap: 2mm !important;
        }

        #thermal-receipt .thermal-label {
            min-width: 0 !important;
            overflow-wrap: anywhere !important;
            word-break: break-word !important;
        }

        #thermal-receipt .thermal-value {
            white-space: nowrap !important;
            text-align: right !important;
        }
    }
</style>

<div class="flex flex-col items-center gap-4">

    <button
    type="button"
    x-data="{
        printing: false,

        printThermalReceipt() {
            if (this.printing) {
                return;
            }

            const receipt = document.getElementById('thermal-receipt');

            if (!receipt) {
                return;
            }

            this.printing = true;

            const frame = document.createElement('iframe');

            frame.style.position = 'fixed';
            frame.style.left = '-10000px';
            frame.style.top = '0';
            frame.style.width = '80mm';
            frame.style.height = '100vh';
            frame.style.border = '0';
            frame.style.visibility = 'visible';

            document.body.appendChild(frame);

            const doc = frame.contentDocument;

            if (!doc) {
                frame.remove();
                this.printing = false;
                return;
            }

            doc.open();

            doc.write('<!DOCTYPE html>');
            doc.write('<html>');
            doc.write('<head>');
            doc.write('<meta charset=\'utf-8\'>');

            doc.write('<style>');
            doc.write('@page { size: 80mm auto; margin: 0; }');

            doc.write('html, body {');
            doc.write('margin: 0;');
            doc.write('padding: 0;');
            doc.write('width: 80mm;');
            doc.write('background: #fff;');
            doc.write('}');

            doc.write('#thermal-receipt {');
            doc.write('width: 72mm;');
            doc.write('max-width: 72mm;');
            doc.write('box-sizing: border-box;');
            doc.write('margin: 0 auto;');
            doc.write('padding: 2mm 0;');
            doc.write('background: #fff;');
            doc.write('color: #000;');
            doc.write('overflow: visible;');
            doc.write('}');

            doc.write('#thermal-receipt .thermal-row {');
            doc.write('display: grid;');
            doc.write('grid-template-columns: minmax(0, 1fr) auto;');
            doc.write('column-gap: 2mm;');
            doc.write('width: 100%;');
            doc.write('box-sizing: border-box;');
            doc.write('}');

            doc.write('#thermal-receipt .thermal-label {');
            doc.write('min-width: 0;');
            doc.write('overflow-wrap: anywhere;');
            doc.write('word-break: break-word;');
            doc.write('}');

            doc.write('#thermal-receipt .thermal-value {');
            doc.write('white-space: nowrap;');
            doc.write('text-align: right;');
            doc.write('}');

            doc.write('</style>');
            doc.write('</head>');
            doc.write('<body>');

            doc.body.appendChild(receipt.cloneNode(true));

            doc.write('</body>');
            doc.write('</html>');

            doc.close();

            const printWindow = frame.contentWindow;

            if (!printWindow) {
                frame.remove();
                this.printing = false;
                return;
            }

            const cleanup = () => {
                if (frame.parentNode) {
                    frame.remove();
                }

                this.printing = false;
            };

            printWindow.addEventListener(
                'afterprint',
                cleanup,
                { once: true }
            );

            setTimeout(() => {
                printWindow.focus();
                printWindow.print();
            }, 300);

            setTimeout(cleanup, 60000);
        }
    }"
    x-on:click.stop.prevent="printThermalReceipt()"
    class="fi-btn fi-btn-color-gray fi-btn-size-md rounded-lg bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-200 dark:bg-white/10 dark:text-gray-200 dark:hover:bg-white/20"
>
    Print Receipt
</button>

    <div
        id="thermal-receipt"
    >

        <div
            class="font-mono text-[12px] leading-snug"
            style="width: 100%;"
        >

            {{-- Header --}}
            <div class="text-center text-sm font-bold">
                {{ $title }}
            </div>

            <div class="text-center">
                {{ $meta }}
            </div>

            <hr class="my-1.5 border-t border-dashed border-black">

            {{-- Report rows --}}
            @forelse ($rows as $row)

                <div class="thermal-row">

                    <span class="thermal-label">
                        {{ $row['label'] }}
                    </span>

                    <span class="thermal-value">
                        {{ $row['value'] }}
                    </span>

                </div>

            @empty

                <div class="text-center text-[10px]">
                    Nothing to report for these filters.
                </div>

            @endforelse

            {{-- Totals --}}
            @if (! empty($totals))

                <hr class="my-1.5 border-t border-dashed border-black">

                @foreach ($totals as $total)

                    <div class="thermal-row font-bold">

                        <span class="thermal-label">
                            {{ $total['label'] }}
                        </span>

                        <span class="thermal-value">
                            {{ $total['value'] }}
                        </span>

                    </div>

                @endforeach

            @endif

            <hr class="my-1.5 border-t border-dashed border-black">

            {{-- Footer --}}
            <div class="text-center text-[9px]">
                {{ $footer }}
            </div>

        </div>

    </div>

</div>