{% extends "layout.html" %}

{% block title %}All Barcodes - {{ tenant.name }} - KCAP Demo Server{% endblock %}

{% block extra_css %}
<style>
    /* Screen styles */
    @media screen {
        .barcode-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            padding: 20px 0;
        }

        .barcode-item {
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            background: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .barcode-item img {
            max-width: 100%;
            height: auto;
            margin: 10px 0;
        }

        .barcode-item .product-id {
            font-weight: bold;
            font-size: 1.1em;
            margin-bottom: 10px;
            color: #333;
        }

        .print-buttons {
            margin-bottom: 20px;
        }
    }

    /* Print styles */
    @media print {
        /* Hide everything except barcodes */
        nav, .navbar, .print-buttons, .alert, .btn {
            display: none !important;
        }

        body {
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        /* Grid layout for print */
        .barcode-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding: 10px;
            page-break-inside: avoid;
        }

        .barcode-item {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
            page-break-inside: avoid;
            background: white;
        }

        .barcode-item img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 5px auto;
        }

        .barcode-item .product-id {
            font-weight: bold;
            font-size: 0.9em;
            margin-bottom: 5px;
            color: #000;
        }

        /* Page breaks */
        @page {
            margin: 0.5cm;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="row mt-4">
    <div class="col-md-12">
        <div class="alert alert-info">
            <strong>Current Tenant:</strong> {{ tenant.name }} (ID: {{ tenant.id }})
            <div class="mt-2">
                <a href="{{ url_for('tenant_index', tenant_id=tenant.id) }}" class="btn btn-sm btn-secondary">Back to Dashboard</a>
            </div>
        </div>

        <div class="print-buttons d-flex justify-content-between align-items-center mb-4">
            <h1>All Product Barcodes</h1>
            <button onclick="window.print()" class="btn btn-primary">
                <i class="bi bi-printer"></i> Print Barcodes
            </button>
        </div>

        {% if products %}
        <div class="barcode-grid">
            {% for product_id, product_data in products.items() %}
            <div class="barcode-item">
                <div class="product-id">{{ product_id }}</div>
                <img src="/{{ tenant.id }}/barcodes/{{ product_id }}_{{ barcode_type }}.png"
                     alt="Barcode for {{ product_id }}"
                     onerror="this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'200\' height=\'100\'%3E%3Crect width=\'200\' height=\'100\' fill=\'%23f0f0f0\'/%3E%3Ctext x=\'50%25\' y=\'50%25\' dominant-baseline=\'middle\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'12\' fill=\'%23999\'%3EBarcode unavailable%3C/text%3E%3C/svg%3E';">
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="alert alert-info">
            No products available to generate barcodes.
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Optional: Automatically print when page loads if requested via URL parameter
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('autoprint') === 'true') {
        window.onload = function() {
            setTimeout(function() {
                window.print();
            }, 500);
        };
    }
</script>
{% endblock %}