{% extends "base.html" %}

{% block title %}Magazzino - Mago4 Demo{% endblock %}
{% block page_title %}Magazzino{% endblock %}

{% block content %}
<div class="page-header">
    {% if low_stock %}
    <div class="alert alert-danger" style="flex: 1;">
        <i class="material-icons">error</i>
        <strong>Attenzione!</strong> {{ low_stock|length }} articolo/i in sottosorta
    </div>
    {% endif %}
</div>

<!-- Summary Stats -->
<div class="widget-row" style="margin-bottom: 20px;">
    <div class="widget-card stat-card" style="border-left-color: var(--color-blue)">
        <div class="widget-header">
            <h3 class="widget-title">Articoli in Catalogo</h3>
        </div>
        <div class="widget-body stat-body">
            <div class="stat-value">{{ products|length }}</div>
        </div>
    </div>

    <div class="widget-card stat-card" style="border-left-color: var(--color-red)">
        <div class="widget-header">
            <h3 class="widget-title">Articoli in Sottosorta</h3>
        </div>
        <div class="widget-body stat-body">
            <div class="stat-icon" style="color: var(--color-red)">
                <i class="material-icons">warning</i>
            </div>
            <div class="stat-value">{{ low_stock|length }}</div>
        </div>
    </div>
</div>

<!-- Low Stock Alert -->
{% if low_stock %}
<div class="widget-card">
    <div class="widget-header">
        <h3 class="widget-title">
            <i class="material-icons">warning</i> Articoli Sotto Soglia Riordino
        </h3>
    </div>
    <div class="widget-body">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Codice</th>
                    <th>Descrizione</th>
                    <th>Giacenza</th>
                    <th>Soglia Riordino</th>
                    <th>Scostamento</th>
                    <th>Azioni</th>
                </tr>
            </thead>
            <tbody>
                {% for product in low_stock %}
                <tr class="highlight-danger">
                    <td><strong>{{ product.code }}</strong></td>
                    <td>{{ product.description }}</td>
                    <td class="text-danger text-bold">{{ product.quantity_in_stock }}</td>
                    <td class="text-right">{{ product.reorder_level }}</td>
                    <td class="text-right text-danger">
                        -{{ product.reorder_level - product.quantity_in_stock }} unità
                    </td>
                    <td>
                        <button class="btn-small btn-primary" onclick="createPOForProduct({{ product.id }})">
                            <i class="material-icons">add_shopping_cart</i>
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

<!-- All Products -->
<div class="widget-card">
    <div class="widget-header">
        <h3 class="widget-title">Inventario Completo</h3>
    </div>
    <div class="widget-body">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Codice</th>
                    <th>Descrizione</th>
                    <th>Categoria</th>
                    <th>Giacenza</th>
                    <th>Soglia Riordino</th>
                    <th>Prezzo Unit.</th>
                    <th>Valore Magazzino</th>
                    <th>Stato</th>
                </tr>
            </thead>
            <tbody>
                {% for product in products %}
                <tr class="{% if product.quantity_in_stock <= product.reorder_level %}low-stock{% endif %}">
                    <td><strong>{{ product.code }}</strong></td>
                    <td>{{ product.description }}</td>
                    <td>{{ product.category }}</td>
                    <td class="text-right {% if product.quantity_in_stock <= product.reorder_level %}text-danger text-bold{% endif %}">
                        {{ product.quantity_in_stock }}
                    </td>
                    <td class="text-right">{{ product.reorder_level }}</td>
                    <td class="text-right">€ {{ "%.2f"|format(product.unit_price) }}</td>
                    <td class="text-right text-bold">
                        € {{ "%.2f"|format(product.quantity_in_stock * product.unit_price) }}
                    </td>
                    <td>
                        {% if product.quantity_in_stock <= product.reorder_level %}
                        <span class="badge badge-danger">
                            <i class="material-icons">warning</i> SOTTOSORTA
                        </span>
                        {% elif product.quantity_in_stock <= product.reorder_level + 20 %}
                        <span class="badge badge-warning">
                            <i class="material-icons">info</i> PROSSIMA SOGLIA
                        </span>
                        {% else %}
                        <span class="badge badge-success">
                            <i class="material-icons">check</i> OK
                        </span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script>
function createPOForProduct(productId) {
    alert('Creazione ordine di acquisto per articolo #' + productId + ' (da implementare)');
}
</script>
{% endblock %}