{% extends "base.html" %}

{% block head %}
<style>
/* TABLE STYLING - Same as view_orders.html */
table.view-orders-table.scan-table {
    margin: 0 !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    width: 100% !important;
    table-layout: fixed !important;
    font-size: 11px !important;
}

table.view-orders-table.scan-table thead th {
    height: 85px !important;
    min-height: 85px !important;
    max-height: 85px !important;
    vertical-align: middle !important;
    text-align: center !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.3 !important;
    padding: 6px 3px !important;
    font-size: 11px !important;
    background-color: #e9ecef !important;
    font-weight: bold !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    border: 1px solid #ddd !important;
    text-overflow: clip !important;
    position: relative !important;
}

table.view-orders-table.scan-table tbody td {
    padding: 4px 2px !important;
    font-size: 10px !important;
    text-align: center !important;
    border: 1px solid #ddd !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
}

table.view-orders-table.scan-table td:nth-child(1) { width: 50px !important; }
table.view-orders-table.scan-table td:nth-child(2) { width: 80px !important; }
table.view-orders-table.scan-table td:nth-child(3) { width: 80px !important; }
table.view-orders-table.scan-table td:nth-child(4) { width: 150px !important; }
table.view-orders-table.scan-table td:nth-child(5) { width: 70px !important; }
table.view-orders-table.scan-table td:nth-child(6) { width: 80px !important; }
table.view-orders-table.scan-table td:nth-child(7) { width: 75px !important; }
table.view-orders-table.scan-table td:nth-child(8) { width: 90px !important; }
table.view-orders-table.scan-table td:nth-child(9) { width: 70px !important; }
table.view-orders-table.scan-table td:nth-child(10) { width: 100px !important; }
table.view-orders-table.scan-table td:nth-child(11) { width: 90px !important; }
table.view-orders-table.scan-table td:nth-child(12) { width: 70px !important; }
table.view-orders-table.scan-table td:nth-child(13) { width: 50px !important; }
table.view-orders-table.scan-table td:nth-child(14) { width: 70px !important; }
table.view-orders-table.scan-table td:nth-child(15) { width: 100px !important; }

table.view-orders-table.scan-table tbody tr:hover td {
    background-color: #f8f9fa !important;
}

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

.report-table-card h3 {
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
}

.report-table-card {
    padding: 15px !important;
}

/* Search card styling */
.search-card {
    margin-bottom: 20px;
    padding: 20px;
}

.search-field {
    width: 100%;
    max-width: 400px;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.quantity-field {
    width: 100px;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.search-result-table {
    margin-top: 15px;
    margin-bottom: 15px;
}

.print-btn {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.print-btn:hover {
    background-color: #218838;
}

.print-btn:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

/* Force barcode SVG elements to be black */
#barcode-display rect,
#vertical-barcode-display rect {
    fill: #000000 !important;
    stroke: #000000 !important;
}

#barcode-display path,
#vertical-barcode-display path {
    fill: #000000 !important;
    stroke: #000000 !important;
}

/* Ensure barcode frames have proper contrast */
#barcode-frame,
#vertical-barcode-frame {
    background: #ffffff !important;
    border: 1px solid #ddd;
}
</style>
{% endblock %}

{% block content %}


