{% extends "base.html" %}

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

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

<div class="widget-card">
    <div class="widget-header">
        <h3 class="widget-title">Elenco Clienti</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>Limite Credito</th>
                    <th>Saldo</th>
                    <th>Azioni</th>
                </tr>
            </thead>
            <tbody>
                {% for customer in customers %}
                <tr>
                    <td><strong>{{ customer.code }}</strong></td>
                    <td>{{ customer.name }}</td>
                    <td>{{ customer.city }}</td>
                    <td>{{ customer.country }}</td>
                    <td>{{ customer.phone }}</td>
                    <td class="text-right">€ {{ "%.2f"|format(customer.credit_limit) }}</td>
                    <td class="text-right {% if customer.balance > 0 %}text-danger{% endif %}">
                        € {{ "%.2f"|format(customer.balance) }}
                    </td>
                    <td>
                        <button class="btn-small btn-info" onclick="viewCustomer({{ customer.id }})">
                            <i class="material-icons">visibility</i>
                        </button>
                        <button class="btn-small btn-warning" onclick="editCustomer({{ customer.id }})">
                            <i class="material-icons">edit</i>
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Modal Detail -->
<div id="customerModal" class="modal" onclick="closeModal(event)">
    <div class="modal-content" onclick="event.stopPropagation()">
        <div class="modal-header">
            <h2 id="modalTitle">Dettagli Cliente</h2>
            <button class="btn-close" onclick="closeModal()">
                <i class="material-icons">close</i>
            </button>
        </div>
        <div class="modal-body" id="modalBody">
            <!-- Content loaded via JS -->
        </div>
    </div>
</div>

<script>
function viewCustomer(customerId) {
    fetch(`/api/customers/${customerId}`)
        .then(r => r.json())
        .then(data => {
            document.getElementById('modalTitle').textContent = `Cliente: ${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>Limite Credito</label>
                        <span>€ ${data.credit_limit.toFixed(2)}</span>
                    </div>
                    <div class="detail-item">
                        <label>Saldo</label>
                        <span class="${data.balance > 0 ? 'text-danger' : ''}">${data.balance > 0 ? '€ ' : ''}${Math.abs(data.balance).toFixed(2)}</span>
                    </div>
                </div>
            `;
            document.getElementById('customerModal').classList.add('show');
        });
}

function editCustomer(customerId) {
    alert('Modifica cliente: ' + customerId + ' (da implementare)');
}

function openCreateCustomerModal() {
    alert('Creazione nuovo cliente (da implementare)');
}

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