@extends('layouts.app')

@section('title', 'Partidos - OnAPB')

@section('styles')
<link rel="stylesheet" href="{{ asset('static/eventos.css?v=5') }}">
@endsection

@section('content')
<div class="container-fluid py-5" style="background: var(--surface);">
    <div class="container py-4">
        <h1 class="display-1 fw-bold mb-5" style="letter-spacing: -0.05em;">Calendario <span class="text-primary">ONAPB</span></h1>

        <!-- Horizontal Date Scroller -->
        <div class="mb-5 overflow-hidden position-relative">
            <div class="d-flex gap-3 overflow-auto pb-3 no-scrollbar" style="scroll-behavior: smooth;">
                @foreach($fechasNav as $nav)
                    <a href="{{ route('eventos.index', ['fecha' => $nav['fecha']]) }}" 
                       class="flex-shrink-0 text-decoration-none px-4 py-3 text-center d-flex flex-column justify-content-center {{ $nav['active'] ? 'bg-primary text-white' : 'bg-white text-kinetic-muted' }}"
                       style="min-width: 100px; transition: all 0.3s ease; border: 1px solid var(--outline-variant);">
                        <span class="small fw-bold text-uppercase">{{ explode(' ', $nav['label'])[0] }}</span>
                        <span class="fs-4 fw-bold">{{ explode(' ', $nav['label'])[1] }}</span>
                    </a>
                @endforeach
            </div>
            <!-- Linear gradients for scroll indication -->
            <div class="position-absolute top-0 start-0 h-100" style="width: 40px; background: linear-gradient(to right, var(--surface), transparent); pointer-events: none;"></div>
            <div class="position-absolute top-0 end-0 h-100" style="width: 40px; background: linear-gradient(to left, var(--surface), transparent); pointer-events: none;"></div>
        </div>

        <!-- Match List -->
        <div class="row g-4">
            @if($eventos->isEmpty())
                <div class="col-12 text-center py-5">
                    <div class="kinetic-card p-5">
                        <i class="bi bi-calendar-x text-muted mb-3" style="font-size: 3rem;"></i>
                        <p class="fs-4 text-muted">No hay partidos programados para esta fecha.</p>
                    </div>
                </div>
            @else
                @foreach($eventos as $e)
                    @php
                        $localClub = $e->equipoLocal?->club;
                        $visitanteClub = $e->equipoVisitante?->club;
                        $isLive = $e->estado === 'Activo';
                    @endphp
                    <div class="col-12">
                        <a href="{{ route('eventos.show', $e->id_evento) }}" class="text-decoration-none">
                            <div class="kinetic-card p-0 overflow-hidden d-flex flex-column flex-md-row align-items-stretch" 
                                 style="border-left: {{ $isLive ? '8px solid var(--primary)' : 'none' }}; min-height: 120px;">
                                
                                <!-- Status/Time (Asymmetric Side) -->
                                <div class="p-4 d-flex flex-column justify-content-center text-center bg-light" style="width: 150px; border-right: 1px solid var(--outline-variant);">
                                    @if($isLive)
                                        <span class="badge bg-primary mb-2 pulse">EN VIVO</span>
                                    @else
                                        <span class="small fw-bold text-uppercase text-muted mb-1">{{ $e->estado }}</span>
                                    @endif
                                    <span class="fs-3 fw-bold">{{ \Carbon\Carbon::parse($e->hora_inicio)->format('H:i') }}</span>
                                </div>

                                <!-- Teams (Center) -->
                                <div class="flex-grow-1 p-4 d-flex align-items-center justify-content-between px-md-5">
                                    <div class="d-flex align-items-center gap-3 text-start" style="width: 40%;">
                                        <div style="width: 50px; height: 50px;">
                                            @if($localClub && $localClub->imagen)
                                                <img src="{{ asset($localClub->imagen) }}" class="img-fluid rounded-circle" alt="{{ $localClub->nombre }}">
                                            @else
                                                <div class="w-100 h-100 bg-light rounded-circle d-flex align-items-center justify-content-center text-muted"><i class="bi bi-shield"></i></div>
                                            @endif
                                        </div>
                                        <h3 class="h4 mb-0 fw-bold">{{ $localClub?->nombre ?? 'Local' }}</h3>
                                    </div>

                                    <div class="text-center px-3">
                                        <span class="fs-2 fw-bold text-muted">VS</span>
                                    </div>

                                    <div class="d-flex align-items-center gap-3 text-end justify-content-end" style="width: 40%;">
                                        <h3 class="h4 mb-0 fw-bold">{{ $visitanteClub?->nombre ?? 'Visitante' }}</h3>
                                        <div style="width: 50px; height: 50px;">
                                            @if($visitanteClub && $visitanteClub->imagen)
                                                <img src="{{ asset($visitanteClub->imagen) }}" class="img-fluid rounded-circle" alt="{{ $visitanteClub->nombre }}">
                                            @else
                                                <div class="w-100 h-100 bg-light rounded-circle d-flex align-items-center justify-content-center text-muted"><i class="bi bi-shield"></i></div>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <!-- Venue (Right) -->
                                <div class="p-4 d-none d-md-flex flex-column justify-content-center text-muted" style="width: 250px; border-left: 1px solid var(--outline-variant);">
                                    <span class="small fw-bold text-uppercase">Sede</span>
                                    <span class="small"><i class="bi bi-geo-alt"></i> {{ $e->sede ?? 'TBD' }}</span>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
</div>

@endsection