<!-- ROW 1: Search Card (full width) -->
<div class="scan-container" style="display: flex; flex-direction: column; gap: 0; width: 100%;">
    <div class="card search-card" style="width: 100%; max-height: 100px; min-height: 70px; display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 24px;">
        <div style="flex: 1 1 300px; min-width: 250px;">
            <label for="search-input" style="font-weight: bold;">Search Order (CP...):</label>
            <input type="text" id="search-input" class="search-field" placeholder="Type to search..." oninput="searchOrder()" style="margin-left: 10px; max-width: 250px;">
            <button id="fetch-matching-btn" class="btn btn-secondary" style="margin-left: 10px; padding: 7px 16px; font-size: 14px;" onclick="fetchMatchingOrders()">Find All</button>
        </div>
    </div>

    <!-- ROW 2: Two cards side by side -->
    <div style="display: flex; flex-direction: row; gap: 24px; width: 100%; align-items: flex-start;">
        <!-- Print Preview Card (left, with all print_module.html controls) -->
        <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>
            <!-- Pairing Keys Section -->
            <div style="width: 100%; text-align: center; margin-bottom: 15px;">
                <div id="client-select-container" style="display: none; margin-bottom: 8px;">
                    <label for="client-select" style="font-size: 11px; font-weight: 600; display: block; margin-bottom: 4px;">Select Printer/Client:</label>
                    <select id="client-select" class="form-control form-control-sm" style="width: 85%; margin: 0 auto; font-size: 11px;"></select>
                </div>
                <a href="{{ url_for('main.download_extension') }}" class="btn btn-info btn-sm" target="_blank" style="font-size: 11px; padding: 4px 12px;">🔑 Manage Keys</a>
            </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 and barcode frames as in print_module.html... -->
                <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;">
                    <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>
                    <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;"></div>
                    <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>
                    <div style="position: absolute; left: 90.96px; top: 64.26px; width: 1px; height: 257.04px; background: #999;"></div>
                    <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;"></div>
                    <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;"></div>
                    <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;"></div>
                    <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;"></div>
                    <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;"></div>
                    <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;"></div>
                    <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;"></div>
                </div>
                <div id="barcode-frame" style="position: absolute; top: 395px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 270px; height: 50px; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                    <svg id="barcode-display" style="width: 100%; height: 40px;"></svg>
                    <div id="barcode-text" style="font-size: 8px; font-family: 'Courier New', monospace; margin-top: 2px; text-align: center; font-weight: bold;"></div>
                </div>
                <div id="vertical-barcode-frame" style="position: absolute; top: 50px; left: 270px; width: 321.3px; height: 40px; background: white; display: flex; align-items: center; justify-content: center; transform: rotate(90deg); transform-origin: left center;">
                    <svg id="vertical-barcode-display" style="width: 100%; height: 35px;"></svg>
                    <div id="vertical-barcode-text" style="position: absolute; bottom: -15px; font-size: 7px; font-family: 'Courier New', monospace; text-align: center; font-weight: bold; width: 100%;"></div>
                </div>
            </div>
            <!-- Print Options (copied from print_module.html) -->
            <div style="width: 100%; margin-top: 20px;">
                <!-- Print Method Selection -->
                <div style="margin-bottom: 15px;" role="group" aria-labelledby="print-method-label">
                    <div id="print-method-label" style="font-size: 12px; font-weight: 600; color: #495057; margin-bottom: 8px;">
                        📄 Print Method:
                    </div>
                    <div class="form-check" style="margin-bottom: 6px;">
                        <input class="form-check-input" type="radio" name="printMethod" id="qzTrayPrint" value="qztray" checked>
                        <label class="form-check-label" for="qzTrayPrint" style="font-size: 11px; line-height: 1.2;">
                            <strong>🖨️ Direct Print</strong> <span id="qztray-status" class="badge badge-success" style="font-size: 9px; padding: 2px 6px;">Ready</span>
                        </label>
                    </div>
                    <div class="form-check" id="pdf-option-container" style="display: none; margin-bottom: 6px;">
                        <input class="form-check-input" type="radio" name="printMethod" id="pdfGenerate" value="pdf">
                        <label class="form-check-label" for="pdfGenerate" style="font-size: 11px; line-height: 1.2;">
                            <strong>📄 PDF Export</strong> <span class="text-muted" style="font-size: 10px;">(fallback)</span>
                        </label>
                    </div>
                </div>
                <!-- Printer Selection for QZ Tray (Compact) -->
                <div id="qztray-printer-selection" style="margin-bottom: 10px;">
                    <label for="qztray-printer-select" style="font-size: 11px; font-weight: 600; color: #495057; margin-bottom: 3px; display: block;">
                        Printer:
                    </label>
                    <select id="qztray-printer-select" class="form-control form-control-sm" style="font-size: 11px; padding: 3px 6px;">
                        <option value="">Loading...</option>
                    </select>
                </div>
                <!-- Labels Range Selection -->
                <div style="margin-bottom: 15px;">
                    <label for="labels-range-input" style="font-size: 11px; font-weight: 600; color: #495057; margin-bottom: 3px; display: block;">
                        Select Labels Range:
                    </label>
                    <input type="text" id="labels-range-input" class="form-control form-control-sm" 
                           placeholder="e.g., 003 or 003-007" 
                           style="font-size: 11px; padding: 3px 6px; text-align: center;">
                    <div style="font-size: 9px; color: #6c757d; margin-top: 2px; text-align: center;">
                        Single: "005" | Range: "003-007" | Leave empty for all
                    </div>
                </div>
                <!-- Print Button -->
                <div style="width: 100%; text-align: center; margin-bottom: 10px;">
                    <button id="print-label-btn" class="btn btn-success" style="font-size: 13px; padding: 8px 24px; border-radius: 5px; font-weight: 600;">
                        🖨️ Print Labels
                    </button>
                </div>
                <!-- Print Information -->
                <div style="width: 100%; text-align: center; color: #6c757d; font-size: 10px; line-height: 1.3;">
                    <small>(e.g., CP00000711-001, 002, ...)</small>
                </div>
                <!-- QZ Tray Installation Info - Simplified -->
                <div id="qztray-info" style="width: 100%; margin-top: 15px; padding-top: 15px; border-top: 1px solid #e9ecef;">
                    <div style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; padding: 10px; text-align: center;">
                        <div style="font-size: 10px; color: #495057; margin-bottom: 8px;">
                            QZ Tray is required for direct printing
                        </div>
                        <a href="https://filebrowser.moto-adv.com/filebrowser/api/public/dl/Fk0ZaiEY/QP_Tray/qz-tray-2.2.6-SNAPSHOT-x86_64.exe?token=TJ7gSu3CRcWWQuyFLoZv5I8j4diDjP47DDqWRtM0oKAx-2_orj1stfKPJsuuqKR9mE2GQNm1jlZ0BPR7lfZ3gHmu56SkY9fC5AJlC9n_80oX643ojlGc-U7XVb1SDd0w" class="btn btn-outline-secondary btn-sm" style="font-size: 10px; padding: 4px 16px;">
                            📥 Download QZ Tray
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Orders Table Card (right, with load button and notification system) -->
        <div class="card scan-table-card" style="min-height: 700px; width: calc(100% - 350px); margin: 0;">
            <h3>Data Preview</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>
                            <th>Qty to Print</th>
                        </tr>
                    </thead>
                    <tbody id="unprinted-orders-table">
                        <!-- Data will be dynamically loaded here -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript Libraries -->
