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

{% block title %}
    {{ home_team.name }} vs {{ away_team.name }} - TikiStats
{% endblock %}

{% block extra_head %}
<style>
.match-header {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.95), rgba(30, 30, 30, 0.95));
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
}

.team-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(128, 218, 71, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-green);
}

.score-display {
    font-size: 3.5rem;
    font-weight: bold;
    color: var(--color-green);
    text-align: center;
}

.event-timeline {
    position: relative;
    padding: 20px 0;
}

.event-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.event-minute {
    background: var(--color-green);
    color: var(--color-dark);
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    min-width: 50px;
    text-align: center;
    margin-right: 15px;
}

.event-icon {
    font-size: 1.5rem;
    margin-right: 10px;
}

.event-icon.goal { color: var(--color-green); }
.event-icon.yellow { color: #FFC107; }
.event-icon.red { color: #F44336; }
.event-icon.sub { color: #2196F3; }

.player-stat-row {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.player-stat-row:hover {
    background: rgba(128, 218, 71, 0.05);
}

.stat-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 5px;
}

.stat-fill-home {
    height: 100%;
    background: var(--color-green);
    transition: width 0.3s ease;
}

.stat-fill-away {
    height: 100%;
    background: #2196F3;
    transition: width 0.3s ease;
}

.match-info-badge {
    background: rgba(128, 218, 71, 0.1);
    color: var(--color-green);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    margin-right: 10px;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    
    <!-- Breadcrumb -->
    <div class="row mb-4">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{% url 'dashboard:dashboard' %}">
                            <i class="fas fa-home"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{% url 'dashboard:matches_list' %}">
                            <i class="fas fa-futbol"></i> Partidos
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        {{ home_team.name }} vs {{ away_team.name }}
                    </li>
                </ol>
            </nav>
        </div>
    </div>
    
    <!-- Header del Partido -->
    <div class="match-header">
        <div class="row align-items-center">
            
            <!-- Equipo Local -->
            <div class="col-md-4 text-center">
                <div class="team-logo mx-auto mb-3">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h3 style="color: var(--color-light); margin-bottom: 5px;">
                    {{ home_team.name }}
                </h3>
                <p class="text-muted mb-0">Local</p>
            </div>
            
            <!-- Marcador -->
            <div class="col-md-4 text-center">
                {% if is_played %}
                    <div class="score-display">
                        {{ match.score_home }} - {{ match.score_away }}
                    </div>
                    
                    <!-- Resultado -->
                    {% if result == 'home_win' %}
                        <p class="text-muted mb-0">Victoria Local</p>
                    {% elif result == 'away_win' %}
                        <p class="text-muted mb-0">Victoria Visitante</p>
                    {% else %}
                        <p class="text-muted mb-0">Empate</p>
                    {% endif %}
                {% else %}
                    <div class="score-display" style="font-size: 2rem; color: var(--color-light-green);">
                        VS
                    </div>
                    <p class="text-muted mb-0">Por Jugar</p>
                {% endif %}
                
                <!-- Fecha y Hora -->
                <div class="mt-3">
                    <small class="text-muted">
                        <i class="fas fa-calendar me-2"></i>
                        {{ match.date|date:"d/m/Y" }}
                        {% if match.time %}
                            - {{ match.time|time:"H:i" }}
                        {% endif %}
                    </small>
                </div>
            </div>
            
            <!-- Equipo Visitante -->
            <div class="col-md-4 text-center">
                <div class="team-logo mx-auto mb-3">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h3 style="color: var(--color-light); margin-bottom: 5px;">
                    {{ away_team.name }}
                </h3>
                <p class="text-muted mb-0">Visitante</p>
            </div>
            
        </div>
        
        <!-- Información Adicional -->
        <div class="row mt-4">
            <div class="col-12 text-center">
                {% if match.competition %}
                <span class="match-info-badge">
                    <i class="fas fa-trophy me-1"></i>
                    {{ match.competition.name }}
                </span>
                {% endif %}
                
                {% if match.venue %}
                <span class="match-info-badge">
                    <i class="fas fa-map-marker-alt me-1"></i>
                    {{ match.venue.name }}
                </span>
                {% endif %}
                
                {% if match.matchday %}
                <span class="match-info-badge">
                    <i class="fas fa-calendar-day me-1"></i>
                    Jornada {{ match.matchday }}
                </span>
                {% endif %}
            </div>
        </div>
    </div>
    
    {% if is_played %}
    
    <!-- Estadísticas Generales -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-bar me-2"></i>
                        Estadísticas del Partido
                    </h5>
                </div>
                <div class="card-body">
                    
                    <!-- Goles -->
                    <div class="row mb-3">
                        <div class="col-4 text-end">
                            <strong style="font-size: 1.5rem; color: var(--color-green);">
                                {{ home_stats.goals }}
                            </strong>
                        </div>
                        <div class="col-4 text-center">
                            <span class="text-muted">Goles</span>
                        </div>
                        <div class="col-4 text-start">
                            <strong style="font-size: 1.5rem; color: #2196F3;">
                                {{ away_stats.goals }}
                            </strong>
                        </div>
                    </div>
                    
                    <!-- Tarjetas Amarillas -->
                    <div class="row mb-3">
                        <div class="col-4 text-end">
                            <strong style="font-size: 1.2rem; color: #FFC107;">
                                {{ home_stats.yellow_cards }}
                            </strong>
                        </div>
                        <div class="col-4 text-center">
                            <span class="text-muted">
                                <i class="fas fa-square" style="color: #FFC107;"></i>
                                Tarjetas Amarillas
                            </span>
                        </div>
                        <div class="col-4 text-start">
                            <strong style="font-size: 1.2rem; color: #FFC107;">
                                {{ away_stats.yellow_cards }}
                            </strong>
                        </div>
                    </div>
                    
                    <!-- Tarjetas Rojas -->
                    <div class="row">
                        <div class="col-4 text-end">
                            <strong style="font-size: 1.2rem; color: #F44336;">
                                {{ home_stats.red_cards }}
                            </strong>
                        </div>
                        <div class="col-4 text-center">
                            <span class="text-muted">
                                <i class="fas fa-square" style="color: #F44336;"></i>
                                Tarjetas Rojas
                            </span>
                        </div>
                        <div class="col-4 text-start">
                            <strong style="font-size: 1.2rem; color: #F44336;">
                                {{ away_stats.red_cards }}
                            </strong>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    
    <!-- Tabs: Eventos / Alineaciones -->
    <div class="row">
        <div class="col-12">
            <ul class="nav nav-tabs mb-4" id="matchTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="events-tab" data-bs-toggle="tab" data-bs-target="#events" type="button" role="tab">
                        <i class="fas fa-list me-2"></i> Eventos
                    </button>
                </li>
                
                {% if home_player_stats or away_player_stats %}
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="lineups-tab" data-bs-toggle="tab" data-bs-target="#lineups" type="button" role="tab">
                        <i class="fas fa-users me-2"></i> Alineaciones
                    </button>
                </li>
                {% endif %}
            </ul>
            
            <div class="tab-content" id="matchTabsContent">
                
                <!-- TAB 1: Eventos -->
                <div class="tab-pane fade show active" id="events" role="tabpanel">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Cronología del Partido</h5>
                        </div>
                        <div class="card-body">
                            {% if all_events %}
                            <div class="event-timeline">
                                {% for event in all_events %}
                                <div class="event-item">
                                    <div class="event-minute">
                                        {{ event.minute }}'
                                        {% if event.extra_time %}+{{ event.extra_time }}{% endif %}
                                    </div>
                                    
                                    <div class="event-icon 
                                        {% if event.event_type == 'goal' %}goal
                                        {% elif event.event_type == 'yellow_card' %}yellow
                                        {% elif event.event_type == 'red_card' %}red
                                        {% else %}sub{% endif %}">
                                        {% if event.event_type == 'goal' %}
                                            <i class="fas fa-futbol"></i>
                                        {% elif event.event_type == 'yellow_card' %}
                                            <i class="fas fa-square"></i>
                                        {% elif event.event_type == 'red_card' %}
                                            <i class="fas fa-square"></i>
                                        {% elif event.event_type == 'substitution' %}
                                            <i class="fas fa-exchange-alt"></i>
                                        {% endif %}
                                    </div>
                                    
                                    <div class="flex-grow-1">
                                        <strong style="color: var(--color-light);">
                                            {{ event.player.player.name }} {{ event.player.player.last_name }}
                                        </strong>
                                        <br>
                                        <small class="text-muted">
                                            {{ event.team_division.team.name }}
                                            {% if event.event_type == 'goal' %}
                                                - Gol
                                                {% if event.goal_type %}({{ event.get_goal_type_display }}){% endif %}
                                            {% elif event.event_type == 'yellow_card' %}
                                                - Tarjeta Amarilla
                                            {% elif event.event_type == 'red_card' %}
                                                - Tarjeta Roja
                                            {% elif event.event_type == 'substitution' %}
                                                - Sustitución
                                            {% endif %}
                                        </small>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                            {% else %}
                            <p class="text-center text-muted">No hay eventos registrados</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <!-- TAB 2: Alineaciones -->
                {% if home_player_stats or away_player_stats %}
                <div class="tab-pane fade" id="lineups" role="tabpanel">
                    <div class="row">
                        
                        <!-- Equipo Local -->
                        <div class="col-md-6 mb-4">
                            <div class="card">
                                <div class="card-header" style="background: rgba(128, 218, 71, 0.1);">
                                    <h5 class="mb-0" style="color: var(--color-green);">
                                        <i class="fas fa-shield-alt me-2"></i>
                                        {{ home_team.name }}
                                    </h5>
                                </div>
                                <div class="card-body">
                                    {% for stat in home_player_stats %}
                                    <div class="player-stat-row">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <strong style="color: var(--color-light);">
                                                    #{{ stat.team_division_player.jersey_number }}
                                                    {{ stat.team_division_player.player.name }}
                                                    {{ stat.team_division_player.player.last_name }}
                                                </strong>
                                                <br>
                                                <small class="text-muted">
                                                    {{ stat.team_division_player.player.position.name }}
                                                </small>
                                            </div>
                                            <div class="text-end">
                                                <small class="text-muted">
                                                    {{ stat.minutes_played }}'
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        
                        <!-- Equipo Visitante -->
                        <div class="col-md-6 mb-4">
                            <div class="card">
                                <div class="card-header" style="background: rgba(33, 150, 243, 0.1);">
                                    <h5 class="mb-0" style="color: #2196F3;">
                                        <i class="fas fa-shield-alt me-2"></i>
                                        {{ away_team.name }}
                                    </h5>
                                </div>
                                <div class="card-body">
                                    {% for stat in away_player_stats %}
                                    <div class="player-stat-row">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <strong style="color: var(--color-light);">
                                                    #{{ stat.team_division_player.jersey_number }}
                                                    {{ stat.team_division_player.player.name }}
                                                    {{ stat.team_division_player.player.last_name }}
                                                </strong>
                                                <br>
                                                <small class="text-muted">
                                                    {{ stat.team_division_player.player.position.name }}
                                                </small>
                                            </div>
                                            <div class="text-end">
                                                <small class="text-muted">
                                                    {{ stat.minutes_played }}'
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
                {% endif %}
                
            </div>
        </div>
    </div>
    
    {% else %}
    
    <!-- Partido No Jugado -->
    <div class="row">
        <div class="col-12">
            <div class="card text-center" style="padding: 60px 20px;">
                <div style="font-size: 4rem; color: var(--color-green); margin-bottom: 20px;">
                    <i class="fas fa-clock"></i>
                </div>
                <h3 style="color: var(--color-light);">Partido Próximo</h3>
                <p style="color: var(--color-light-green);">
                    Este partido aún no se ha jugado.
                </p>
                {% if match.date %}
                <p class="text-muted">
                    Programado para: {{ match.date|date:"d/m/Y" }}
                    {% if match.time %}a las {{ match.time|time:"H:i" }}{% endif %}
                </p>
                {% endif %}
            </div>
        </div>
    </div>
    
    {% endif %}
    
</div>
{% endblock %}