{% extends "base.html" %}

{% block head %}
<style>
#label-preview {
    background: #fafafa;
    position: relative;
    overflow: hidden;
}
</style>
{% endblock %}

{% block content %}
<div class="scan-container">
    <!-- Label Preview Card -->
    <div class="card scan-form-card" style="display: flex; justify-content: center; align-items: center; min-height: 400px;">
        <h3 style="position: absolute; top: 15px; left: 15px;">Label Preview</h3>
        <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 RROMANIA 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 for 9 rows (row 6 is double height) -->
                <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>
                <!-- Row 6 is double height for Description -->
                <div style="position: absolute; top: 224.91px; left: 0; right: 0; height: 1px; background: #999;"></div>
                <!-- Row 7 for Size -->
                <div style="position: absolute; top: 257.04px; left: 0; right: 0; height: 1px; background: #999;"></div>
                <!-- Row 8 for Article Code -->
                <div style="position: absolute; top: 289.17px; left: 0; right: 0; height: 1px; background: #999;"></div>
                <!-- Row 9 for Prod Order (final row) -->
                
                <!-- Vertical dividing line starting from row 3 to bottom at 40% width -->
                <div style="position: absolute; left: 90.96px; top: 64.26px; width: 1px; height: 257.04px; background: #999;"></div>
                
                
                
                <!-- Row 3 content: 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 content: 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 content: 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 content: Description (double height row) -->
                <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;">
                    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: 11px; font-weight: bold; color: #000; text-align: center; line-height: 1.2; padding: 2px; overflow: hidden; word-wrap: break-word;">
                    <!-- Description value will be populated here -->
                </div>
                
                <!-- Row 7 content: 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: 12px; font-weight: bold; color: #000;">
                    <!-- Size value will be populated here -->
                </div>
                
                <!-- Row 8 content: 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: 12px; font-weight: bold; color: #000;">
                    <!-- Article code value will be populated here -->
                </div>
                
                <!-- Row 9 content: Prod Order (final row) -->
                <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: 12px; font-weight: bold; color: #000;">
                    <!-- Prod order value 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: 50 px; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <!-- Code 128 Barcode representation -->
                <div id="barcode-display" style="width: 100%; height: 50px; background: linear-gradient(90deg, #000 1px, transparent 1px, transparent 2px, #000 2px, transparent 3px, #000 4px, transparent 5px, #000 6px, transparent 7px, #000 8px, transparent 9px, #000 10px, transparent 11px, #000 12px, transparent 13px); background-size: 15px 100%; background-repeat: repeat-x;">
                </div>
                <!-- 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>
        </div>
    </div>

    <!-- Data Preview Card -->
    <div class="card scan-table-card">
        <h3>Data Preview (Unprinted Orders)</h3>
        <button id="check-db-btn" class="btn btn-primary mb-3">Check Database</button>
        <div class="report-table-container">
            <table class="scan-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Comanda Productie</th>
                        <th>Cod Articol</th>
                        <th>Descr. Com. Prod</th>
                        <th>Cantitate</th>
                        <th>Data<br>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 loaded here via JavaScript -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
document.getElementById('check-db-btn').addEventListener('click', function() {
    fetch('/get_unprinted_orders')
        .then(response => response.json())
        .then(data => {
            const tbody = document.getElementById('unprinted-orders-table');
            tbody.innerHTML = '';
            data.forEach(order => {
                const tr = document.createElement('tr');
                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;">
                        ${order.data_livrare ? new Date(order.data_livrare).toLocaleDateString() : '-'}
                    </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 ? new Date(order.created_at).toLocaleString() : '-'}
                    </td>
                `;
                tbody.appendChild(tr);
            });
            
            // Update the label preview with customer name from first row
            if (data.length > 0) {
                const customerName = data[0].customer_name || 'N/A';
                document.getElementById('customer-name-row').textContent = customerName;
                
                // Update quantity ordered value
                const quantity = data[0].cantitate || '0';
                document.getElementById('quantity-ordered-value').textContent = quantity;
                
                // Update client order info (Com.Achiz.Client - Nr. Linie)
                const comAchizClient = data[0].com_achiz_client || '';
                const nrLinie = data[0].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 = data[0].data_livrare ? new Date(data[0].data_livrare).toLocaleDateString() : 'N/A';
                document.getElementById('delivery-date-value').textContent = deliveryDate;
                
                // Update size (using dimensiune column)
                const size = data[0].dimensiune || 'N/A';
                document.getElementById('size-value').textContent = size;
                
                // Update description (Descr. Com. Prod)
                const description = data[0].descr_com_prod || 'N/A';
                document.getElementById('description-value').textContent = description;
                
                // Update article code (using customer_article_number column)
                const articleCode = data[0].customer_article_number || 'N/A';
                document.getElementById('article-code-value').textContent = articleCode;
                
                // Update prod order (comanda_productie - cantitate)
                const comandaProductie = data[0].comanda_productie || '';
                const cantitate = data[0].cantitate || '';
                const prodOrder = comandaProductie && cantitate ? `${comandaProductie}-${cantitate}` : 'N/A';
                document.getElementById('prod-order-value').textContent = prodOrder;
                
                // Update barcode with the same prod order data
                document.getElementById('barcode-text').textContent = prodOrder;
            } else {
                document.getElementById('customer-name-row').textContent = 'No data 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';
            }
        })
        .catch(error => {
            console.error('Error fetching data:', error);
            document.getElementById('customer-name-row').textContent = 'Error loading data';
            document.getElementById('quantity-ordered-value').textContent = 'Error';
            document.getElementById('client-order-info').textContent = 'Error';
            document.getElementById('delivery-date-value').textContent = 'Error';
            document.getElementById('size-value').textContent = 'Error';
            document.getElementById('description-value').textContent = 'Error';
            document.getElementById('article-code-value').textContent = 'Error';
            document.getElementById('prod-order-value').textContent = 'Error';
            document.getElementById('barcode-text').textContent = 'Error';
        });
});
</script>
{% endblock %}