{% extends 'base.html' %}

{% block title %}Match Analytics - TikiStats{% endblock %}

{% block extra_head %}
<!-- Chart.js para gráficos -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}

{% block extra_css %}
.match-header {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
    border: 1px solid rgba(128, 218, 71, 0.2);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 20px;
}

.team-info {
    text-align: center;
}

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

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

.stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.stat-label {
    color: var(--color-light-green);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-bar {
    flex: 1;
    height: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 5px;
    margin: 0 15px;
    position: relative;
    overflow: hidden;
}

.stat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-green), var(--color-accent));
    border-radius: 5px;
    transition: width 0.5s ease;
}

.stat-value {
    color: var(--color-light);
    font-weight: 600;
    min-width: 40px;
    text-align: right;
}

.chart-container {
    position: relative;
    height: 300px;
    margin: 20px 0;
}

.video-placeholder {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 60px;
    text-align: center;
    color: var(--color-light-green);
}

.video-placeholder i {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.3;
}
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Breadcrumb -->
    <div class="row mb-3">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/dashboard/" style="color: var(--color-green);">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="#" style="color: var(--color-green);">División {{ subdivision_id }}</a></li>
                    <li class="breadcrumb-item active text-light">Match #{{ match_id }}</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Match Header -->
    <div class="match-header">
        <div class="row align-items-center">
            <div class="col-md-4">
                <div class="team-info">
                    <div class="team-logo">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h4 class="text-light">Equipo Local</h4>
                    <p class="text-muted mb-0">Nacional Sub-17</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="score-display">
                    <span>2</span>
                    <span style="color: var(--color-light); font-size: 1.5rem; margin: 0 20px;">-</span>
                    <span>1</span>
                </div>
                <p class="text-center text-muted mt-2">
                    <i class="fas fa-calendar me-2"></i>24 Sep 2025
                    <span class="mx-2">|</span>
                    <i class="fas fa-clock me-2"></i>15:00
                </p>
            </div>
            <div class="col-md-4">
                <div class="team-info">
                    <div class="team-logo">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h4 class="text-light">Equipo Visitante</h4>
                    <p class="text-muted mb-0">Praxis FC</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Tabs -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body p-0">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#stats-tab">
                                <i class="fas fa-chart-bar me-2"></i>Estadísticas
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#video-tab">
                                <i class="fas fa-video me-2"></i>Video
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#heatmap-tab">
                                <i class="fas fa-fire me-2"></i>Mapa de Calor
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#players-tab">
                                <i class="fas fa-users me-2"></i>Jugadores
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content p-4">
                        <!-- Tab 1: Estadísticas -->
                        <div class="tab-pane fade show active" id="stats-tab">
                            <h5 class="text-light mb-4">Estadísticas del Partido</h5>
                            
                            <div class="stat-row">
                                <div class="stat-value">58%</div>
                                <div class="stat-bar">
                                    <div class="stat-bar-fill" style="width: 58%;"></div>
                                </div>
                                <div class="stat-label">Posesión</div>
                                <div class="stat-bar">
                                    <div class="stat-bar-fill" style="width: 42%; float: right;"></div>
                                </div>
                                <div class="stat-value">42%</div>
                            </div>

                            <div class="stat-row">
                                <div class="stat-value">12</div>
                                <div class="stat-bar">
                                    <div class="stat-bar-fill" style="width: 60%;"></div>
                                </div>
                                <div class="stat-label">Tiros al Arco</div>
                                <div class="stat-bar">
                                    <div class="stat-bar-fill" style="width: 40%; float: right;"></div>
                                </div>
                                <div class="stat-value">8</div>
                            </div>

                            <div class="stat-row">
                                <div class="stat-value">5</div>
                                <div class="stat-bar">
                                    <div class="stat-bar-fill" style="width: 55%;"></div>
                                </div>
                                <div class="stat-label">Tiros a Puerta</div>
                                <div class="stat-bar">
                                    <div class="stat-bar-fill" style="width: 45%; float: right;"></div>
                                </div>
                                <div class="stat-value">4</div>
                            </div>

                            <div class="stat-row">
                                <div class="stat-value">7</div>
                                <div class="stat-bar">
                                    <div class="stat-bar-fill" style="width: 70%;"></div>
                                </div>
                                <div class="stat-label">Corners</div>
                                <div class="stat-bar">
                                    <div class="stat-bar-fill" style="width: 30%; float: right;"></div>
                                </div>
                                <div class="stat-value">3</div>
                            </div>

                            <div class="stat-row">
                                <div class="stat-value">485</div>
                                <div class="stat-bar">
                                    <div class="stat-bar-fill" style="width: 62%;"></div>
                                </div>
                                <div class="stat-label">Pases Completados</div>
                                <div class="stat-bar">
                                    <div class="stat-bar-fill" style="width: 38%; float: right;"></div>
                                </div>
                                <div class="stat-value">295</div>
                            </div>

                            <!-- Gráfico de estadísticas por tiempo -->
                            <div class="row mt-5">
                                <div class="col-12">
                                    <h6 class="text-light mb-3">Posesión por Tiempo</h6>
                                    <div class="chart-container">
                                        <canvas id="possessionChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tab 2: Video -->
                        <div class="tab-pane fade" id="video-tab">
                            <div class="video-placeholder">
                                <i class="fas fa-video"></i>
                                <h5>Video del Partido</h5>
                                <p>La funcionalidad de video estará disponible próximamente</p>
                                <button class="btn btn-secondary mt-3" disabled>
                                    <i class="fas fa-play me-2"></i>Ver Video Completo
                                </button>
                            </div>
                        </div>

                        <!-- Tab 3: Mapa de Calor -->
                        <div class="tab-pane fade" id="heatmap-tab">
                            <div class="video-placeholder">
                                <i class="fas fa-fire"></i>
                                <h5>Mapa de Calor</h5>
                                <p>Visualización de zonas de mayor actividad en el campo</p>
                                <p class="text-muted">Próximamente disponible</p>
                            </div>
                        </div>

                        <!-- Tab 4: Jugadores -->
                        <div class="tab-pane fade" id="players-tab">
                            <h5 class="text-light mb-4">Rendimiento de Jugadores</h5>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <h6 class="text-light mb-3">Equipo Local</h6>
                                    <div class="table-responsive">
                                        <table class="table table-dark table-hover">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Jugador</th>
                                                    <th>Goles</th>
                                                    <th>Asistencias</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>10</td>
                                                    <td>Juan Pérez</td>
                                                    <td>1</td>
                                                    <td>1</td>
                                                </tr>
                                                <tr>
                                                    <td>7</td>
                                                    <td>Carlos Gómez</td>
                                                    <td>1</td>
                                                    <td>0</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h6 class="text-light mb-3">Equipo Visitante</h6>
                                    <div class="table-responsive">
                                        <table class="table table-dark table-hover">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Jugador</th>
                                                    <th>Goles</th>
                                                    <th>Asistencias</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>9</td>
                                                    <td>Luis Martínez</td>
                                                    <td>1</td>
                                                    <td>0</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Gráfico de posesión por tiempo
    const ctx = document.getElementById('possessionChart');
    if (ctx) {
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['0-15', '15-30', '30-45', '45-60', '60-75', '75-90'],
                datasets: [{
                    label: 'Equipo Local',
                    data: [55, 58, 60, 56, 59, 58],
                    borderColor: '#80DA47',
                    backgroundColor: 'rgba(128, 218, 71, 0.1)',
                    tension: 0.4
                }, {
                    label: 'Equipo Visitante',
                    data: [45, 42, 40, 44, 41, 42],
                    borderColor: '#1CC294',
                    backgroundColor: 'rgba(28, 194, 148, 0.1)',
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        labels: {
                            color: '#F3F2F2'
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100,
                        ticks: {
                            color: '#AAE7C9'
                        },
                        grid: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    },
                    x: {
                        ticks: {
                            color: '#AAE7C9'
                        },
                        grid: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    }
                }
            }
        });
    }
</script>
{% endblock %}