@extends('layouts.app')

@section('contenido')

@php
    $tablaOficial = $tablaOficial ?? [];
    $mejoresTercerosOficiales = $mejoresTercerosOficiales ?? [];

    $gruposCompletos = $gruposCompletos ?? false;
    $dieciseisavosCompletos = $dieciseisavosCompletos ?? false;
    $octavosCompletos = $octavosCompletos ?? false;
    $cuartosCompletos = $cuartosCompletos ?? false;
    $semifinalesCompletas = $semifinalesCompletas ?? false;

    $codigoIsoBandera = [
        'MEX' => 'mx', 'RSA' => 'za', 'KOR' => 'kr', 'CZE' => 'cz',
        'USA' => 'us', 'PAR' => 'py', 'CAN' => 'ca', 'BIH' => 'ba',
        'POR' => 'pt', 'SUI' => 'ch', 'ECU' => 'ec', 'GER' => 'de',
        'CIV' => 'ci', 'NED' => 'nl', 'BRA' => 'br', 'MAR' => 'ma',
        'FRA' => 'fr', 'ARG' => 'ar', 'CRO' => 'hr', 'ENG' => 'gb-eng',
        'ESP' => 'es', 'ITA' => 'it', 'BEL' => 'be', 'URU' => 'uy',
        'COL' => 'co', 'JPN' => 'jp', 'GHA' => 'gh', 'ALG' => 'dz',
        'AUS' => 'au', 'AUT' => 'at', 'DEN' => 'dk', 'NOR' => 'no',
        'SEN' => 'sn', 'EGY' => 'eg', 'JOR' => 'jo', 'UZB' => 'uz',
        'NZL' => 'nz', 'CPV' => 'cv', 'COD' => 'cd', 'DRC' => 'cd',
        'KSA' => 'sa', 'SAU' => 'sa', 'CUR' => 'cw', 'CUW' => 'cw',
        'HAI' => 'ht', 'IRN' => 'ir', 'IRQ' => 'iq', 'SCO' => 'gb-sct',
        'WAL' => 'gb-wls', 'QAT' => 'qa', 'CRC' => 'cr', 'PAN' => 'pa',
        'TUN' => 'tn', 'POL' => 'pl', 'SWE' => 'se',
    ];

    $isoPorNombre = [
        'México' => 'mx',
        'Sudáfrica' => 'za',
        'Corea del Sur' => 'kr',
        'República Checa' => 'cz',
        'Estados Unidos' => 'us',
        'Paraguay' => 'py',
        'Canadá' => 'ca',
        'Bosnia y Herzegovina' => 'ba',
        'Portugal' => 'pt',
        'Suiza' => 'ch',
        'Ecuador' => 'ec',
        'Alemania' => 'de',
        'Costa de Marfil' => 'ci',
        'Países Bajos' => 'nl',
        'Brasil' => 'br',
        'Marruecos' => 'ma',
        'Francia' => 'fr',
        'Argentina' => 'ar',
        'Croacia' => 'hr',
        'Inglaterra' => 'gb-eng',
        'España' => 'es',
        'Italia' => 'it',
        'Bélgica' => 'be',
        'Uruguay' => 'uy',
        'Colombia' => 'co',
        'Japón' => 'jp',
        'Ghana' => 'gh',
        'Argelia' => 'dz',
        'Australia' => 'au',
        'Austria' => 'at',
        'Noruega' => 'no',
        'Senegal' => 'sn',
        'Egipto' => 'eg',
        'Jordania' => 'jo',
        'Uzbekistán' => 'uz',
        'Nueva Zelanda' => 'nz',
        'Cabo Verde' => 'cv',
        'RD Congo' => 'cd',
        'Arabia Saudita' => 'sa',
        'Curazao' => 'cw',
        'Haití' => 'ht',
        'Irán' => 'ir',
        'Irak' => 'iq',
        'Escocia' => 'gb-sct',
        'Gales' => 'gb-wls',
        'Qatar' => 'qa',
        'Costa Rica' => 'cr',
        'Panamá' => 'pa',
        'Túnez' => 'tn',
        'Polonia' => 'pl',
        'Suecia' => 'se',
        'Dinamarca' => 'dk',
    ];

    $banderaEquipo = function ($equipo) use ($codigoIsoBandera, $isoPorNombre) {
        if (! $equipo) {
            return null;
        }

        $bandera = $equipo->bandera_url ?? $equipo->bandera ?? null;

        if ($bandera) {
            if (str_starts_with($bandera, 'http')) {
                return $bandera;
            }

            $rutas = [
                $bandera,
                'storage/' . $bandera,
                'img/flags/' . $bandera,
                'img/banderas/' . $bandera,
                'flags/' . $bandera,
                'banderas/' . $bandera,
            ];

            foreach ($rutas as $ruta) {
                if (file_exists(public_path($ruta))) {
                    return asset($ruta);
                }
            }
        }

        $codigo = strtoupper($equipo->codigo ?? '');

        if ($codigo && isset($codigoIsoBandera[$codigo])) {
            return 'https://flagcdn.com/w80/' . $codigoIsoBandera[$codigo] . '.png';
        }

        $nombre = $equipo->nombre ?? null;

        if ($nombre && isset($isoPorNombre[$nombre])) {
            return 'https://flagcdn.com/w80/' . $isoPorNombre[$nombre] . '.png';
        }

        return null;
    };

    $renderEquipo = function ($equipo, $origen = null) use ($banderaEquipo) {
        $nombre = $equipo?->nombre ?? $origen ?? 'Por definir';
        $codigo = strtoupper($equipo?->codigo ?? mb_substr($nombre, 0, 3));
        $bandera = $banderaEquipo($equipo);

        if ($bandera) {
            return '
                <span class="admin-team">
                    <img class="admin-flag"
                         src="' . e($bandera) . '"
                         alt="' . e($codigo) . '"
                         onerror="this.style.display=\'none\'; this.nextElementSibling.style.display=\'inline-flex\';">
                    <span class="admin-flag-fallback" style="display:none;">' . e($codigo) . '</span>
                    <span>' . e($nombre) . '</span>
                </span>
            ';
        }

        return '
            <span class="admin-team">
                <span class="admin-flag-fallback">' . e($codigo) . '</span>
                <span>' . e($nombre) . '</span>
            </span>
        ';
    };
