{% extends 'base.html' %}
{% load static %}

{% block title %}Historial de Partidos - {{ team.name }}{% endblock %}

{% block nav_matches %}active{% endblock %}

{% block extra_head %}
<style>
/* ========================================
   VARIABLES GLOBALES (Mismas que dashboard)
======================================== */
:root {
    --color-dark-bg: #1a1a1a;
    --color-card-bg: #242424;
    --color-card-hover: #2a2a2a;
    --color-green: #80da47;
    --color-light-green: #a8e380;
    --color-light: #e0e0e0;
    --color-muted: #9e9e9e;
    --color-border: rgba(255, 255, 255, 0.1);
    --color-success: #4CAF50;
    --color-warning: #FFC107;
    --color-danger: #F44336;
    --color-info: #2196F3;
}

/* ========================================
   TARJETAS GENERALES
======================================== */
.card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: var(--color-light);
}

.card-header {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
    border-bottom: 1px solid var(--color-border);
    padding: 18px 20px;
}

.card-body {
    padding: 20px;
}

/* ========================================
   HEADER DE LA PÁGINA
======================================== */
.page-header {
    background: linear-gradient(135deg, rgba(128, 218, 71, 0.1) 0%, rgba(128, 218, 71, 0.05) 100%);
    border: 1px solid rgba(128, 218, 71, 0.3);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.page-header h1 {
    color: var(--color-green);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.page-header .subtitle {
    color: var(--color-muted);
    font-size: 1rem;
}

/* ========================================
   PANEL DE FILTROS
======================================== */
.filters-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 24px;
}

.filters-card .card-header {
    background: linear-gradient(135deg, rgba(128, 218, 71, 0.15) 0%, rgba(128, 218, 71, 0.05) 100%);
    border-bottom: 2px solid rgba(128, 218, 71, 0.3);
}

.filters-card .card-header h5 {
    color: var(--color-light-green);
    font-weight: 600;
    margin: 0;
}

/* Estilos de formulario */
.form-label {
    color: var(--color-light-green);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.form-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: var(--color-light);
    border-radius: 8px;
    padding: 10px 14px;
    transition: all 0.3s ease;
}

.form-select:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-green);
    box-shadow: 0 0 0 0.2rem rgba(128, 218, 71, 0.25);
    color: var(--color-light);
}

.form-select option {
    background: #1a1a1a;
    color: var(--color-light);
}

