
<!DOCTYPE html>
<html lang="vi">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>In Tem Barcode</title>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f8f9fa;
        }

        #printPreview {
            width: 276px;
            height: 88px;
            display: flex;
            margin-bottom: 20px;
            background-color: white;
        }

        .print-label {
            width: 138px;
            height: 88px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 2px;
            box-sizing: border-box;
        }

        .print-label-title {
            font-size: 10px;
            font-weight: bold;
            text-align: center;
        }

        .print-label-barcode {
            text-align: center;
            height: 60px;
        }

        .print-label-barcode svg {
            height: 100%;
            max-width: 100%;
        }

        .print-label-price {
            font-size: 16px;
            font-weight: bold;
            text-align: right;
        }

        #printButton {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
        }

        #printArea {
            display: none;
        }

        @media print {
            @page {
                size: 69mm 22mm;
                margin: 0;
            }

            body {
                margin: 0;
                padding: 0;
                width: 69mm;
                height: 22mm;
            }

            #printArea {
                display: flex;
                width: 69mm;
                height: 22mm;
                page-break-after: always;
            }

            #printPreview,
            #printButton {
                display: none !important;
            }

            .print-label {
                width: 34.5mm;
                height: 22mm;
                padding: 0.5mm;
            }

            .print-label-title {
                font-size: 2mm;
            }

            .print-label-barcode {
                height: 14mm;
            }

            .print-label-price {
                font-size: 2mm;
            }
        }
    </style>
</head>

<body>
    <div id="printPreview"></div>
    <button id="printButton">In nhãn</button>
    <div id="printArea"></div>

    <script>
        function loadData(item, price, barcode) {
            displayPrintPreview(item, price, barcode);
            preparePrintLabel(item, price, barcode);
        }

        function createLabelHTML(item, price, barcode, id) {
            return `
                <div class="print-label">
                    <div class="print-label-title">${item}</div>
                    <div class="print-label-barcode">
                        <svg id="barcode${id}"></svg>
                    </div>
                    <div class="print-label-price">${price}</div>
                </div>
            `;
        }

        function displayPrintPreview(item, price, barcode) {
            const printPreview = document.getElementById('printPreview');
            printPreview.innerHTML = createLabelHTML(item, price, barcode, 'Preview1') + createLabelHTML(item, price, barcode, 'Preview2');
            generateBarcode('barcodePreview1', barcode);
            generateBarcode('barcodePreview2', barcode);
        }

        function preparePrintLabel(item, price, barcode) {
            const printArea = document.getElementById('printArea');
            printArea.innerHTML = createLabelHTML(item, price, barcode, 'Print1') + createLabelHTML(item, price, barcode, 'Print2');
            generateBarcode('barcodePrint1', barcode);
            generateBarcode('barcodePrint2', barcode);
        }

        function generateBarcode(elementId, barcodeData) {
            JsBarcode(`#${elementId}`, barcodeData, {
                format: "CODE128",
                width: 2,
                height: 50,
                displayValue: true,
                fontSize: 14,
                marginTop: 5,
                marginBottom: 5
            });
        }

        window.onload = function () {
            const urlParams = new URLSearchParams(window.location.search);
            const item = urlParams.get('item') || 'Tên sản phẩm';
            const price = urlParams.get('price') || 'Giá VNĐ';
            const barcode = urlParams.get('barcode') || '00000';

            loadData(item, price, barcode);

            document.getElementById('printButton').addEventListener('click', function () {
                window.print();
            });
        };
    </script>
</body>

</html>
