{% extends "base.html" %}
{% block content %}
<div class="card">
    <div class="card-header">
        <h2 class="card-title">📋 Gestion des Devis</h2>
        <button onclick="openModal('addDevisModal')" class="btn btn-primary">
            ➕ Nouveau Devis
        </button>
    </div>

    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>N° Devis</th>
                    <th>Client</th>
                    <th>Date</th>
                    <th>Montant HT</th>
                    <th>TVA</th>
                    <th>Montant TTC</th>
                    <th>Statut</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for d in devis %}
                <tr>
                    <td><strong>{{ d.numero }}</strong></td>
                    <td>{{ d.client.nom }}</td>
                    <td>{{ d.date_creation.strftime('%d/%m/%Y') }}</td>
                    <td>{{ "%.2f"|format(d.montant_ht) }} €</td>
                    <td>{{ d.tva }}%</td>
                    <td><strong>{{ "%.2f"|format(d.montant_ttc) }} €</strong></td>
                    <td><span style="background: #fef3c7; padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.85rem;">{{ d.statut }}</span></td>
                    <td>
                        <a href="{{ url_for('generer_pdf', type='devis', id=d.id) }}" class="btn btn-secondary" style="padding: 0.5rem 1rem; margin-right: 0.5rem;">
                            📄 PDF
                        </a>
                        <button onclick="sendEmail('devis', {{ d.id }})" class="btn btn-success" style="padding: 0.5rem 1rem;">
                            📧 Envoyer
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Modal Ajouter Devis -->
<div id="addDevisModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Nouveau Devis</h3>
            <span class="close" onclick="closeModal('addDevisModal')">&times;</span>
        </div>
        <form method="POST" action="{{ url_for('add_devis') }}">
            <div class="form-group">
                <label>Client *</label>
                <select name="client_id" required>
                    <option value="">Sélectionner un client</option>
                    {% for client in clients %}
                    <option value="{{ client.id }}">{{ client.nom }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label>Description</label>
                <textarea name="description" rows="3"></textarea>
            </div>
            <div class="form-group">
                <label>Date de validité *</label>
                <input type="date" name="date_validite" required>
            </div>
            <div class="form-group">
                <label>Montant HT *</label>
                <input type="number" step="0.01" name="montant_ht" id="montant_ht" required oninput="calculateTTC()">
            </div>
            <div class="form-group">
                <label>TVA (%) *</label>
                <select name="tva" id="tva" onchange="calculateTTC()">
                    <option value="0">0%</option>
                    <option value="5.5">5.5%</option>
                    <option value="10">10%</option>
                    <option value="20" selected>20%</option>
                </select>
            </div>
            <div class="form-group">
                <label>Montant TTC</label>
                <input type="number" step="0.01" id="montant_ttc" readonly style="background: #f1f5f9;">
            </div>
            <input type="hidden" name="lignes" value="[]">
            <button type="submit" class="btn btn-primary" style="width: 100%;">
                Créer le devis
            </button>
        </form>
    </div>
</div>

<script>
function calculateTTC() {
    const ht = parseFloat(document.getElementById('montant_ht').value) || 0;
    const tva = parseFloat(document.getElementById('tva').value) || 0;
    const ttc = ht * (1 + tva/100);
    document.getElementById('montant_ttc').value = ttc.toFixed(2);
}

function sendEmail(type, id) {
    if(confirm('Envoyer ce ' + type + ' par email ?')) {
        fetch(`/envoyer_email/${type}/${id}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(response => {
            if(response.ok) {
                alert('Email envoyé avec succès');
                location.reload();
            } else {
                alert('Erreur lors de l\'envoi');
            }
        });
    }
}
</script>
{% endblock %}