{% extends 'base.html.twig' %}

{% block title %}Tableau de bord — {{ app.user.nomClub }}{% endblock %}
{% block content %}

{# ══════════════════════════════════════════════════════════════
   Design inspiré du reçu de paiement PDF (CRED / LFM)
   Palette : navy #003189 · rouge #E3000F · or #F5B400 · vert reçu #1b5e20/#e8f5e9
   ══════════════════════════════════════════════════════════════ #}
<style>
.cdv2 {
    --navy: #003189;
    --navy-dark: #001d57;
    --navy-tint: #eaf0fb;
    --red: #E3000F;
    --red-tint: #fdecee;
    --gold: #F5B400;
    --gold-text: #8a6100;
    --gold-tint: #fff8e1;
    --green: #1b5e20;
    --green-tint: #e8f5e9;
    --gray-900: #1a1d29;
    --gray-600: #5b6472;
    --gray-400: #9aa3b2;
    --gray-100: #f7f8fa;
    --border: #e4e7ee;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--gray-900);
}

/* ── Bandeau d'en-tête ── */
.cdv2-banner.page-banner {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
    padding: 30px 0;
    border-radius: 0 0 14px 14px;
}
.cdv2-banner .page-title { color: #fff; font-weight: 800; letter-spacing: .01em; margin: 0; }
.cdv2-banner .page-sub { color: rgba(255,255,255,.72); margin: 4px 0 0; font-size: .92rem; }

/* ── KPI cards : liseré coloré + pastille + gros chiffre, comme "Montant réglé" ── */
.cdv2 .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.cdv2 .kpi-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.cdv2 .kpi-danger   { --accent: var(--red);   --accent-tint: var(--red-tint);   --accent-text: var(--red); }
.cdv2 .kpi-warning  { --accent: var(--gold);  --accent-tint: var(--gold-tint);  --accent-text: var(--gold-text); }
.cdv2 .kpi-alert    { --accent: var(--navy);  --accent-tint: var(--navy-tint);  --accent-text: var(--navy); }
.cdv2 .kpi-success  { --accent: var(--green); --accent-tint: var(--green-tint); --accent-text: var(--green); }
.cdv2 .kpi-icon {
    flex: none;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent-text);
    display: flex; align-items: center; justify-content: center;
}
.cdv2 .kpi-value {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--accent-text);
}
.cdv2 .kpi-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gray-600);
    margin-top: 3px;
}

/* ── Alerte suspension imminente ── */
.cdv2 .alert-suspension {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--red-tint);
    border: 1px solid #f6c6cc;
    border-left: 4px solid var(--red);
    color: #7a0812;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 22px;
    font-size: .92rem;
}
.cdv2 .alert-suspension svg { flex: none; color: var(--red); margin-top: 2px; }
.cdv2 .alert-suspension strong { color: var(--red); }

/* ── Carte principale ── */
.cdv2 .card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16,24,40,.05);
    overflow: hidden;
}
.cdv2 .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    background: var(--gray-100);
}
.cdv2 .card-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--navy);
    padding-left: 12px;
    border-left: 3px solid var(--navy);
}
.cdv2 .form-select {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: .85rem;
    color: var(--gray-900);
    background: #fff;
}
.cdv2 .form-select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-tint); }