<!-- JsBarcode library for real barcode generation -->
<script src="{{ url_for('static', filename='JsBarcode.all.min.js') }}"></script>
<!-- Add html2canvas library for capturing preview as image -->
<script src="{{ url_for('static', filename='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>
<script>

// Store all orders data for searching
const allOrders = {{ orders|tojson|safe }};
let selectedOrderData = null;

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

function searchOrder() {
    const searchValue = document.getElementById('search-input').value.trim().toLowerCase();
    if (!searchValue) {
        selectedOrderData = null;
        return;
    }
    // Search for matching order
    const matchedOrder = allOrders.find(order => 
        order.comanda_productie && order.comanda_productie.toLowerCase().includes(searchValue)
    );
    if (matchedOrder) {
        selectedOrderData = matchedOrder;
    } else {
        selectedOrderData = null;
    }
}

// Fetch all matching orders and populate preview table
function fetchMatchingOrders() {
    const searchValue = document.getElementById('search-input').value.trim().toLowerCase();
    if (!searchValue) {
        alert('Please enter an order code to search.');
        return;
    }
    // Find all matching orders
    const matchingOrders = allOrders.filter(order => 
        order.comanda_productie && order.comanda_productie.toLowerCase().includes(searchValue)
    );
    const tbody = document.getElementById('unprinted-orders-table');
    tbody.innerHTML = '';
    if (matchingOrders.length === 0) {
        tbody.innerHTML = '<tr><td colspan="16" style="text-align:center; color:#dc3545;">No matching orders found.</td></tr>';
        // Clear preview card
        updatePreviewCard(null);
        return;
    }
    matchingOrders.forEach((order, idx) => {
        const tr = document.createElement('tr');
        // Format data_livrare as DD/MM/YYYY if possible
        let dataLivrareFormatted = '-';
        if (order.data_livrare) {
            const d = new Date(order.data_livrare);
            if (!isNaN(d)) {
                const day = String(d.getDate()).padStart(2, '0');
                const month = String(d.getMonth() + 1).padStart(2, '0');
                const year = d.getFullYear();
                dataLivrareFormatted = `${day}/${month}/${year}`;
            } else {
                dataLivrareFormatted = order.data_livrare;
            }
        }
        tr.innerHTML = `
            <td>${order.id}</td>
            <td><strong>${order.comanda_productie}</strong></td>
            <td>${order.cod_articol || '-'}</td>
            <td>${order.descr_com_prod}</td>
            <td style="text-align: right; font-weight: 600;">${order.cantitate}</td>
            <td style="text-align: center;">${dataLivrareFormatted}</td>
            <td style="text-align: center;">${order.dimensiune || '-'}</td>
            <td>${order.com_achiz_client || '-'}</td>
            <td style="text-align: right;">${order.nr_linie_com_client || '-'}</td>
            <td>${order.customer_name || '-'}</td>
            <td>${order.customer_article_number || '-'}</td>
            <td>${order.open_for_order || '-'}</td>
            <td style="text-align: right;">${order.line_number || '-'}</td>
            <td style="text-align: center;">${order.printed_labels == 1 ? '<span style=\"color: #28a745; font-weight: bold;\">✓ Yes</span>' : '<span style=\"color: #dc3545;\">✗ No</span>'}</td>
            <td style="font-size: 11px; color: #6c757d;">${order.created_at || '-'}</td>
            <td>1</td>
        `;
        tr.addEventListener('click', function() {
            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 = '';
                });
            });
            this.classList.add('selected');
            const cells = this.querySelectorAll('td');
            cells.forEach(cell => {
                cell.style.backgroundColor = '#007bff';
                cell.style.color = 'white';
            });
            updatePreviewCard(order);
        });
        tbody.appendChild(tr);
        // Update preview card with the first matching order
        if (idx === 0) updatePreviewCard(order);
    });
}

