{% extends "modern/base.html" %}

{% block title %}Print Label - Zebra Day{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Print Label</h1>
    <p class="page-subtitle">Send a label print request to a Zebra printer</p>
</div>

<form id="print-form" action="/_print_label" method="get">
    <div class="grid grid-2">
        <!-- Printer Selection -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">1. Select Printer</h3>
            </div>
            <div class="form-group">
                <label class="form-label required">Lab</label>
                <select id="lab-select" name="lab" class="form-control" onchange="updatePrinters()" required>
                    <option value="">Select a lab...</option>
                    {% for lab in labs %}
					<option value="{{ lab }}" {% if selected_lab == lab %}selected{% endif %}>{{ labs_meta.get(lab, {}).get("lab_display_name", lab) }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label class="form-label required">Printer</label>
                <select id="printer-select" name="printer" class="form-control" required>
                    <option value="">Select a printer...</option>
                </select>
            </div>
            <div class="form-group mb-0">
                <label class="form-label required">Label Template</label>
                <select name="label_zpl_style" class="form-control" required>
                    <option value="">Select a template...</option>
                    {% if user_templates %}
                    <optgroup label="User Templates">
                        {% for template in user_templates %}
                        <option value="{{ template }}" {% if selected_template == template %}selected{% endif %}>{{ template }}</option>
                        {% endfor %}
                    </optgroup>
                    {% endif %}
                    {% if package_templates %}
                    <optgroup label="Package Templates">
                        {% for template in package_templates %}
                        <option value="{{ template }}" {% if selected_template == template %}selected{% endif %}>{{ template }}</option>
                        {% endfor %}
                    </optgroup>
                    {% endif %}
                    {% if dynamodb_templates %}
                    <optgroup label="DynamoDB Templates">
                        {% for template in dynamodb_templates %}
                        <option value="{{ template }}" {% if selected_template == template %}selected{% endif %}>{{ template }}</option>
                        {% endfor %}
                    </optgroup>
                    {% endif %}
                </select>
            </div>
        </div>

        <!-- Label Data -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">2. Label Data</h3>
            </div>
            <div class="form-group">
                <label class="form-label">UID Barcode</label>
                <input type="text" name="uid_barcode" class="form-control" placeholder="Enter barcode value">
            </div>
            <div class="grid grid-2" style="gap: var(--spacing-md);">
                <div class="form-group">
                    <label class="form-label">Alt A</label>
                    <input type="text" name="alt_a" class="form-control" placeholder="Field A">
                </div>
                <div class="form-group">
                    <label class="form-label">Alt B</label>
                    <input type="text" name="alt_b" class="form-control" placeholder="Field B">
                </div>
                <div class="form-group">
                    <label class="form-label">Alt C</label>
                    <input type="text" name="alt_c" class="form-control" placeholder="Field C">
                </div>
                <div class="form-group">
                    <label class="form-label">Alt D</label>
                    <input type="text" name="alt_d" class="form-control" placeholder="Field D">
                </div>
                <div class="form-group">
                    <label class="form-label">Alt E</label>
                    <input type="text" name="alt_e" class="form-control" placeholder="Field E">
                </div>
                <div class="form-group mb-0">
                    <label class="form-label">Alt F</label>
                    <input type="text" name="alt_f" class="form-control" placeholder="Field F">
                </div>
            </div>
        </div>
    </div>

    <!-- Submit -->
    <div class="card mt-lg">
        <div class="d-flex" style="justify-content: space-between; align-items: center;">
            <a href="/" class="btn btn-outline">
                <i class="fas fa-arrow-left"></i> Cancel
            </a>
            <div class="d-flex" style="gap: var(--spacing-md);">
                <button type="button" class="btn btn-secondary btn-lg" onclick="downloadPNG()">
                    <i class="fas fa-download"></i> Download PNG
                </button>
                <button type="submit" class="btn btn-primary btn-lg" onclick="showLoading('Sending print request...')">
                    <i class="fas fa-print"></i> Print Label
                </button>
            </div>
        </div>
    </div>
</form>
{% endblock %}

{% block extra_scripts %}
<script>
    var labsDict = {{ labs_dict | safe }};
    var selectedPrinter = '{{ selected_printer | default("") }}';

    function updatePrinters() {
        var labSelect = document.getElementById('lab-select');
        var printerSelect = document.getElementById('printer-select');
        var lab = labSelect.value;

        printerSelect.innerHTML = '<option value="">Select a printer...</option>';

        if (lab && labsDict[lab] && labsDict[lab].printers) {
            // v2 schema: printers are nested under 'printers' key
            var printers = labsDict[lab].printers;
            for (var printerId in printers) {
                var printerInfo = printers[printerId];
                var option = document.createElement('option');
                option.value = printerId;
                // Display friendly name if available, otherwise use ID
                option.text = printerInfo.printer_name || printerId;
                if (printerId === selectedPrinter) {
                    option.selected = true;
                }
                printerSelect.appendChild(option);
            }
        }
    }

    // Initialize printers if lab is pre-selected
    document.addEventListener('DOMContentLoaded', function() {
        var labSelect = document.getElementById('lab-select');
        if (labSelect.value) {
            updatePrinters();
        }
    });

    async function downloadPNG() {
        var form = document.getElementById('print-form');
        var template = form.querySelector('select[name="label_zpl_style"]').value;

        if (!template) {
            showToast('error', 'Error', 'Please select a label template');
            return;
        }

        showLoading('Rendering PNG...');

        try {
            var response = await fetch('/api/v1/render/png', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    template: template,
                    uid_barcode: form.querySelector('input[name="uid_barcode"]').value || '',
                    alt_a: form.querySelector('input[name="alt_a"]').value || '',
                    alt_b: form.querySelector('input[name="alt_b"]').value || '',
                    alt_c: form.querySelector('input[name="alt_c"]').value || '',
                    alt_d: form.querySelector('input[name="alt_d"]').value || '',
                    alt_e: form.querySelector('input[name="alt_e"]').value || '',
                    alt_f: form.querySelector('input[name="alt_f"]').value || ''
                })
            });

            hideLoading();

            if (!response.ok) {
                var error = await response.json();
                showToast('error', 'Render Failed', error.detail || 'Unknown error');
                return;
            }

            // Download the PNG file
            var blob = await response.blob();
            var url = window.URL.createObjectURL(blob);
            var a = document.createElement('a');
            a.href = url;
            a.download = template + '_label.png';
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            a.remove();

            showToast('success', 'Success', 'PNG downloaded');
        } catch (e) {
            hideLoading();
            showToast('error', 'Error', 'Failed to render PNG: ' + e.message);
        }
    }
</script>
{% endblock %}