{% extends 'base.html.twig' %}
{% block title %}Potentiels suspendus & Impayés — Tous clubs{% endblock %}

{% block header_banner %}
<div class="page-banner page-banner-public">
    <div class="container">
        <h1 class="page-title">Potentiels suspendus &amp; Impayés</h1>
        <p class="page-sub">Vue inter-clubs — mise à jour en temps réel</p>
    </div>
</div>
{% endblock %}

{% block content %}

<div class="tabs-nav" role="tablist">
    <button class="tab-btn active" data-target="tab-suspendus" role="tab" aria-selected="true">
        <svg width="15" height="15" 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>
        Suspendus <span class="tab-count tab-count-danger">{{ suspendus|length }}</span>
    </button>
    <button class="tab-btn" data-target="tab-impayes" role="tab" aria-selected="false">
        <svg width="15" height="15" 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>
        Impayés <span class="tab-count tab-count-warning">{{ impayes|length }}</span>
    </button>
</div>

{# ── TAB SUSPENDUS ── #}
<div class="tab-panel active" id="tab-suspendus" role="tabpanel">
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Personnes suspendues (paiement en attente)</h2>
            <div class="card-filters">
                <input type="search" id="search-suspendus" placeholder="Rechercher un nom, un club…" class="form-input form-input-sm">
                <select id="filter-club-suspendus" class="form-select form-select-sm">
                    <option value="">Tous les clubs</option>
                    {% for club in clubsList %}
                        <option value="{{ club.id }}">{{ club.nomClub }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table" id="table-suspendus">
                <thead>
                    <tr>
                        <th>Personne</th>
                        <th>Club</th>
                        <th>Rôle</th>
                        <th>Compétition</th>
                        <th>N° dossier</th>
                        <th>Date match</th>
                        <th>Suspendu depuis</th>
                        <th>Montant dû</th>
                    </tr>
                </thead>
                <tbody>
                {% for amende in suspendus %}
                    <tr data-club="{{ amende.club.id }}"
                        data-search="{{ amende.nomPrenomPersonne|lower }} {{ amende.club.nomClub|lower }}">
                        <td>
                            <div class="personne-nom">{{ amende.nomPrenomPersonne }}</div>
                            <div class="personne-meta">{{ amende.libelleCategorie }}</div>
                        </td>
                        <td>
                            <span class="club-badge">{{ amende.club.nomClub }}</span>
                        </td>
                        <td>{{ amende.role }}</td>
                        <td class="text-truncate" style="max-width:160px">{{ amende.competition }}</td>
                        <td><code class="dossier-num">{{ amende.numeroDossier }}</code></td>
                        <td>{{ amende.dateMatch|date('d/m/Y') }}</td>
                        <td>
                            <span class="badge badge-danger">
                                Depuis le {{ amende.dateLimiteSuspension|date('d/m/Y') }}
                            </span>
                        </td>
                        <td><strong>{{ amende.sommeTotale|number_format(2, ',', ' ') }} €</strong></td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="8" 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>Aucun joueur potentiellement suspendu actuellement</p>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{# ── TAB IMPAYÉS ── #}
<div class="tab-panel" id="tab-impayes" role="tabpanel" style="display:none">
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Amendes impayées — tous clubs</h2>
            <div class="card-filters">
                <input type="search" id="search-impayes" placeholder="Rechercher…" class="form-input form-input-sm">
                <select id="filter-club-impayes" class="form-select form-select-sm">
                    <option value="">Tous les clubs</option>
                    {% for club in clubsList %}
                        <option value="{{ club.id }}">{{ club.nomClub }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table" id="table-impayes">
                <thead>
                    <tr>
                        <th>N° dossier</th>
                        <th>Club</th>
                        <th>Personne</th>
                        <th>Motif</th>
                        <th>Date match</th>
                        <th>Limite J+15</th>
                        <th>Statut</th>
                    </tr>
                </thead>
                <tbody>
                {% for amende in impayes %}
                    <tr data-club="{{ amende.club.id }}"
                        data-search="{{ amende.nomPrenomPersonne|lower }} {{ amende.club.nomClub|lower }}"
                        {% if amende.isSuspendu %}class="row-suspendu"{% endif %}>
                        <td><code class="dossier-num">{{ amende.numeroDossier }}</code></td>
                        <td>{{ amende.club.nomClub }}</td>
                        <td>
                            <div class="personne-nom">{{ amende.nomPrenomPersonne }}</div>
                            <div class="personne-meta">{{ amende.role }}</div>
                        </td>
                        <td class="text-truncate motif-cell">{{ amende.libelleMotif }}</td>
                        <td>{{ amende.dateMatch|date('d/m/Y') }}</td>
                        <td>
                            {% if amende.isSuspendu %}
                                <span class="badge badge-danger badge-pulse">Suspendu</span>
                            {% else %}
                                {% set j = amende.joursRestantsAvantSuspension %}
                                <span class="badge {% if j <= 3 %}badge-warning{% else %}badge-info{% endif %}">
                                    {{ amende.dateLimiteSuspension|date('d/m/Y') }}{% if j <= 3 %} ({{ j }}j){% endif %}
                                </span>
                            {% endif %}
                        </td>
                        <td><span class="badge badge-danger">Impayé</span></td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="7" class="table-empty">
                            <p>Aucune amende impayée</p>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% endblock %}

{% block javascripts %}
<script>
// Tabs
document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.tab-btn').forEach(b => { b.classList.remove('active'); b.setAttribute('aria-selected','false'); });
        document.querySelectorAll('.tab-panel').forEach(p => p.style.display = 'none');
        this.classList.add('active');
        this.setAttribute('aria-selected','true');
        document.getElementById(this.dataset.target).style.display = 'block';
    });
});

// Filtres recherche + club
function setupFilter(searchId, filterId, tableId) {
    const search = document.getElementById(searchId);
    const filter = document.getElementById(filterId);
    function applyFilter() {
        const q = search.value.toLowerCase();
        const clubId = filter.value;
        document.querySelectorAll('#' + tableId + ' tbody tr[data-search]').forEach(tr => {
            const matchSearch = !q || tr.dataset.search.includes(q);
            const matchClub = !clubId || tr.dataset.club === clubId;
            tr.style.display = (matchSearch && matchClub) ? '' : 'none';
        });
    }
    search.addEventListener('input', applyFilter);
    filter.addEventListener('change', applyFilter);
}
setupFilter('search-suspendus', 'filter-club-suspendus', 'table-suspendus');
setupFilter('search-impayes', 'filter-club-impayes', 'table-impayes');
</script>
{% endblock %}