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

{% block title %}Détail de la Rencontre - Arras 6{% endblock %}

{% block body %}
<div class="container py-4">

    {# --- Calcul automatique du score et de l'adversaire --- #}
    {% set scoreArras = 0 %}
    {% set scoreAdversaire = 0 %}
    {% set nomEquipeAdverse = 'Adversaire' %}

    {% for match in matchs %}
        {# On compte les victoires et les défaites #}
        {% 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 du club adverse sur la première ligne #}
        {% if loop.first and match.opponentTeam is not empty %}
            {% set nomEquipeAdverse = match.opponentTeam %}
        {% endif %}
    {% endfor %}

    {# --- L'En-tête de la rencontre --- #}
    <div class="text-center mb-4">
        <a href="{{ path('app_calendrier') }}" class="btn btn-sm btn-outline-secondary mb-3">&larr; Retour au calendrier</a>
        <h1 class="fw-bold text-primary">Journée {{ rencontre.journee }}</h1>
        
        <h3 class="text-muted">
            Arras 6 
            <span class="badge {{ scoreArras > scoreAdversaire ? 'bg-success' : 'bg-primary' }} fs-4">{{ scoreArras }}</span> 
            - 
            <span class="badge {{ scoreAdversaire > scoreArras ? 'bg-success' : 'bg-danger' }} fs-4">{{ scoreAdversaire }}</span> 
            <span class="text-dark">{{ nomEquipeAdverse }}</span>
        </h3>
        
        <p class="text-muted small">
            Le {{ rencontre.dateRencontre ? rencontre.dateRencontre|date('d/m/Y') : 'Date inconnue' }}
            {% if rencontre.heure %} à {{ rencontre.heure|date('H\\hi') }}{% endif %}
        </p>
    </div>

    {# --- Le tableau des matchs --- #}
    <div class="card shadow-sm border-0 rounded-4 overflow-hidden">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light small text-muted text-uppercase">
                    <tr>
                        <th class="ps-4" style="width: 80px;">Type</th>
                        <th>Joueur(s) Arras</th>
                        <th>Adversaire(s)</th>
                        <th class="text-center">Score par set</th>
                        <th class="text-center" style="width: 50px;">✓/X</th>
                    </tr>
                </thead>
                <tbody>
                    {% for match in matchs %}
                        
                        {# ---> L'IDENTIFIANT UNIQUE EST AJOUTÉ ICI <--- #}
                        <tr id="match-{{ match.id }}">
                            
                            <td class="ps-4">
                                <div class="d-flex align-items-center gap-2">
                                    <span class="small fw-bold text-muted">{{ match.typeMatch|capitalize }}</span>
                                </div>
                            </td>
                            <td>
                                <div class="fw-bold text-primary">{{ match.joueur.prenom }} {{ match.joueur.nom|upper }}</div>
                                {% if match.binome %}
                                    <div class="small text-muted">& {{ match.binome }}</div>
                                {% endif %}
                            </td>
                            <td>
                                <div class="fw-bold">{{ match.nomAdversaire|default('À définir') }}</div>
                            </td>
                            <td class="text-center">
                                {# Couleur dynamique pour le score du set #}
                                {% set scoreColor = (match.resultat|lower == 'victoire') ? 'text-success' : 'text-danger' %}
                                <span class="font-monospace fw-bold {{ scoreColor }}" style="letter-spacing: 1px;">
                                    {{ match.score|replace({' ': '  '}) }}
                                </span>
                            </td>
                            <td class="text-center">
                                {% if match.resultat|lower == 'victoire' %}
                                    <span class="fw-bold text-success">V</span>
                                {% else %}
                                    <span class="fw-bold text-danger">D</span>
                                {% endif %}
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="5" class="text-center py-5 text-muted">
                                <i class="fas fa-info-circle me-2"></i> Aucun détail disponible pour cette rencontre.
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    /* Styles pour le tableau */
    .table thead th { border-bottom: none; padding: 15px 10px; }
    .table tbody td { padding: 15px 10px; border-bottom: 1px solid #f0f0f0; }
    .font-monospace { font-size: 0.95rem; }

    /* L'effet de surbrillance FIXE pour le match ciblé (comme l'ancien site) */
    tr:target td {
        background-color: #fff3cd !important; /* Couleur jaune pastel */
        border-top: 2px solid #ffe69c !important; /* Petite bordure un peu plus foncée */
        border-bottom: 2px solid #ffe69c !important;
    }
</style>
{% endblock %}