@extends('layouts.app')

@section('title', 'Tabla de Posiciones - ' . $torneo->nombre)

@section('content')
<div class="container-fluid py-5" style="background: var(--surface);">
    <div class="container py-4">
        <div class="mb-5">
            <nav aria-label="breadcrumb" class="mb-3">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('noticias.index') }}" class="text-decoration-none text-muted">Media Hub</a></li>
                    <li class="breadcrumb-item active text-primary fw-bold" aria-current="page">{{ $torneo->nombre }}</li>
                </ol>
            </nav>
            <span class="text-primary fw-bold text-uppercase tracking-widest d-block mb-2">Competición Oficial</span>
            <h1 class="display-3 fw-bold mb-0" style="line-height: 1;">Tabla de Posiciones<span class="text-primary">.</span></h1>
            <p class="fs-4 text-muted mt-2">{{ $torneo->nombre }} ({{ $torneo->fecha_inicio->format('Y') }})</p>

            <!-- Navigation Tabs -->
            <div class="d-flex border-bottom mb-4 gap-4 overflow-x-auto">
                <a href="{{ route('torneos.standings', $torneo->id) }}" 
                   class="pb-3 text-uppercase fw-bold text-decoration-none {{ Request::routeIs('torneos.standings') ? 'text-primary border-bottom border-primary border-3' : 'text-muted' }}">
                    Posiciones
                </a>
                <a href="{{ route('torneos.topScorers', $torneo->id) }}" 
                   class="pb-3 text-uppercase fw-bold text-decoration-none {{ Request::routeIs('torneos.topScorers') ? 'text-primary border-bottom border-primary border-3' : 'text-muted' }}">
                    Goleadores
                </a>
                <a href="{{ route('torneos.playoffs', $torneo->id) }}" 
                   class="pb-3 text-uppercase fw-bold text-decoration-none {{ Request::routeIs('torneos.playoffs') ? 'text-primary border-bottom border-primary border-3' : 'text-muted' }}">
                    Playoffs
                </a>
            </div>

            @if(count($grupos) > 0)
                <div class="d-flex flex-wrap gap-2 mt-4">
                    <a href="{{ route('torneos.standings', $torneo->id) }}" 
                       class="btn {{ !$selectedGroup ? 'btn-primary' : 'btn-outline-primary' }} btn-sm text-uppercase fw-bold px-4">
                       Todos los Grupos
                    </a>
                    @foreach($grupos as $g)
                        <a href="{{ route('torneos.standings', [$torneo->id, 'grupo' => $g]) }}" 
                           class="btn {{ $selectedGroup == $g ? 'btn-primary' : 'btn-outline-primary' }} btn-sm text-uppercase fw-bold px-4">
                           {{ $g }}
                        </a>
                    @endforeach
                </div>
            @endif
        </div>

        <div class="bg-white shadow-xl overflow-hidden" style="border-top: 10px solid var(--primary); border: 1px solid var(--outline-variant);">
            <div class="table-responsive">
                @foreach($stats as $groupName => $teams)
                    <div class="group-section mb-5">
                        <h2 class="h4 fw-bold text-uppercase bg-light p-3 border-start border-primary border-4 mb-0">
                            {{ $groupName }}
                        </h2>
                        <table class="table table-hover mb-0 kinetic-standings-table">
                            <thead class="bg-dark text-white text-uppercase tracking-widest small">
                                <tr>
                                    <th class="px-4 py-3">#</th>
                                    <th class="px-4 py-3">Equipo</th>
                                    <th class="px-4 py-3 text-center">PJ</th>
                                    <th class="px-4 py-3 text-center">PG</th>
                                    <th class="px-4 py-3 text-center">PP</th>
                                    <th class="px-4 py-3 text-center">TF</th>
                                    <th class="px-4 py-3 text-center">TC</th>
                                    <th class="px-4 py-3 text-center">DIF</th>
                                    <th class="px-4 py-3 text-center bg-primary">PTS</th>
                                </tr>
                            </thead>
                            <tbody class="fs-5">
                                @foreach($teams as $index => $s)
                                <tr>
                                    <td class="px-4 py-4 fw-bold text-muted">{{ $index + 1 }}</td>
                                    <td class="px-4 py-4">
                                        <div class="d-flex align-items-center">
                                            @if(session('user_logged_in'))
                                                @php $isFollowing = in_array($s['id'], $followedTeamIds); @endphp
                                                <button class="btn btn-sm p-0 me-2 follow-star-btn" 
                                                        data-equipo-id="{{ $s['id'] }}"
                                                        title="{{ $isFollowing ? 'Dejar de seguir' : 'Seguir equipo' }}">
                                                    <i class="bi {{ $isFollowing ? 'bi-star-fill text-warning' : 'bi-star text-muted' }}" style="font-size: 1.2rem;"></i>
                                                </button>
                                            @endif
                                            <a href="{{ route('equipos.show', $s['id']) }}" class="text-decoration-none hover-primary d-flex align-items-center">
                                                <img src="{{ $s['logo'] ? asset($s['logo']) : asset('logo.png') }}" 
                                                     class="me-3 rounded-circle border shadow-sm" 
                                                     style="width: 32px; height: 32px; object-fit: cover;"
                                                     onerror="this.onerror=null;this.src='{{ asset('logo.png') }}';">
                                                <span class="fw-bold font-header text-dark">{{ $s['nombre'] }}</span>
                                            </a>
                                            {{-- Only show base category if different from group name --}}
                                            @if($s['categoria'] != $groupName)
                                                <span class="ms-3 badge bg-light text-muted border small">{{ $s['categoria'] }}</span>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="px-4 py-4 text-center">{{ $s['pj'] }}</td>
                                    <td class="px-4 py-4 text-center text-success fw-bold">{{ $s['pg'] }}</td>
                                    <td class="px-4 py-4 text-center text-danger fw-bold">{{ $s['pp'] }}</td>
                                    <td class="px-4 py-4 text-center text-muted">{{ $s['tf'] }}</td>
                                    <td class="px-4 py-4 text-center text-muted">{{ $s['tc'] }}</td>
                                    <td class="px-4 py-4 text-center fw-bold {{ ($s['tf'] - $s['tc']) >= 0 ? 'text-dark' : 'text-danger' }}">
                                        {{ ($s['tf'] - $s['tc']) > 0 ? '+' : '' }}{{ $s['tf'] - $s['tc'] }}
                                    </td>
                                    <td class="px-4 py-4 text-center fw-bold bg-primary bg-opacity-10 text-primary" style="font-size: 1.4rem;">
                                        {{ $s['pts'] }}
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endforeach
            </div>
            @if(empty($stats))
                <div class="text-center py-5">
                    <i class="bi bi-info-circle text-muted display-4 d-block mb-3"></i>
                    <p class="text-muted fs-4">Aún no se han registrado resultados en este torneo.</p>
                </div>
            @endif
        </div>

        <div class="mt-4 p-4 bg-white border shadow-sm" style="border-radius: var(--radius);">
            <h5 class="fw-bold mb-3 small text-uppercase tracking-widest text-muted">Sistema de Puntuación</h5>
            <div class="row text-center g-4">
                <div class="col-md-4">
                    <div class="p-3 border" style="border-radius: var(--radius-sm);">
                        <span class="d-block fs-3 fw-bold text-primary">2 PTS</span>
                        <span class="text-muted small">Victoria</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="p-3 border" style="border-radius: var(--radius-sm);">
                        <span class="d-block fs-3 fw-bold text-dark">1 PT</span>
                        <span class="text-muted small">Derrota</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="p-3 border" style="border-radius: var(--radius-sm);">
                        <span class="d-block fs-3 fw-bold text-danger">0 PTS</span>
                        <span class="text-muted small">W.O. / Incomparecencia</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.kinetic-standings-table tbody tr {
    transition: background-color 0.2s;
}
.kinetic-standings-table tbody tr:hover {
    background-color: var(--primary-container) !important;
}
.font-header {
    letter-spacing: -0.02em;
}
.hover-primary:hover span {
    color: var(--primary) !important;
    text-decoration: underline;
}
</style>
@endsection