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

{% block title %}Historique des Matchs - Arras 6{% endblock %}

{% block body %}
<div class="container py-4">
    
    {# --- EN-TÊTE --- #}
    <div class="text-center mb-5">
        <h1 class="fw-bold text-arras display-5">
            <i class="fas fa-history me-2"></i> Historique des Matchs
        </h1>
        
    </div>

    {# --- BARRE DE FILTRES (LA NOUVEAUTÉ !) --- #}
    <div class="card card-premium bg-white border-0 shadow-sm mb-5">
        <div class="card-body p-4">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label small fw-bold text-muted"><i class="fas fa-search me-1"></i> Rechercher un joueur</label>
                    <input type="text" id="filter-joueur" class="form-control form-control-lg border-0 bg-light" placeholder="">
                </div>
                <div class="col-md-4">
                    <label class="form-label small fw-bold text-muted"><i class="fas fa-filter me-1"></i> Type de match</label>
                    <select id="filter-type" class="form-select form-select-lg border-0 bg-light">
                        <option value="all">Tous les types</option>
                        <option value="simple">Simple</option>
                        <option value="double">Double</option>
                        <option value="mixte">Mixte</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label small fw-bold text-muted"><i class="fas fa-check-circle me-1"></i> Résultat</label>
                    <select id="filter-resultat" class="form-select form-select-lg border-0 bg-light">
                        <option value="all">Tous les résultats</option>
                        <option value="victoire">Victoire</option>
                        <option value="défaite">Défaite</option>
                    </select>
                </div>
            </div>
            
            {# Message dynamique si aucun résultat #}
            <div id="no-result-message" class="text-center mt-4 text-danger fw-bold" style="display: none;">
                <i class="fas fa-ghost fs-4 mb-2"></i><br>
                Oups... Aucun match ne correspond à cette recherche.
            </div>
        </div>
    </div>

    {# --- LISTE DES RENCONTRES --- #}
    {% for rencontre in rencontres %}
        
        {% if rencontre.matchDetails|length > 0 %}
            
            {% set scoreArras = 0 %}
            {% set scoreAdversaire = 0 %}
            {% set nomEquipeAdverse = 'Adversaire' %}

            {% for match in rencontre.matchDetails %}
                {% if match.resultat|lower == 'victoire' %}
                    {% set scoreArras = scoreArras + 1 %}
                {% elseif match.resultat|lower == 'défaite' %}
                    {% set scoreAdversaire = scoreAdversaire + 1 %}
                {% endif %}
                {% if loop.first and match.opponentTeam is not empty %}
                    {% set nomEquipeAdverse = match.opponentTeam %}
                {% endif %}
            {% endfor %}

            {# On ajoute la classe 'rencontre-card' pour que le script puisse la masquer si elle est vide #}
            <div class="card card-premium shadow-sm border-0 mb-5 overflow-hidden rencontre-card">
                
                {# En-tête de la journée stylisé #}
                <div class="card-header bg-white py-4 px-4 d-flex justify-content-between align-items-center border-bottom border-2">
                    <div>
                        <span class="badge bg-light text-dark border px-3 py-1 rounded-pill small me-2">
                            {{ rencontre.dateRencontre|date('d/m/Y') }} 
                            {% if rencontre.heure %} à {{ rencontre.heure|date('H\\hi') }}{% endif %}
                        </span>
                        <span class="fw-bold text-dark fs-5">
                            Arras 6 vs {{ nomEquipeAdverse }}
                        </span>
                    </div>
                    
                    <div class="d-flex align-items-center gap-3">
                        <span class="small fw-bold text-muted">{{ rencontre.matchDetails|length }} matchs</span>
                        {% if scoreArras > scoreAdversaire %}
                            <span class="badge bg-success fs-6 px-3 py-2 rounded-pill">V {{ scoreArras }}-{{ scoreAdversaire }}</span>
                        {% elseif scoreAdversaire > scoreArras %}
                            <span class="badge bg-danger fs-6 px-3 py-2 rounded-pill">D {{ scoreArras }}-{{ scoreAdversaire }}</span>
                        {% else %}
                            <span class="badge bg-secondary fs-6 px-3 py-2 rounded-pill">N {{ scoreArras }}-{{ scoreAdversaire }}</span>
                        {% endif %}
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 border-0">
                        <thead class="table-light small text-muted text-uppercase" style="font-size: 0.75rem;">
                            <tr>
                                <th class="ps-4 border-0 py-3" style="width: 120px;">Type</th>
                                <th class="border-0 py-3">Joueur(s) BCA</th>
                                <th class="border-0 py-3">Adversaire</th>
                                <th class="text-center border-0 py-3">Score par set</th>
                                <th class="text-center pe-4 border-0 py-3" style="width: 80px;">Bilan</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for match in rencontre.matchDetails %}
                                
                                {# PRÉPARATION DES DONNÉES POUR LE FILTRE #}
                                {% set playerName = match.joueur.prenom ~ ' ' ~ match.joueur.nom %}
                                {% set binomeName = match.binome ? match.binome : '' %}
                                {% set fullPlayers = (playerName ~ ' ' ~ binomeName)|lower %}

                                {# La ligne du tableau reçoit les "data-attributes" pour le JavaScript #}
                                <tr class="match-row" 
                                    data-joueurs="{{ fullPlayers }}" 
                                    data-type="{{ match.typeMatch|lower }}" 
                                    data-resultat="{{ match.resultat|lower }}">
                                    
                                    <td class="ps-4 fw-bold text-dark small">
                                        {% if match.typeMatch|lower == 'simple' %}
                                            <i class="fas fa-user text-muted me-2"></i>
                                        {% elseif match.typeMatch|lower == 'double' %}
                                            <i class="fas fa-user-friends text-muted me-2"></i>
                                        {% elseif match.typeMatch|lower == 'mixte' %}
                                            <i class="fas fa-venus-mars text-muted me-2"></i>
                                        {% endif %}
                                        {{ match.typeMatch|capitalize }}
                                    </td>
                                    
                                    <td>
                                        <div class="fw-bold text-arras">{{ match.joueur.prenom }} {{ match.joueur.nom|upper }}</div>
                                        {% if match.binome %}
                                            <div class="small text-muted fw-semibold">& {{ match.binome }}</div>
                                        {% endif %}
                                    </td>
                                    
                                    <td>
                                        <div class="fw-bold text-dark">{{ match.nomAdversaire|default('À définir') }}</div>
                                    </td>
                                    
                                    <td class="text-center fw-bold font-monospace {{ match.resultat|lower == 'victoire' ? 'text-success' : 'text-danger' }}" style="letter-spacing: 1px; font-size: 0.9rem;">
                                        {{ match.score|replace({' ': '  '}) }}
                                    </td>
                                    
                                    <td class="text-center pe-4">
                                        {% if match.resultat|lower == 'victoire' %}
                                            <span class="badge bg-success rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 25px; height: 25px;">V</span>
                                        {% else %}
                                            <span class="badge bg-danger rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 25px; height: 25px;">D</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endif %}
        
    {% else %}
        <div class="alert alert-light text-center py-5 text-muted border-0 shadow-sm rounded-4">
            <i class="fas fa-info-circle me-2 mb-3 fs-3"></i><br>
            Aucune rencontre enregistrée pour le moment.
        </div>
    {% endfor %}
</div>

{# --- LE SCRIPT MAGIQUE DE FILTRAGE --- #}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const inputJoueur = document.getElementById('filter-joueur');
        const selectType = document.getElementById('filter-type');
        const selectResultat = document.getElementById('filter-resultat');
        const rencontreCards = document.querySelectorAll('.rencontre-card');
        const noResultMessage = document.getElementById('no-result-message');

        function filterMatches() {
            // On récupère ce que l'utilisateur a tapé/choisi (en minuscules pour éviter la casse)
            const searchJoueur = inputJoueur.value.toLowerCase().trim();
            const searchType = selectType.value;
            const searchResultat = selectResultat.value;

            let totalVisibleCards = 0;

            // On boucle sur chaque journée d'interclub
            rencontreCards.forEach(card => {
                let hasVisibleRow = false;
                const rows = card.querySelectorAll('.match-row');

                // On boucle sur chaque match de cette journée
                rows.forEach(row => {
                    // On lit les étiquettes invisibles qu'on a mises en HTML
                    const rowJoueurs = row.getAttribute('data-joueurs');
                    const rowType = row.getAttribute('data-type');
                    const rowResultat = row.getAttribute('data-resultat');

                    // On vérifie si ça correspond aux filtres
                    const matchName = searchJoueur === '' || rowJoueurs.includes(searchJoueur);
                    const matchType = searchType === 'all' || rowType === searchType;
                    const matchResultat = searchResultat === 'all' || rowResultat === searchResultat;

                    // Si tout est bon, on affiche, sinon on masque
                    if (matchName && matchType && matchResultat) {
                        row.style.display = '';
                        hasVisibleRow = true;
                    } else {
                        row.style.display = 'none';
                    }
                });

                // Si toute la journée est vide (aucun match affiché), on masque la carte entière !
                if (hasVisibleRow) {
                    card.style.display = '';
                    totalVisibleCards++;
                } else {
                    card.style.display = 'none';
                }
            });

            // Afficher le message "Oups..." s'il n'y a plus aucun match du tout
            noResultMessage.style.display = (totalVisibleCards === 0) ? 'block' : 'none';
        }

        // On écoute dès que l'utilisateur tape ou change un menu déroulant
        inputJoueur.addEventListener('input', filterMatches);
        selectType.addEventListener('change', filterMatches);
        selectResultat.addEventListener('change', filterMatches);
    });
</script>

{% endblock %}