{% extends "core/base.html" %}
{% load static %}

{% block title %}Barcode Center - SwiftPOS{% endblock %}
{% block topbar_title %}Barcode Center{% endblock %}

{% block content %}
<div class="container-fluid px-0">

    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
        <div>
            <h4 class="mb-1 fw-bold text-dark"><i class="fas fa-barcode me-2 text-primary"></i>Barcode Printing Center</h4>
            <div class="text-muted small">Easily generate and print thermal barcode labels for your physical inventory.</div>
        </div>
        <div class="d-flex gap-2">
            <a href="{% url 'sales:barcode_pos' %}" class="btn btn-outline-primary rounded-pill px-4 shadow-sm fw-medium d-flex align-items-center gap-2">
                <i class="fas fa-scanner"></i> Go to Barcode POS
            </a>
        </div>
    </div>

    <div class="card border-0 shadow-sm" style="border-radius: 16px;">
        <div class="card-body p-0">
            <div class="sp-table-container">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light text-muted small">
                        <tr>
                            <th class="ps-4">Product Name</th>
                            <th>SKU</th>
                            <th>Stock</th>
                            <th>Barcode Status</th>
                            <th class="text-end pe-4">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for product in products %}
                        <tr>
                            <td class="ps-4 fw-bold text-dark">{{ product.name }}</td>
                            <td class="text-muted small">{{ product.sku }}</td>
                            <td>
                                {% if product.stock_status == 'in_stock' %}
                                    <span class="badge bg-success bg-opacity-10 text-success rounded-pill px-3">{{ product.stock_quantity }} in stock</span>
                                {% else %}
                                    <span class="badge bg-danger bg-opacity-10 text-danger rounded-pill px-3">{{ product.stock_quantity }} {{ product.get_stock_status_display }}</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if product.barcode %}
                                    <span class="text-success small fw-bold"><i class="fas fa-check-circle me-1"></i> Ready ({{ product.barcode }})</span>
                                {% else %}
                                    <span class="text-muted small fst-italic">Will auto-generate on print</span>
                                {% endif %}
                            </td>
                            <td class="text-end pe-4">
                                <a href="{% url 'inventory:print_product_barcode' product.id %}" target="_blank" class="btn btn-primary btn-sm rounded shadow-sm fw-medium d-flex align-items-center justify-content-center gap-2 ms-auto" style="width: 120px;">
                                    <i class="fas fa-print"></i> Print Label
                                </a>
                            </td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="5" class="text-center py-5">
                                <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 64px; height: 64px;">
                                    <i class="fas fa-box-open fa-2x text-muted opacity-50"></i>
                                </div>
                                <h6 class="fw-bold text-dark mb-1">No Active Products Found</h6>
                                <p class="small text-muted mb-3">Add items to your inventory to generate barcodes.</p>
                                <a href="{% url 'inventory:add_product' %}" class="btn btn-primary btn-sm rounded-pill px-4 shadow-sm">Add First Product</a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
{% endblock %}