{% extends "base.html" %}

{% block title %}Ordini Vendita - Mago4 Demo{% endblock %}
{% block page_title %}Ordini Vendita{% endblock %}

{% block content %}
<div class="page-header">
    <button class="btn btn-primary" onclick="openCreateOrderModal()">
        <i class="material-icons">add</i> Nuovo Ordine
    </button>
    {% if pending %}
    <div class="alert alert-info">
        <i class="material-icons">info</i>
        {{ pending|length }} ordine/i in sospeso
    </div>
    {% endif %}
</div>

<div class="widget-card">
    <div class="widget-header">
        <h3 class="widget-title">Elenco Ordini Vendita</h3>
    </div>
    <div class="widget-body">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Data</th>
                    <th>Numero Ordine</th>
                    <th>Cliente</th>
                    <th>Importo Totale</th>
                    <th>Data Consegna</th>
                    <th>Stato</th>
                    <th>Azioni</th>
                </tr>
            </thead>
            <tbody>
                {% for order in orders %}
                <tr>
                    <td>{{ order.order_date.strftime("%d/%m/%Y") }}</td>
                    <td><strong>{{ order.order_number }}</strong></td>
                    <td>{{ order.customer_name }}</td>
                    <td class="text-right">€ {{ "%.2f"|format(order.total_amount) }}</td>
                    <td>
                        {% if order.delivery_date %}
                            {{ order.delivery_date.strftime("%d/%m/%Y") }}
                        {% else %}
                            —
                        {% endif %}
                    </td>
                    <td>
                        <span class="badge status-{{ order.status.value }}">{{ order.status.value }}</span>
                    </td>
                    <td>
                        <button class="btn-small btn-info" onclick="viewOrder({{ order.id }})">
                            <i class="material-icons">visibility</i>
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div id="orderModal" class="modal" onclick="closeModal(event)">
    <div class="modal-content" onclick="event.stopPropagation()">
        <div class="modal-header">
            <h2 id="modalTitle">Dettagli Ordine Vendita</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 viewOrder(orderId) {
    fetch(`/api/sales-orders/${orderId}`)
        .then(r => r.json())
        .then(data => {
            const deliveryDate = data.delivery_date ? new Date(data.delivery_date).toLocaleDateString('it-IT') : '—';
            const orderDate = new Date(data.order_date).toLocaleDateString('it-IT');

            let linesHtml = '<table class="data-table-nested"><thead><tr><th>Articolo</th><th>Quantità</th><th>Prezzo Unit.</th><th>Totale</th></tr></thead><tbody>';
            data.lines.forEach(line => {
                linesHtml += `<tr>
                    <td>${line.product_description} (${line.product_code})</td>
                    <td class="text-right">${line.quantity}</td>
                    <td class="text-right">€ ${line.unit_price.toFixed(2)}</td>
                    <td class="text-right">€ ${line.total_amount.toFixed(2)}</td>
                </tr>`;
            });
            linesHtml += '</tbody></table>';

            document.getElementById('modalTitle').textContent = `Ordine: ${data.order_number}`;
            document.getElementById('modalBody').innerHTML = `
                <div class="detail-grid">
                    <div class="detail-item">
                        <label>Numero Ordine</label>
                        <span>${data.order_number}</span>
                    </div>
                    <div class="detail-item">
                        <label>Data Ordine</label>
                        <span>${orderDate}</span>
                    </div>
                    <div class="detail-item">
                        <label>Cliente</label>
                        <span>${data.customer_name}</span>
                    </div>
                    <div class="detail-item">
                        <label>Stato</label>
                        <span class="badge status-${data.status}">
                            ${data.status.replace('_', ' ').toUpperCase()}
                        </span>
                    </div>
                    <div class="detail-item">
                        <label>Data Consegna Prevista</label>
                        <span>${deliveryDate}</span>
                    </div>
                    <div class="detail-item">
                        <label>Importo Totale</label>
                        <span class="text-success" style="font-size: 1.2em; font-weight: bold;">€ ${data.total_amount.toFixed(2)}</span>
                    </div>
                </div>
                <div style="margin-top: 20px;">
                    <h4>Righe Ordine</h4>
                    ${linesHtml}
                </div>
            `;
            document.getElementById('orderModal').classList.add('show');
        });
}

function openCreateOrderModal() {
    alert('Creazione nuovo ordine (da implementare)');
}

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