// QZ Tray and Print Button Logic (copied/adapted from print_module.html)
async function initializeQZTray() {
    try {
        if (typeof qz === 'undefined') {
            document.getElementById('qztray-status').textContent = 'Library Error';
            document.getElementById('qztray-status').className = 'badge badge-danger';
            return false;
        }
        qz.websocket.setClosedCallbacks(function() {
            document.getElementById('qztray-status').textContent = 'Disconnected';
            document.getElementById('qztray-status').className = 'badge badge-warning';
        });
        await qz.websocket.connect();
        qzTray = qz;
        const version = await qz.api.getVersion();
        document.getElementById('qztray-status').textContent = 'Ready';
        document.getElementById('qztray-status').className = 'badge badge-success';
        document.getElementById('qztray-printer-selection').style.display = 'block';
        document.getElementById('pdf-option-container').style.display = 'none';
        await loadQZTrayPrinters();
        return true;
    } catch (error) {
        document.getElementById('qztray-status').textContent = 'Not Connected';
        document.getElementById('qztray-status').className = 'badge badge-danger';
        document.getElementById('qztray-printer-selection').style.display = 'none';
        document.getElementById('pdf-option-container').style.display = 'block';
        document.getElementById('pdfGenerate').checked = true;
        document.getElementById('qzTrayPrint').disabled = true;
        return false;
    }
}

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);
        });
        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) {}
}

