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

{% block title %}Notre Équipe - Arras 6{% endblock %}

{% block body %}
<div class="container py-5">
    
    {# --- EN-TÊTE --- #}
    <div class="text-center mb-5">
        <span class="badge bg-info text-dark mb-3 px-3 py-2 rounded-pill fs-6 fw-bold shadow-sm">Effectif 2025-2026</span>
        <h1 class="fw-bold text-arras display-5">
            <i class="fas fa-users me-2"></i> Notre Équipe
        </h1>
        <p class="text-muted fs-5">Découvrez les joueurs et joueuses qui défendent les couleurs d'Arras 6 cette saison.</p>
    </div>

    {# --- GRILLE DES JOUEURS --- #}
    <div class="row g-4 justify-content-center">
        {% for joueur in joueurs %}
            
            {# --- 🧠 CALCUL DES STATISTIQUES (INCLUANT LES BINÔMES) --- #}
            {% set totalMatchs = 0 %}
            {% set victoires = 0 %}
            {% set defaites = 0 %}
            
            {% for match in tousLesMatchs %}
                
                {# 1. Est-il le Joueur principal ? #}
                {% set isJoueur1 = (match.joueur and match.joueur.id == joueur.id) %}
                
                {# 2. Est-il le Binôme ? (On cherche son nom ou prénom dans le texte du binôme) #}
                {% set isBinome = false %}
                {% if match.binome %}
                    {% if (joueur.nom|lower in match.binome|lower) or (joueur.prenom|lower in match.binome|lower) %}
                        {% set isBinome = true %}
                    {% endif %}
                {% endif %}

                {# 3. Si c'est lui (Joueur 1 OU Binôme), on ajoute le match à SES statistiques ! #}
                {% if isJoueur1 or isBinome %}
                    {% set totalMatchs = totalMatchs + 1 %}
                    
                    {% if match.resultat|lower == 'victoire' %}
                        {% set victoires = victoires + 1 %}
                    {% elseif match.resultat|lower == 'défaite' %}
                        {% set defaites = defaites + 1 %}
                    {% endif %}
                {% endif %}
                
            {% endfor %}
            
            {# Calcul du ratio de victoire #}
            {% set ratio = totalMatchs > 0 ? (victoires / totalMatchs * 100)|round : 0 %}

            <div class="col-md-6 col-lg-4 d-flex">
                <div class="card card-premium w-100 text-center border-0 overflow-hidden d-flex flex-column">
                    
                    {# Haut de la carte coloré avec le bleu du club #}
                    <div class="bca-bg-dark py-4 text-white position-relative d-flex flex-column align-items-center">
                        
                        {# 📸 AFFICHAGE DE LA PHOTO (Chemin corrigé avec img/joueurs/) #}
                        {% if joueur.photo %}
                            <img src="{{ asset('uploads/joueurs/' ~ joueur.photo) }}" alt="{{ joueur.prenom }} {{ joueur.nom }}" class="rounded-circle shadow-sm border border-3 border-white mb-2 bg-white" style="width: 80px; height: 80px; object-fit: cover;">
                        {% else %}
                            <i class="fas fa-user-circle fa-4x mb-2 shadow-sm rounded-circle bg-white" style="color: #0dcaf0; padding: 2px;"></i>
                        {% endif %}

                        <h4 class="fw-bold mb-0 mt-2">{{ joueur.prenom }} {{ joueur.nom|upper }}</h4>
                        
                        {# Affichage des 3 classements (S, D, M) #}
                        <div class="mt-2">
                            <span class="badge bg-light text-dark px-2 py-1 rounded-pill shadow-sm small" title="Simple">S: {{ joueur.classementSimple|default('NC') }}</span>
                            <span class="badge bg-light text-dark px-2 py-1 rounded-pill shadow-sm small" title="Double">D: {{ joueur.classementDouble|default('NC') }}</span>
                            <span class="badge bg-light text-dark px-2 py-1 rounded-pill shadow-sm small" title="Mixte">M: {{ joueur.classementMixte|default('NC') }}</span>
                        </div>
                    </div>
                    
                    <div class="card-body p-4 bg-white d-flex flex-column flex-grow-1">
                        
                        {# Bloc des petites stats avec les vraies données calculées #}
                        <div class="row text-center mb-4 g-2">
                            <div class="col-4">
                                <div class="p-2 bg-light rounded-3 border">
                                    <div class="small text-muted fw-bold" style="font-size: 0.7rem; text-transform: uppercase;">Matchs</div>
                                    <div class="fs-5 fw-bold text-dark">{{ totalMatchs }}</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="p-2 bg-light rounded-3 border">
                                    <div class="small text-muted fw-bold" style="font-size: 0.7rem; text-transform: uppercase;">Vict.</div>
                                    <div class="fs-5 fw-bold text-success">{{ victoires }}</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="p-2 bg-light rounded-3 border">
                                    <div class="small text-muted fw-bold" style="font-size: 0.7rem; text-transform: uppercase;">Déf.</div>
                                    <div class="fs-5 fw-bold text-danger">{{ defaites }}</div>
                                </div>
                            </div>
                        </div>
                        
                        {# Jauge dynamique avec couleur adaptative (Vert si >= 50%, Jaune/Rouge sinon) #}
                        <div class="mb-4 text-start mt-auto">
                            <div class="d-flex justify-content-between small fw-bold mb-1">
                                <span class="text-muted">Taux de réussite</span>
                                <span class="text-arras">{{ ratio }}%</span>
                            </div>
                            <div class="progress rounded-pill bg-light border" style="height: 10px;">
                                <div class="progress-bar {{ ratio >= 50 ? 'bg-success' : (ratio == 0 ? 'bg-secondary' : 'bg-warning') }}" role="progressbar" style="width: {{ ratio }}%;" aria-valuenow="{{ ratio }}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>

                        {# Bouton d'action standardisé #}
                        <div class="border-top pt-3">
                            <a href="{{ path('app_joueur_show', {'id': joueur.id}) }}" class="btn btn-outline-arras w-100">Voir le profil complet</a>
                        </div>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="col-12">
                <div class="alert alert-light text-center py-5 text-muted border-0 shadow-sm rounded-4">
                    <i class="fas fa-users-slash me-2 mb-3 fs-3"></i><br>
                    Aucun joueur enregistré pour le moment.
                </div>
            </div>
        {% endfor %}
    </div>
</div>
{% endblock %}