{% extends "base.html" %}
{% block title %}Ordini Cliente - Mago4 Demo{% endblock %}
{% block window_tabs %}<a href="/sales-orders" class="window-tab active"><i class="material-icons">receipt_long</i> Ordini Cliente</a>{% endblock %}

{% block content %}
<div class="module-bar">
    <div class="module-title">Ordini Cliente</div>
    <div class="breadcrumb"><a href="/">Mago4</a><span class="sep">»</span><a href="/vendite">Vendite</a><span class="sep">»</span><span class="current">Ordini Cliente</span></div>
</div>
<div class="tab-strip">
    <a href="/sales-orders" class="active">Ordini Cliente</a>
    <a href="/vendite">Documenti Vendita</a>
</div>

<div class="doc-toolbar">
    <button class="tb-btn" title="Nuovo" onclick="alert('Nuovo ordine (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>
</div>

<div class="content-pad">
    {% if pending %}<div class="alert alert-info"><i class="material-icons">info</i> {{ pending|length }} ordine/i in sospeso</div>{% endif %}
    <div class="panel">
        <div class="panel-header"><h3><i class="material-icons">receipt_long</i> Elenco Ordini Cliente</h3></div>
        <table class="data-table">
            <thead><tr><th>Data</th><th>Numero</th><th>Cliente</th><th class="text-right">Importo</th><th>Consegna</th><th>Stato</th><th></th></tr></thead>
            <tbody>
                {% for o in orders %}
                <tr>
                    <td>{{ o.order_date.strftime("%d/%m/%Y") }}</td>
                    <td class="text-bold mono">{{ o.order_number }}</td>
                    <td>{{ o.customer_name }}</td>
                    <td class="text-right">€ {{ "%.2f"|format(o.total_amount) }}</td>
                    <td>{{ o.delivery_date.strftime("%d/%m/%Y") if o.delivery_date else '—' }}</td>
                    <td><span class="badge status-{{ o.status.value }}">{{ o.status.value }}</span></td>
                    <td class="text-center"><button class="btn-icon-sm act-view" onclick="viewOrder({{ o.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">Ordine</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 viewOrder(id) {
    fetch(`/api/sales-orders/${id}`).then(r=>r.json()).then(d=>{
        let rows = d.lines.map(l=>`<tr><td>${l.product_description} <span class="text-mute">(${l.product_code})</span></td>
            <td class="text-right">${l.quantity}</td><td class="text-right">€ ${l.unit_price.toFixed(2)}</td>
            <td class="text-right">€ ${l.total_amount.toFixed(2)}</td></tr>`).join('');
        openGenericModal('Ordine: ' + d.order_number, `
        <div style="padding:16px">
          <div class="form-grid-2">
            ${field('Numero Ordine', d.order_number)}${field('Data', fmtDate(d.order_date))}
            ${field('Cliente', d.customer_name)}${field('Stato', d.status)}
            ${field('Consegna Prevista', fmtDate(d.delivery_date))}${field('Totale', '€ ' + d.total_amount.toFixed(2))}
          </div>
          <div class="form-section-title">Righe Ordine</div>
          <table class="data-table-nested"><thead><tr><th>Articolo</th><th class="text-right">Q.tà</th><th class="text-right">Prezzo</th><th class="text-right">Totale</th></tr></thead><tbody>${rows}</tbody></table>
        </div>`);
    });
}
</script>
{% endblock %}