script.js

// Global variables
let currentUser = null;
let labelTemplates = {};

// Initialize application
document.addEventListener('DOMContentLoaded', function() {
    // Load saved templates from localStorage
    loadSavedTemplates();
    
    // Add event listeners for real-time preview
    const inputs = document.querySelectorAll('.field-inputs input, .layout-controls select, .layout-controls input');
    inputs.forEach(input => {
        input.addEventListener('input', debounce(generatePreview, 300));
    });
});

// Simple authentication (can be replaced with real authentication)
function login() {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    
    if (username && password) {
        // Simple validation - replace with real authentication
        if (username.length >= 3 && password.length >= 3) {
            currentUser = username;
            document.getElementById('loginSection').classList.add('hidden');
            document.getElementById('appSection').classList.remove('hidden');
            
            // Load sample data for demo
            loadSampleData();
        } else {
            alert('Please enter valid credentials (minimum 3 characters each)');
        }
    } else {
        alert('Please enter both username and password');
    }
}

// Load sample data for demonstration
function loadSampleData() {
    document.getElementById('productCode').value = 'PRD001';
    document.getElementById('productName').value = 'Sample Product';
    document.getElementById('price').value = '$25.99';
    document.getElementById('batchNumber').value = 'B2024001';
    document.getElementById('expiryDate').value = '2024-12-31';
    
    // Generate initial preview
    setTimeout(generatePreview, 100);
}

// Generate barcode and label preview
function generatePreview() {
    const productCode = document.getElementById('productCode').value;
    const productName = document.getElementById('productName').value;
    const price = document.getElementById('price').value;
    const batchNumber = document.getElementById('batchNumber').value;
    const expiryDate = document.getElementById('expiryDate').value;
    const customField1 = document.getElementById('customField1').value;
    const customField2 = document.getElementById('customField2').value;
    
    const fontSize = document.getElementById('fontSize').value;
    const barcodeHeight = document.getElementById('barcodeHeight').value;
    const showBarcodeText = document.getElementById('showBarcodeText').checked;
    
    if (!productCode) {
        document.getElementById('labelPreview').innerHTML = 
            '<div class="preview-placeholder">Please enter a product code</div>';
        return;
    }
    
    // Create label content
    let labelHTML = '<div class="label-content" style="font-size: ' + fontSize + 'px;">';
    
    // Add product name if provided
    if (productName) {
        labelHTML += '<div class="label-field product-name">' + escapeHtml(productName) + '</div>';
    }
    
    // Add barcode
    labelHTML += '<div class="barcode-container">';
    labelHTML += '<svg id="barcode"></svg>';
    labelHTML += '</div>';
    
    // Add other fields
    const fields = [
        { value: price, label: 'Price' },
        { value: batchNumber, label: 'Batch' },
        { value: expiryDate, label: 'Exp' },
        { value: customField1, label: 'CF1' },
        { value: customField2, label: 'CF2' }
    ];
    
    fields.forEach(field => {
        if (field.value) {
            labelHTML += '<div class="label-field">' + escapeHtml(field.value) + '</div>';
        }
    });
    
    labelHTML += '</div>';
    
    // Update preview
    document.getElementById('labelPreview').innerHTML = labelHTML;
    
    // Generate barcode
    try {
        JsBarcode("#barcode", productCode, {
            format: "CODE128",
            width: 1,
            height: parseInt(barcodeHeight),
            displayValue: showBarcodeText,
            fontSize: Math.max(8, parseInt(fontSize) - 2),
            margin: 0,
            background: "transparent"
        });
    } catch (error) {
        console.error('Barcode generation error:', error);
        document.getElementById('barcode').innerHTML = '<text x="50%" y="50%" text-anchor="middle">Invalid Code</text>';
    }
    
    // Generate ZPL code
    generateZPL();
}

// Generate ZPL code for Zebra printer
function generateZPL() {
    const productCode = document.getElementById('productCode').value;
    const productName = document.getElementById('productName').value;
    const price = document.getElementById('price').value;
    const batchNumber = document.getElementById('batchNumber').value;
    const expiryDate = document.getElementById('expiryDate').value;
    const customField1 = document.getElementById('customField1').value;
    const customField2 = document.getElementById('customField2').value;
    const copies = document.getElementById('copies').value;
    
    if (!productCode) {
        document.getElementById('zplCode').value = '';
        return;
    }
    
    // ZPL template for 3.5cm x 2.5cm label (approximately 132x94 dots at 203 DPI)
    let zpl = '^XA\n'; // Start format
    zpl += '^MMT\n'; // Set media type to thermal transfer
    zpl += '^PW132\n'; // Set print width to 132 dots
    zpl += '^LL94\n'; // Set label length to 94 dots
    zpl += '^LS0\n'; // Label shift
    
    let yPos = 10; // Starting Y position
    
    // Product name (if provided)
    if (productName) {
        zpl += '^FO5,' + yPos + '^A0N,12,12^FD' + productName.substring(0, 20) + '^FS\n';
        yPos += 15;
    }
    
    // Barcode
    zpl += '^FO5,' + yPos + '^BCN,' + (productName ? '25' : '35') + ',Y,N,N^FD' + productCode + '^FS\n';
    yPos += (productName ? 30 : 40);
    
    // Other fields
    const fields = [price, batchNumber, expiryDate, customField1, customField2];
    fields.forEach(field => {
        if (field && yPos < 85) {
            zpl += '^FO5,' + yPos + '^A0N,8,8^FD' + field.substring(0, 25) + '^FS\n';
            yPos += 10;
        }
    });
    
    zpl += '^PQ' + copies + '\n'; // Print quantity
    zpl += '^XZ'; // End format
    
    document.getElementById('zplCode').value = zpl;
}