@endphp

<style>
    .admin-world {
        background: #f4f7fa;
        padding-bottom: 40px;
    }

    .admin-hero {
        background:
            linear-gradient(135deg, rgba(0,60,47,.96), rgba(0,137,95,.88)),
            url('{{ asset("img/estadio.jpg") }}');
        background-size: cover;
        background-position: center;
        color: white;
        border-radius: 26px;
        padding: 26px;
        box-shadow: 0 16px 40px rgba(0,0,0,.16);
        margin-bottom: 20px;
    }

    .admin-hero h2 {
        font-weight: 950;
        font-size: 34px;
        margin: 0;
    }

    .admin-hero p {
        margin: 8px 0 0;
        max-width: 980px;
        color: rgba(255,255,255,.88);
        font-weight: 600;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 14px;
        margin-bottom: 18px;
    }

    .stat-card {
        background: white;
        border-radius: 20px;
        padding: 18px;
        box-shadow: 0 10px 26px rgba(0,0,0,.07);
        border-left: 6px solid #00895f;
    }

    .stat-card span {
        color: #667;
        font-weight: 800;
        font-size: 13px;
    }

    .stat-card h3 {
        margin: 4px 0 0;
        font-weight: 950;
        color: #003c2f;
        font-size: 30px;
    }

    .filter-card,
    .official-status-card,
    .official-table-card {
        background: white;
        border-radius: 22px;
        padding: 18px;
        box-shadow: 0 10px 26px rgba(0,0,0,.07);
        margin-bottom: 18px;
    }

    .filter-card label {
        font-weight: 850;
        color: #003c2f;
        font-size: 13px;
        margin-bottom: 5px;
    }

    .filter-card .form-control,
    .filter-card .form-select {
        border-radius: 12px;
    }

    .official-status-card h3,
    .official-table-card h3 {
        color: #003c2f;
        font-weight: 950;
        margin-bottom: 12px;
    }

    .official-status-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
    }

    .official-status-item {
        border-radius: 16px;
        padding: 14px;
        background: #fff7df;
        border: 1px solid #ffd166;
    }

    .official-status-item.done {
        background: #e7fff4;
        border-color: #00895f;
    }

    .official-status-item b {
        color: #003c2f;
        display: block;
        margin-bottom: 5px;
    }

    .official-status-item span {
        font-size: 13px;
        color: #455;
        font-weight: 700;
    }

    .recalcular-box {
        border-top: 1px solid #e5ece9;
        padding-top: 16px;
        margin-top: 16px;
    }

    .recalcular-box .form-select {
        border-radius: 12px;
        font-weight: 700;
    }

    .recalcular-box .btn {
        border-radius: 12px;
        font-weight: 900;
    }

    .quick-links-box {
        border-top: 1px solid #e5ece9;
        padding-top: 14px;
        margin-top: 14px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .quick-links-box .btn {
        border-radius: 12px;
        font-weight: 850;
    }

    .official-group-card {
        border: 1px solid #dce6e2;
        border-radius: 18px;
        padding: 14px;
        height: 100%;
        border-top: 5px solid #00895f;
        background: #fff;
    }

    .official-group-card h5,
    .official-third-card h4 {
        color: #003c2f;
        font-weight: 950;
    }

    .official-third-card {
        border: 1px solid #dce6e2;
        border-radius: 18px;
        padding: 14px;
        border-top: 5px solid #ffd166;
        background: #fff;
    }

    .fase-tabs-admin {
        background: white;
        border-radius: 22px;
        padding: 12px;
        box-shadow: 0 10px 26px rgba(0,0,0,.07);
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 20px;
        position: sticky;
        top: 76px;
        z-index: 30;
    }

    .fase-admin-tab {
        border: 0;
        border-radius: 999px;
        background: #edf3f1;
        color: #003c2f;
        padding: 10px 16px;
        font-weight: 900;
        transition: .2s;
    }

    .fase-admin-tab.active,
    .fase-admin-tab:hover {
        background: #003c2f;
        color: white;
    }

    .fase-admin-panel {
        display: none;
    }

    .fase-admin-panel.active {
        display: block;
    }

    .fase-title {
        background: linear-gradient(135deg, #003c2f, #00895f);
        color: white;
        border-radius: 18px;
        padding: 16px 18px;
        margin-bottom: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .fase-title h3 {
        margin: 0;
        font-weight: 950;
    }

    .match-admin-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-bottom: 26px;
    }

    .match-admin-card {
        background: white;
        border-radius: 22px;
        padding: 16px;
        box-shadow: 0 10px 26px rgba(0,0,0,.07);
        border: 1px solid #e2e8e5;
        border-left: 7px solid #ffc107;
    }

    .match-admin-card.confirmado {
        border-left-color: #198754;
    }

    .match-admin-card.pendiente {
        border-left-color: #ffc107;
    }

    .match-head {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 10px;
        margin-bottom: 12px;
    }

    .match-number {
        background: #003c2f;
        color: white;
        padding: 6px 12px;
        border-radius: 999px;
        font-weight: 950;
        display: inline-block;
    }

    .match-date {
        color: #5f6b73;
        font-size: 13px;
        font-weight: 750;
        margin-top: 5px;
    }

    .admin-team {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 850;
        min-width: 0;
    }

    .admin-flag {
        width: 30px;
        height: 21px;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid #cfd8d5;
        background: white;
        flex: 0 0 auto;
    }

    .admin-flag-fallback {
        width: 34px;
        height: 23px;
        border-radius: 6px;
        background: #00895f;
        color: white;
        font-size: 10px;
        font-weight: 950;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .admin-official-team {
        background: #f4f7f8;
        border: 1px solid #dce6e2;
        border-radius: 14px;
        padding: 12px;
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .vs-label {
        color: #003c2f;
        font-weight: 950;
        font-size: 13px;
        text-align: center;
        margin: 4px 0;
    }

    .score-row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .score-input {
        width: 74px;
        border-radius: 12px;
        text-align: center;
        font-weight: 900;
    }

    .winner-select {
        border-radius: 12px;
        font-weight: 700;
        min-width: 220px;
        flex: 1;
    }

    .match-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #eef1f0;
    }

    .match-actions .btn {
        border-radius: 10px;
        font-weight: 850;
    }

    .empty-state {
        background: white;
        border-radius: 20px;
        padding: 30px;
        text-align: center;
        color: #667;
        font-weight: 800;
        box-shadow: 0 10px 26px rgba(0,0,0,.07);
    }

    .table td,
    .table th {
        vertical-align: middle;
    }

    @media(max-width: 1100px) {
        .stats-grid,
        .official-status-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .match-admin-grid {
            grid-template-columns: 1fr;
        }

        .fase-tabs-admin {
            position: static;
        }
    }

    @media(max-width: 650px) {
        .stats-grid,
        .official-status-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="admin-world">

    <div class="admin-hero">
        <h2>Partidos y resultados oficiales</h2>
        <p>
            El administrador registra solamente resultados oficiales. La fase de grupos ya viene designada por calendario.
            Cuando todos los partidos de una fase quedan confirmados, el sistema calcula automáticamente la siguiente fase oficial.
        </p>
    </div>

    @if(session('success'))
        <div class="alert alert-success rounded-4 fw-bold">{{ session('success') }}</div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger rounded-4 fw-bold">{{ $errors->first() }}</div>
    @endif

    <div class="stats-grid">
        <div class="stat-card">
            <span>Total partidos</span>
            <h3>{{ $totales['partidos'] ?? 0 }}</h3>
        </div>

        <div class="stat-card">
            <span>Confirmados</span>
            <h3>{{ $totales['confirmados'] ?? 0 }}</h3>
        </div>

        <div class="stat-card">
            <span>Pendientes</span>
            <h3>{{ $totales['pendientes'] ?? 0 }}</h3>
        </div>

        <div class="stat-card">
            <span>Pronóstico abierto</span>
            <h3>{{ $totales['abiertos'] ?? 0 }}</h3>
        </div>

        <div class="stat-card">
            <span>Pronóstico cerrado</span>
            <h3>{{ $totales['cerrados'] ?? 0 }}</h3>
        </div>
    </div>

    <div class="official-status-card">
        <h3>Estado del cálculo oficial por fases</h3>

        <div class="official-status-grid">
            <div class="official-status-item {{ $gruposCompletos ? 'done' : '' }}">
                <b>Fase de grupos</b>
                <span>{{ $gruposCompletos ? 'Completa: 16avos calculados' : 'Pendiente: faltan resultados M1-M72' }}</span>
            </div>

            <div class="official-status-item {{ $dieciseisavosCompletos ? 'done' : '' }}">
                <b>Dieciseisavos</b>
                <span>{{ $dieciseisavosCompletos ? 'Completa: octavos calculados' : 'Pendiente' }}</span>
            </div>

            <div class="official-status-item {{ $octavosCompletos ? 'done' : '' }}">
                <b>Octavos</b>
                <span>{{ $octavosCompletos ? 'Completa: cuartos calculados' : 'Pendiente' }}</span>
            </div>

            <div class="official-status-item {{ $cuartosCompletos ? 'done' : '' }}">
                <b>Cuartos</b>
                <span>{{ $cuartosCompletos ? 'Completa: semifinales calculadas' : 'Pendiente' }}</span>
            </div>

            <div class="official-status-item {{ $semifinalesCompletas ? 'done' : '' }}">
                <b>Semifinales</b>
                <span>{{ $semifinalesCompletas ? 'Completa: final y tercer puesto calculados' : 'Pendiente' }}</span>
            </div>
        </div>

        <div class="recalcular-box">
            <form method="POST"
                  action="{{ route('admin.partidos.recalcular_fase_oficial') }}"
                  onsubmit="return confirm('¿Desea recalcular la fase oficial seleccionada? Esto limpiará y volverá a generar la siguiente fase según los resultados oficiales confirmados.')">
                @csrf

                <div class="row g-3 align-items-end">
                    <div class="col-lg-5">
                        <label class="form-label fw-bold text-success">
                            Recalcular fase oficial manualmente
                        </label>

                        <select name="fase" class="form-select">
                            <option value="grupos">Desde fase de grupos → generar dieciseisavos</option>
                            <option value="dieciseisavos">Desde dieciseisavos → generar octavos</option>
                            <option value="octavos">Desde octavos → generar cuartos</option>
                            <option value="cuartos">Desde cuartos → generar semifinales</option>
                            <option value="semifinales">Desde semifinales → generar tercer puesto y final</option>
                        </select>
                    </div>

                    <div class="col-lg-3">
                        <button class="btn btn-warning w-100">
                            Recalcular fase oficial
                        </button>
                    </div>

                    <div class="col-lg-4">
                        <div class="small text-muted">
                            Use este botón si editó resultados anteriores o si desea forzar nuevamente el cálculo de una fase oficial.
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="quick-links-box">
            <a href="#partidos-oficiales" class="btn btn-outline-success">
                Ir a partidos
            </a>

            <a href="#tablas-oficiales" class="btn btn-outline-dark">
                Ver tablas oficiales al final
            </a>
        </div>
    </div>

    <div class="filter-card">
        <form method="GET" action="{{ route('admin.partidos.index') }}">
            <div class="row g-3 align-items-end">
                <div class="col-lg-4">
                    <label>Buscar partido, equipo, sede o fecha</label>
                    <input type="text"
                           name="buscar"
                           value="{{ request('buscar') }}"
                           class="form-control"
                           placeholder="Ej: M73, México, Argentina, 2026-06-11">
                </div>

                <div class="col-lg-2 col-md-4">
                    <label>Fase</label>
                    <select name="fase" class="form-select">
                        <option value="">Todas</option>
                        @foreach($fases as $fase)
                            <option value="{{ $fase->codigo }}" @selected(request('fase') === $fase->codigo)>
                                {{ $fase->nombre }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-lg-2 col-md-4">
                    <label>Fecha</label>
                    <input type="date"
                           name="fecha"
                           value="{{ request('fecha') }}"
                           class="form-control">
                </div>

                <div class="col-lg-2 col-md-4">
                    <label>Estado</label>
                    <select name="estado" class="form-select">
                        <option value="">Todos</option>
                        <option value="pendiente" @selected(request('estado') === 'pendiente')>Pendiente</option>
                        <option value="confirmado" @selected(request('estado') === 'confirmado')>Confirmado</option>
                        <option value="abierto" @selected(request('estado') === 'abierto')>Abierto</option>
                        <option value="cerrado" @selected(request('estado') === 'cerrado')>Cerrado</option>
                    </select>
                </div>

                <div class="col-lg-2 d-flex gap-2">
                    <button class="btn btn-success w-100">
                        Buscar
                    </button>

                    <a href="{{ route('admin.partidos.index') }}" class="btn btn-outline-secondary">
                        Limpiar
                    </a>
                </div>
            </div>
        </form>
    </div>

    <div id="partidos-oficiales"></div>

    <div class="fase-tabs-admin">
        <button type="button" class="fase-admin-tab active" data-fase="todas">
            Todas
        </button>

        @foreach($fases as $fase)
            <button type="button" class="fase-admin-tab" data-fase="{{ $fase->codigo }}">
                {{ $fase->nombre }}
            </button>
        @endforeach
    </div>

    <section id="fase-todas" class="fase-admin-panel active">
        <div class="fase-title">
            <h3>Todos los partidos</h3>
            <span class="badge bg-warning text-dark">{{ $partidos->count() }} partidos mostrados</span>
        </div>

        @if($partidos->count())
            <div class="match-admin-grid">
                @foreach($partidos as $p)
                    @include('admin.partials.partido-card', [
                        'p' => $p,
                        'equipos' => $equipos,
                        'renderEquipo' => $renderEquipo
                    ])
                @endforeach
            </div>
        @else
            <div class="empty-state">No se encontraron partidos con los filtros aplicados.</div>
        @endif
    </section>

    @foreach($fases as $fase)
        @php
            $partidosFase = $partidos->filter(fn($p) => $p->fase?->codigo === $fase->codigo);
        @endphp

        <section id="fase-{{ $fase->codigo }}" class="fase-admin-panel">
            <div class="fase-title">
                <h3>{{ $fase->nombre }}</h3>
                <span class="badge bg-warning text-dark">{{ $partidosFase->count() }} partidos</span>
            </div>

            @if($partidosFase->count())
                <div class="match-admin-grid">
                    @foreach($partidosFase as $p)
                        @include('admin.partials.partido-card', [
                            'p' => $p,
                            'equipos' => $equipos,
                            'renderEquipo' => $renderEquipo
                        ])
                    @endforeach
                </div>
            @else
                <div class="empty-state">No hay partidos para esta fase con los filtros aplicados.</div>
            @endif
        </section>
    @endforeach

    @if(count($tablaOficial))
        <div id="tablas-oficiales" class="official-table-card mt-4">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                <div>
                    <h3 class="mb-0">Tablas oficiales de grupos</h3>
                    <small>
                        Calculadas con los resultados oficiales registrados por el administrador.
                        Reglamento: victoria 3 pts, empate 1 pt, derrota 0 pts.
                    </small>
                </div>

                @if(!$gruposCompletos)
                    <span class="badge bg-warning text-dark fs-6">Aún faltan resultados de grupos</span>
                @else
                    <span class="badge bg-success fs-6">Grupos completos</span>
                @endif
            </div>

            <div class="row">
                @foreach($tablaOficial as $grupo => $filas)
                    <div class="col-lg-4 col-md-6 mb-3">
                        <div class="official-group-card">
                            <h5>Grupo {{ $grupo }}</h5>

                            <div class="table-responsive">
                                <table class="table table-sm align-middle">
                                    <thead>
                                        <tr>
                                            <th>Pos</th>
                                            <th>Equipo</th>
                                            <th>PJ</th>
                                            <th>PTS</th>
                                            <th>DG</th>
                                            <th>GF</th>
                                            <th>GC</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        @foreach($filas as $f)
                                            <tr class="{{ ($f['clasifica'] ?? false) ? 'table-success' : '' }}">
                                                <td>{{ $f['posicion'] }}</td>
                                                <td>{!! $renderEquipo($f['equipo']) !!}</td>
                                                <td>{{ $f['pj'] }}</td>
                                                <td><b>{{ $f['pts'] }}</b></td>
                                                <td>{{ $f['dg'] }}</td>
                                                <td>{{ $f['gf'] }}</td>
                                                <td>{{ $f['gc'] }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <small class="text-muted">
                                1° y 2° clasifican directo. El 3° entra al ranking de mejores terceros.
                            </small>
                        </div>
                    </div>
                @endforeach
            </div>

            @if(count($mejoresTercerosOficiales))
                <div class="official-third-card mt-3">
                    <h4>Mejores terceros oficiales</h4>

                    <div class="table-responsive">
                        <table class="table table-sm align-middle">
                            <thead>
                                <tr>
                                    <th>Orden</th>
                                    <th>Grupo</th>
                                    <th>Equipo</th>
                                    <th>PTS</th>
                                    <th>DG</th>
                                    <th>GF</th>
                                    <th>Estado</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach($mejoresTercerosOficiales as $fila)
                                    <tr class="{{ $loop->iteration <= 8 ? 'table-success' : '' }}">
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $fila['grupo'] }}</td>
                                        <td>{!! $renderEquipo($fila['equipo']) !!}</td>
                                        <td><b>{{ $fila['pts'] }}</b></td>
                                        <td>{{ $fila['dg'] }}</td>
                                        <td>{{ $fila['gf'] }}</td>
                                        <td>
                                            @if($loop->iteration <= 8)
                                                <span class="badge bg-success">Clasifica</span>
                                            @else
                                                <span class="badge bg-secondary">No clasifica</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>
    @endif

</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const tabs = document.querySelectorAll('.fase-admin-tab');
        const panels = document.querySelectorAll('.fase-admin-panel');

        tabs.forEach(tab => {
            tab.addEventListener('click', function () {
                const fase = this.dataset.fase;

                tabs.forEach(t => t.classList.remove('active'));
                panels.forEach(p => p.classList.remove('active'));

                this.classList.add('active');

                const panel = document.getElementById('fase-' + fase);

                if (panel) {
                    panel.classList.add('active');

                    window.scrollTo({
                        top: panel.offsetTop - 110,
                        behavior: 'smooth'
                    });
                }
            });
        });
    });
</script>

@endsection