<!DOCTYPE html>
<html>
<head>
    <style>
        @media print {
        @page {
            size: 60mm 14mm;
            margin: -1mm;
        }

        body {
            margin: 0;
            padding: 0;
            width: 60mm;
            height: 14mm;
            font-family: 'Arial Narrow', Arial, sans-serif;
        }

        .serial {
            text-align: left;
            font-family: 'Arial Narrow', Arial, sans-serif;
            font-weight: bold;
            font-size: 10pt;
        }

        .desc-row {
            font-weight: normal;
            font-family: 'Arial Narrow', Arial, sans-serif;
            font-size: 8pt;
        }

        table, td, tr
        {
            margin: 0;
        }

        pre
        {
            margin: 0;
            padding-top: 5px;
        }

        .po-number {
            text-align: right;
        }

        img.qr {
            width: 13mm;
            height: 13mm;
            padding-left: 2mm;
            padding-top: 1mm;

        }
    }

    </style>
</head>
<body>
    <div id="print-container"></div>

    <script>
        const copies = {{ $copies }};
        const qrBase64 = @json($qrBase64);
        const serial = @json($serial);
        const productionOrder = @json($productionOrder);
        const description = @json($item->description);

        const htmlBlock = `
            <table>
                <tr>
                     <td>
                        <img class="qr" src="data:image/png;base64,${qrBase64}" alt="QR" />
                    </td>
                    <td>
                        <pre><span class="serial">${serial}</span><span class="po-number">${productionOrder}</span><br><span class="desc-row">${description}</span></pre>
                    </td>
                    </tr>
            </table>
        `;

        const container = document.getElementById("print-container");
        for (let i = 0; i < copies; i++) {
            container.insertAdjacentHTML("beforeend", htmlBlock);
        }

        window.onload = function () {
            window.print();
            setTimeout(() => {
                window.close();
            }, 500);
        };
    </script>
</body>
</html>