// Print Button Handler
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(initializeQZTray, 1000);
    document.getElementById('print-label-btn').addEventListener('click', async function(e) {
        e.preventDefault();
        const selectedRow = document.querySelector('.print-module-table tbody tr.selected');
        if (!selectedRow) {
            alert('Please select an order first from the table below.');
            return;
        }
        const printMethod = document.querySelector('input[name="printMethod"]:checked').value;
        if (printMethod === 'qztray') {
            await handleQZTrayPrint(selectedRow);
        } else {
            handlePDFGeneration(selectedRow);
        }
    });
    document.querySelectorAll('input[name="printMethod"]').forEach(radio => {
        radio.addEventListener('change', updatePrintMethodUI);
    });
    updatePrintMethodUI();
});

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

async function handleQZTrayPrint(selectedRow) {
    try {
        if (!qzTray) {
            await initializeQZTray();
            if (!qzTray) throw new Error('QZ Tray not available');
        }
        const selectedPrinter = document.getElementById('qztray-printer-select').value;
        if (!selectedPrinter) {
            alert('Please select a printer first');
            return;
        }
        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()
        };
        
        // Parse labels range input
        const labelsRangeInput = document.getElementById('labels-range-input').value.trim();
        let labelNumbers = [];
        
        if (labelsRangeInput) {
            if (labelsRangeInput.includes('-')) {
                // Range format: "003-007"
                const rangeParts = labelsRangeInput.split('-');
                if (rangeParts.length === 2) {
                    const start = parseInt(rangeParts[0]);
                    const end = parseInt(rangeParts[1]);
                    if (!isNaN(start) && !isNaN(end) && start > 0 && end >= start && end <= orderData.cantitate) {
                        for (let i = start; i <= end; i++) {
                            labelNumbers.push(i);
                        }
                    } else {
                        alert(`Invalid range. Please use format "001-${String(orderData.cantitate).padStart(3, '0')}" or single number.`);
                        return;
                    }
                } else {
                    alert('Invalid range format. Use "003-007" format.');
                    return;
                }
            } else {
                // Single number format: "005"
                const singleNumber = parseInt(labelsRangeInput);
                if (!isNaN(singleNumber) && singleNumber > 0 && singleNumber <= orderData.cantitate) {
                    labelNumbers.push(singleNumber);
                } else {
                    alert(`Invalid label number. Please use 1-${orderData.cantitate}.`);
                    return;
                }
            }
        } else {
            // No range specified, print all labels (original behavior)
            for (let i = 1; i <= orderData.cantitate; i++) {
                labelNumbers.push(i);
            }
        }
        
        // Print the specified labels
        for (let i = 0; i < labelNumbers.length; i++) {
            const labelNumber = labelNumbers[i];
            await generatePDFAndPrint(selectedPrinter, orderData, labelNumber, orderData.cantitate);
            if (i < labelNumbers.length - 1) await new Promise(resolve => setTimeout(resolve, 500));
        }
        
        // Show success message
        const rangeText = labelsRangeInput ? 
            (labelNumbers.length === 1 ? `label ${String(labelNumbers[0]).padStart(3, '0')}` : 
             `labels ${String(labelNumbers[0]).padStart(3, '0')}-${String(labelNumbers[labelNumbers.length-1]).padStart(3, '0')}`) :
            `all ${orderData.cantitate} labels`;
        alert(`Successfully printed ${rangeText} for order ${orderData.comanda_productie}`);
        
    } catch (error) {
        alert('QZ Tray print error: ' + error.message);
    }
}

