38471-vm/pages/avery_label_script.php

    <script>
    // Avery Label Logic
    const selectAllItems = document.getElementById('selectAllItems');
    const bulkBarcodeBtn = document.getElementById('bulkBarcodeBtn');
    
    if (selectAllItems) {
        selectAllItems.addEventListener('change', function() {
            document.querySelectorAll('.item-checkbox').forEach(cb => {
                cb.checked = this.checked;
            });
            toggleBulkBtn();
        });
    }

    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('item-checkbox')) {
            toggleBulkBtn();
        }
    });

    function toggleBulkBtn() {
        const checked = document.querySelectorAll('.item-checkbox:checked').length;
        if (bulkBarcodeBtn) {
            bulkBarcodeBtn.style.display = checked > 0 ? 'inline-block' : 'none';
        }
    }

    window.openAveryModal = function() {
        const modal = new bootstrap.Modal(document.getElementById('averyLabelsModal'));
        const checkedItems = document.querySelectorAll('.item-checkbox:checked');
        const container = document.getElementById('averyItemQuantities');
        const defaultCopies = parseInt(document.getElementById('averyCopies').value) || 1;

        if (container) {
            container.innerHTML = '';
            if (checkedItems.length === 0) {
                container.innerHTML = '<small class="text-muted" data-en="No items selected." data-ar="لم يتم تحديد أي صنف.">No items selected.</small>';
            } else {
                const table = document.createElement('table');
                table.className = 'table table-sm table-borderless mb-0';
                const tbody = document.createElement('tbody');
                
                checkedItems.forEach(cb => {
                    const sku = cb.dataset.sku;
                    const name = cb.dataset.name;
                    const id = cb.dataset.id;
                    
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td class="align-middle" style="width: 70%; font-size: 0.9em;">${name} <span class="text-muted">(${sku})</span></td>
                        <td class="align-middle" style="width: 30%;">
                            <input type="number" class="form-control form-control-sm item-qty-input" 
                                   data-id="${id}" value="${defaultCopies}" min="0" onchange="updateAveryPreview()" onkeyup="updateAveryPreview()">
                        </td>
                    `;
                    tbody.appendChild(tr);
                });
                table.appendChild(tbody);
                container.appendChild(table);
            }
        }

        modal.show();
        updateAveryPreview();
    };

    window.updateAllItemQuantities = function() {
        const globalQty = document.getElementById('averyCopies').value;
        const itemInputs = document.querySelectorAll('.item-qty-input');
        itemInputs.forEach(input => {
            input.value = globalQty;
        });
        updateAveryPreview();
    };

    window.updateAveryPreview = function() {
        const layout = document.getElementById('averyLayout').value;
        const container = document.getElementById('averyPrintArea');
        const checkedItems = document.querySelectorAll('.item-checkbox:checked');
        
        container.className = 'avery-container avery-layout-' + layout;
        container.innerHTML = '';
        
        checkedItems.forEach(cb => {
            const sku = cb.dataset.sku;
            const nameAr = cb.dataset.nameAr || '';
            const nameEn = cb.dataset.nameEn || '';
            const name = cb.dataset.name;
            const price = cb.dataset.price;
            const id = cb.dataset.id;
            
            // Find specific quantity input
            const qtyInput = document.querySelector(`.item-qty-input[data-id="${id}"]`);
            let copies = 1;
            if (qtyInput) {
                copies = parseInt(qtyInput.value) || 0;
            } else {
                 copies = parseInt(document.getElementById('averyCopies').value) || 1;
            }
            
            for (let i = 0; i < copies; i++) {
                const label = document.createElement('div');
                label.className = 'avery-label';
                const uniqueId = Math.random().toString(36).substr(2, 9);
                const svgId = `bc-${sku}-${uniqueId}`;
                
                let nameHtml = '';
                if (nameAr || nameEn) {
                     const arText = nameAr || name;
                     const enText = nameEn || '';
                     nameHtml = `<div style="font-size: 10px; font-weight: bold; direction: rtl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1;">${arText}</div>
                                 <div style="font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1;">${enText}</div>`;
                } else {
                     nameHtml = `<div style="font-size: 9px; font-weight: bold; margin-bottom: 2px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; width: 100%;">${name}</div>`;
                }

                label.innerHTML = `
                    ${nameHtml}
                    <svg id="${svgId}"></svg>
                    <div style="font-size: 11px; font-weight: bold; margin-top: 2px;">OMR ${price}</div>
                `;
                container.appendChild(label);
                
                setTimeout(() => {
                    if (document.getElementById(svgId)) {
                        const bcHeight = layout === 'L7651' ? 20 : 35;
                        JsBarcode(`#${svgId}`, sku, {
                            format: "CODE128",
                            width: layout === 'L7651' ? 1.0 : 1.2,
                            height: bcHeight,
                            displayValue: true,
                            fontSize: layout === 'L7651' ? 8 : 10,
                            margin: 0
                        });
                    }
                }, 0);
            }
        });
    };

    window.addEventListener('beforeprint', () => {
        if (document.getElementById('averyLabelsModal') && document.getElementById('averyLabelsModal').classList.contains('show')) {
            document.body.classList.add('printing-avery');
        }
    });
    window.addEventListener('afterprint', () => {
        document.body.classList.remove('printing-avery');
    });
    </script>