{% extends "base.html" %}

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

{% block content %}
<div class="page-header">
    <button class="btn btn-primary" onclick="openCreateProductModal()">
        <i class="material-icons">add</i> Nuovo Articolo
    </button>
    {% if low_stock %}
    <div class="alert alert-warning">
        <i class="material-icons">warning</i>
        {{ low_stock|length }} articolo/i sotto la soglia di riordino
    </div>
    {% endif %}
</div>

<div class="widget-card">
    <div class="widget-header">
        <h3 class="widget-title">Catalogo Articoli</h3>
    </div>
    <div class="widget-body">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Codice</th>
                    <th>Descrizione</th>
                    <th>Categoria</th>
                    <th>Prezzo Unitario</th>
                    <th>Giacenza</th>
                    <th>Soglia Riordino</th>
                    <th>Fornitore</th>
                    <th>Azioni</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">€ {{ "%.2f"|format(product.unit_price) }}</td>
                    <td class="text-right {% if product.quantity_in_stock <= product.reorder_level %}text-danger{% endif %}">
                        {{ product.quantity_in_stock }}
                        {% if product.quantity_in_stock <= product.reorder_level %}
                        <i class="material-icons small-icon">warning</i>
                        {% endif %}
                    </td>
                    <td class="text-right">{{ product.reorder_level }}</td>
                    <td>
                        {% if product.supplier_id %}
                            Fornitore #{{ product.supplier_id }}
                        {% else %}
                            —
                        {% endif %}
                    </td>
                    <td>
                        <button class="btn-small btn-info" onclick="viewProduct({{ product.id }})">
                            <i class="material-icons">visibility</i>
                        </button>
                        <button class="btn-small btn-warning" onclick="editProduct({{ product.id }})">
                            <i class="material-icons">edit</i>
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div id="productModal" class="modal" onclick="closeModal(event)">
    <div class="modal-content" onclick="event.stopPropagation()">
        <div class="modal-header">
            <h2 id="modalTitle">Dettagli Articolo</h2>
            <button class="btn-close" onclick="closeModal()">
                <i class="material-icons">close</i>
            </button>
        </div>
        <div class="modal-body" id="modalBody">
        </div>
    </div>
</div>

<script>
function viewProduct(productId) {
    fetch(`/api/products/${productId}`)
        .then(r => r.json())
        .then(data => {
            const isLowStock = data.quantity_in_stock <= data.reorder_level;
            document.getElementById('modalTitle').textContent = `Articolo: ${data.code}`;
            document.getElementById('modalBody').innerHTML = `
                <div class="detail-grid">
                    <div class="detail-item">
                        <label>Codice</label>
                        <span>${data.code}</span>
                    </div>
                    <div class="detail-item">
                        <label>Descrizione</label>
                        <span>${data.description}</span>
                    </div>
                    <div class="detail-item">
                        <label>Categoria</label>
                        <span>${data.category}</span>
                    </div>
                    <div class="detail-item">
                        <label>Prezzo Unitario</label>
                        <span>€ ${data.unit_price.toFixed(2)}</span>
                    </div>
                    <div class="detail-item">
                        <label>Giacenza Attuale</label>
                        <span class="${isLowStock ? 'text-danger' : ''}">
                            ${data.quantity_in_stock} ${isLowStock ? '⚠️ SOTTOSORTA' : ''}
                        </span>
                    </div>
                    <div class="detail-item">
                        <label>Soglia Riordino</label>
                        <span>${data.reorder_level}</span>
                    </div>
                    <div class="detail-item">
                        <label>Fornitore</label>
                        <span>${data.supplier_id ? 'Fornitore #' + data.supplier_id : '—'}</span>
                    </div>
                </div>
            `;
            document.getElementById('productModal').classList.add('show');
        });
}

function editProduct(productId) {
    alert('Modifica articolo: ' + productId + ' (da implementare)');
}

function openCreateProductModal() {
    alert('Creazione nuovo articolo (da implementare)');
}

function closeModal(event) {
    if (event && event.target.id !== 'productModal') return;
    document.getElementById('productModal').classList.remove('show');
}
</script>
{% endblock %}