{% extends "base.html" %}

{% block head %}
<!-- JsBarcode library for real barcode generation -->
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<style>
#label-preview {
    background: #fafafa;
    position: relative;
    overflow: hidden;
}

/* Enhanced table styling */
.card.scan-table-card table.print-module-table.scan-table thead th {
    border-bottom: 2px solid #dee2e6 !important;
    background-color: #f8f9fa !important;
    padding: 0.25rem 0.4rem !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
}

.card.scan-table-card table.print-module-table.scan-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.card.scan-table-card table.print-module-table.scan-table tbody tr:hover td {
    background-color: #f8f9fa !important;
    cursor: pointer !important;
}

.card.scan-table-card table.print-module-table.scan-table tbody tr.selected td {
    background-color: #007bff !important;
    color: white !important;
}

/* Print Progress Modal Styles */
.print-progress-modal {
    display: none !important;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

.print-progress-modal.show {
    display: flex !important;
}


.print-progress-content {
    background-color: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    min-width: 500px;
    max-width: 600px;
    text-align: center;
}

.print-progress-content h3 {
    margin: 0 0 20px 0;
    color: #333;
    font-size: 24px;
}

.progress-info {
    margin-bottom: 15px;
    color: #666;
    font-size: 16px;
    min-height: 24px;
}

.progress-bar-container {
    width: 100%;
    height: 35px;
    background-color: #e9ecef;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
    position: relative;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
    width: 0%;
    transition: width 0.4s ease;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.progress-bar.error {
    background: linear-gradient(90deg, #dc3545 0%, #c82333 100%);
}

.progress-bar.paused {
    background: linear-gradient(90deg, #ffc107 0%, #ff9800 100%);
}

.progress-details {
    font-size: 20px;
    font-weight: bold;
    color: #28a745;
    margin-bottom: 15px;
}

.progress-details.error {
    color: #dc3545;
}

.print-status-log {
    max-height: 150px;
    overflow-y: auto;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px;
    margin: 15px 0;
    text-align: left;
    font-family: monospace;
    font-size: 12px;
}

.print-status-log div {
    padding: 3px 0;
    color: #495057;
}

.print-status-log div.success {
    color: #28a745;
}

.print-status-log div.error {
    color: #dc3545;
    font-weight: bold;
}

.print-status-log div.warning {
    color: #ffc107;
}

.print-control-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.print-control-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.print-control-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.print-control-btn.pause {
    background: #ffc107;
    color: #000;
}

.print-control-btn.resume {
    background: #28a745;
    color: white;
}

.print-control-btn.reprint {
    background: #17a2b8;
    color: white;
}

.print-control-btn.cancel {
    background: #dc3545;
    color: white;
}

.print-control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

</style>
{% endblock %}

{% block content %}
<div class="scan-container" style="display: flex; flex-direction: row; gap: 20px; width: 100%; align-items: flex-start;">
    <!-- Label Preview Card -->
    <div class="card scan-form-card" style="display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 700px; width: 330px; flex-shrink: 0; position: relative; padding: 15px;">
        <div class="label-view-title" style="width: 100%; text-align: center; padding: 0 0 15px 0; font-size: 18px; font-weight: bold; letter-spacing: 0.5px;">Label View</div>
        
        <!-- Add link to pairing key management -->
        <div style="width: 100%; text-align: center; margin-bottom: 10px;">
            <a href="{{ url_for('main.download_extension') }}" class="btn btn-info btn-sm" target="_blank">🔑 Manage Pairing Keys</a>
        </div>
        
        <!-- Client/Printer selection dropdown -->
        <div style="width: 100%; text-align: center; margin-bottom: 10px;">
            <label for="client-select" style="font-weight: 600;">Select Printer/Client:</label>
            <select id="client-select" class="form-control form-control-sm" style="width: 80%; margin: 0 auto;"></select>
        </div>
        
        <!-- Display pairing key for selected client -->
        <div id="pairing-key-display" style="width: 100%; text-align: center; margin-bottom: 15px; font-size: 13px; color: #007bff; font-family: monospace;"></div>
        
        <!-- Label Preview Section -->
        <div id="label-preview" style="border: 1px solid #ddd; padding: 10px; position: relative; background: #fafafa; width: 301px; height: 434.7px;">
            <!-- Label content rectangle -->
            <div id="label-content" style="position: absolute; top: 65.7px; left: 11.34px; width: 227.4px; height: 321.3px; border: 2px solid #333; background: white;">
                <!-- Top row content: Company name -->
                <div style="position: absolute; top: 0; left: 0; right: 0; height: 32.13px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; color: #000; z-index: 10;">
                    INNOFA ROMANIA SRL
                </div>

                <!-- Row 2 content: Customer Name -->
                <div id="customer-name-row" style="position: absolute; top: 32.13px; left: 0; right: 0; height: 32.13px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #000;">
                    <!-- Customer name will be populated here -->
                </div>

                <!-- Horizontal dividing lines -->
                <div style="position: absolute; top: 32.13px; left: 0; right: 0; height: 1px; background: #999;"></div>
                <div style="position: absolute; top: 64.26px; left: 0; right: 0; height: 1px; background: #999;"></div>
                <div style="position: absolute; top: 96.39px; left: 0; right: 0; height: 1px; background: #999;"></div>
                <div style="position: absolute; top: 128.52px; left: 0; right: 0; height: 1px; background: #999;"></div>
                <div style="position: absolute; top: 160.65px; left: 0; right: 0; height: 1px; background: #999;"></div>
                <div style="position: absolute; top: 224.91px; left: 0; right: 0; height: 1px; background: #999;"></div>
                <div style="position: absolute; top: 257.04px; left: 0; right: 0; height: 1px; background: #999;"></div>
                <div style="position: absolute; top: 289.17px; left: 0; right: 0; height: 1px; background: #999;"></div>

                <!-- Vertical dividing line -->
                <div style="position: absolute; left: 90.96px; top: 64.26px; width: 1px; height: 257.04px; background: #999;"></div>

                <!-- Row 3: Quantity ordered -->
                <div style="position: absolute; top: 64.26px; left: 0; width: 90.96px; height: 32.13px; display: flex; align-items: center; padding-left: 5px; font-size: 10px; color: #000;">
                    Quantity ordered
                </div>
                <div id="quantity-ordered-value" style="position: absolute; top: 64.26px; left: 90.96px; width: 136.44px; height: 32.13px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: bold; color: #000;">
                    <!-- Quantity value will be populated here -->
                </div>

                <!-- Row 4: Customer order -->
                <div style="position: absolute; top: 96.39px; left: 0; width: 90.96px; height: 32.13px; display: flex; align-items: center; padding-left: 5px; font-size: 10px; color: #000;">
                    Customer order
                </div>
                <div id="client-order-info" style="position: absolute; top: 96.39px; left: 90.96px; width: 136.44px; height: 32.13px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: #000;">
                    <!-- Client order info will be populated here -->
                </div>

                <!-- Row 5: Delivery date -->
                <div style="position: absolute; top: 128.52px; left: 0; width: 90.96px; height: 32.13px; display: flex; align-items: center; padding-left: 5px; font-size: 10px; color: #000;">
                    Delivery date
                </div>
                <div id="delivery-date-value" style="position: absolute; top: 128.52px; left: 90.96px; width: 136.44px; height: 32.13px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: #000;">
                    <!-- Delivery date value will be populated here -->
                </div>

                <!-- Row 6: Description (double height) -->
                <div style="position: absolute; top: 160.65px; left: 0; width: 90.96px; height: 64.26px; display: flex; align-items: center; padding-left: 5px; font-size: 10px; color: #000;">
                    Product description
                </div>
                <div id="description-value" style="position: absolute; top: 160.65px; left: 90.96px; width: 136.44px; height: 64.26px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #000; text-align: center; padding: 2px; overflow: hidden;">
                    <!-- Description will be populated here -->
                </div>

                <!-- Row 7: Size -->
                <div style="position: absolute; top: 224.91px; left: 0; width: 90.96px; height: 32.13px; display: flex; align-items: center; padding-left: 5px; font-size: 10px; color: #000;">
                    Size
                </div>
                <div id="size-value" style="position: absolute; top: 224.91px; left: 90.96px; width: 136.44px; height: 32.13px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; color: #000;">
                    <!-- Size value will be populated here -->
                </div>

                <!-- Row 8: Article Code -->
                <div style="position: absolute; top: 257.04px; left: 0; width: 90.96px; height: 32.13px; display: flex; align-items: center; padding-left: 5px; font-size: 10px; color: #000;">
                    Article code
                </div>
                <div id="article-code-value" style="position: absolute; top: 257.04px; left: 90.96px; width: 136.44px; height: 32.13px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: bold; color: #000;">
                    <!-- Article code will be populated here -->
                </div>

                <!-- Row 9: Production Order -->
                <div style="position: absolute; top: 289.17px; left: 0; width: 90.96px; height: 32.13px; display: flex; align-items: center; padding-left: 5px; font-size: 10px; color: #000;">
                    Prod. order
                </div>
                <div id="prod-order-value" style="position: absolute; top: 289.17px; left: 90.96px; width: 136.44px; height: 32.13px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; color: #000;">
                    <!-- Production order will be populated here -->
                </div>
            </div>
            
            <!-- Barcode Frame - positioned 10px below rectangle with 2mm side margins -->
            <div id="barcode-frame" style="position: absolute; top: 395px; left: 7.56px; width: 295.44px; height: 50px; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <!-- Code 128 Barcode representation -->
                <svg id="barcode-display" style="width: 280px; height: 40px;"></svg>
                
                <!-- Barcode text below the bars -->
                <div id="barcode-text" style="font-size: 8px; font-family: 'Courier New', monospace; margin-top: 2px; text-align: center; font-weight: bold;">
                    <!-- Barcode text will be populated here -->
                </div>
            </div>
            
            <!-- Vertical Barcode Frame - positioned on the right side of the label -->
            <div id="vertical-barcode-frame" style="position: absolute; top: 70px; left: 245px; width: 50px; height: 309.96px; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <!-- Vertical Code 128 Barcode representation -->
                <svg id="vertical-barcode-display" style="width: 45px; height: 280px;"></svg>
                
                <!-- Vertical barcode text -->
                <div id="vertical-barcode-text" style="font-size: 6px; font-family: 'Courier New', monospace; margin-top: 5px; text-align: center; font-weight: bold; writing-mode: vertical-rl; text-orientation: mixed;">
                    <!-- Vertical barcode text will be populated here -->
                </div>
            </div>
        </div>
        
        <!-- Print Options -->
        <div style="width: 100%; margin-top: 20px;">
            <!-- Print Method Selection -->
            <div style="margin-bottom: 15px;">
                <label style="font-size: 12px; font-weight: 600; color: #495057; margin-bottom: 8px; display: block;">
                    📄 Print Method:
                </label>
                
                <div class="form-check mb-2">
                    <input class="form-check-input" type="radio" name="printMethod" id="qzTrayPrint" value="qztray">
                    <label class="form-check-label" for="qzTrayPrint" style="font-size: 11px; line-height: 1.3;">
                        <strong>QZ Tray Direct Print</strong> <span id="qztray-status" class="badge badge-secondary">Checking...</span><br>
                        <span class="text-muted">Direct print to thermal label printer</span>
                    </label>
                </div>
                
                <div class="form-check mb-2">
                    <input class="form-check-input" type="radio" name="printMethod" id="pdfGenerate" value="pdf" checked>
                    <label class="form-check-label" for="pdfGenerate" style="font-size: 11px; line-height: 1.3;">
                        <strong>Generate PDF</strong><br>
                        <span class="text-muted">Create PDF for manual printing (recommended)</span>
                    </label>
                </div>
            </div>
            
            <!-- Printer Selection for QZ Tray -->
            <div id="qztray-printer-selection" style="margin-bottom: 15px; display: none;">
                <label style="font-size: 12px; font-weight: 600; color: #495057; margin-bottom: 5px; display: block;">
                    🖨️ Select Printer:
                </label>
                <select id="qztray-printer-select" class="form-control form-control-sm" style="font-size: 11px; padding: 4px 8px;">
                    <option value="">Loading printers...</option>
                </select>
                <small class="text-muted" style="font-size: 10px;">Choose your thermal label printer</small>
            </div>
            
            <!-- Print Button -->
            <div style="width: 100%; text-align: center; margin-bottom: 15px;">
                <button id="print-label-btn" class="btn btn-success" style="font-size: 14px; padding: 10px 30px; border-radius: 6px; font-weight: 600;">
                    📄 Generate PDF Labels
                </button>
            </div>
            
            <!-- Print Information -->
            <div style="width: 100%; text-align: center; color: #6c757d; font-size: 11px; line-height: 1.4;">
                <div style="margin-bottom: 5px;">Creates sequential labels based on quantity</div>
                <small>(e.g., CP00000711-001 to CP00000711-063)</small>
            </div>
            
            <!-- QZ Tray Installation Info -->
            <div id="qztray-info" style="width: 100%; margin-top: 15px; padding-top: 15px; border-top: 1px solid #e9ecef; display: none;">
                <div style="background: #e8f4fd; border: 1px solid #bee5eb; border-radius: 6px; padding: 12px; margin-bottom: 10px;">
                    <div style="font-size: 11px; color: #0c5460; margin-bottom: 8px;">
                        <strong>🖨️ QZ Tray Direct Printing</strong>
                    </div>
                    <div style="font-size: 10px; color: #495057; margin-bottom: 10px; line-height: 1.3;">
                        Professional printing solution • ZPL thermal labels • Direct hardware access
                    </div>
                    <div style="margin-bottom: 10px;">
                        <button onclick="initializeQZTray()" class="btn btn-primary btn-sm" style="font-size: 10px; padding: 4px 12px;">
                            🔄 Reconnect to QZ Tray
                        </button>
                        <button onclick="testQZConnection()" class="btn btn-info btn-sm" style="font-size: 10px; padding: 4px 12px;">
                            🔍 Test Connection
                        </button>
                    </div>
                    <a href="https://qz.io/download/" target="_blank" class="btn btn-secondary btn-sm" style="font-size: 10px; padding: 4px 12px; text-decoration: none;">
                        📥 Download QZ Tray (Free)
                    </a>
                    <div style="font-size: 9px; color: #6c757d; margin-top: 8px; line-height: 1.2;">
                        <strong>Setup:</strong> 1. Install QZ Tray → 2. Start the service → 3. Click "Reconnect"
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Data Preview Card -->
    <div class="card scan-table-card" style="min-height: 700px; width: calc(100% - 350px); margin: 0;">
        <h3>Data Preview (Unprinted Orders)</h3>
        <button id="check-db-btn" class="btn btn-primary mb-3">Load Orders</button>
        <div class="report-table-container">
            <table class="scan-table print-module-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Comanda Productie</th>
                        <th>Cod Articol</th>
                        <th>Descr. Com. Prod</th>
                        <th>Cantitate</th>
                        <th>Data Livrare</th>
                        <th>Dimensiune</th>
                        <th>Com. Achiz. Client</th>
                        <th>Nr. Linie</th>
                        <th>Customer Name</th>
                        <th>Customer Art. Nr.</th>
                        <th>Open Order</th>
                        <th>Line</th>
                        <th>Printed</th>
                        <th>Created</th>
                    </tr>
                </thead>
                <tbody id="unprinted-orders-table">
                    <!-- Data will be dynamically loaded here -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Printing Progress Modal -->
<div id="print-progress-modal" class="print-progress-modal">
    <div class="print-progress-content">
        <h3>🖨️ Print Controller</h3>
        <div class="progress-info">
            <span id="progress-text">Preparing to print...</span>
        </div>
        <div class="progress-bar-container">
            <div id="progress-bar" class="progress-bar">0%</div>
        </div>
        <div class="progress-details">
            <span id="progress-count">0 / 0</span>
        </div>
        
        <!-- Print Status Log -->
        <div class="print-status-log" id="print-status-log">
            <div>Waiting to start...</div>
        </div>
        
        <!-- Control Buttons -->
        <div class="print-control-buttons">
            <button id="pause-print-btn" class="print-control-btn pause" style="display: none;">
                ⏸️ Pause
            </button>
            <button id="resume-print-btn" class="print-control-btn resume" style="display: none;">
                ▶️ Resume
            </button>
            <button id="reprint-last-btn" class="print-control-btn reprint" style="display: none;">
                🔄 Reprint Last
            </button>
            <button id="cancel-print-btn" class="print-control-btn cancel" style="display: none;">
                ❌ Cancel
            </button>
        </div>
    </div>
</div>

<!-- QZ Tray JavaScript Library -->
    <!-- Add html2canvas library for capturing preview as image -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <!-- PATCHED QZ Tray library - works with custom server using pairing key authentication -->
    <script src="{{ url_for('static', filename='qz-tray.js') }}"></script>
    <!-- Original CDN version (disabled): <script src="https://cdn.jsdelivr.net/npm/qz-tray@2.2.4/qz-tray.js"></script> -->

<script>
// Simplified notification system
function showNotification(message, type = 'info') {
    const existingNotifications = document.querySelectorAll('.notification');
    existingNotifications.forEach(n => n.remove());
    
    const notification = document.createElement('div');
    notification.className = `notification alert alert-${type === 'error' ? 'danger' : type === 'success' ? 'success' : type === 'warning' ? 'warning' : 'info'}`;
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        max-width: 450px;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    `;
    
    // Convert newlines to <br> tags for proper display
    const formattedMessage = message.replace(/\n/g, '<br>');
    
    notification.innerHTML = `
        <div style="display: flex; align-items: flex-start; justify-content: space-between;">
            <span style="flex: 1; padding-right: 10px; white-space: pre-wrap; font-family: monospace; font-size: 12px;">${formattedMessage}</span>
            <button type="button" onclick="this.parentElement.parentElement.remove()" style="background: none; border: none; font-size: 20px; cursor: pointer; flex-shrink: 0;">&times;</button>
        </div>
    `;
    
    document.body.appendChild(notification);
    
    // Longer timeout for error messages
    const timeout = type === 'error' ? 15000 : 5000;
    setTimeout(() => {
        if (notification.parentElement) {
            notification.remove();
        }
    }, timeout);
}

// Database loading functionality
document.getElementById('check-db-btn').addEventListener('click', function() {
    const button = this;
    const originalText = button.textContent;
    button.textContent = 'Loading...';
    button.disabled = true;

    fetch('/get_unprinted_orders')
        .then(response => {
            if (response.status === 403) {
                return response.json().then(errorData => {
                    throw new Error(`Access Denied: ${errorData.error}`);
                });
            } else if (!response.ok) {
                return response.text().then(text => {
                    throw new Error(`HTTP ${response.status}: ${text}`);
                });
            }
            return response.json();
        })
        .then(data => {
            console.log('Received data:', data);
            const tbody = document.getElementById('unprinted-orders-table');
            tbody.innerHTML = '';
            
            if (data.length === 0) {
                tbody.innerHTML = '<tr><td colspan="15" style="text-align: center; padding: 20px; color: #28a745;"><strong>✅ All orders have been printed!</strong><br><small>No unprinted orders remaining.</small></td></tr>';
                clearLabelPreview();
                return;
            }
            
            data.forEach((order, index) => {
                const tr = document.createElement('tr');
                tr.dataset.orderId = order.id;
                tr.dataset.orderIndex = index;
                tr.style.cursor = 'pointer';
                tr.innerHTML = `
                    <td style="font-size: 9px;">${order.id}</td>
                    <td style="font-size: 9px;"><strong>${order.comanda_productie}</strong></td>
                    <td style="font-size: 9px;">${order.cod_articol || '-'}</td>
                    <td style="font-size: 9px;">${order.descr_com_prod}</td>
                    <td style="text-align: right; font-weight: 600; font-size: 9px;">${order.cantitate}</td>
                    <td style="text-align: center; font-size: 9px;">
                        ${order.data_livrare ? new Date(order.data_livrare).toLocaleDateString() : '-'}
                    </td>
                    <td style="text-align: center; font-size: 9px;">${order.dimensiune || '-'}</td>
                    <td style="font-size: 9px;">${order.com_achiz_client || '-'}</td>
                    <td style="text-align: right; font-size: 9px;">${order.nr_linie_com_client || '-'}</td>
                    <td style="font-size: 9px;">${order.customer_name || '-'}</td>
                    <td style="font-size: 9px;">${order.customer_article_number || '-'}</td>
                    <td style="font-size: 9px;">${order.open_for_order || '-'}</td>
                    <td style="text-align: right; font-size: 9px;">${order.line_number || '-'}</td>
                    <td style="text-align: center; font-size: 9px;">
                        ${order.printed_labels == 1 ? 
                            '<span style="color: #28a745; font-weight: bold;">✅ Yes</span>' : 
                            '<span style="color: #dc3545;">❌ No</span>'}
                    </td>
                    <td style="font-size: 9px; color: #6c757d;">
                        ${order.created_at ? new Date(order.created_at).toLocaleString() : '-'}
                    </td>
                `;
                
                tr.addEventListener('click', function() {
                    console.log('Row clicked:', order.id);
                    
                    // Remove selection from other rows
                    document.querySelectorAll('.print-module-table tbody tr').forEach(row => {
                        row.classList.remove('selected');
                        const cells = row.querySelectorAll('td');
                        cells.forEach(cell => {
                            cell.style.backgroundColor = '';
                            cell.style.color = '';
                        });
                    });
                    
                    // Select this row
                    this.classList.add('selected');
                    const cells = this.querySelectorAll('td');
                    cells.forEach(cell => {
                        cell.style.backgroundColor = '#007bff';
                        cell.style.color = 'white';
                    });
                    
                    // Update label preview with selected order data
                    updateLabelPreview(order);
                });
                
                tbody.appendChild(tr);
            });
            
            // Auto-select first row
            setTimeout(() => {
                const firstRow = document.querySelector('.print-module-table tbody tr');
                if (firstRow && !firstRow.querySelector('td[colspan]')) {
                    firstRow.click();
                }
            }, 100);
            
            showNotification(`✅ Loaded ${data.length} unprinted orders`, 'success');
        })
        .catch(error => {
            console.error('Error loading orders:', error);
            const tbody = document.getElementById('unprinted-orders-table');
            tbody.innerHTML = '<tr><td colspan="15" style="text-align: center; padding: 20px; color: #dc3545;"><strong>❌ Failed to load data</strong><br><small>' + error.message + '</small></td></tr>';
            showNotification('❌ Failed to load orders: ' + error.message, 'error');
        })
        .finally(() => {
            button.textContent = originalText;
            button.disabled = false;
        });
});

// Fetch pairing keys and populate dropdown
fetch('/get_pairing_keys')
    .then(response => response.json())
    .then(keys => {
        const select = document.getElementById('client-select');
        select.innerHTML = '';
        keys.forEach(key => {
            const option = document.createElement('option');
            option.value = key.pairing_key;
            option.textContent = key.printer_name;
            select.appendChild(option);
        });
        // Show first key by default
        if (keys.length > 0) {
            document.getElementById('pairing-key-display').textContent = 'Pairing Key: ' + keys[0].pairing_key;
        }
    });
// Update pairing key display on selection
 document.getElementById('client-select').addEventListener('change', function() {
    document.getElementById('pairing-key-display').textContent = 'Pairing Key: ' + this.value;
 });

// Update label preview with order data
function updateLabelPreview(order) {
    const customerName = order.customer_name || 'N/A';
    document.getElementById('customer-name-row').textContent = customerName;
    
    // Update quantity ordered value
    const quantity = order.cantitate || '0';
    document.getElementById('quantity-ordered-value').textContent = quantity;
    
    // Update client order info (Com.Achiz.Client - Nr. Linie)
    const comAchizClient = order.com_achiz_client || '';
    const nrLinie = order.nr_linie_com_client || '';
    const clientOrderInfo = comAchizClient && nrLinie ? `${comAchizClient}-${nrLinie}` : 'N/A';
    document.getElementById('client-order-info').textContent = clientOrderInfo;
    
    // Update delivery date (using data_livrare column)
    const deliveryDate = order.data_livrare ? new Date(order.data_livrare).toLocaleDateString() : 'N/A';
    document.getElementById('delivery-date-value').textContent = deliveryDate;
    
    // Update size (using dimensiune column)
    const size = order.dimensiune || 'N/A';
    document.getElementById('size-value').textContent = size;
    
    // Update description (Descr. Com. Prod)
    const description = order.descr_com_prod || 'N/A';
    document.getElementById('description-value').textContent = description;
    
    // Update article code (using cod_articol column)
    const articleCode = order.cod_articol || 'N/A';
    document.getElementById('article-code-value').textContent = articleCode;
    
    // Update prod order (comanda_productie - cantitate)
    const comandaProductie = order.comanda_productie || '';
    const cantitate = order.cantitate || '';
    const prodOrder = comandaProductie && cantitate ? `${comandaProductie}-${cantitate}` : 'N/A';
    document.getElementById('prod-order-value').textContent = prodOrder;
    
    // Update horizontal barcode with CP format (e.g., CP00000711/001)
    // Show the first piece number (001) in preview
    const horizontalBarcodeData = comandaProductie ? `${comandaProductie}/001` : 'N/A';
    document.getElementById('barcode-text').textContent = horizontalBarcodeData;
    
    // Update vertical barcode with client order format (e.g., Abcderd/65)
    const verticalBarcodeData = comAchizClient && nrLinie ? `${comAchizClient}/${nrLinie}` : '000000/00';
    document.getElementById('vertical-barcode-text').textContent = verticalBarcodeData;
}

// Clear label preview when no orders are available
function clearLabelPreview() {
    document.getElementById('customer-name-row').textContent = 'No orders available';
    document.getElementById('quantity-ordered-value').textContent = '0';
    document.getElementById('client-order-info').textContent = 'N/A';
    document.getElementById('delivery-date-value').textContent = 'N/A';
    document.getElementById('size-value').textContent = 'N/A';
    document.getElementById('description-value').textContent = 'N/A';
    document.getElementById('article-code-value').textContent = 'N/A';
    document.getElementById('prod-order-value').textContent = 'N/A';
    document.getElementById('barcode-text').textContent = 'N/A';
    document.getElementById('vertical-barcode-text').textContent = '000000/00';
}

// QZ Tray Integration
let qzTray = null;
let availablePrinters = [];

// Initialize QZ Tray connection
async function initializeQZTray() {
    try {
        console.log('🔍 Checking for QZ Tray...');
        
        // Check if QZ Tray library is loaded
        if (typeof qz === 'undefined') {
            console.error('❌ QZ Tray library not loaded');
            const errorMsg = '❌ QZ Tray Library Not Loaded\n\n' +
                           'The patched QZ Tray JavaScript library failed to load.\n' +
                           'Check the browser console for errors and refresh the page.\n\n' +
                           'Path: /static/qz-tray.js (patched version for pairing key auth)';
            document.getElementById('qztray-status').textContent = 'Library Error';
            document.getElementById('qztray-status').className = 'badge badge-danger';
            showNotification(errorMsg, 'error');
            return false;
        }
        
        console.log('✅ QZ Tray library loaded');
        
        // Using PATCHED qz-tray.js that works with our custom QZ Tray server
        // The patched library automatically skips certificate validation
        // Our custom server uses ONLY pairing key (HMAC) authentication
        console.log('🔒 Using patched qz-tray.js for pairing-key authentication...');
        
        // No security setup needed - the patched library handles it
        // Original qz-tray.js required setCertificatePromise, but our patch bypasses it
        
        console.log('✅ Ready to connect to custom QZ Tray server');
        console.log('🔌 Attempting to connect to QZ Tray on client PC...');
        console.log('📍 Will try: ws://localhost:8181 (insecure) then wss://localhost:8182 (secure)');

        // Set connection closed callback
        qz.websocket.setClosedCallbacks(function() {
            console.warn('⚠️ QZ Tray connection closed');
            document.getElementById('qztray-status').textContent = 'Disconnected';
            document.getElementById('qztray-status').className = 'badge badge-warning';
        });

        // Connect to QZ Tray running on client PC
        console.log('⏳ Connecting...');
        await qz.websocket.connect();
        qzTray = qz;
        
        const version = await qz.api.getVersion();
        console.log('✅ QZ Tray connected successfully');
        console.log('📋 QZ Tray Version:', version);
        
        // Update status
        document.getElementById('qztray-status').textContent = 'Connected';
        document.getElementById('qztray-status').className = 'badge badge-success';
        
        // Load available printers
        await loadQZTrayPrinters();
        
        showNotification(`🖨️ QZ Tray v${version} connected successfully!`, 'success');
        
        return true;
    } catch (error) {
        console.error('❌ QZ Tray connection failed:', error);
        console.error('Error details:', {
            message: error.message,
            type: typeof error,
            errorName: error.name,
            stack: error.stack
        });
        
        // Detailed error messages based on actual error
        let errorMsg = '❌ Cannot Connect to QZ Tray\n\n';
        let statusText = 'Not Connected';
        
        const errorStr = error.toString().toLowerCase();
        const messageStr = (error.message || '').toLowerCase();
        
        if (messageStr.includes('unable to establish') || 
            errorStr.includes('unable to establish') ||
            messageStr.includes('failed to connect') ||
            errorStr.includes('websocket') ||
            messageStr.includes('econnrefused')) {
            
            errorMsg += '🔌 Connection Refused\n\n';
            errorMsg += 'QZ Tray is not responding on this computer.\n\n';
            errorMsg += '✅ Steps to fix:\n';
            errorMsg += '1. Check if QZ Tray is installed on THIS computer\n';
            errorMsg += '2. Look for QZ Tray icon in system tray (bottom-right)\n';
            errorMsg += '3. If not running, start QZ Tray application\n';
            errorMsg += '4. If installed but not working, restart QZ Tray\n';
            errorMsg += '5. Download from: https://qz.io/download/\n\n';
            errorMsg += '🔍 Technical: Trying to connect to ports 8181/8182';
            statusText = 'Not Running';
            
        } else if (messageStr.includes('certificate') || 
                   errorStr.includes('certificate') ||
                   messageStr.includes('security') ||
                   messageStr.includes('ssl') ||
                   messageStr.includes('tls')) {
            
            errorMsg += '🔒 Certificate Security Issue\n\n';
            errorMsg += 'QZ Tray uses a self-signed certificate for security.\n\n';
            errorMsg += '✅ Steps to fix:\n';
            errorMsg += '1. Open new tab: https://localhost:8182\n';
            errorMsg += '2. Accept/Trust the security certificate\n';
            errorMsg += '3. Come back and click "Reconnect to QZ Tray"\n\n';
            errorMsg += '🔍 This is normal and safe for QZ Tray';
            statusText = 'Certificate Error';
            
        } else {
            errorMsg += '⚠️ Unexpected Error\n\n';
            errorMsg += 'Error: ' + error.message + '\n\n';
            errorMsg += '🔍 Troubleshooting:\n';
            errorMsg += '1. Open browser console (F12) for details\n';
            errorMsg += '2. Click "Test Connection" for diagnostics\n';
            errorMsg += '3. Make sure QZ Tray is running\n';
            errorMsg += '4. Try restarting your browser';
        }
        
        document.getElementById('qztray-status').textContent = statusText;
        document.getElementById('qztray-status').className = 'badge badge-danger';
        
        showNotification(errorMsg, 'error');
        return false;
    }
}

// Manual test connection function
async function testQZConnection() {
    console.log('🔍 ========== QZ TRAY CONNECTION TEST ==========');
    
    const statusElement = document.getElementById('qztray-status');
    const originalStatus = statusElement.textContent;
    statusElement.textContent = 'Testing...';
    statusElement.className = 'badge badge-warning';
    
    let testResults = [];
    
    try {
        // Test 1: Check if library is loaded
        console.log('Test 1: Checking library...');
        if (typeof qz === 'undefined') {
            testResults.push('❌ Test 1: Library NOT loaded from CDN');
            throw new Error('QZ Tray library not loaded from CDN');
        }
        testResults.push('✅ Test 1: Library loaded successfully');
        console.log('✅ Test 1 PASSED: Library loaded from local (patched version)');
        
        // Using patched qz-tray.js - no security setup needed
        console.log('🔒 Using patched library for custom QZ Tray...');
        
        // Test 2: Check if already connected
        console.log('Test 2: Checking existing connection...');
        if (qz.websocket.isActive()) {
            testResults.push('✅ Test 2: Already connected!');
            console.log('✅ Test 2 PASSED: Already connected');
            const version = await qz.api.getVersion();
            testResults.push(`✅ Version: ${version}`);
            console.log(`📋 QZ Tray Version: ${version}`);
            
            const printers = await qz.printers.find();
            testResults.push(`✅ Found ${printers.length} printer(s)`);
            console.log(`🖨️ Printers found: ${printers.length}`);
            
            showNotification(testResults.join('\n'), 'success');
            statusElement.textContent = 'Connected';
            statusElement.className = 'badge badge-success';
            console.log('========== TEST COMPLETED: ALL PASSED ==========');
            return;
        }
        testResults.push('⚠️ Test 2: Not currently connected');
        console.log('⚠️ Test 2: Not connected, will attempt connection...');
        
        // Test 3: Try to connect
        console.log('Test 3: Attempting WebSocket connection...');
        testResults.push('🔌 Test 3: Connecting to QZ Tray...');
        console.log('🔌 Connecting to WebSocket...');
        
        await qz.websocket.connect();
        testResults.push('✅ Test 3: WebSocket connected!');
        console.log('✅ Test 3 PASSED: WebSocket connected');
        
        // Test 4: Get version
        console.log('Test 4: Getting QZ Tray version...');
        const version = await qz.api.getVersion();
        testResults.push(`✅ Test 4: QZ Tray v${version}`);
        console.log(`✅ Test 4 PASSED: Version ${version}`);
        
        // Test 5: List printers
        console.log('Test 5: Fetching printer list...');
        const printers = await qz.printers.find();
        testResults.push(`✅ Test 5: Found ${printers.length} printer(s)`);
        console.log(`✅ Test 5 PASSED: ${printers.length} printers found`);
        
        if (printers.length > 0) {
            console.log('📋 Available printers:', printers);
            testResults.push('📋 Printers: ' + printers.slice(0, 3).join(', ') + (printers.length > 3 ? '...' : ''));
        }
        
        // Success!
        qzTray = qz;
        statusElement.textContent = 'Connected';
        statusElement.className = 'badge badge-success';
        
        console.log('========== TEST COMPLETED: ALL PASSED ==========');
        showNotification(testResults.join('\n') + '\n\n✅ All tests passed!', 'success');
        
        // Reload printers
        await loadQZTrayPrinters();
        
    } catch (error) {
        console.error('❌ TEST FAILED:', error);
        console.error('Error type:', typeof error);
        console.error('Error name:', error.name);
        console.error('Error message:', error.message);
        console.error('Error stack:', error.stack);
        
        statusElement.textContent = originalStatus;
        statusElement.className = 'badge badge-danger';
        
        const errorStr = error.toString().toLowerCase();
        const messageStr = (error.message || '').toLowerCase();
        
        let errorMsg = '❌ Connection Test Results:\n\n';
        errorMsg += testResults.join('\n') + '\n\n';
        
        if (typeof qz === 'undefined') {
            errorMsg += '❌ FAILED: Library Load Error\n\n';
            errorMsg += '📚 The QZ Tray JavaScript library did not load.\n\n';
            errorMsg += 'Fix:\n';
            errorMsg += '• Check browser console for errors (F12)\n';
            errorMsg += '• Refresh the page (F5)\n';
            errorMsg += '• Check if library loaded:\n';
            errorMsg += '  /static/qz-tray.js (patched version)';
            
        } else if (messageStr.includes('unable to establish') || 
                   errorStr.includes('unable to establish') ||
                   messageStr.includes('failed to connect') ||
                   messageStr.includes('websocket') ||
                   errorStr.includes('websocket error')) {
            
            errorMsg += '❌ FAILED: Cannot Connect to QZ Tray\n\n';
            errorMsg += '🔌 QZ Tray is not running on this computer.\n\n';
            errorMsg += 'Fix:\n';
            errorMsg += '1. Check if QZ Tray is installed\n';
            errorMsg += '2. Look in system tray (bottom-right) for QZ icon\n';
            errorMsg += '3. If not there, launch QZ Tray app\n';
            errorMsg += '4. Download: https://qz.io/download/\n\n';
            errorMsg += '💡 QZ Tray must be running on THIS computer,\n';
            errorMsg += '   not on the server!';
            
        } else if (messageStr.includes('certificate') || 
                   errorStr.includes('certificate') ||
                   messageStr.includes('security')) {
            
            errorMsg += '❌ FAILED: Certificate Error\n\n';
            errorMsg += '🔒 Browser security blocking connection.\n\n';
            errorMsg += 'Fix:\n';
            errorMsg += '1. Open: https://localhost:8182\n';
            errorMsg += '2. Click "Advanced" or "Proceed"\n';
            errorMsg += '3. Accept the certificate\n';
            errorMsg += '4. Return here and test again\n\n';
            errorMsg += '💡 Self-signed certificates are normal for QZ Tray';
            
        } else {
            errorMsg += '❌ FAILED: Unexpected Error\n\n';
            errorMsg += 'Error: ' + error.message + '\n\n';
            errorMsg += 'Next steps:\n';
            errorMsg += '1. Check browser console (F12)\n';
            errorMsg += '2. Verify QZ Tray is running\n';
            errorMsg += '3. Restart browser and QZ Tray\n';
            errorMsg += '4. Check firewall settings';
        }
        
        console.log('========== TEST COMPLETED: FAILED ==========');
        showNotification(errorMsg, 'error');
    }
}

// Load available printers from QZ Tray
async function loadQZTrayPrinters() {
    try {
        if (!qzTray) return;
        
        const printers = await qzTray.printers.find();
        availablePrinters = printers;
        
        const printerSelect = document.getElementById('qztray-printer-select');
        printerSelect.innerHTML = '<option value="">Select a printer...</option>';
        
        printers.forEach(printer => {
            const option = document.createElement('option');
            option.value = printer;
            option.textContent = printer;
            printerSelect.appendChild(option);
        });
        
        console.log(`📄 Found ${printers.length} printers:`, printers);
        
        // Auto-select first thermal printer if available
        const thermalPrinter = printers.find(p => 
            p.toLowerCase().includes('thermal') || 
            p.toLowerCase().includes('label') ||
            p.toLowerCase().includes('zebra') ||
            p.toLowerCase().includes('epson')
        );
        
        if (thermalPrinter) {
            printerSelect.value = thermalPrinter;
        }
        
    } catch (error) {
        console.error('Error loading printers:', error);
        showNotification('⚠️ Failed to load printers: ' + error.message, 'warning');
    }
}

// Generate PDF and send to thermal printer
async function generatePDFAndPrint(selectedPrinter, orderData, pieceNumber, totalPieces) {
    try {
        console.log(`📄 Generating PDF for thermal printing... (${pieceNumber}/${totalPieces})`);
        
        // Prepare data for PDF generation
        const pdfData = {
            ...orderData,
            quantity: 1, // Single label per print job
            piece_number: pieceNumber,
            total_pieces: totalPieces
        };
        
        // Call backend to generate PDF
        const response = await fetch('/generate_label_pdf', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(pdfData)
        });
        
        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || 'Failed to generate PDF');
        }
        
        // Get PDF as blob
        const pdfBlob = await response.blob();
        
        // Convert blob to base64 for QZ Tray
        const pdfBase64 = await new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onloadend = () => {
                // Remove data:application/pdf;base64, prefix
                const base64 = reader.result.split(',')[1];
                resolve(base64);
            };
            reader.onerror = reject;
            reader.readAsDataURL(pdfBlob);
        });
        
        console.log(`🖨️ Sending PDF to printer ${selectedPrinter}...`);
        
        // Configure QZ Tray for PDF printing
        const config = qz.configs.create(selectedPrinter, {
            scaleContent: false,
            rasterize: false
        });
        
        // Prepare PDF data for QZ Tray
        const data = [{
            type: 'pdf',
            format: 'base64',
            data: pdfBase64
        }];
        
        await qz.print(config, data);
        console.log(`✅ PDF sent to printer successfully (${pieceNumber}/${totalPieces})`);
        
    } catch (error) {
        console.error('❌ Error generating/printing PDF:', error);
        throw error;
    }
}

// Helper function to convert array buffer to base64
function arrayBufferToBase64(buffer) {
    const bytes = new Uint8Array(buffer);
    const binary = bytes.reduce((data, byte) => data + String.fromCharCode(byte), '');
    return btoa(binary);
}

// Helper function to convert blob to base64 (kept for compatibility)
function blobToBase64(blob) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => {
            const base64 = reader.result.split(',')[1]; // Remove data URL prefix
            resolve(base64);
        };
        reader.onerror = reject;
        reader.readAsDataURL(blob);
    });
}

// Update preview with order data for specific piece
function updatePreview(orderData, pieceNumber, totalPieces) {
    // Extract and format the data
    const {
        customer_name = 'N/A',
        cantitate = '0',
        com_achiz_client = '',
        nr_linie_com_client = '',
        data_livrare = null,
        dimensiune = 'N/A',
        descr_com_prod = 'N/A',
        cod_articol = 'N/A',
        comanda_productie = ''
    } = orderData;
    
    const deliveryDate = data_livrare ? new Date(data_livrare).toLocaleDateString() : 'N/A';
    const clientOrder = com_achiz_client && nr_linie_com_client ? `${com_achiz_client}-${nr_linie_com_client}` : 'N/A';
    const horizontalBarcode = comanda_productie ? `${comanda_productie}-${String(pieceNumber).padStart(3, '0')}` : 'N/A';
    const verticalBarcode = clientOrder;
    const prodOrder = comanda_productie && cantitate ? `${comanda_productie}-${cantitate}` : 'N/A';
    
    // Update preview elements with correct IDs
    const customerRowElement = document.getElementById('customer-name-row');
    if (customerRowElement) customerRowElement.textContent = customer_name;
    
    const quantityElement = document.getElementById('quantity-ordered-value');
    if (quantityElement) quantityElement.textContent = cantitate;
    
    const clientOrderElement = document.getElementById('client-order-info');
    if (clientOrderElement) clientOrderElement.textContent = clientOrder;
    
    const deliveryDateElement = document.getElementById('delivery-date-value');
    if (deliveryDateElement) deliveryDateElement.textContent = deliveryDate;
    
    const descriptionElement = document.getElementById('description-value');
    if (descriptionElement) descriptionElement.textContent = descr_com_prod;
    
    const sizeElement = document.getElementById('size-value');
    if (sizeElement) sizeElement.textContent = dimensiune;
    
    const articleCodeElement = document.getElementById('article-code-value');
    if (articleCodeElement) articleCodeElement.textContent = cod_articol;
    
    const prodOrderElement = document.getElementById('prod-order-value');
    if (prodOrderElement) prodOrderElement.textContent = prodOrder;
    
    const barcodeTextElement = document.getElementById('barcode-text');
    if (barcodeTextElement) barcodeTextElement.textContent = horizontalBarcode;
    
    const verticalBarcodeTextElement = document.getElementById('vertical-barcode-text');
    if (verticalBarcodeTextElement) verticalBarcodeTextElement.textContent = verticalBarcode;
}
function generateHTMLLabel(orderData, pieceNumber, totalPieces) {
    const {
        customer_name = 'N/A',
        cantitate = '0',
        com_achiz_client = '',
        nr_linie_com_client = '',
        data_livrare = null,
        dimensiune = 'N/A',
        descr_com_prod = 'N/A',
        cod_articol = 'N/A',
        comanda_productie = ''
    } = orderData;
    
    // Format data for label (matching preview format)
    const deliveryDate = data_livrare ? new Date(data_livrare).toLocaleDateString() : 'N/A';
    const clientOrder = com_achiz_client && nr_linie_com_client ? `${com_achiz_client}-${nr_linie_com_client}` : 'N/A';
    const horizontalBarcode = comanda_productie ? `${comanda_productie}-${String(pieceNumber).padStart(3, '0')}` : 'N/A';
    const verticalBarcode = clientOrder;
    const prodOrder = comanda_productie && cantitate ? `${comanda_productie}-${cantitate}` : 'N/A';
    
    const htmlContent = `
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <style>
            @page {
                size: 80mm 110mm;
                margin: 0;
            }
            * {
                box-sizing: border-box;
            }
            body {
                margin: 0;
                padding: 0;
                font-family: Arial, sans-serif;
                width: 80mm;
                height: 110mm;
                position: relative;
                background: white;
                font-size: 12px;
            }
            .label-container {
                position: absolute;
                top: 5mm;
                left: 2mm;
                width: 76mm;
                height: 100mm;
                border: 2px solid black;
                display: flex;
                flex-direction: column;
            }
            .header {
                text-align: center;
                font-size: 14px;
                font-weight: bold;
                padding: 3mm 2mm;
                border-bottom: 1px solid black;
            }
            .customer-row {
                text-align: center;
                font-size: 12px;
                padding: 2mm;
                border-bottom: 1px solid black;
                min-height: 8mm;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .data-section {
                display: flex;
                flex: 1;
                flex-direction: column;
            }
            .data-row {
                display: flex;
                height: 8mm;
                border-bottom: 1px solid black;
            }
            .data-row.double {
                height: 16mm;
            }
            .label-column {
                width: 30mm;
                padding: 1mm 2mm;
                font-size: 8px;
                border-right: 1px solid black;
                display: flex;
                align-items: center;
            }
            .value-column {
                flex: 1;
                padding: 1mm 2mm;
                font-size: 10px;
                font-weight: bold;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
            }
            .description-value {
                font-size: 8px !important;
                line-height: 1.2;
                overflow: hidden;
            }
            .barcode-section {
                position: absolute;
                bottom: 2mm;
                left: 2mm;
                width: 50mm;
                height: 15mm;
                border: 2px solid black;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background: white;
            }
            .barcode-visual {
                font-family: 'Courier New', monospace;
                font-size: 16px;
                font-weight: bold;
                line-height: 1;
                margin-bottom: 2mm;
            }
            .barcode-text {
                font-family: 'Courier New', monospace;
                font-size: 8px;
                font-weight: bold;
            }
            .vertical-barcode {
                position: absolute;
                right: 2mm;
                top: 25mm;
                width: 12mm;
                height: 60mm;
                border: 2px solid black;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: white;
            }
            .vertical-bars {
                font-family: 'Courier New', monospace;
                font-size: 12px;
                font-weight: bold;
                writing-mode: vertical-rl;
                text-orientation: sideways;
                margin: 2mm 0;
            }
            .vertical-text {
                font-family: 'Courier New', monospace;
                font-size: 6px;
                font-weight: bold;
                writing-mode: vertical-rl;
                text-orientation: mixed;
                transform: rotate(180deg);
            }
        </style>
    </head>
    <body>
        <div class="label-container">
            <div class="header">INNOFA ROMANIA SRL</div>
            
            <div class="customer-row">${customer_name}</div>
            
            <div class="data-section">
                <div class="data-row">
                    <div class="label-column">Quantity ordered</div>
                    <div class="value-column">${cantitate}</div>
                </div>
                
                <div class="data-row">
                    <div class="label-column">Customer order</div>
                    <div class="value-column">${clientOrder}</div>
                </div>
                
                <div class="data-row">
                    <div class="label-column">Delivery date</div>
                    <div class="value-column">${deliveryDate}</div>
                </div>
                
                <div class="data-row double">
                    <div class="label-column">Product description</div>
                    <div class="value-column description-value">${descr_com_prod}</div>
                </div>
                
                <div class="data-row">
                    <div class="label-column">Size</div>
                    <div class="value-column">${dimensiune}</div>
                </div>
                
                <div class="data-row">
                    <div class="label-column">Article code</div>
                    <div class="value-column">${cod_articol}</div>
                </div>
                
                <div class="data-row">
                    <div class="label-column">Prod. order</div>
                    <div class="value-column">${prodOrder}</div>
                </div>
            </div>
        </div>
        
        <div class="barcode-section">
            <div class="barcode-visual">||||| || ||| || ||||| ||| || |||||</div>
            <div class="barcode-text">${horizontalBarcode}</div>
        </div>
        
        <div class="vertical-barcode">
            <div class="vertical-bars">| | | | | | |</div>
            <div class="vertical-text">${verticalBarcode}</div>
        </div>
    </body>
    </html>`;
    
    return htmlContent;
}


// Handle QZ Tray printing with enhanced controller
let printController = {
    isPaused: false,
    isCancelled: false,
    currentLabel: 0,
    totalLabels: 0,
    lastPrintedLabel: 0,
    failedLabels: [],
    orderData: null,
    printerName: null
};

function addLogEntry(message, type = 'info') {
    const log = document.getElementById('print-status-log');
    const entry = document.createElement('div');
    entry.className = type;
    const timestamp = new Date().toLocaleTimeString();
    entry.textContent = `[${timestamp}] ${message}`;
    log.appendChild(entry);
    log.scrollTop = log.scrollHeight;
}

function updateProgressBar(current, total, status = '') {
    const progressBar = document.getElementById('progress-bar');
    const progressCount = document.getElementById('progress-count');
    const progressText = document.getElementById('progress-text');
    const percentage = Math.round((current / total) * 100);
    
    progressBar.style.width = `${percentage}%`;
    progressBar.textContent = `${percentage}%`;
    progressCount.textContent = `${current} / ${total}`;
    
    if (status) {
        progressText.textContent = status;
    }
}

async function handleQZTrayPrint(selectedRow) {
    const modal = document.getElementById('print-progress-modal');
    const progressBar = document.getElementById('progress-bar');
    const progressText = document.getElementById('progress-text');
    const log = document.getElementById('print-status-log');
    
    const pauseBtn = document.getElementById('pause-print-btn');
    const resumeBtn = document.getElementById('resume-print-btn');
    const reprintBtn = document.getElementById('reprint-last-btn');
    const cancelBtn = document.getElementById('cancel-print-btn');
    
    // Debug: Check if modal exists
    console.log('🔍 Modal element:', modal);
    console.log('🔍 Modal classList before:', modal ? modal.classList.toString() : 'MODAL NOT FOUND');
    
    // Reset controller state
    printController = {
        isPaused: false,
        isCancelled: false,
        currentLabel: 0,
        totalLabels: 0,
        lastPrintedLabel: 0,
        failedLabels: [],
        orderData: null,
        printerName: null
    };
    
    try {
        if (!qzTray) {
            await initializeQZTray();
            if (!qzTray) {
                throw new Error('QZ Tray not available');
            }
        }
        
        const selectedPrinter = document.getElementById('qztray-printer-select').value;
        if (!selectedPrinter) {
            showNotification('⚠️ Please select a printer first', 'warning');
            return;
        }
        
        // Extract order data from row
        const cells = selectedRow.querySelectorAll('td');
        const orderData = {
            id: cells[0].textContent,
            comanda_productie: cells[1].textContent.trim(),
            cod_articol: cells[2].textContent.trim(),
            descr_com_prod: cells[3].textContent.trim(),
            cantitate: parseInt(cells[4].textContent.trim()),
            data_livrare: cells[5].textContent.trim(),
            dimensiune: cells[6].textContent.trim(),
            com_achiz_client: cells[7].textContent.trim(),
            nr_linie_com_client: cells[8].textContent.trim(),
            customer_name: cells[9].textContent.trim()
        };
        
        const quantity = orderData.cantitate;
        printController.orderData = orderData;
        printController.printerName = selectedPrinter;
        printController.totalLabels = quantity;
        
        console.log(`🖨️ Printing ${quantity} labels via QZ Tray to ${selectedPrinter}`);
        
        // Show modal with show class for proper display
        console.log('👉 Adding show class to modal...');
        modal.classList.add('show');
        console.log('🔍 Modal classList after:', modal.classList.toString());
        console.log('🔍 Modal computed display:', window.getComputedStyle(modal).display);
        
        log.innerHTML = '';
        addLogEntry(`Starting print job: ${quantity} labels`, 'info');
        addLogEntry(`Printer: ${selectedPrinter}`, 'info');
        addLogEntry(`Order: ${orderData.comanda_productie}`, 'info');
        
        updateProgressBar(0, quantity, 'Preparing to print...');
        progressBar.classList.remove('error', 'paused');
        
        // Show control buttons
        pauseBtn.style.display = 'inline-block';
        cancelBtn.style.display = 'inline-block';
        reprintBtn.style.display = 'none';
        resumeBtn.style.display = 'none';
        
        // Setup button handlers
        pauseBtn.onclick = () => {
            printController.isPaused = true;
            pauseBtn.style.display = 'none';
            resumeBtn.style.display = 'inline-block';
            progressBar.classList.add('paused');
            addLogEntry('Print job paused by user', 'warning');
            updateProgressBar(printController.currentLabel, quantity, '⏸️ Paused - Check printer paper');
        };
        
        resumeBtn.onclick = () => {
            printController.isPaused = false;
            resumeBtn.style.display = 'none';
            pauseBtn.style.display = 'inline-block';
            progressBar.classList.remove('paused');
            addLogEntry('Print job resumed', 'success');
        };
        
        reprintBtn.onclick = async () => {
            if (printController.lastPrintedLabel > 0) {
                addLogEntry(`Reprinting label ${printController.lastPrintedLabel}...`, 'info');
                try {
                    await generatePDFAndPrint(selectedPrinter, orderData, printController.lastPrintedLabel, quantity);
                    addLogEntry(`Label ${printController.lastPrintedLabel} reprinted successfully`, 'success');
                } catch (error) {
                    addLogEntry(`Reprint failed: ${error.message}`, 'error');
                }
            }
        };
        
        cancelBtn.onclick = () => {
            printController.isCancelled = true;
            addLogEntry('Print job cancelled by user', 'error');
            progressBar.classList.add('error');
            updateProgressBar(printController.currentLabel, quantity, '❌ Cancelled');
        };
        
        try {
            // Print each label sequentially
            for (let i = 1; i <= quantity; i++) {
                if (printController.isCancelled) {
                    addLogEntry('Print job terminated', 'error');
                    break;
                }
                
                // Wait while paused
                while (printController.isPaused && !printController.isCancelled) {
                    await new Promise(resolve => setTimeout(resolve, 500));
                }
                
                if (printController.isCancelled) break;
                
                printController.currentLabel = i;
                updateProgressBar(i - 1, quantity, `Printing label ${i} of ${quantity}...`);
                addLogEntry(`Sending label ${i} to printer...`, 'info');
                
                try {
                    // Generate PDF and send to printer
                    await generatePDFAndPrint(selectedPrinter, orderData, i, quantity);
                    
                    printController.lastPrintedLabel = i;
                    updateProgressBar(i, quantity, `Label ${i} printed successfully`);
                    addLogEntry(`✓ Label ${i} printed successfully`, 'success');
                    
                    // Show reprint button after each successful print
                    reprintBtn.style.display = 'inline-block';
                    
                } catch (printError) {
                    // Print error detected
                    progressBar.classList.add('error');
                    printController.failedLabels.push(i);
                    addLogEntry(`✗ Label ${i} failed: ${printError.message}`, 'error');
                    
                    // Pause automatically on error
                    printController.isPaused = true;
                    pauseBtn.style.display = 'none';
                    resumeBtn.style.display = 'inline-block';
                    progressBar.classList.add('paused');
                    updateProgressBar(i - 1, quantity, '⚠️ ERROR - Check printer (paper jam/out of paper)');
                    
                    // Wait for user to resume or cancel
                    while (printController.isPaused && !printController.isCancelled) {
                        await new Promise(resolve => setTimeout(resolve, 500));
                    }
                    
                    if (!printController.isCancelled) {
                        // Retry failed label
                        addLogEntry(`Retrying label ${i}...`, 'warning');
                        await generatePDFAndPrint(selectedPrinter, orderData, i, quantity);
                        addLogEntry(`✓ Label ${i} printed successfully (retry)`, 'success');
                        printController.lastPrintedLabel = i;
                        progressBar.classList.remove('error');
                    }
                }
                
                // Small delay between labels for printer processing
                if (i < quantity && !printController.isCancelled) {
                    await new Promise(resolve => setTimeout(resolve, 500));
                }
            }
            
            if (!printController.isCancelled) {
                // All labels printed successfully
                progressBar.classList.remove('paused', 'error');
                updateProgressBar(quantity, quantity, '✅ All labels printed! Updating database...');
                addLogEntry('All labels completed successfully', 'success');
                
                // Hide control buttons
                pauseBtn.style.display = 'none';
                resumeBtn.style.display = 'none';
                cancelBtn.style.display = 'none';
                
                // Update database to mark order as printed
                try {
                    const updateResponse = await fetch(`/update_printed_status/${orderData.id}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    });
                    
                    if (!updateResponse.ok) {
                        console.error('Failed to update printed status in database');
                        addLogEntry('Database update failed', 'warning');
                        updateProgressBar(quantity, quantity, '⚠️ Labels printed but database update failed');
                        await new Promise(resolve => setTimeout(resolve, 2000));
                    } else {
                        addLogEntry('Database updated successfully', 'success');
                        updateProgressBar(quantity, quantity, '✅ Complete! Refreshing table...');
                        await new Promise(resolve => setTimeout(resolve, 1000));
                    }
                } catch (dbError) {
                    console.error('Database update error:', dbError);
                    addLogEntry(`Database error: ${dbError.message}`, 'error');
                    updateProgressBar(quantity, quantity, '⚠️ Labels printed but database update failed');
                    await new Promise(resolve => setTimeout(resolve, 2000));
                }
                
                // Close modal
                modal.classList.remove('show');
                
                // Show success notification
                showNotification(`✅ Successfully printed ${quantity} labels!`, 'success');
                
                // Refresh table to show updated status
                document.getElementById('check-db-btn').click();
            } else {
                // Job was cancelled
                await new Promise(resolve => setTimeout(resolve, 2000));
                modal.classList.remove('show');
                showNotification(`⚠️ Print job cancelled. ${printController.lastPrintedLabel} of ${quantity} labels printed.`, 'warning');
            }
            
        } catch (printError) {
            modal.classList.remove('show');
            throw new Error(`Print failed: ${printError.message}`);
        }
        
    } catch (error) {
        modal.classList.remove('show');
        console.error('QZ Tray print error:', error);
        showNotification('❌ QZ Tray print error: ' + error.message, 'error');
    }
}

