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

{% block title %}Personnes impayées — LFM{% endblock %}

{% block header_banner %}
<div class="page-banner cdv2-banner">
    <div class="container">
        <h1 class="page-title">Personnes impayées</h1>
        <p class="page-sub">Visibilité locale · tous clubs confondues</p>
    </div>
</div>
{% endblock %}

{% block content %}

<style>
.cdv2 {
    --navy: #003189;
    --navy-dark: #001d57;
    --navy-tint: #eaf0fb;
    --red: #E3000F;
    --red-tint: #fdecee;
    --green: #1b5e20;
    --green-tint: #e8f5e9;
    --gray-900: #1a1d29;
    --gray-600: #5b6472;
    --gray-100: #f7f8fa;
    --border: #e4e7ee;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--gray-900);
}

.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; }

/* ── Stat récap ── */
.cdv2 .stat-card {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--red);
    border-radius: 12px;
    padding: 18px 22px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    margin-bottom: 22px;
}
.cdv2 .stat-icon {
    flex: none;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--red-tint);
    color: var(--red);
    display: flex; align-items: center; justify-content: center;
}
.cdv2 .stat-value { font-size: 1.85rem; font-weight: 800; line-height: 1.1; color: var(--red); }
.cdv2 .stat-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--gray-600); margin-top: 3px;
}

/* ── Carte + tableau ── */
.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 {
    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 .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 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 .personne-nom { font-weight: 700; color: var(--gray-900); }

.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-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; }

/* ── Groupes par club ── */
.cdv2 .club-group { margin-bottom: 18px; }
.cdv2 .club-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border);
    background: var(--gray-100);
}
.cdv2 .club-group-title {
    margin: 0;
    font-size: .92rem;
    font-weight: 800;
    color: var(--navy);
}
.cdv2 .club-group-num {
    font-size: .78rem;
    font-weight: 400;
    color: var(--gray-600);
}
.cdv2 .club-group-count {
    background: var(--red-tint);
    color: var(--red);
    font-size: .72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
}
</style>

<div class="cdv2">

<div class="stat-card">
    <div class="stat-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="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
    </div>
    <div class="stat-body">
        <div class="stat-value">{{ total }}</div>
        <div class="stat-label">Personnes impayées</div>
    </div>
</div>

{% for groupe in clubs %}
<div class="card club-group">
    <div class="club-group-header">
        <h2 class="club-group-title">
            {% if groupe.club %}
                {{ groupe.club.nomClub }}
                <span class="club-group-num">N° {{ groupe.club.numeroClub }}</span>
            {% else %}
                Club non renseigné
            {% endif %}
        </h2>
        <span class="club-group-count">{{ groupe.personnes|length }} licencié(s) potentiellement suspendu(s)</span>
    </div>
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Personne</th>
                    <th>Date de l'infraction</th>
                    <th>Amende</th>
                    <th>Statut</th>
                </tr>
            </thead>
            <tbody>
            {% for personne in groupe.personnes %}
                <tr class="row-suspendu">
                    <td><div class="personne-nom">{{ personne.nom }}</div></td>
                    <td>{{ personne.dateInfraction|date('d/m/Y') }}</td>
                    <td>
                        {% if personne.amendePayee %}
                            <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>
                                Réglée
                            </span>
                        {% else %}
                            <span class="badge badge-danger">Impayée</span>
                        {% endif %}
                    </td>
                    <td>
                        <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>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% else %}
<div class="card">
    <div 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 personne potentiellement suspendue actuellement.</p>
    </div>
</div>
{% endfor %}

</div>{# /.cdv2 #}

{% endblock %}