@extends('layouts.app')

@section('title', 'Goleadores - ' . $torneo->nombre)

@section('content')
<div class="news-container py-5">
    <div class="container">
        <div class="text-center mb-5">
            <span class="badge bg-primary px-3 py-2 text-uppercase tracking-widest mb-2">Estadísticas Individuales</span>
            <h1 class="display-4 fw-bold text-uppercase italic tracking-tighter">TABLA DE <span class="text-primary">GOLEADORES</span></h1>
            <p class="lead text-muted">{{ $torneo->nombre }}</p>

            <!-- Navigation Tabs -->
            <div class="d-flex border-bottom mb-4 gap-4 overflow-x-auto justify-content-center">
                <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 justify-content-center">
                    <a href="{{ route('torneos.topScorers', $torneo->id) }}" 
                       class="btn {{ !$selectedGroup ? 'btn-primary' : 'btn-outline-primary' }} btn-sm text-uppercase fw-bold rounded-pill px-4">
                       Todos los Grupos
                    </a>
                    @foreach($grupos as $g)
                        <a href="{{ route('torneos.topScorers', [$torneo->id, 'grupo' => $g]) }}" 
                           class="btn {{ $selectedGroup == $g ? 'btn-primary' : 'btn-outline-primary' }} btn-sm text-uppercase fw-bold rounded-pill px-4">
                           {{ $g }}
                        </a>
                    @endforeach
                </div>
            @endif
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="kinetic-card overflow-hidden">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0 align-middle">
                                <thead class="bg-dark text-white text-uppercase small tracking-widest">
                                    <tr>
                                        <th class="ps-4 py-3" width="60">#</th>
                                        <th class="py-3">Jugador</th>
                                        <th class="py-3">Club</th>
                                        <th class="py-3 text-center" width="80">PJ</th>
                                        <th class="py-3 text-center" width="100">PTS</th>
                                        <th class="pe-4 py-3 text-center" width="100">PROM</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($scorers as $index => $s)
                                    <tr class="{{ $index < 3 ? 'bg-light fw-bold' : '' }}">
                                        <td class="ps-4 py-3">
                                            @if($index == 0) <span class="fs-4">🥇</span>
                                            @elseif($index == 1) <span class="fs-4">🥈</span>
                                            @elseif($index == 2) <span class="fs-4">🥉</span>
                                            @else <span class="fw-bold text-muted">#{{ $index + 1 }}</span>
                                            @endif
                                        </td>
                                        <td class="py-3">
                                            <div class="text-uppercase tracking-tighter">{{ $s->jugador->apellido }}, {{ $s->jugador->nombre }}</div>
                                        </td>
                                        <td class="py-3">
                                            <span class="small text-muted text-uppercase">{{ $s->jugador->clubActual->nombre ?? 'N/A' }}</span>
                                        </td>
                                        <td class="py-3 text-center fw-bold">{{ $s->partidos_jugados }}</td>
                                        <td class="py-3 text-center">
                                            <span class="badge {{ $index < 3 ? 'bg-primary' : 'bg-dark' }} fs-6 px-3">{{ $s->total_puntos }}</span>
                                        </td>
                                        <td class="pe-4 py-3 text-center text-muted">
                                            {{ number_format($s->total_puntos / max(1, $s->partidos_jugados), 1) }}
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="6" class="p-5 text-center text-muted italic">
                                            No hay estadísticas registradas para este torneo todavía.
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <div class="text-center mt-4 small text-muted text-uppercase tracking-widest italic">
                    Actualizado el {{ date('d/m/Y H:i') }}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .news-container {
        background-color: var(--surface);
        min-height: 100vh;
    }
    .table-hover tbody tr:hover {
        background-color: rgba(0,0,0,0.02);
        transition: background-color 0.2s ease;
    }
</style>
@endsection
