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

{% block title %}Feuille de match - Arras 6{% endblock %}

{% block body %}
<div class="container py-4">
    
    {# --- BOUTON RETOUR --- #}
    <div class="mb-4">
        <a href="{{ path('app_matchs') }}" class="btn btn-outline-arras border-0 shadow-sm bg-white">
            <i class="fas fa-arrow-left me-2"></i> Retour à l'historique
        </a>
    </div>

    {# --- 🧠 CALCUL DU SCORE GLOBAL --- #}
    {% 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 %}
        
        {# On récupère le nom de l'équipe adverse depuis le premier match #}
        {% if loop.first and match.opponentTeam is not empty %}
            {% set nomEquipeAdverse = match.opponentTeam %}
        {% endif %}
    {% endfor %}

    {# --- BANNIÈRE DE LA RENCONTRE --- #}
    <div class="card card-premium border-0 mb-5 overflow-hidden">
        <div class="bca-bg-dark py-5 text-center position-relative text-white">
            
            <div class="mb-3">
                <span class="badge bg-light text-dark px-3 py-2 rounded-pill shadow-sm fs-6 fw-bold">
                    <i class="fas fa-calendar-alt me-2 text-info"></i> {{ rencontre.dateRencontre|date('d/m/Y') }}
                    {% if rencontre.heure %} à {{ rencontre.heure|date('H\\hi') }}{% endif %}
                </span>
            </div>
            
            <div class="d-flex flex-column flex-md-row justify-content-center align-items-center gap-4 mt-4">
                {# Équipe Arras #}
                <div class="text-end d-none d-md-block" style="flex: 1;">
                    <h2 class="fw-bold mb-0 display-6 text-white">ARRAS 6</h2>
                    <p class="text-info mb-0 fw-bold">Badminton Club Arras</p>
                </div>
                <div class="d-md-none">
                    <h2 class="fw-bold mb-0 display-6">ARRAS 6</h2>
                </div>

                {# Score Central #}
                <div class="mx-4">
                    <div class="bg-white text-dark rounded-4 shadow-lg px-4 py-3 d-inline-block border border-4 {{ scoreArras > scoreAdversaire ? 'border-success' : (scoreArras < scoreAdversaire ? 'border-danger' : 'border-secondary') }}">
                        <h1 class="display-3 fw-bold mb-0" style="letter-spacing: 2px;">
                            <span class="{{ scoreArras > scoreAdversaire ? 'text-success' : '' }}">{{ scoreArras }}</span><span class="text-muted mx-2">-</span><span class="{{ scoreAdversaire > scoreArras ? 'text-danger' : '' }}">{{ scoreAdversaire }}</span>
                        </h1>
                    </div>
                </div>

                {# Équipe Adverse #}
                <div class="text-start d-none d-md-block" style="flex: 1;">
                    <h2 class="fw-bold mb-0 display-6 text-white">{{ nomEquipeAdverse|upper }}</h2>
                    <p class="text-white-50 mb-0 fw-bold">Équipe Visiteuse</p>
                </div>
                <div class="d-md-none mt-2">
                    <h2 class="fw-bold mb-0 display-6">{{ nomEquipeAdverse|upper }}</h2>
                </div>
            </div>
            
            {# Résultat en texte #}
            <div class="mt-4">
                {% if scoreArras > scoreAdversaire %}
                    <span class="badge bg-success fs-5 px-4 py-2 rounded-pill shadow-sm"><i class="fas fa-trophy me-2"></i> Victoire d'Arras !</span>
                {% elseif scoreAdversaire > scoreArras %}
                    <span class="badge bg-danger fs-5 px-4 py-2 rounded-pill shadow-sm"><i class="fas fa-times-circle me-2"></i> Défaite</span>
                {% else %}
                    <span class="badge bg-secondary fs-5 px-4 py-2 rounded-pill shadow-sm"><i class="fas fa-handshake me-2"></i> Égalité</span>
                {% endif %}
            </div>
        </div>
    </div>

    {# --- DÉTAIL DES MATCHS --- #}
    <div class="card card-premium overflow-hidden border-0 shadow-sm">
        <div class="card-header bg-white py-4 px-4 d-flex justify-content-between align-items-center border-bottom border-2">
            <h4 class="fw-bold text-arras mb-0"><i class="fas fa-list-ul me-2 text-info"></i> Détail des {{ rencontre.matchDetails|length }} matchs</h4>
        </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.8rem;">
                    <tr>
                        <th class="ps-4 border-0 py-3" style="width: 120px;">Format</th>
                        <th class="border-0 py-3">Joueur(s) BCA</th>
                        <th class="border-0 py-3">Adversaire(s)</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: 100px;">Bilan</th>
                    </tr>
                </thead>
                <tbody>
                    {% for match in rencontre.matchDetails %}
                        <tr class="border-bottom">
                            
                            {# 1. Format #}
                            <td class="ps-4 fw-bold text-dark small py-3">
                                {% if match.typeMatch|lower == 'simple' %}
                                    <i class="fas fa-user text-info me-2 fs-5"></i>
                                {% elseif match.typeMatch|lower == 'double' %}
                                    <i class="fas fa-user-friends text-info me-2 fs-5"></i>
                                {% else %}
                                    <i class="fas fa-venus-mars text-info me-2 fs-5"></i>
                                {% endif %}
                                {{ match.typeMatch|capitalize }}
                            </td>
                            
                            {# 2. Joueurs Arras #}
                            <td class="py-3">
                                <a href="{{ path('app_joueur_show', {'id': match.joueur.id}) }}" class="text-decoration-none">
                                    <div class="fw-bold text-arras hover-info transition">{{ match.joueur.prenom }} {{ match.joueur.nom|upper }}</div>
                                </a>
                                {% if match.binome %}
                                    <div class="small text-muted fw-semibold">& {{ match.binome }}</div>
                                {% endif %}
                            </td>
                            
                            {# 3. Adversaires #}
                            <td class="py-3">
                                <div class="fw-bold text-dark">{{ match.nomAdversaire|default('À définir') }}</div>
                            </td>
                            
                            {# 4. Score #}
                            <td class="text-center fw-bold font-monospace py-3 {{ match.resultat|lower == 'victoire' ? 'text-success' : 'text-danger' }}" style="letter-spacing: 1px; font-size: 0.95rem;">
                                {{ match.score|replace({' ': '  '}) }}
                            </td>
                            
                            {# 5. Bilan #}
                            <td class="text-center pe-4 py-3">
                                {% if match.resultat|lower == 'victoire' %}
                                    <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3 py-2 fw-bold w-100">Victoire</span>
                                {% else %}
                                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-3 py-2 fw-bold w-100">Défaite</span>
                                {% endif %}
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="5" class="text-center py-5 text-muted">
                                <i class="fas fa-clipboard me-2 mb-3 fs-3"></i><br>
                                Les détails de cette rencontre ne sont pas encore renseignés.
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    .transition { transition: color 0.2s ease-in-out; }
    .hover-info:hover { color: #0dcaf0 !important; }
</style>
{% endblock %}