// Print Button Handler - Routes to appropriate print method
document.getElementById('print-label-btn').addEventListener('click', async function(e) {
    e.preventDefault();
    
    // Get selected order
    const selectedRow = document.querySelector('.print-module-table tbody tr.selected');
    if (!selectedRow) {
        showNotification('⚠️ Please select an order first from the table below.', 'warning');
        return;
    }
    
    // Get selected print method
    const printMethod = document.querySelector('input[name="printMethod"]:checked').value;
    
    if (printMethod === 'qztray') {
        await handleQZTrayPrint(selectedRow);
    } else {
        handlePDFGeneration(selectedRow);
    }
});

// Handle PDF generation
function handlePDFGeneration(selectedRow) {
    const orderId = selectedRow.dataset.orderId;
    const quantityCell = selectedRow.querySelector('td:nth-child(5)');
    const quantity = quantityCell ? parseInt(quantityCell.textContent) : 1;
    const prodOrderCell = selectedRow.querySelector('td:nth-child(2)');
    const prodOrder = prodOrderCell ? prodOrderCell.textContent.trim() : 'N/A';
    
    const button = document.getElementById('print-label-btn');
    const originalText = button.textContent;
    button.textContent = 'Generating PDF...';
    button.disabled = true;
    
    console.log(`Generating PDF for order ${orderId} with ${quantity} labels`);
    
    // Generate PDF with paper-saving mode enabled (optimized for thermal printers)
    fetch(`/generate_labels_pdf/${orderId}/true`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.blob();
    })
    .then(blob => {
        // Create blob URL for PDF
        const url = window.URL.createObjectURL(blob);
        
        // Create download link for PDF
        const a = document.createElement('a');
        a.href = url;
        a.download = `labels_${prodOrder}_${quantity}pcs.pdf`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        
        // Also open PDF in new tab for printing
        const printWindow = window.open(url, '_blank');
        if (printWindow) {
            printWindow.focus();
            
            // Wait for PDF to load, then show print dialog
            setTimeout(() => {
                printWindow.print();
                
                // Clean up blob URL after print dialog is shown
                setTimeout(() => {
                    window.URL.revokeObjectURL(url);
                }, 2000);
            }, 1500);
        } else {
            // If popup was blocked, clean up immediately
            setTimeout(() => {
                window.URL.revokeObjectURL(url);
            }, 1000);
        }
        
        // Show success message
        showNotification(`✅ PDF generated successfully!\n📊 Order: ${prodOrder}\n📦 Labels: ${quantity} pieces`, 'success');
        
        // Refresh the orders table to reflect printed status
        setTimeout(() => {
            document.getElementById('check-db-btn').click();
        }, 1000);
    })
    .catch(error => {
        console.error('Error generating PDF:', error);
        showNotification('❌ Failed to generate PDF labels. Error: ' + error.message, 'error');
    })
    .finally(() => {
        // Reset button state
        button.textContent = originalText;
        button.disabled = false;
    });
}

