revision2 editing labels numbers

index.php

@@ -4850,13 +4850,22 @@ document.addEventListener('DOMContentLoaded', function() {
                             </select>
                         </div>
                         <div class="col-md-4">
-                            <label class="form-label small">Copies per Item</label>
-                            <input type="number" id="averyCopies" class="form-control form-control-sm" value="1" min="1" oninput="updateAveryPreview()">
+                            <label class="form-label small">Copies (Set All)</label>
+                            <input type="number" id="averyCopies" class="form-control form-control-sm" value="1" min="1" oninput="updateAllItemQuantities()" onchange="updateAllItemQuantities()">
                         </div>
                         <div class="col-md-4 d-flex align-items-end">
                             <button class="btn btn-primary btn-sm w-100" onclick="window.print()"><i class="bi bi-printer me-2"></i>Print A4 Sheet</button>
                         </div>
                     </div>
+
+                    <div class="row mb-3 d-print-none">
+                        <div class="col-12">
+                            <label class="form-label small fw-bold" data-en="Quantities per Item" data-ar="الكميات لكل صنف">Quantities per Item</label>
+                            <div id="averyItemQuantities" class="border rounded p-2 bg-light" style="max-height: 150px; overflow-y: auto;">
+                                <small class="text-muted">Select items to adjust quantities.</small>
+                            </div>
+                        </div>
+                    </div>
                     
                     <div id="averyPrintArea" class="avery-container">
                         <!-- Labels will be generated here -->
@@ -4972,13 +4981,54 @@ document.addEventListener('DOMContentLoaded', function() {
 
     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">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 copies = parseInt(document.getElementById('averyCopies').value) || 1;
         const container = document.getElementById('averyPrintArea');
         const checkedItems = document.querySelectorAll('.item-checkbox:checked');
         
@@ -4989,11 +5039,22 @@ document.addEventListener('DOMContentLoaded', function() {
             const sku = cb.dataset.sku;
             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 svgId = `bc-${sku}-${i}`;
+                const uniqueId = Math.random().toString(36).substr(2, 9);
+                const svgId = `bc-${sku}-${uniqueId}`;
                 label.innerHTML = `
                     <div style="font-size: 10px; font-weight: bold; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;">${name}</div>
                     <svg id="${svgId}"></svg>
@@ -5002,15 +5063,17 @@ document.addEventListener('DOMContentLoaded', function() {
                 container.appendChild(label);
                 
                 setTimeout(() => {
-                    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
-                    });
+                    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);
             }
         });