/* ── Tableau ── */
.cdv2 .table-responsive { overflow-x: auto; }
.cdv2 .table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cdv2 .table thead th {
    background: var(--navy);
    color: #fff;
    text-transform: uppercase;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 11px 14px;
    text-align: left;
    white-space: nowrap;
}
.cdv2 .table thead th.col-check { width: 36px; }
.cdv2 .table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.cdv2 .table tbody tr:hover { background: var(--navy-tint); }
.cdv2 .table tbody tr.row-suspendu { background: var(--red-tint); }
.cdv2 .table tbody tr.row-suspendu:hover { background: #fbdde1; }

.cdv2 .dossier-num {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    background: var(--gray-100);
    color: var(--navy);
    font-weight: 700;
    font-size: .8rem;
    padding: 3px 8px;
    border-radius: 6px;
}
.cdv2 .personne-nom { font-weight: 700; color: var(--gray-900); }
.cdv2 .personne-meta { font-size: .76rem; color: var(--gray-600); margin-top: 1px; }
.cdv2 .motif-cell, .cdv2 .competition-cell { color: var(--gray-600); font-size: .85rem; max-width: 220px; }
.cdv2 .montant-cell strong { color: var(--navy); font-size: .98rem; }

/* ── Badges statut : reprend la pastille verte "✓ AMENDE RÉGLÉE" du PDF ── */
.cdv2 .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.cdv2 .badge-success { background: var(--green-tint); color: var(--green); }
.cdv2 .badge-danger  { background: var(--red-tint);   color: var(--red); }
.cdv2 .badge-warning { background: var(--gold-tint);  color: var(--gold-text); }
.cdv2 .badge-info    { background: var(--navy-tint);  color: var(--navy); }
.cdv2 .badge-pulse { animation: cdv2-pulse 1.6s infinite; }
@keyframes cdv2-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(227,0,15,.35); }
    50% { box-shadow: 0 0 0 5px rgba(227,0,15,0); }
}

.cdv2 .table-empty {
    text-align: center;
    padding: 52px 20px;
    color: var(--gray-600);
}
.cdv2 .table-empty svg { color: var(--green); margin-bottom: 10px; }

/* ── Boutons ── */
.cdv2 .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    font-weight: 700;
    font-size: .85rem;
    padding: 9px 16px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cdv2 .btn-sm { padding: 6px 12px; font-size: .78rem; }
.cdv2 .btn-primary { background: var(--navy); color: #fff; }
.cdv2 .btn-primary:hover { background: var(--navy-dark); }
.cdv2 .btn-outline { background: #fff; color: var(--navy); border-color: var(--border); }
.cdv2 .btn-outline:hover { background: var(--navy-tint); border-color: var(--navy); }
.cdv2 .btn-pay { background: var(--navy); color: #fff; font-weight: 800; padding: 11px 20px; }
.cdv2 .btn-pay:hover { background: var(--navy-dark); }
.cdv2 .btn-pay:disabled { opacity: .6; cursor: not-allowed; }

/* ── Barre de paiement groupé ── */
.cdv2 .payment-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--navy-tint);
    border-top: 1px solid var(--border);
    padding: 14px 22px;
}
.cdv2 .payment-bar-info { font-size: .9rem; color: var(--gray-900); }
.cdv2 .payment-bar-info strong { color: var(--navy); }

/* ── Modal Stripe : reprend le style "carte reçu" à fond gris clair ── */
.cdv2 .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(10, 15, 30, .55);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    padding: 16px;
}
.cdv2 .modal-box {
    background: #fff;
    border-radius: 14px;
    width: 100%; max-width: 460px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    overflow: hidden;
}
.cdv2 .modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
}
.cdv2 .modal-header h3 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--navy); }
.cdv2 .modal-close {
    background: none; border: none; font-size: 1.4rem; line-height: 1;
    color: var(--gray-400); cursor: pointer;
}
.cdv2 .modal-close:hover { color: var(--gray-900); }
.cdv2 .modal-body { padding: 22px; }
.cdv2 .payment-summary {
    background: var(--gray-100);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: .92rem;
    margin-bottom: 14px;
}
.cdv2 .payment-summary strong { color: var(--navy); font-size: 1.1rem; }
.cdv2 .stripe-badge-row {
    display: flex; align-items: center; gap: 6px;
    justify-content: center;
    color: var(--gray-600);
    font-size: .76rem;
    margin-bottom: 16px;
}
.cdv2 .stripe-badge-row svg { color: var(--green); }
.cdv2 .payment-message {
    background: var(--red-tint);
    color: var(--red);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: .82rem;
    margin-top: 12px;
}
.cdv2 .modal-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--border);
    background: var(--gray-100);
}
</style>
{% block header_banner %}
<div class="page-banner cdv2-banner">
    <div class="container">
        <h1 class="page-title">{{ app.user.nomClub }}</h1>
        <p class="page-sub">N° club {{ app.user.numeroClub }} · Saison 2025–2026</p>
    </div>