async function generatePDFAndPrint(selectedPrinter, orderData, pieceNumber, totalPieces) {
    try {
        const pdfData = {
            ...orderData,
            quantity: 1,
            piece_number: pieceNumber,
            total_pieces: totalPieces
        };
        const response = await fetch('/generate_label_pdf', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(pdfData)
        });
        if (!response.ok) throw new Error('Failed to generate PDF');
        const pdfBlob = await response.blob();
        const pdfBase64 = await new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onloadend = () => resolve(reader.result.split(',')[1]);
            reader.onerror = reject;
            reader.readAsDataURL(pdfBlob);
        });
        const config = qz.configs.create(selectedPrinter, {
            scaleContent: false,
            rasterize: false,
            size: { width: 80, height: 100 },
            units: 'mm',
            margins: { top: 0, right: 0, bottom: 0, left: 0 }
        });
        const data = [{ type: 'pdf', format: 'base64', data: pdfBase64 }];
        await qz.print(config, data);
    } catch (error) {
        throw error;
    }
}

function handlePDFGeneration(selectedRow) {
    // Check if labels range is specified
    const labelsRangeInput = document.getElementById('labels-range-input').value.trim();
    if (labelsRangeInput) {
        alert('PDF generation currently supports printing all labels only. Please use QZ Tray for custom label ranges, or leave the range field empty for PDF generation.');
        return;
    }
    
    const orderId = selectedRow.querySelector('td').textContent;
    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;
    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 => {
        const url = window.URL.createObjectURL(blob);
        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);
        const printWindow = window.open(url, '_blank');
        if (printWindow) {
            printWindow.focus();
            setTimeout(() => {
                printWindow.print();
                setTimeout(() => { window.URL.revokeObjectURL(url); }, 2000);
            }, 1500);
        } else {
            setTimeout(() => { window.URL.revokeObjectURL(url); }, 1000);
        }
        setTimeout(() => {}, 1000);
    })
    .catch(error => {
        alert('Failed to generate PDF labels. Error: ' + error.message);
    })
    .finally(() => {
        button.textContent = originalText;
        button.disabled = false;
    });
}

