{% extends "layout.html" %}

{% block title %}Generate Barcodes - KCAP Demo Server{% endblock %}

{% block content %}
<div class="row mt-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h2>Generate Barcodes for Product: {{ product_id }}</h2>
                <a href="{{ url_for('admin.index') }}" class="btn btn-outline-secondary">Back to Products</a>
            </div>
            <div class="card-body">
                {% if not dependencies.qrcode or not dependencies.barcode or not dependencies.pillow %}
                <div class="alert alert-warning mb-4">
                    <h4 class="alert-heading">Missing Dependencies</h4>
                    <p>Some barcode generation features are unavailable because required packages are not installed:</p>
                    <ul>
                        {% if not dependencies.qrcode %}
                        <li><strong>QR Code:</strong> The 'qrcode' package is required for QR code generation</li>
                        {% endif %}
                        {% if not dependencies.barcode %}
                        <li><strong>Barcodes:</strong> The 'python-barcode' package is required for EAN-13 and Code 128 generation</li>
                        {% endif %}
                        {% if not dependencies.pillow %}
                        <li><strong>Image Processing:</strong> The 'Pillow' package is required for image processing</li>
                        {% endif %}
                    </ul>
                    <hr>
                    <p class="mb-0">To install the required dependencies, run: <code>pip install -r requirements.txt</code></p>
                </div>
                {% endif %}

                <div class="row">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h3>QR Code</h3>
                            </div>
                            <div class="card-body text-center">
                                <img src="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='qrcode') }}" alt="QR Code" class="img-fluid mb-3" style="max-width: 250px;">
                                <p class="text-muted">QR Code contains a link to the product AR info.</p>
                                <a href="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='qrcode') }}" class="btn btn-primary" download="product_{{ product_id }}_qrcode.png">Download QR Code</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h3>EAN-13 Barcode</h3>
                            </div>
                            <div class="card-body text-center">
                                <img src="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='ean13') }}" alt="EAN-13 Barcode" class="img-fluid mb-3" style="max-width: 250px;">
                                <p class="text-muted">Standard EAN-13 barcode format.</p>
                                <a href="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='ean13') }}" class="btn btn-primary" download="product_{{ product_id }}_ean13.png">Download EAN-13</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h3>Code 128 Barcode</h3>
                            </div>
                            <div class="card-body text-center">
                                <img src="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='code128') }}" alt="Code 128 Barcode" class="img-fluid mb-3" style="max-width: 250px;">
                                <p class="text-muted">High-density alphanumeric barcode.</p>
                                <a href="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='code128') }}" class="btn btn-primary" download="product_{{ product_id }}_code128.png">Download Code 128</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h3>Product Information</h3>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <p><strong>Product ID:</strong> {{ product_id }}</p>
                                        <p><strong>Price:</strong> {{ product.price }}</p>
                                    </div>
                                    <div class="col-md-4">
                                        <p><strong>AR Info URL:</strong> 
                                            <a href="{{ url_for('get_ar_info', barcode=product_id) }}" target="_blank">
                                                {{ url_for('get_ar_info', barcode=product_id, _external=True) }}
                                            </a>
                                        </p>
                                    </div>
                                    <div class="col-md-4">
                                        {% if product.image %}
                                        <img src="{{ product.image }}" alt="Product Image" class="img-thumbnail" style="max-height: 100px;">
                                        {% else %}
                                        <p>No product image available</p>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h3>Print All Codes</h3>
                            </div>
                            <div class="card-body">
                                <p>Use the button below to open a printable version of all barcodes for this product.</p>
                                <button class="btn btn-success" onclick="window.print()">Print Barcodes</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    @media print {
        .navbar, .card-header, .btn, .text-muted, .alert {
            display: none;
        }
        .card {
            border: none;
            margin-bottom: 1cm;
        }
        .card-body {
            text-align: center;
        }
        .row {
            display: block;
        }
        .col-md-4 {
            width: 100%;
            max-width: 100%;
            flex: 0 0 100%;
            page-break-after: always;
        }
    }
</style>
{% endblock %}