// Print label function
function printLabel() {
    const productCode = document.getElementById('productCode').value;
    const thermalMode = document.getElementById('thermalMode').checked;
    
    if (!productCode) {
        alert('Please enter a product code before printing');
        return;
    }
    
    if (thermalMode) {
        // For thermal printer, show ZPL code and instructions
        const zplCode = document.getElementById('zplCode').value;
        if (zplCode) {
            const printWindow = window.open('', '_blank');
            printWindow.document.write(`
                <html>
                <head>
                    <title>ZPL Code for Thermal Printer</title>
                    <style>
                        body { font-family: Arial, sans-serif; padding: 20px; }
                        .zpl-code { background: #f5f5f5; padding: 15px; border-radius: 5px; font-family: monospace; white-space: pre-wrap; }
                        .instructions { background: #e7f3ff; padding: 15px; border-radius: 5px; margin-bottom: 20px; }
                    </style>
                </head>
                <body>
                    <h2>ZPL Code for Zebra Thermal Printer</h2>
                    <div class="instructions">
                        <strong>Instructions:</strong><br>
                        1. Copy the ZPL code below<br>
                        2. Send it directly to your Zebra ZD220 printer via USB, Serial, or Network<br>
                        3. You can use Zebra Setup Utilities or send via command line/application
                    </div>
                    <div class="zpl-code">${zplCode}</div>
                    <button onclick="navigator.clipboard.writeText('${zplCode.replace(/'/g, "\\'")}')">Copy ZPL Code</button>
                </body>
                </html>
            `);
        }
    } else {
        // Regular browser print
        window.print();
    }
}

// Save current template
function saveTemplate() {
    const templateName = prompt('Enter template name:');
    if (!templateName) return;
    
    const template = {
        productCode: document.getElementById('productCode').value,
        productName: document.getElementById('productName').value,
        price: document.getElementById('price').value,
        batchNumber: document.getElementById('batchNumber').value,
        expiryDate: document.getElementById('expiryDate').value,
        customField1: document.getElementById('customField1').value,
        customField2: document.getElementById('customField2').value,
        fontSize: document.getElementById('fontSize').value,
        barcodeHeight: document.getElementById('barcodeHeight').value,
        showBarcodeText: document.getElementById('showBarcodeText').checked
    };
    
    labelTemplates[templateName] = template;
    localStorage.setItem('barcodeTemplates', JSON.stringify(labelTemplates));
    alert('Template saved successfully!');
}

// Load template
function loadTemplate() {
    const templateNames = Object.keys(labelTemplates);
    if (templateNames.length === 0) {
        alert('No saved templates found');
        return;
    }
    
    const templateName = prompt('Select template:\n' + templateNames.join('\n'));
    if (!templateName || !labelTemplates[templateName]) return;
    
    const template = labelTemplates[templateName];
    
    // Load template values
    Object.keys(template).forEach(key => {
        const element = document.getElementById(key);
        if (element) {
            if (element.type === 'checkbox') {
                element.checked = template[key];
            } else {
                element.value = template[key];
            }
        }
    });
    
    generatePreview();
}

// Load saved templates from localStorage
function loadSavedTemplates() {
    const saved = localStorage.getItem('barcodeTemplates');
    if (saved) {
        labelTemplates = JSON.parse(saved);
    }
}

// Copy ZPL code to clipboard
function copyZPL() {
    const zplCode = document.getElementById('zplCode').value;
    if (zplCode) {
        navigator.clipboard.writeText(zplCode).then(() => {
            alert('ZPL code copied to clipboard!');
        }).catch(err => {
            console.error('Failed to copy: ', err);
            // Fallback for older browsers
            const textArea = document.createElement('textarea');
            textArea.value = zplCode;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);
            alert('ZPL code copied to clipboard!');
        });
    }
}

// Utility functions
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
    if (e.ctrlKey || e.metaKey) {
        switch(e.key) {
            case 'p':
                e.preventDefault();
                printLabel();
                break;
            case 's':
                e.preventDefault();
                saveTemplate();
                break;
            case 'Enter':
                if (document.getElementById('loginSection').style.display !== 'none') {
                    e.preventDefault();
                    login();
                }
                break;
        }
    }
});