// Update the preview card with order data (as in print_module.html)
function updatePreviewCard(order) {
    function set(id, value) {
        const el = document.getElementById(id);
        if (el) el.textContent = value || '';
    }
    // Always clear barcode SVGs before updating
    const barcode = document.getElementById('barcode-display');
    if (barcode) barcode.innerHTML = '';
    const vbarcode = document.getElementById('vertical-barcode-display');
    if (vbarcode) vbarcode.innerHTML = '';
    if (!order) {
        set('customer-name-row', '');
        set('quantity-ordered-value', '');
        set('client-order-info', '');
        set('delivery-date-value', '');
        set('description-value', '');
        set('size-value', '');
        set('article-code-value', '');
        set('prod-order-value', '');
        set('barcode-text', '');
        set('vertical-barcode-text', '');
        return;
    }
    set('customer-name-row', order.customer_name || '');
    set('quantity-ordered-value', order.cantitate || '');
    set('client-order-info', (order.com_achiz_client && order.nr_linie_com_client) ? `${order.com_achiz_client}-${order.nr_linie_com_client}` : '');
    // Format delivery date as DD/MM/YYYY
    let deliveryDateFormatted = '';
    if (order.data_livrare) {
        const d = new Date(order.data_livrare);
        if (!isNaN(d)) {
            const day = String(d.getDate()).padStart(2, '0');
            const month = String(d.getMonth() + 1).padStart(2, '0');
            const year = d.getFullYear();
            deliveryDateFormatted = `${day}/${month}/${year}`;
        } else {
            deliveryDateFormatted = order.data_livrare;
        }
    }
    set('delivery-date-value', deliveryDateFormatted);
    set('description-value', order.descr_com_prod || '');
    set('size-value', order.dimensiune || '');
    set('article-code-value', order.cod_articol || '');
    set('prod-order-value', (order.comanda_productie && order.cantitate) ? `${order.comanda_productie}-${order.cantitate}` : '');
    set('barcode-text', order.comanda_productie ? `${order.comanda_productie}/001` : '');
    set('vertical-barcode-text', (order.com_achiz_client && order.nr_linie_com_client) ? `${order.com_achiz_client}/${order.nr_linie_com_client}` : '');
    // Generate barcodes if JsBarcode is available (with debugging like print_module.html)
    const horizontalBarcodeData = order.comanda_productie ? `${order.comanda_productie}/001` : 'N/A';
    const verticalBarcodeData = (order.com_achiz_client && order.nr_linie_com_client) ? `${order.com_achiz_client}/${order.nr_linie_com_client}` : '000000/00';
    
    console.log('🔍 BARCODE DEBUG - Order data:', order);
    console.log('🔍 Attempting to generate horizontal barcode:', horizontalBarcodeData);
    console.log('🔍 JsBarcode available?', typeof JsBarcode !== 'undefined');
    console.log('🔍 JsBarcode object:', typeof JsBarcode !== 'undefined' ? JsBarcode : 'undefined');
    
    // Function to generate barcodes (can be called after library loads)
    const generateBarcodes = () => {
        if (horizontalBarcodeData !== 'N/A' && typeof JsBarcode !== 'undefined') {
            try {
                const barcodeElement = document.querySelector("#barcode-display");
                console.log('🔍 Horizontal barcode element:', barcodeElement);
                console.log('🔍 Element innerHTML before:', barcodeElement ? barcodeElement.innerHTML : 'null');
                
                JsBarcode("#barcode-display", horizontalBarcodeData, {
                    format: "CODE128",
                    width: 2,
                    height: 40,
                    displayValue: false,
                    margin: 2,
                    lineColor: "#000000",
                    background: "#ffffff"
                });
                
                console.log('🔍 Element innerHTML after:', barcodeElement ? barcodeElement.innerHTML : 'null');
                console.log('✅ Horizontal barcode generated successfully');
                
                // Force black color on all barcode elements
                const barcodeSvg = document.getElementById('barcode-display');
                if (barcodeSvg) {
                    console.log('🔍 SVG elements found:', barcodeSvg.querySelectorAll('rect, path').length);
                    barcodeSvg.querySelectorAll('rect').forEach((r, i) => { 
                        console.log(`🔍 Setting rect ${i} to black`);
                        r.setAttribute('fill', '#000000'); 
                        r.setAttribute('stroke', '#000000'); 
                    });
                    barcodeSvg.querySelectorAll('path').forEach((p, i) => { 
                        console.log(`🔍 Setting path ${i} to black`);
                        p.setAttribute('fill', '#000000'); 
                        p.setAttribute('stroke', '#000000'); 
                    });
                }
            } catch (e) {
                console.error('❌ Failed to generate horizontal barcode:', e);
            }
        } else {
            console.warn('⚠️ Skipping horizontal barcode generation:', 
                horizontalBarcodeData === 'N/A' ? 'No data' : 'JsBarcode not loaded');
        }
        
        // Generate vertical barcode visual using JsBarcode (will be rotated by CSS)
        console.log('🔍 Attempting to generate vertical barcode:', verticalBarcodeData);
        
        if (verticalBarcodeData !== '000000/00' && typeof JsBarcode !== 'undefined') {
            try {
                const verticalElement = document.querySelector("#vertical-barcode-display");
                console.log('🔍 Vertical barcode element:', verticalElement);
                
                JsBarcode("#vertical-barcode-display", verticalBarcodeData, {
                    format: "CODE128",
                    width: 1.5,
                    height: 35,
                    displayValue: false,
                    margin: 2,
                    lineColor: "#000000",
                    background: "#ffffff"
                });
                console.log('✅ Vertical barcode generated successfully');
                
                // Force black color on all vertical barcode elements
                const vbarcodeSvg = document.getElementById('vertical-barcode-display');
                if (vbarcodeSvg) {
                    vbarcodeSvg.querySelectorAll('rect').forEach(r => { 
                        r.setAttribute('fill', '#000000'); 
                        r.setAttribute('stroke', '#000000'); 
                    });
                    vbarcodeSvg.querySelectorAll('path').forEach(p => { 
                        p.setAttribute('fill', '#000000'); 
                        p.setAttribute('stroke', '#000000'); 
                    });
                }
            } catch (e) {
                console.error('❌ Failed to generate vertical barcode:', e);
            }
        } else {
            console.warn('⚠️ Skipping vertical barcode generation:', 
                verticalBarcodeData === '000000/00' ? 'Default value' : 'JsBarcode not loaded');
        }
    };
    
    // Try to generate immediately
    generateBarcodes();
    
    // If JsBarcode is not loaded, wait a bit and try again (for CDN fallback)
    if (typeof JsBarcode === 'undefined') {
        setTimeout(() => {
            console.log('🔍 Retry after 1s - JsBarcode available?', typeof JsBarcode !== 'undefined');
            generateBarcodes();
        }, 1000);
    }
}

