{% extends "base.html" %}

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

{% block content %}
<div class="page-header">
    <button class="btn btn-primary" onclick="openCreateSupplierModal()">
        <i class="material-icons">add</i> Nuovo Fornitore
    </button>
</div>

<div class="widget-card">
    <div class="widget-header">
        <h3 class="widget-title">Elenco Fornitori</h3>
    </div>
    <div class="widget-body">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Codice</th>
                    <th>Ragione Sociale</th>
                    <th>Città</th>
                    <th>Paese</th>
                    <th>Telefono</th>
                    <th>Termini Pagamento</th>
                    <th>Saldo</th>
                    <th>Azioni</th>
                </tr>
            </thead>
            <tbody>
                {% for supplier in suppliers %}
                <tr>
                    <td><strong>{{ supplier.code }}</strong></td>
                    <td>{{ supplier.name }}</td>
                    <td>{{ supplier.city }}</td>
                    <td>{{ supplier.country }}</td>
                    <td>{{ supplier.phone }}</td>
                    <td class="text-center">{{ supplier.payment_terms_days }} gg</td>
                    <td class="text-right {% if supplier.balance > 0 %}text-warning{% endif %}">
                        € {{ "%.2f"|format(supplier.balance) }}
                    </td>
                    <td>
                        <button class="btn-small btn-info" onclick="viewSupplier({{ supplier.id }})">
                            <i class="material-icons">visibility</i>
                        </button>
                        <button class="btn-small btn-warning" onclick="editSupplier({{ supplier.id }})">
                            <i class="material-icons">edit</i>
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div id="supplierModal" class="modal" onclick="closeModal(event)">
    <div class="modal-content" onclick="event.stopPropagation()">
        <div class="modal-header">
            <h2 id="modalTitle">Dettagli Fornitore</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 viewSupplier(supplierId) {
    fetch(`/api/suppliers/${supplierId}`)
        .then(r => r.json())
        .then(data => {
            document.getElementById('modalTitle').textContent = `Fornitore: ${data.name}`;
            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>Ragione Sociale</label>
                        <span>${data.name}</span>
                    </div>
                    <div class="detail-item">
                        <label>Email</label>
                        <span>${data.email}</span>
                    </div>
                    <div class="detail-item">
                        <label>Telefono</label>
                        <span>${data.phone}</span>
                    </div>
                    <div class="detail-item">
                        <label>Indirizzo</label>
                        <span>${data.address}</span>
                    </div>
                    <div class="detail-item">
                        <label>Città</label>
                        <span>${data.city}</span>
                    </div>
                    <div class="detail-item">
                        <label>Paese</label>
                        <span>${data.country}</span>
                    </div>
                    <div class="detail-item">
                        <label>Termini Pagamento</label>
                        <span>${data.payment_terms_days} giorni</span>
                    </div>
                    <div class="detail-item">
                        <label>Saldo Debito</label>
                        <span class="${data.balance > 0 ? 'text-warning' : ''}">€ ${data.balance.toFixed(2)}</span>
                    </div>
                </div>
            `;
            document.getElementById('supplierModal').classList.add('show');
        });
}

function editSupplier(supplierId) {
    alert('Modifica fornitore: ' + supplierId + ' (da implementare)');
}

function openCreateSupplierModal() {
    alert('Creazione nuovo fornitore (da implementare)');
}

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