{% extends "base.html" %}
{% block title %}Clienti - Mago4 Demo{% endblock %}
{% block window_tabs %}<a href="/customers" class="window-tab active"><i class="material-icons">people</i> Clienti</a>{% endblock %}

{% block content %}
<div class="module-bar">
    <div class="module-title">Clienti</div>
    <div class="breadcrumb"><a href="/">Mago4</a><span class="sep">»</span><a href="/anagrafiche">Anagrafiche</a><span class="sep">»</span><span class="current">Clienti</span></div>
</div>
<div class="tab-strip">
    <a href="/anagrafiche">Anagrafiche</a>
    <a href="/customers" class="active">Clienti</a>
    <a href="/suppliers">Fornitori</a>
    <a href="/products">Articoli</a>
</div>

<div class="doc-toolbar">
    <button class="tb-btn" title="Nuovo" onclick="alert('Nuovo cliente (demo)')"><i class="material-icons">add_box</i></button>
    <button class="tb-btn" title="Cerca"><i class="material-icons">search</i></button>
    <div class="tb-sep"></div>
    <button class="tb-btn" title="Stampa"><i class="material-icons">print</i></button>
    <button class="tb-btn" title="Esporta"><i class="material-icons">file_download</i></button>
</div>

<div class="content-pad">
    <div class="panel">
        <div class="panel-header"><h3><i class="material-icons">people</i> Elenco Clienti</h3></div>
        <table class="data-table">
            <thead>
                <tr><th>Codice</th><th>Ragione Sociale</th><th>Partita IVA</th><th>Città</th><th>Paese</th><th>Pagamento</th><th class="text-right">Fido</th><th class="text-right">Saldo</th><th></th></tr>
            </thead>
            <tbody>
                {% for c in customers %}
                <tr>
                    <td class="text-bold mono">{{ c.code }}</td>
                    <td>{{ c.name }}</td>
                    <td class="mono">{{ c.vat_number or '—' }}</td>
                    <td>{{ c.city }}</td>
                    <td>{{ c.country }}</td>
                    <td>{{ c.payment_terms }}</td>
                    <td class="text-right">€ {{ "%.0f"|format(c.credit_limit) }}</td>
                    <td class="text-right {% if c.balance > 0 %}text-danger{% endif %}">€ {{ "%.2f"|format(c.balance) }}</td>
                    <td class="text-center"><button class="btn-icon-sm act-view" onclick="viewCustomer({{ c.id }})"><i class="material-icons">visibility</i></button></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div id="genericModal" class="modal" onclick="if(event.target.id==='genericModal')closeGenericModal()">
    <div class="modal-content">
        <div class="modal-header"><h2 id="gmTitle">Dettagli</h2><button class="modal-close" onclick="closeGenericModal()"><i class="material-icons">close</i></button></div>
        <div class="modal-body" id="gmBody"></div>
    </div>
</div>

<script>
function viewCustomer(id) {
    fetch(`/api/customers/${id}`).then(r=>r.json()).then(d=>{
        document.getElementById('gmTitle').textContent = 'Cliente: ' + d.name;
        document.getElementById('gmBody').innerHTML = `
        <div style="padding:16px">
          <div class="form-section-title">Dati Principali</div>
          <div class="form-grid-2">
            ${field('Codice', d.code)}${field('Ragione Sociale', d.name)}
            ${field('Partita IVA', d.vat_number || '—')}${field('Codice Fiscale', d.fiscal_code || '—')}
            ${field('Email', d.email)}${field('Telefono', d.phone)}
          </div>
          <div class="form-section-title">Indirizzo</div>
          <div class="form-grid-2">
            ${field('Indirizzo', d.address)}${field('Città', d.city)}
            ${field('Paese', d.country)}${field('Pagamento', d.payment_terms)}
          </div>
          <div class="form-section-title">Dati Commerciali</div>
          <div class="form-grid-2">
            ${field('Limite Credito', '€ ' + d.credit_limit.toFixed(2))}
            ${field('Saldo', '€ ' + d.balance.toFixed(2))}
          </div>
        </div>`;
        document.getElementById('genericModal').classList.add('show');
    });
}
</script>
{% endblock %}