{% extends "base.html" %}
{% block title %}{{ invoice.doc_no }} - Mago4 Demo{% endblock %}
{% block window_tabs %}
<a href="/invoices" class="window-tab"><i class="material-icons">description</i> Documenti Vendita</a>
<a href="/invoices/{{ invoice.id }}" class="window-tab active"><i class="material-icons">request_quote</i> {{ invoice.doc_no }}</a>
{% endblock %}

{% block content %}
<div class="module-bar">
    <div class="module-title">{{ doc_type_label(invoice.doc_type) }} — {{ invoice.doc_no }}</div>
    <div class="breadcrumb"><a href="/">Mago4</a><span class="sep">»</span><a href="/vendite">Vendite</a><span class="sep">»</span><a href="/invoices">Documenti Vendita</a><span class="sep">»</span><span class="current">{{ invoice.doc_no }}</span></div>
</div>

<!-- Toolbar documento -->
<div class="doc-toolbar">
    <button class="tb-btn" title="Primo"><i class="material-icons">first_page</i></button>
    <button class="tb-btn" title="Precedente"><i class="material-icons">chevron_left</i></button>
    <button class="tb-btn" title="Successivo"><i class="material-icons">chevron_right</i></button>
    <button class="tb-btn" title="Ultimo"><i class="material-icons">last_page</i></button>
    <div class="tb-sep"></div>
    <button class="tb-btn" title="Nuovo"><i class="material-icons">note_add</i></button>
    <button class="tb-btn" title="Modifica"><i class="material-icons">edit</i></button>
    <button class="tb-btn" title="Salva"><i class="material-icons">save</i></button>
    <button class="tb-btn" title="Elimina"><i class="material-icons">delete</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="Invia email"><i class="material-icons">email</i></button>
    <button class="tb-btn" title="Esporta XML (FatturaPA)"><i class="material-icons">file_download</i></button>
    <div class="tb-sep"></div>
    <a class="tb-btn" href="/invoices" title="Chiudi"><i class="material-icons">logout</i></a>
</div>

<!-- Intestazione documento -->
<div style="background:#fff;border-bottom:1px solid var(--border);padding:14px 20px;">
    <div class="form-grid-2" style="margin-bottom:0;">
        <div>
            <div class="field-row"><label>Numero</label><div class="field-value text-bold">{{ invoice.doc_no }}</div></div>
            <div class="field-row"><label>Del</label><div class="field-value">{{ invoice.doc_date.strftime("%d/%m/%Y") }}</div></div>
            <div class="field-row"><label>Registrato il</label><div class="field-value">{{ invoice.posting_date.strftime("%d/%m/%Y") }}</div></div>
        </div>
        <div>
            <div class="field-row"><label>Cliente</label><div class="field-value">{{ invoice.customer_name }}</div></div>
            <div class="field-row"><label>Partita IVA</label><div class="field-value mono">{{ invoice.customer_vat or '—' }}</div></div>
            <div class="field-row"><label>Stato</label><div class="field-value"><span class="badge status-{{ invoice.status.value }}">{{ doc_status_label(invoice.status) }}</span></div></div>
        </div>
    </div>
</div>

