{% extends "base.html" %}
{% block content %}
<div class="card">
    <div class="card-header">
        <h2 class="card-title">💰 Gestion des Factures</h2>
        <button onclick="openModal('addFactureModal')" class="btn btn-primary">
            ➕ Nouvelle Facture
        </button>
    </div>
    
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>N° Facture</th>
                    <th>Client</th>
                    <th>Date</th>
                    <th>Échéance</th>
                    <th>Montant TTC</th>
                    <th>Statut</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for f in factures %}
                <tr>
                    <td><strong>{{ f.numero }}</strong></td>
                    <td>{{ f.client.nom }}</td>
                    <td>{{ f.date_creation.strftime('%d/%m/%Y') }}</td>
                    <td>{{ f.date_echeance.strftime('%d/%m/%Y') }}</td>
                    <td><strong>{{ "%.2f"|format(f.montant_ttc) }} €</strong></td>
                    <td>
                        {% if f.statut == 'Payée' %}
                        <span style="background: #d1fae5; color: #065f46; padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.85rem;">✓ {{ f.statut }}</span>
                        {% else %}
                        <span style="background: #fee2e2; color: #991b1b; padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.85rem;">⚠ {{ f.statut }}</span>
                        {% endif %}
                    </td>
                    <td>
                        <a href="{{ url_for('generer_pdf', type='facture', id=f.id) }}" class="btn btn-secondary" style="padding: 0.5rem 1rem; margin-right: 0.5rem;">
                            📄 PDF
                        </a>
                        <button onclick="sendEmail('facture', {{ f.id }})" class="btn btn-success" style="padding: 0.5rem 1rem; margin-right: 0.5rem;">
                            📧 Envoyer
                        </button>
                        {% if f.statut != 'Payée' %}
                        <button onclick="sendRelance({{ f.id }})" class="btn btn-danger" style="padding: 0.5rem 1rem;">
                            🔔 Relance
                        </button>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Modal Ajouter Facture -->
<div id="addFactureModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Nouvelle Facture</h3>
            <span class="close" onclick="closeModal('addFactureModal')">&times;</span>
        </div>
        <form method="POST" action="{{ url_for('add_facture') }}">
            <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 d'échéance *</label>
                <input type="date" name="date_echeance" required>
            </div>
            <div class="form-group">
                <label>Montant HT *</label>
                <input type="number" step="0.01" name="montant_ht" id="facture_montant_ht" required oninput="calculateFactureTTC()">
            </div>
            <div class="form-group">
                <label>TVA (%) *</label>
                <select name="tva" id="facture_tva" onchange="calculateFactureTTC()">
                    <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="facture_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 la facture
            </button>
        </form>
    </div>
</div>

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

function sendRelance(id) {
    if(confirm('Envoyer une relance pour cette facture ?')) {
        fetch(`/relance/${id}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(response => {
            if(response.ok) {
                alert('Relance envoyée avec succès');
                location.reload();
            } else {
                alert('Erreur lors de l\'envoi');
            }
        });
    }
}
</script>
{% endblock %}