// UI Control Functions
function updatePrintMethodUI() {
    const printMethod = document.querySelector('input[name="printMethod"]:checked').value;
    const printerSelection = document.getElementById('qztray-printer-selection');
    const qztrayInfo = document.getElementById('qztray-info');
    const printButton = document.getElementById('print-label-btn');
    
    if (printMethod === 'qztray') {
        printerSelection.style.display = 'block';
        qztrayInfo.style.display = 'block';
        printButton.textContent = '🖨️ Print Labels Directly';
        printButton.className = 'btn btn-primary';
    } else {
        printerSelection.style.display = 'none';
        qztrayInfo.style.display = 'none';
        printButton.textContent = '📄 Generate PDF Labels';
        printButton.className = 'btn btn-success';
    }
}

// Add event listeners for print method radio buttons
document.addEventListener('DOMContentLoaded', function() {
    // Add change listeners to radio buttons
    document.querySelectorAll('input[name="printMethod"]').forEach(radio => {
        radio.addEventListener('change', updatePrintMethodUI);
    });
    
    // Initialize UI
    updatePrintMethodUI();
    
    // Initialize QZ Tray
    setTimeout(initializeQZTray, 1000);
    
    // Load orders
    setTimeout(() => {
        document.getElementById('check-db-btn').click();
    }, 500);
});
</script>
{% endblock %}