function selectOrder(orderId) {
    // Find order by ID
    const order = allOrders.find(o => o.id === orderId);
    if (order) {
        // Populate search field
        document.getElementById('search-input').value = order.comanda_productie;
        
        // Display in search result
        displaySelectedOrder(order);
        
        // Highlight selected row
        document.querySelectorAll('#orders-table tr').forEach(row => {
            row.classList.remove('selected');
        });
        event.currentTarget.classList.add('selected');
        
        // Scroll to top
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }
}

function displaySelectedOrder(order) {
    selectedOrderData = order;
    
    const resultDiv = document.getElementById('search-result');
    const tbody = document.getElementById('selected-order-row');
    
    // Format date
    let dateStr = '-';
    if (order.data_livrare) {
        dateStr = order.data_livrare;
    }
    
    // Format created_at
    let createdStr = '-';
    if (order.created_at) {
        createdStr = order.created_at;
    }
    
    tbody.innerHTML = `
        <tr>
            <td>${order.id}</td>
            <td><strong>${order.comanda_productie}</strong></td>
            <td>${order.cod_articol || '-'}</td>
            <td>${order.descr_com_prod}</td>
            <td style="text-align: right; font-weight: 600;">${order.cantitate}</td>
            <td style="text-align: center;">${dateStr}</td>
            <td style="text-align: center;">${order.dimensiune || '-'}</td>
            <td>${order.com_achiz_client || '-'}</td>
            <td style="text-align: right;">${order.nr_linie_com_client || '-'}</td>
            <td>${order.customer_name || '-'}</td>
            <td>${order.customer_article_number || '-'}</td>
            <td>${order.open_for_order || '-'}</td>
            <td style="text-align: right;">${order.line_number || '-'}</td>
            <td style="text-align: center;">
                ${order.printed_labels == 1 ? '<span style="color: #28a745; font-weight: bold;">✓ Yes</span>' : '<span style="color: #dc3545;">✗ No</span>'}
            </td>
            <td style="font-size: 11px; color: #6c757d;">${createdStr}</td>
        </tr>
    `;
    
    resultDiv.style.display = 'block';
    document.getElementById('print-button').disabled = false;
}

function printLabels() {
    if (!selectedOrderData) {
        alert('Please select an order first');
        return;
    }
    
    const quantity = parseInt(document.getElementById('quantity-input').value);
    if (!quantity || quantity < 1) {
        alert('Please enter a valid quantity');
        return;
    }
    
    // Redirect to print module with order data
    const orderIds = [selectedOrderData.id];
    const url = `/print_module?order_ids=${orderIds.join(',')}&quantity=${quantity}`;
    window.location.href = url;
}
</script>
{% endblock %}