</div>
{% endblock %}



<div class="cdv2">

{# ── KPIs ── #}
<div class="kpi-grid">
    <div class="kpi-card kpi-danger">
        <div class="kpi-icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
        </div>
        <div class="kpi-body">
            <div class="kpi-value">{{ stats.impayees }}</div>
            <div class="kpi-label">Amendes impayées</div>
        </div>
    </div>
    <div class="kpi-card kpi-warning">
        <div class="kpi-icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
        </div>
        <div class="kpi-body">
            <div class="kpi-value">{{ stats.montantDu|number_format(2, ',', ' ') }} €</div>
            <div class="kpi-label">Montant total dû</div>
        </div>
    </div>
    <div class="kpi-card kpi-alert">
        <div class="kpi-icon">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
                                
        </div>
        <div class="kpi-body">
            <div class="kpi-value">{{ stats.suspendus }}</div>
            <div class="kpi-label">Personnes potentiellement suspendues</div>
        </div>
    </div>
    <div class="kpi-card kpi-success">
        <div class="kpi-icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="20 6 9 17 4 12"/> </svg>
        </div>
    </div>
</div>

{# ── Alerte suspension imminente ── #}
{% if amendesProcheSuspension|length > 0 %}
<div class="alert-suspension">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
    <div>
        <strong>Attention !</strong>
        {% for a in amendesProcheSuspension %}
            <strong>{{ a.nomPrenomPersonne }}</strong> sera potentiellement suspendu dans <strong>{{ a.joursRestants }} jours</strong> (dossier {{ a.numeroDossier }}).
        {% endfor %}
        Réglez ces amendes pour éviter une eventuelle suspension.
    </div>
</div>
{% endif %}

{# ── Tableau des amendes ── #}
<div class="card">
    <div class="card-header">
        <h2 class="card-title">Mes amendes</h2>
        <div class="card-actions">
            <div class="filter-group">
                <select id="filter-statut" class="form-select form-select-sm">
                    <option value="">Tous statuts</option>
                    <option value="impayé">Impayées</option>
                    <option value="en_cours">En cours</option>
                    <option value="payé">Payées</option>
                </select>
            </div>
        </div>
    </div>

    <form id="form-paiement" method="post">
    <div class="table-responsive">
        <table class="table" id="table-amendes">
            <thead>
                <tr>
                    <th class="col-check">
                        <input type="checkbox" id="select-all" aria-label="Tout sélectionner">
                    </th>
                    <th>N° dossier</th>
                    <th>Personne</th>
                    <th>Motif</th>
                    <th>Compétition</th>
                    <th>Date match</th>
                    <th>Limite J+15</th>
                    <th>Montant</th>
                    <th>Statut</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
            {% for amende in amendes %}
                <tr class="row-amende {% if amende.isSuspendu %}row-suspendu{% endif %}"
                    data-statut="{{ amende.statutPaiement }}">
                    <td>
                        {% if amende.statutPaiement != 'payé' %}
                        <input type="checkbox" name="amendes[]"
                               value="{{ amende.id }}"
                               class="check-amende"
                               data-montant="{{ amende.sommeTotale }}"
                               aria-label="Sélectionner dossier {{ amende.numeroDossier }}">
                        {% endif %}
                    </td>
                    <td>
                        <code class="dossier-num">{{ amende.numeroDossier }}</code>
                    </td>
                    <td>
                        <div class="personne-nom">{{ amende.nomPrenomPersonne }}</div>
                        <div class="personne-meta">{{ amende.role }} · {{ amende.libelleCategorie }}</div>
                    </td>
                    <td class="motif-cell">{{ amende.libelleMotif }}</td>
                    <td class="competition-cell">{{ amende.competition }}</td>
                    <td>{{ amende.dateMatch|date('d/m/Y') }}</td>
                    <td>
                        {% if amende.statutPaiement == 'payé' %}
                            <span class="badge badge-success">Réglé</span>
                        {% elseif amende.isSuspendu %}
                            <span class="badge badge-danger badge-pulse">
                                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
                                
                            </span>
                        {% else %}
                            {% set jours = amende.joursRestantsAvantSuspension %}
                            <span class="badge {% if jours <= 3 %}badge-warning{% else %}badge-info{% endif %}">
                                {{ amende.dateLimiteSuspension|date('d/m') }}
                                {% if jours <= 3 %}({{ jours }}j !){% endif %}
                            </span>
                        {% endif %}
                    </td>
                    <td class="montant-cell">
                        <strong>{{ amende.sommeTotale|number_format(2, ',', ' ') }} €</strong>
                    </td>
                    <td>
                        {% if amende.statutPaiement == 'payé' %}
                            <span class="badge badge-success">
                                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
                                Payé
                            </span>
                        {% elseif amende.statutPaiement == 'en_cours' %}
                            <span class="badge badge-info">En cours…</span>
                        {% else %}
                            <span class="badge badge-danger">Impayé</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if amende.statutPaiement != 'payé' %}
                            <button type="button" class="btn btn-primary btn-sm btn-payer-seul"
                                    data-amende-id="{{ amende.id }}"
                                    data-montant="{{ amende.sommeTotale }}">
                                Payer
                            </button>
                        {% else %}
                            <a href="{{ path('club_recu', {id: amende.id}) }}" class="btn btn-outline btn-sm">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                                Reçu
                            </a>
                        {% endif %}
                    </td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="10" class="table-empty">
                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
                        <p>Aucune amende — votre club est en règle !</p>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    {# ── Barre de paiement groupé ── #}
    <div class="payment-bar" id="payment-bar" style="display:none">
        <div class="payment-bar-info">
            <span id="nb-selected">0</span> amende(s) sélectionnée(s) ·
            Total : <strong id="total-selected">0,00 €</strong>
        </div>
        <button type="submit" class="btn btn-pay" id="btn-pay-group">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
            Payer la sélection
        </button>
    </div>
    </form>
</div>

{# ── Modal Stripe ── #}
<div class="modal-overlay" id="modal-stripe" role="dialog" aria-modal="true" aria-labelledby="modal-title" style="display:none">
    <div class="modal-box">
        <div class="modal-header">
            <h3 id="modal-title">Paiement sécurisé</h3>
            <button class="modal-close" id="modal-close" aria-label="Fermer">×</button>
        </div>
        <div class="modal-body">
            <div class="payment-summary" id="payment-summary"></div>
            <div class="stripe-badge-row">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                Paiement 100% sécurisé par Stripe
            </div>
            <div id="stripe-elements-container">
                <div id="payment-element"></div>
                <div id="payment-message" class="payment-message" style="display:none"></div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-outline" id="btn-cancel-payment">Annuler</button>
            <button class="btn btn-pay" id="btn-confirm-payment">
                Confirmer le paiement · <span id="montant-confirm">0,00 €</span>
            </button>
        </div>
    </div>
</div>

</div>{# /.cdv2 #}

{% endblock %}

{% block javascripts %}
<script src="https://js.stripe.com/v3/"></script>
<script>
const STRIPE_PUBLIC_KEY = '{{ stripe_public_key }}';
const CREATE_INTENT_URL = '{{ path("club_paiement_intent") }}';
const RETURN_URL = '{{ url("club_dashboard") }}';

const stripe = Stripe(STRIPE_PUBLIC_KEY, { locale: 'fr' });
let elements, paymentElement;
let selectedAmendeIds = [];

// Sélection multiple
document.getElementById('select-all').addEventListener('change', function() {
    document.querySelectorAll('.check-amende').forEach(cb => cb.checked = this.checked);
    updatePaymentBar();
});
document.querySelectorAll('.check-amende').forEach(cb => {
    cb.addEventListener('change', updatePaymentBar);
});

function updatePaymentBar() {
    const checked = document.querySelectorAll('.check-amende:checked');
    const bar = document.getElementById('payment-bar');
    if (checked.length > 0) {
        const total = Array.from(checked).reduce((s, cb) => s + parseFloat(cb.dataset.montant), 0);
        document.getElementById('nb-selected').textContent = checked.length;
        document.getElementById('total-selected').textContent = total.toFixed(2).replace('.', ',') + ' €';
        bar.style.display = 'flex';
    } else {
        bar.style.display = 'none';
    }
}

// Payer un seul
document.querySelectorAll('.btn-payer-seul').forEach(btn => {
    btn.addEventListener('click', function() {
        openPaymentModal([this.dataset.amendeId], parseFloat(this.dataset.montant));
    });
});

// Payer la sélection (groupé)
document.getElementById('form-paiement').addEventListener('submit', function(e) {
    e.preventDefault();
    const checked = document.querySelectorAll('.check-amende:checked');
    if (!checked.length) return;
    const ids = Array.from(checked).map(cb => cb.value);
    const total = Array.from(checked).reduce((s, cb) => s + parseFloat(cb.dataset.montant), 0);
    openPaymentModal(ids, total);
});

async function openPaymentModal(amendeIds, montant) {
    selectedAmendeIds = amendeIds;
    document.getElementById('montant-confirm').textContent = montant.toFixed(2).replace('.', ',') + ' €';
    document.getElementById('modal-stripe').style.display = 'flex';

    const resp = await fetch(CREATE_INTENT_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
        body: JSON.stringify({ amendeIds })
    });
    const data = await resp.json();
    if (data.error) { showPaymentError(data.error); return; }

    elements = stripe.elements({ clientSecret: data.clientSecret, appearance: {
        theme: 'stripe',
        variables: { colorPrimary: '#003189', borderRadius: '6px', fontFamily: '"Source Sans 3", sans-serif' }
    }});
    paymentElement = elements.create('payment');
    paymentElement.mount('#payment-element');

    document.getElementById('payment-summary').innerHTML =
        `<p>${amendeIds.length} amende(s) · <strong>${montant.toFixed(2).replace('.', ',')} €</strong></p>`;
}

document.getElementById('btn-confirm-payment').addEventListener('click', async function() {
    this.disabled = true;
    this.textContent = 'Traitement…';
    try {
        const { error } = await stripe.confirmPayment({
            elements,
            confirmParams: { return_url: RETURN_URL }
        });
        // Si confirmPayment réussit sans erreur immédiate, le navigateur est
        // redirigé vers RETURN_URL (comportement par défaut de Stripe.js) —
        // le code ci-dessous ne s'exécute alors jamais, ce qui est normal.
        if (error) {
            showPaymentError(error.message);
        }
    } catch (err) {
        // Filet de sécurité : toute erreur inattendue (réseau, exception JS,
        // PaymentIntent dans un état imprévu, etc.) ne doit jamais laisser
        // le bouton bloqué indéfiniment sur "Traitement…".
        console.error('confirmPayment error:', err);
        showPaymentError("Une erreur inattendue est survenue. Merci de réessayer.");
    } finally {
        this.disabled = false;
        this.textContent = 'Confirmer le paiement';
    }
});

function showPaymentError(msg) {
    const el = document.getElementById('payment-message');
    el.textContent = msg;
    el.style.display = 'block';
}

document.getElementById('modal-close').addEventListener('click', closeModal);
document.getElementById('btn-cancel-payment').addEventListener('click', closeModal);
document.getElementById('modal-stripe').addEventListener('click', function(e) {
    if (e.target === this) closeModal();
});
function closeModal() {
    document.getElementById('modal-stripe').style.display = 'none';
    if (paymentElement) paymentElement.destroy();
}

// Filtre par statut
document.getElementById('filter-statut').addEventListener('change', function() {
    document.querySelectorAll('.row-amende').forEach(tr => {
        tr.style.display = (!this.value || tr.dataset.statut === this.value) ? '' : 'none';
    });
});
</script>
{% endblock %}