{% extends "base.html" %}

{% block content %}
<div class="container mt-5">
    <div class="row">
        <div class="col-md-6 mx-auto">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-barcode me-2"></i>Barcode Printing Test
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="locationCode" class="form-label">Location Code:</label>
                        <input type="text" class="form-control" id="locationCode" value="LOC-001" placeholder="Enter location code">
                    </div>
                    
                    <button type="button" class="btn btn-success w-100" onclick="testPrintBarcode()">
                        <i class="fas fa-qrcode me-2"></i>Test Barcode Printing
                    </button>
                    
                    <hr>
                    
                    <h6>Generated Barcode Preview:</h6>
                    <div id="barcode" style="text-align: center; margin: 20px 0;"></div>
                    
                    <div id="status" class="alert alert-info mt-3" style="display: none;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Barcode Preview Modal -->
<div class="modal fade" id="barcodeModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-secondary text-white">
                <h5 class="modal-title">
                    <i class="fas fa-barcode me-2"></i>Barcode Preview
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <p class="fw-bold mb-3" id="barcodeLocationCode">LOC-001</p>
                <svg id="modalBarcode"></svg>
                <p class="text-muted mt-3 small">Scan this barcode to identify the location</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" onclick="testPrintFromModal()">
                    <i class="fas fa-print me-2"></i>Print
                </button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>

<script>
function testPrintBarcode() {
    const locationCode = document.getElementById('locationCode').value.trim();
    
    if (!locationCode) {
        showStatus('Please enter a location code', 'error');
        return;
    }
    
    try {
        showStatus('Generating barcode for: ' + locationCode, 'info');
        
        // Clear previous barcode
        document.getElementById('barcode').innerHTML = '';
        
        // Generate barcode in preview
        JsBarcode("#barcode", locationCode, {
            format: "CODE128",
            width: 2,
            height: 100,
            displayValue: true,
            margin: 10
        });
        
        // Also generate in modal
        document.getElementById('modalBarcode').innerHTML = '';
        document.getElementById('barcodeLocationCode').textContent = locationCode;
        
        JsBarcode("#modalBarcode", locationCode, {
            format: "CODE128",
            width: 2,
            height: 100,
            displayValue: true,
            margin: 10
        });
        
        showStatus('✓ Barcode generated successfully! Click "Test Barcode Printing" button to open preview modal.', 'success');
        
    } catch (error) {
        showStatus('Error: ' + error.message, 'error');
        console.error('Barcode generation error:', error);
    }
}

function testPrintFromModal() {
    const locationCode = document.getElementById('barcodeLocationCode').textContent;
    showStatus('Print dialog would open here for: ' + locationCode, 'info');
    
    // Open browser print dialog
    const printWindow = window.open('', '', 'height=400,width=600');
    const barcodeSvg = document.getElementById('modalBarcode').innerHTML;
    
    printWindow.document.write('<html><head><title>Print Location Barcode</title>');
    printWindow.document.write('<style>');
    printWindow.document.write('body { font-family: Arial, sans-serif; text-align: center; padding: 20px; }');
    printWindow.document.write('h2 { margin-bottom: 30px; }');
    printWindow.document.write('svg { max-width: 100%; height: auto; margin: 20px 0; }');
    printWindow.document.write('</style></head><body>');
    printWindow.document.write('<h2>Location: ' + locationCode + '</h2>');
    printWindow.document.write('<svg id="barcode">' + barcodeSvg + '</svg>');
    printWindow.document.write('<p style="margin-top: 40px; font-size: 14px; color: #666;">');
    printWindow.document.write('Printed on: ' + new Date().toLocaleString());
    printWindow.document.write('</p></body></html>');
    printWindow.document.close();
    
    setTimeout(function() {
        printWindow.print();
    }, 250);
}

function showStatus(message, type) {
    const statusDiv = document.getElementById('status');
    statusDiv.className = 'alert alert-' + (type === 'error' ? 'danger' : type === 'success' ? 'success' : 'info');
    statusDiv.textContent = message;
    statusDiv.style.display = 'block';
}

// Show modal on button click (after testing)
document.addEventListener('DOMContentLoaded', function() {
    // Test automatically generate a barcode on page load
    document.getElementById('locationCode').addEventListener('change', function() {
        testPrintBarcode();
    });
});
</script>
{% endblock %}