<!-- Form con tab laterali -->
<div class="doc-form">
    <div class="doc-form-tabs">
        <div class="doc-form-tab active" onclick="showTab(this,'tab-main')"><i class="material-icons">article</i> Dati Principali</div>
        <div class="doc-form-tab" onclick="showTab(this,'tab-lines')"><i class="material-icons">list</i> Righe Documento</div>
        <div class="doc-form-tab" onclick="showTab(this,'tab-pay')"><i class="material-icons">payments</i> Dati Pagamento</div>
        <div class="doc-form-tab" onclick="showTab(this,'tab-notes')"><i class="material-icons">notes</i> Note</div>
    </div>

    <div class="doc-form-content">
        <!-- TAB: Dati principali -->
        <div id="tab-main">
            <div class="form-section-title">Dati Principali</div>
            <div class="form-grid-2">
                <div class="field-row"><label>Tipo Documento</label><div class="field-value">{{ doc_type_label(invoice.doc_type) }}</div></div>
                <div class="field-row"><label>Valuta</label><div class="field-value">{{ invoice.currency }}</div></div>
                <div class="field-row"><label>Listino</label><div class="field-value">{{ invoice.price_list }}</div></div>
                <div class="field-row"><label>Agente</label><div class="field-value">{{ invoice.salesperson or '—' }}</div></div>
                <div class="field-row"><label>Nostro Rif.</label><div class="field-value">{{ invoice.our_reference or '—' }}</div></div>
                <div class="field-row"><label>Vostro Rif.</label><div class="field-value">{{ invoice.your_reference or '—' }}</div></div>
            </div>
            <div class="form-section-title">Stato Elaborazione</div>
            <div class="form-grid-2">
                <div class="field-row"><label>Stampato</label><div class="field-value">{{ 'Sì' if invoice.printed else 'No' }}</div></div>
                <div class="field-row"><label>Emesso</label><div class="field-value">{{ 'Sì' if invoice.issued else 'No' }}</div></div>
                <div class="field-row"><label>Scaricato a Magazzino</label><div class="field-value">{{ 'Sì' if invoice.posted_to_inventory else 'No' }}</div></div>
            </div>
        </div>

        <!-- TAB: Righe -->
        <div id="tab-lines" style="display:none;">
            <div class="form-section-title">Righe Documento</div>
            <table class="data-table-nested">
                <thead><tr><th>#</th><th>Articolo</th><th>Descrizione</th><th class="text-center">UM</th><th class="text-right">Q.tà</th><th class="text-right">Val. Unit.</th><th class="text-right">Sconto</th><th class="text-right">Prezzo Netto</th><th class="text-center">IVA</th><th class="text-right">Imponibile</th></tr></thead>
                <tbody>
                    {% for l in invoice.lines %}
                    <tr>
                        <td>{{ l.line_no }}</td>
                        <td class="mono text-bold">{{ l.item_code }}</td>
                        <td>{{ l.description }}</td>
                        <td class="text-center">{{ l.uom }}</td>
                        <td class="text-right">{{ "%.2f"|format(l.quantity) }}</td>
                        <td class="text-right">€ {{ "%.2f"|format(l.unit_value) }}</td>
                        <td class="text-right">{{ "%.0f"|format(l.discount_pct) }}%</td>
                        <td class="text-right">€ {{ "%.2f"|format(l.net_price) }}</td>
                        <td class="text-center">{{ "%.0f"|format(l.tax_rate) }}%</td>
                        <td class="text-right text-bold">€ {{ "%.2f"|format(l.taxable_amount) }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- TAB: Pagamento -->
        <div id="tab-pay" style="display:none;">
            <div class="form-section-title">Dati di Pagamento</div>
            <div class="form-grid-2">
                <div class="field-row"><label>Condizione</label><div class="field-value">{{ invoice.payment_terms }}</div></div>
                <div class="field-row"><label>Totale Documento</label><div class="field-value text-bold">€ {{ "%.2f"|format(invoice.total) }}</div></div>
            </div>
            <div class="form-section-title">Riepilogo IVA</div>
            <table class="data-table-nested">
                <thead><tr><th>Aliquota</th><th class="text-right">Imponibile</th><th class="text-right">Imposta</th></tr></thead>
                <tbody>
                    <tr><td>22%</td><td class="text-right">€ {{ "%.2f"|format(invoice.taxable_total) }}</td><td class="text-right">€ {{ "%.2f"|format(invoice.tax_total) }}</td></tr>
                </tbody>
            </table>
        </div>

        <!-- TAB: Note -->
        <div id="tab-notes" style="display:none;">
            <div class="form-section-title">Note</div>
            <div class="field-value" style="min-height:80px;align-items:flex-start;">{{ invoice.notes or 'Nessuna nota.' }}</div>
        </div>
    </div>
</div>

<!-- Totali -->
<div class="totals-box">
    <div class="t-item"><div class="t-label">Totale Imponibile</div><div class="t-value">€ {{ "%.2f"|format(invoice.taxable_total) }}</div></div>
    <div class="t-item"><div class="t-label">Totale IVA</div><div class="t-value">€ {{ "%.2f"|format(invoice.tax_total) }}</div></div>
    <div class="t-item grand"><div class="t-label">TOTALE DOCUMENTO</div><div class="t-value">€ {{ "%.2f"|format(invoice.total) }}</div></div>
</div>

<script>
function showTab(el, id) {
    document.querySelectorAll('.doc-form-tab').forEach(t => t.classList.remove('active'));
    el.classList.add('active');
    ['tab-main','tab-lines','tab-pay','tab-notes'].forEach(t =>
        document.getElementById(t).style.display = (t === id ? 'block' : 'none'));
}
</script>
{% endblock %}