@extends('layouts.app')

@section('contenido')

@php
    $faseCalculo = [
        'grupos' => 'grupos',
        'dieciseisavos' => 'dieciseisavos',
        'octavos' => 'octavos',
        'cuartos' => 'cuartos',
        'semifinales' => 'semifinales',
    ];

    $textoBotonCalculo = [
        'grupos' => 'Calcular dieciseisavos',
        'dieciseisavos' => 'Calcular octavos',
        'octavos' => 'Calcular cuartos',
        'cuartos' => 'Calcular semifinales',
        'semifinales' => 'Calcular final y tercer puesto',
    ];

    /*
    |--------------------------------------------------------------------------
    | Mapa de códigos FIFA / abreviaturas a código de bandera ISO
    |--------------------------------------------------------------------------
    | Si tienes imágenes locales, guárdalas en public/img/flags/
    | Ejemplo:
    | public/img/flags/mex.png
    | public/img/flags/arg.png
    | public/img/flags/bra.png
    */
    $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',
        'DZ' => 'dz',
        'AUS' => 'au',
        'AUT' => 'at',
        'DEN' => 'dk',
        'NOR' => 'no',
        'SWE' => 'se',
        'POL' => 'pl',
        'SEN' => 'sn',
        'EGY' => 'eg',
        'TUN' => 'tn',
        'IRN' => 'ir',
        'IRQ' => 'iq',
        'KSA' => 'sa',
        'SAU' => 'sa',
        'JOR' => 'jo',
        'UZB' => 'uz',
        'NZL' => 'nz',
        'PAN' => 'pa',
        'CRC' => 'cr',
        'CUR' => 'cw',
        'CUW' => 'cw',
        'CPV' => 'cv',
        'COD' => 'cd',
        'DRC' => 'cd',
        'QAT' => 'qa',
        'UAE' => 'ae',
        'CHI' => 'cl',
        'CHL' => 'cl',
        'PER' => 'pe',
        'BOL' => 'bo',
        'VEN' => 've',
        'UKR' => 'ua',
        'TUR' => 'tr',
        'GRE' => 'gr',
        'ROU' => 'ro',
        'SRB' => 'rs',
        'CYP' => 'cy',
        'HAI' => 'ht',
        'JAM' => 'jm',
    ];

    $isoPorNombre = [
        'méxico' => 'mx',
        'mexico' => 'mx',
        'sudáfrica' => 'za',
        'sudafrica' => 'za',
        'corea del sur' => 'kr',
        'república checa' => 'cz',
        'republica checa' => 'cz',
        'estados unidos' => 'us',
        'paraguay' => 'py',
        'canadá' => 'ca',
        'canada' => 'ca',
        'bosnia y herzegovina' => 'ba',
        'portugal' => 'pt',
        'suiza' => 'ch',
        'ecuador' => 'ec',
        'alemania' => 'de',
        'costa de marfil' => 'ci',
        'países bajos' => 'nl',
        'paises bajos' => 'nl',
        'brasil' => 'br',
        'marruecos' => 'ma',
        'francia' => 'fr',
        'argentina' => 'ar',
        'croacia' => 'hr',
        'inglaterra' => 'gb-eng',
        'españa' => 'es',
        'espana' => 'es',
        'italia' => 'it',
        'bélgica' => 'be',
        'belgica' => 'be',
        'uruguay' => 'uy',
        'colombia' => 'co',
        'japón' => 'jp',
        'japon' => 'jp',
        'ghana' => 'gh',
        'argelia' => 'dz',
        'australia' => 'au',
        'austria' => 'at',
        'dinamarca' => 'dk',
        'noruega' => 'no',
        'suecia' => 'se',
        'polonia' => 'pl',
        'senegal' => 'sn',
        'egipto' => 'eg',
        'túnez' => 'tn',
        'tunez' => 'tn',
        'irán' => 'ir',
        'iran' => 'ir',
        'irak' => 'iq',
        'arabia saudita' => 'sa',
        'jordania' => 'jo',
        'uzbekistán' => 'uz',
        'uzbekistan' => 'uz',
        'nueva zelanda' => 'nz',
        'panamá' => 'pa',
        'panama' => 'pa',
        'costa rica' => 'cr',
        'curazao' => 'cw',
        'cabo verde' => 'cv',
        'rd congo' => 'cd',
        'república democrática del congo' => 'cd',
        'republica democratica del congo' => 'cd',
    ];

    $normalizarTexto = function ($texto) {
        $texto = mb_strtolower(trim((string) $texto), 'UTF-8');

        $buscar = ['á','é','í','ó','ú','ñ','ü'];
        $reemplazar = ['a','e','i','o','u','n','u'];

        return str_replace($buscar, $reemplazar, $texto);
    };

    $codigoEquipo = function ($equipo, $origen = null) {
        if ($equipo) {
            return strtoupper($equipo->codigo ?? mb_substr($equipo->nombre ?? 'EQ', 0, 3));
        }

        return strtoupper($origen ?: 'PEND');
    };

    $nombreEquipo = function ($equipo, $origen = null) {
        if ($equipo) {
            return $equipo->nombre ?? $equipo->codigo ?? 'Equipo';
        }

        return $origen ?: 'Pendiente';
    };

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

        $bandera = $equipo->bandera ?? null;
        $codigo = strtoupper(trim((string) ($equipo->codigo ?? '')));
        $nombre = trim((string) ($equipo->nombre ?? ''));

        /*
        |--------------------------------------------------------------------------
        | 1. Si el modelo ya trae URL o ruta en bandera
        |--------------------------------------------------------------------------
        */
        if ($bandera) {
            if (str_starts_with($bandera, 'http')) {
                return $bandera;
            }

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

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

        /*
        |--------------------------------------------------------------------------
        | 2. Buscar bandera local por código FIFA
        |--------------------------------------------------------------------------
        */
        $candidatos = [];

        if ($codigo) {
            $candidatos[] = strtolower($codigo);
            $candidatos[] = strtoupper($codigo);

            if (isset($codigoIsoBandera[$codigo])) {
                $candidatos[] = $codigoIsoBandera[$codigo];
            }
        }

        /*
        |--------------------------------------------------------------------------
        | 3. Buscar bandera local por nombre normalizado
        |--------------------------------------------------------------------------
        */
        if ($nombre) {
            $nombreNormalizado = $normalizarTexto($nombre);

            if (isset($isoPorNombre[$nombreNormalizado])) {
                $candidatos[] = $isoPorNombre[$nombreNormalizado];
            }
        }

        $extensiones = ['png', 'jpg', 'jpeg', 'webp', 'svg'];

        foreach (array_unique($candidatos) as $base) {
            foreach ($extensiones as $ext) {
                $rutas = [
                    "img/flags/{$base}.{$ext}",
                    "img/banderas/{$base}.{$ext}",
                    "flags/{$base}.{$ext}",
                    "banderas/{$base}.{$ext}",
                ];

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

        /*
        |--------------------------------------------------------------------------
        | 4. Si no hay imagen local, usar bandera online
        |--------------------------------------------------------------------------
        */
        $iso = null;

        if ($codigo && isset($codigoIsoBandera[$codigo])) {
            $iso = $codigoIsoBandera[$codigo];
        }

        if (!$iso && $nombre) {
            $nombreNormalizado = $normalizarTexto($nombre);
            $iso = $isoPorNombre[$nombreNormalizado] ?? null;
        }

        if ($iso) {
            return "https://flagcdn.com/w80/{$iso}.png";
        }

        return null;
    };

    $renderBandera = function ($equipo, $origen = null) use ($banderaEquipo, $codigoEquipo) {
        $src = $banderaEquipo($equipo);
        $codigo = $codigoEquipo($equipo, $origen);

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

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

<style>
    .pronostico-wrapper {
        background: #f4f7fa;
        min-height: 100vh;
        padding-bottom: 40px;
    }

    .titulo-mundial {
        font-size: 34px;
        font-weight: 950;
        color: #003c2f;
        margin-bottom: 14px;
    }

    .alerta-mundial {
        background: #d8f6f2;
        color: #003c2f;
        border: 1px solid #99e4dc;
        border-radius: 18px;
        padding: 16px 20px;
        margin-bottom: 18px;
        font-weight: 600;
    }

    .acciones-superiores {
        background: white;
        border-radius: 22px;
        padding: 14px;
        box-shadow: 0 10px 28px rgba(0,0,0,.06);
        display: flex;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 16px;
    }

    .acciones-superiores .btn {
        border-radius: 10px;
        font-weight: 800;
    }

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

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

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

    .fase-panel {
        display: none;
    }

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

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

    .fase-header h3 {
        margin: 0;
        font-weight: 950;
        font-size: 27px;
    }

    .partidos-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-bottom: 14px;
    }

    .partido-card {
        background: white;
        border-radius: 18px;
        padding: 12px;
        box-shadow: 0 10px 24px rgba(0,0,0,.06);
        border-left: 6px solid #00895f;
    }

    .partido-card.bloqueado {
        opacity: .78;
        background: #f5f7f8;
    }

    .partido-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .partido-numero {
        background: #003c2f;
        color: white;
        border-radius: 999px;
        padding: 5px 10px;
        font-weight: 950;
        font-size: 13px;
    }

    .puntos-badge {
        background: #111827;
        color: white;
        border-radius: 999px;
        padding: 5px 10px;
        font-weight: 950;
        font-size: 13px;
    }

    .team-row {
        display: grid;
        grid-template-columns: 1fr 58px;
        align-items: center;
        gap: 8px;
        margin-bottom: 7px;
    }

    .team-name {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 900;
        background: #f4f7f8;
        border-radius: 10px;
        padding: 8px;
        min-height: 42px;
        overflow: hidden;
    }

    .team-name span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .flag-wrap {
        width: 32px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .flag {
        width: 32px;
        height: 22px;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid #d8d8d8;
        background: white;
        flex: 0 0 auto;
        box-shadow: 0 1px 3px rgba(0,0,0,.15);
    }

    .flag-fallback {
        width: 34px;
        height: 24px;
        border-radius: 6px;
        background: linear-gradient(135deg, #003c2f, #00895f);
        color: white;
        font-size: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 950;
        flex: 0 0 auto;
        box-shadow: 0 1px 3px rgba(0,0,0,.15);
    }

    .flag-hidden {
        display: none;
    }

    .marcador {
        height: 42px;
        text-align: center;
        font-weight: 900;
        border-radius: 10px;
    }

    .ganador-select {
        border-radius: 10px;
        font-weight: 700;
        margin-top: 6px;
    }

    .ayuda-penales {
        color: #506070;
        font-size: 12px;
        margin-top: 5px;
        display: block;
    }

    .mensaje-pendiente {
        color: #dc2626;
        font-size: 12px;
        font-weight: 700;
        margin-top: 6px;
    }

    .botones-fase {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 24px;
    }

    .botones-fase .btn {
        border-radius: 10px;
        font-weight: 800;
    }

    .tabla-card {
        background: white;
        border-radius: 18px;
        padding: 14px;
        box-shadow: 0 10px 24px rgba(0,0,0,.06);
        height: 100%;
        border-top: 5px solid #00895f;
    }

    .tabla-card h5 {
        color: #003c2f;
        font-weight: 950;
    }

    .tabla-card table {
        font-size: 13px;
    }

    .team-table-name {
        display: flex;
        gap: 7px;
        align-items: center;
        font-weight: 800;
    }

    @media(max-width: 1100px) {
        .partidos-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media(max-width: 720px) {
        .partidos-grid {
            grid-template-columns: 1fr;
        }

        .fase-tabs {
            position: static;
        }
    }
</style>

<div class="pronostico-wrapper">

    <h2 class="titulo-mundial">Mis pronósticos Mundial 2026</h2>

    <div class="alerta-mundial">
        <b>Importante:</b> cada fase se guarda de forma independiente.
        Primero guarda los marcadores, luego calcula la siguiente fase.
        En semifinales, los ganadores pasan a la final y los perdedores al tercer puesto.
    </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

    @if($estado->pronostico_final_enviado)
        <div class="alert alert-warning rounded-4 fw-bold">
            Tu pronóstico final ya fue enviado. No puedes modificarlo.
        </div>
    @endif

    <div class="acciones-superiores">
        <div class="d-flex gap-2 flex-wrap">
            <a href="{{ route('pronosticos.imprimir') }}" target="_blank" class="btn btn-outline-dark">
                <i class="fa-solid fa-print"></i> Imprimir
            </a>

            <form method="POST"
                  action="{{ route('pronosticos.enviar_final') }}"
                  onsubmit="return confirm('¿Está seguro? Al enviar ya no podrá modificar sus pronósticos.')">
                @csrf
                <button class="btn btn-primary" @disabled($estado->pronostico_final_enviado)>
                    <i class="fa-solid fa-lock"></i> Enviar pronóstico final
                </button>
            </form>
        </div>

        <a href="{{ route('ranking.publico') }}" class="btn btn-outline-secondary">
            <i class="fa-solid fa-ranking-star"></i> Ver ranking
        </a>
    </div>

    <div class="fase-tabs">
        @foreach($fases as $index => $fase)
            <button type="button"
                    class="fase-tab {{ $index === 0 ? 'active' : '' }}"
                    data-fase="{{ $fase->codigo }}">
                {{ $fase->nombre }}
            </button>
        @endforeach
    </div>

    @foreach($fases as $index => $fase)
        <section id="fase-{{ $fase->codigo }}" class="fase-panel {{ $index === 0 ? 'active' : '' }}">

            <div class="fase-header">
                <h3>{{ $fase->nombre }}</h3>

                <div>
                    @if($fase->pronostico_abierto)
                        <span class="badge bg-success">Fase abierta</span>
                    @else
                        <span class="badge bg-secondary">Fase cerrada</span>
                    @endif

                    @if($fase->codigo !== 'grupos')
                        <span class="badge bg-warning text-dark">Equipos calculados por usuario</span>
                    @endif
                </div>
            </div>

            <form method="POST" action="{{ route('pronosticos.guardar') }}">
                @csrf

                <div class="partidos-grid">
                    @foreach($fase->partidos as $partido)
                        @php
                            $pronostico = $pronosticos[$partido->id] ?? null;

                            $local = $partido->numero <= 72
                                ? $partido->local
                                : $pronostico?->local;

                            $visitante = $partido->numero <= 72
                                ? $partido->visitante
                                : $pronostico?->visitante;

                            $tieneEquipos = $local && $visitante;

                            $bloqueado = !$fase->pronostico_abierto
                                || !$partido->pronostico_abierto
                                || ($pronostico?->bloqueado ?? false)
                                || $estado->pronostico_final_enviado
                                || !$tieneEquipos;

                            $esLlave = $partido->numero >= 73;
                        @endphp

                        <div class="partido-card {{ $bloqueado ? 'bloqueado' : '' }}">
                            <div class="partido-top">
                                <span class="partido-numero">M{{ $partido->numero }}</span>
                                <span class="puntos-badge">{{ $pronostico?->puntaje_obtenido ?? 0 }} pts</span>
                            </div>

                            <input type="hidden"
                                   name="pronosticos[{{ $partido->id }}][partido_id]"
                                   value="{{ $partido->id }}">

                            <div class="team-row">
                                <div class="team-name">
                                    {!! $renderBandera($local, $partido->origen_local) !!}
                                    <span>{{ $nombreEquipo($local, $partido->origen_local) }}</span>
                                </div>

                                <input class="form-control marcador"
                                       type="number"
                                       min="0"
                                       max="30"
                                       name="pronosticos[{{ $partido->id }}][goles_local]"
                                       value="{{ $pronostico?->goles_local !== null ? $pronostico->goles_local : '' }}"
                                       @disabled($bloqueado)>
                            </div>

                            <div class="team-row">
                                <div class="team-name">
                                    {!! $renderBandera($visitante, $partido->origen_visitante) !!}
                                    <span>{{ $nombreEquipo($visitante, $partido->origen_visitante) }}</span>
                                </div>

                                <input class="form-control marcador"
                                       type="number"
                                       min="0"
                                       max="30"
                                       name="pronosticos[{{ $partido->id }}][goles_visitante]"
                                       value="{{ $pronostico?->goles_visitante !== null ? $pronostico->goles_visitante : '' }}"
                                       @disabled($bloqueado)>
                            </div>

                            @if($fase->codigo === 'grupos')
                                <input type="hidden"
                                       name="pronosticos[{{ $partido->id }}][ganador_pronosticado_id]"
                                       value="">
                            @else
                                <select class="form-select ganador-select"
                                        name="pronosticos[{{ $partido->id }}][ganador_pronosticado_id]"
                                        @disabled($bloqueado)>
                                    <option value="">Ganador si hay empate</option>

                                    @if($local)
                                        <option value="{{ $local->id }}"
                                            @selected($pronostico?->ganador_pronosticado_id == $local->id)>
                                            {{ $local->nombre }}
                                        </option>
                                    @endif

                                    @if($visitante)
                                        <option value="{{ $visitante->id }}"
                                            @selected($pronostico?->ganador_pronosticado_id == $visitante->id)>
                                            {{ $visitante->nombre }}
                                        </option>
                                    @endif
                                </select>

                                <small class="ayuda-penales">
                                    Si colocas empate, selecciona quién pasa.
                                </small>
                            @endif

                            @if(!$tieneEquipos && $partido->numero >= 73)
                                <div class="mensaje-pendiente">
                                    Primero calcula la fase anterior para cargar estos equipos.
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>

                <div class="botones-fase">
                    <button class="btn btn-success" @disabled($estado->pronostico_final_enviado)>
                        <i class="fa-solid fa-floppy-disk"></i> Guardar esta fase
                    </button>

                    @if(isset($faseCalculo[$fase->codigo]))
                        <button type="submit"
                                class="btn btn-outline-primary"
                                formaction="{{ route('pronosticos.calcular_fase', $faseCalculo[$fase->codigo]) }}"
                                @disabled($estado->pronostico_final_enviado)>
                            <i class="fa-solid fa-wand-magic-sparkles"></i>
                            {{ $textoBotonCalculo[$fase->codigo] ?? 'Calcular siguiente fase' }}
                        </button>
                    @endif
                </div>
            </form>

        </section>
    @endforeach

    <h3 class="mt-5 mb-3 fw-bold text-success">
        Tablas generadas con tus marcadores
    </h3>

    <div class="row">
        @foreach($tabla as $grupo => $filas)
            <div class="col-lg-4 col-md-6 mb-3">
                <div class="tabla-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>PTS</th>
                                    <th>DG</th>
                                    <th>GF</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach($filas as $f)
                                    @php
                                        $eq = $f['equipo'] ?? null;
                                    @endphp

                                    <tr class="{{ ($f['clasifica'] ?? false) ? 'table-success' : '' }}">
                                        <td>{{ $f['posicion'] ?? '-' }}</td>

                                        <td>
                                            <div class="team-table-name">
                                                {!! $renderBandera($eq) !!}
                                                <span>{{ $eq->nombre ?? 'Pendiente' }}</span>
                                            </div>
                                        </td>

                                        <td><b>{{ $f['pts'] ?? 0 }}</b></td>
                                        <td>{{ $f['dg'] ?? 0 }}</td>
                                        <td>{{ $f['gf'] ?? 0 }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        @endforeach
    </div>

    @if(count($mejoresTerceros))
        <h3 class="mt-4 mb-3 fw-bold text-success">Mejores terceros</h3>

        <div class="tabla-card mb-4">
            <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($mejoresTerceros as $grupo => $fila)
                            @php
                                $eq = $fila['equipo'] ?? null;
                            @endphp

                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $fila['grupo'] ?? $grupo }}</td>

                                <td>
                                    <div class="team-table-name">
                                        {!! $renderBandera($eq) !!}
                                        <span>{{ $eq->nombre ?? 'Pendiente' }}</span>
                                    </div>
                                </td>

                                <td><b>{{ $fila['pts'] ?? 0 }}</b></td>
                                <td>{{ $fila['dg'] ?? 0 }}</td>
                                <td>{{ $fila['gf'] ?? 0 }}</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>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const tabs = document.querySelectorAll('.fase-tab');
        const panels = document.querySelectorAll('.fase-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