/* Botón de filtros */
.btn-filter {
    background: linear-gradient(135deg, var(--color-green) 0%, #66bb6a 100%);
    color: #1a1a1a;
    font-weight: 700;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-filter:hover {
    background: linear-gradient(135deg, #66bb6a 0%, var(--color-green) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(128, 218, 71, 0.4);
}

.btn-toggle-filters {
    background: rgba(128, 218, 71, 0.1);
    color: var(--color-green);
    border: 1px solid rgba(128, 218, 71, 0.3);
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-toggle-filters:hover {
    background: rgba(128, 218, 71, 0.2);
    border-color: var(--color-green);
    color: var(--color-light-green);
}

/* ========================================
   TABLA DE PARTIDOS
======================================== */
.matches-table {
    background: var(--color-card-bg);
    border-radius: 12px;
    overflow: hidden;
}

.table {
    margin-bottom: 0;
    color: var(--color-light);
}

.table thead {
    background: rgba(128, 218, 71, 0.08);
}

.table thead th {
    color: var(--color-light-green);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 14px 12px;
    border-bottom: 2px solid rgba(128, 218, 71, 0.2);
    border-top: none;
}

.table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.table tbody tr:hover {
    background: rgba(128, 218, 71, 0.08);
}

.table tbody td {
    padding: 16px 12px;
    vertical-align: middle;
    border-top: none;
}

/* ========================================
   ELEMENTOS DE LA TABLA
======================================== */

/* Fecha */
.match-date {
    color: var(--color-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.match-date i {
    color: var(--color-green);
    margin-right: 6px;
}

/* Competición */
.match-competition {
    color: var(--color-muted);
    font-size: 0.85rem;
    background: rgba(128, 218, 71, 0.1);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
}

/* Equipos */
.team-name {
    color: var(--color-light);
    font-weight: 500;
    font-size: 0.95rem;
}

.team-name.user-team {
    color: var(--color-green);
    font-weight: 700;
}

/* Badge de resultado */
.score-badge {
    background: rgba(128, 218, 71, 0.15);
    color: var(--color-green);
    font-size: 1.1rem;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-block;
    border: 2px solid rgba(128, 218, 71, 0.3);
}

.score-badge.upcoming {
    background: rgba(33, 150, 243, 0.15);
    color: var(--color-info);
    border-color: rgba(33, 150, 243, 0.3);
    font-size: 0.85rem;
    padding: 6px 14px;
}

.score-badge.win {
    background: rgba(76, 175, 80, 0.2);
    color: var(--color-success);
    border-color: rgba(76, 175, 80, 0.4);
}

.score-badge.draw {
    background: rgba(255, 193, 7, 0.2);
    color: var(--color-warning);
    border-color: rgba(255, 193, 7, 0.4);
}

.score-badge.loss {
    background: rgba(244, 67, 54, 0.2);
    color: var(--color-danger);
    border-color: rgba(244, 67, 54, 0.4);
}

/* Botones de acción */
.btn-view-match {
    background: rgba(128, 218, 71, 0.1);
    color: var(--color-green);
    border: 1px solid rgba(128, 218, 71, 0.3);
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.btn-view-match:hover {
    background: var(--color-green);
    color: #1a1a1a;
    border-color: var(--color-green);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(128, 218, 71, 0.3);
}

/* ========================================
   ESTADO VACÍO
======================================== */
.empty-state {
    text-align: center;
    padding: 80px 20px;
}

.empty-state-icon {
    font-size: 5rem;
    color: var(--color-green);
    margin-bottom: 20px;
    opacity: 0.7;
}

.empty-state h3 {
    color: var(--color-light);
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.empty-state p {
    color: var(--color-muted);
    font-size: 1rem;
}

/* ========================================
   PAGINACIÓN
======================================== */
.pagination-info {
    background: rgba(128, 218, 71, 0.05);
    border: 1px solid rgba(128, 218, 71, 0.2);
    border-radius: 8px;
    padding: 16px;
    margin-top: 24px;
    text-align: center;
}

.pagination-info p {
    color: var(--color-muted);
    margin: 0;
}

.pagination-info a {
    color: var(--color-green);
    font-weight: 600;
    text-decoration: none;
}

.pagination-info a:hover {
    color: var(--color-light-green);
    text-decoration: underline;
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 768px) {
    .page-header h1 {
        font-size: 1.5rem;
    }
    
    .table {
        font-size: 0.85rem;
    }
    
    .table thead th {
        padding: 10px 8px;
        font-size: 0.7rem;
    }
    
    .table tbody td {
        padding: 12px 8px;
    }
    
    .team-name {
        font-size: 0.85rem;
    }
    
    .score-badge {
        font-size: 0.9rem;
        padding: 6px 12px;
    }
}

/* ========================================
   ANIMACIONES
======================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.table tbody tr {
    animation: fadeIn 0.3s ease-out;
}

.table tbody tr:nth-child(1) { animation-delay: 0.05s; }
.table tbody tr:nth-child(2) { animation-delay: 0.1s; }
.table tbody tr:nth-child(3) { animation-delay: 0.15s; }
.table tbody tr:nth-child(4) { animation-delay: 0.2s; }
.table tbody tr:nth-child(5) { animation-delay: 0.25s; }

/* ========================================
   🔥 FIX CRÍTICO: SOBREESCRIBIR BOOTSTRAP
======================================== */

/* Forzar fondo oscuro en contenedor responsive */
.table-responsive {
    background: var(--color-card-bg) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Forzar fondo oscuro en la tabla */
.table {
    background: var(--color-card-bg) !important;
    color: var(--color-light) !important;
}

/* Asegurar que las celdas no tengan fondo blanco */
.table td,
.table th {
    background-color: transparent !important;
    color: var(--color-light) !important;
}

/* Forzar color en el header */
.table thead th {
    background-color: rgba(128, 218, 71, 0.08) !important;
    color: var(--color-light-green) !important;
}

/* Forzar hover en filas */
.table tbody tr:hover td {
    background-color: transparent !important;
}

.table tbody tr:hover {
    background-color: rgba(128, 218, 71, 0.08) !important;
}

/* Eliminar bordes blancos de Bootstrap */
.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--color-border) !important;
}

/* Asegurar que el card-body no tenga fondo */
.matches-table .card-body {
    background: var(--color-card-bg) !important;
}

/* Eliminar cualquier background de stripe */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: transparent !important;
}

/* Forzar todos los backgrounds a oscuro */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-green) var(--color-card-bg);
}

/* Scrollbar personalizado (Chrome/Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-card-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--color-green);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-light-green);
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    
    <!-- ========================================
         HEADER DE LA PÁGINA
    ======================================== -->
    <div class="page-header">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1>
                    <i class="fas fa-calendar-alt me-2"></i> 
                    Historial de Partidos
                </h1>
                <p class="subtitle mb-0">
                    {{ team.name }} - {{ total_matches }} partido{{ total_matches|pluralize }}
                </p>
            </div>
            
            <!-- Botón Toggle Filtros -->
            <div>
                <button class="btn btn-toggle-filters" onclick="toggleFilters()">
                    <i class="fas fa-filter me-2"></i> 
                    Filtros
                </button>
            </div>
        </div>
    </div>
    
    <!-- ========================================
         PANEL DE FILTROS
    ======================================== -->
    <div id="filters-panel" style="display: none;">
        <div class="filters-card">
            <div class="card-header">
                <h5>
                    <i class="fas fa-sliders-h me-2"></i>
                    Filtrar Partidos
                </h5>
            </div>
            <div class="card-body">
                <form method="GET" action="{% url 'dashboard:matches_list' %}">
                    <div class="row g-3">
                        
                        <!-- Año -->
                        <div class="col-md-3">
                            <label class="form-label">
                                <i class="fas fa-calendar me-1"></i> Año
                            </label>
                            <select name="year" class="form-select">
                                <option value="">Todos los años</option>
                                {% for year in available_years %}
                                <option value="{{ year }}" {% if filter_year == year|stringformat:"s" %}selected{% endif %}>
                                    {{ year }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <!-- Mes -->
                        <div class="col-md-3">
                            <label class="form-label">
                                <i class="fas fa-calendar-day me-1"></i> Mes
                            </label>
                            <select name="month" class="form-select">
                                <option value="">Todos los meses</option>
                                <option value="1" {% if filter_month == "1" %}selected{% endif %}>Enero</option>
                                <option value="2" {% if filter_month == "2" %}selected{% endif %}>Febrero</option>
                                <option value="3" {% if filter_month == "3" %}selected{% endif %}>Marzo</option>
                                <option value="4" {% if filter_month == "4" %}selected{% endif %}>Abril</option>
                                <option value="5" {% if filter_month == "5" %}selected{% endif %}>Mayo</option>
                                <option value="6" {% if filter_month == "6" %}selected{% endif %}>Junio</option>
                                <option value="7" {% if filter_month == "7" %}selected{% endif %}>Julio</option>
                                <option value="8" {% if filter_month == "8" %}selected{% endif %}>Agosto</option>
                                <option value="9" {% if filter_month == "9" %}selected{% endif %}>Septiembre</option>
                                <option value="10" {% if filter_month == "10" %}selected{% endif %}>Octubre</option>
                                <option value="11" {% if filter_month == "11" %}selected{% endif %}>Noviembre</option>
                                <option value="12" {% if filter_month == "12" %}selected{% endif %}>Diciembre</option>
                            </select>
                        </div>
                        
                        <!-- Competición -->
                        <div class="col-md-3">
                            <label class="form-label">
                                <i class="fas fa-trophy me-1"></i> Competición
                            </label>
                            <select name="competition" class="form-select">
                                <option value="">Todas</option>
                                {% for comp in available_competitions %}
                                <option value="{{ comp.id }}" {% if filter_competition == comp.id|stringformat:"s" %}selected{% endif %}>
                                    {{ comp.name }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <!-- Estado -->
                        <div class="col-md-3">
                            <label class="form-label">
                                <i class="fas fa-flag me-1"></i> Estado
                            </label>
                            <select name="status" class="form-select">
                                <option value="">Todos</option>
                                <option value="played" {% if filter_status == 'played' %}selected{% endif %}>Jugados</option>
                                <option value="upcoming" {% if filter_status == 'upcoming' %}selected{% endif %}>Próximos</option>
                            </select>
                        </div>
                        
                        <!-- Resultado -->
                        <div class="col-md-3">
                            <label class="form-label">
                                <i class="fas fa-chart-line me-1"></i> Resultado
                            </label>
                            <select name="result" class="form-select">
                                <option value="">Todos</option>
                                <option value="win" {% if filter_result == 'win' %}selected{% endif %}>Victorias</option>
                                <option value="draw" {% if filter_result == 'draw' %}selected{% endif %}>Empates</option>
                                <option value="loss" {% if filter_result == 'loss' %}selected{% endif %}>Derrotas</option>
                            </select>
                        </div>
                        
                        <!-- Botón Aplicar -->
                        <div class="col-md-9 d-flex align-items-end">
                            <button type="submit" class="btn btn-filter w-100">
                                <i class="fas fa-search me-2"></i> 
                                Aplicar Filtros
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- ========================================
         TABLA DE PARTIDOS
    ======================================== -->
    <div class="matches-table">
        <div class="card">
            <div class="card-body p-0">
                {% if matches %}
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th><i class="fas fa-calendar me-1"></i> Fecha</th>
                                <th><i class="fas fa-trophy me-1"></i> Competición</th>
                                <th><i class="fas fa-home me-1"></i> Local</th>
                                <th class="text-center"><i class="fas fa-futbol me-1"></i> Resultado</th>
                                <th><i class="fas fa-plane me-1"></i> Visitante</th>
                                <th class="text-center"><i class="fas fa-eye me-1"></i> Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for match in matches %}
                            <tr>
                                <!-- FECHA -->
                                <td>
                                    <div class="match-date">
                                        <i class="fas fa-clock"></i>
                                        {{ match.date|date:"d/m/Y" }}<br>
                                        <small style="color: var(--color-muted); font-size: 0.75rem;">
                                            {{ match.date|date:"H:i" }}
                                        </small>
                                    </div>
                                </td>
                                
                                <!-- COMPETICIÓN -->
                                <td>
                                    <span class="match-competition">
                                        {{ match.competition.name|truncatewords:3 }}
                                    </span>
                                </td>
                                
                                <!-- EQUIPO LOCAL -->
                                <td>
                                    <div class="team-name {% if match.home_team_division.team.id == team.id %}user-team{% endif %}">
                                        {{ match.home_team_division.team.name }}
                                    </div>
                                </td>
                                
                                <!-- RESULTADO -->
                                <td class="text-center">
                                    {% if match.score_home is not None %}
                                        {% if match.home_team_division.team.id == team.id %}
                                            {% if match.score_home > match.score_away %}
                                                <span class="score-badge win">
                                                    {{ match.score_home }} - {{ match.score_away }}
                                                </span>
                                            {% elif match.score_home == match.score_away %}
                                                <span class="score-badge draw">
                                                    {{ match.score_home }} - {{ match.score_away }}
                                                </span>
                                            {% else %}
                                                <span class="score-badge loss">
                                                    {{ match.score_home }} - {{ match.score_away }}
                                                </span>
                                            {% endif %}
                                        {% elif match.away_team_division.team.id == team.id %}
                                            {% if match.score_away > match.score_home %}
                                                <span class="score-badge win">
                                                    {{ match.score_home }} - {{ match.score_away }}
                                                </span>
                                            {% elif match.score_home == match.score_away %}
                                                <span class="score-badge draw">
                                                    {{ match.score_home }} - {{ match.score_away }}
                                                </span>
                                            {% else %}
                                                <span class="score-badge loss">
                                                    {{ match.score_home }} - {{ match.score_away }}
                                                </span>
                                            {% endif %}
                                        {% else %}
                                            <span class="score-badge">
                                                {{ match.score_home }} - {{ match.score_away }}
                                            </span>
                                        {% endif %}
                                    {% else %}
                                        <span class="score-badge upcoming">
                                            <i class="fas fa-hourglass-half me-1"></i>
                                            Próximo
                                        </span>
                                    {% endif %}
                                </td>
                                
                                <!-- EQUIPO VISITANTE -->
                                <td>
                                    <div class="team-name {% if match.away_team_division.team.id == team.id %}user-team{% endif %}">
                                        {{ match.away_team_division.team.name }}
                                    </div>
                                </td>
                                
                                <!-- ACCIONES -->
                                <td class="text-center">
                                    <a href="{% url 'dashboard:match_detail' match_id=match.id %}" class="btn btn-view-match">
                                        <i class="fas fa-eye me-1"></i> 
                                        Ver
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <!-- PAGINACIÓN -->
                {% if total_matches > 50 %}
                <div class="pagination-info">
                    <p>
                        Mostrando <strong>50</strong> de <strong>{{ total_matches }}</strong> partidos. 
                        <a href="#" onclick="alert('Paginación próximamente'); return false;">
                            Ver más <i class="fas fa-arrow-right ms-1"></i>
                        </a>
                    </p>
                </div>
                {% endif %}
                
                {% else %}
                
                <!-- ESTADO VACÍO -->
                <div class="empty-state">
                    <div class="empty-state-icon">
                        <i class="fas fa-calendar-times"></i>
                    </div>
                    <h3>No hay partidos</h3>
                    <p>
                        No se encontraron partidos con los filtros seleccionados.
                    </p>
                </div>
                
                {% endif %}
            </div>
        </div>
    </div>
    
</div>

<script>
function toggleFilters() {
    const panel = document.getElementById('filters-panel');
    if (panel.style.display === 'none') {
        panel.style.display = 'block';
    } else {
        panel.style.display = 'none';
    }
}
</script>
{% endblock %}