@extends('layouts.app')

@section('title', 'Detalle Partido - OnAPB')

@section('content')
@section('content')
<div class="container-fluid py-5" style="background: var(--surface);">
    <div class="container py-4">
        <?php
            $nombreEvento = $evento->nombre_evento ?? (
                ($evento->equipoLocal?->club?->nombre ?? 'Local') . ' vs ' . ($evento->equipoVisitante?->club?->nombre ?? 'Visitante')
            );
            $localClub = $evento->equipoLocal?->club;
            $visitanteClub = $evento->equipoVisitante?->club;
        ?>

        <div class="row g-5">
            <!-- Header Editorial Side -->
            <div class="col-lg-8">
                <div class="mb-5">
                    <span class="text-primary fw-bold tracking-widest text-uppercase mb-2 d-block">Match Profile</span>
                    <h1 class="display-2 fw-bold mb-4" style="line-height: 0.9;">{{ $nombreEvento }}</h1>
                    <div style="width: 120px; height: 10px; background: var(--primary);"></div>
                </div>

                <!-- Score/Teams Editorial -->
                <div class="kinetic-card p-0 mb-5 overflow-hidden">
                    <div class="row g-0 align-items-center text-center">
                        <div class="col-5 p-5 bg-light">
                            @if($localClub && $localClub->imagen)
                                <img src="{{ asset($localClub->imagen) }}" class="img-fluid rounded-circle mb-3" style="width: 120px;" alt="{{ $localClub->nombre }}">
                            @endif
                            <h3 class="h2 fw-bold text-uppercase">{{ $localClub?->nombre ?? 'Local' }}</h3>
                            <span class="text-muted small fw-bold">{{ $evento->equipoLocal?->categoria }}</span>
                        </div>
                        <div class="col-2 p-4">
                            <span class="display-4 fw-bold text-muted">VS</span>
                        </div>
                        <div class="col-5 p-5 bg-white">
                            @if($visitanteClub && $visitanteClub->imagen)
                                <img src="{{ asset($visitanteClub->imagen) }}" class="img-fluid rounded-circle mb-3" style="width: 120px;" alt="{{ $visitanteClub->nombre }}">
                            @endif
                            <h3 class="h2 fw-bold text-uppercase">{{ $visitanteClub?->nombre ?? 'Visitante' }}</h3>
                            <span class="text-muted small fw-bold">{{ $evento->equipoVisitante?->categoria }}</span>
                        </div>
                    </div>
                </div>

                <!-- Info Grid -->
                <div class="row g-4 mb-5">
                    <div class="col-md-4">
                        <div class="bg-white p-4" style="border-bottom: 4px solid var(--primary-container);">
                            <span class="text-muted small fw-bold text-uppercase d-block mb-1">Fecha</span>
                            <span class="fs-5 fw-bold">{{ \Carbon\Carbon::parse($evento->fecha_evento)->translatedFormat('d F Y') }}</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="bg-white p-4" style="border-bottom: 4px solid var(--primary-container);">
                            <span class="text-muted small fw-bold text-uppercase d-block mb-1">Horario</span>
                            <span class="fs-5 fw-bold">{{ \Carbon\Carbon::parse($evento->hora_inicio)->format('H:i') }} hs</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="bg-white p-4" style="border-bottom: 4px solid var(--primary-container);">
                            <span class="text-muted small fw-bold text-uppercase d-block mb-1">Estado</span>
                            <span class="fs-5 fw-bold {{ $evento->estado === 'Activo' ? 'text-primary' : '' }} text-uppercase">{{ $evento->estado }}</span>
                        </div>
                    </div>
                </div>

                <!-- Venue Map Placeholder -->
                <div class="kinetic-card p-4 bg-light">
                    <h4 class="fw-bold mb-3">UBICACIÓN</h4>
                    <p class="fs-5 mb-0"><i class="bi bi-geo-alt-fill text-primary"></i> {{ $evento->sede ?? 'Sede a confirmar' }}</p>
                </div>
            </div>

            <!-- Action Sidebar -->
            <div class="col-lg-4">
                <div class="sticky-top" style="top: 100px;">
                    <div class="kinetic-card bg-primary text-white p-5 text-center">
                        <h4 class="display-6 fw-bold mb-4">ENTRADAS</h4>
                        <p class="fs-4 mb-5">
                            @if($evento->precio > 0)
                                ${{ number_format($evento->precio, 0, ',', '.') }} <span class="fs-6 opacity-75">/ entrada</span>
                            @else
                                FREE <span class="fs-6 opacity-75">/ asociados</span>
                            @endif
                        </p>

                        @if($evento->estado !== 'Finalizado')
                            @if($isUser)
                                <form method="POST" action="{{ route('panel.solicitar.qr') }}" class="confirm-submit mb-3" data-confirm-text="¿Solicitar QR (entrada) para este evento?">
                                    @csrf
                                    <input type="hidden" name="id_evento" value="{{ $evento->id_evento }}">
                                    <button type="submit" class="btn btn-light btn-lg w-100 fw-bold py-3" style="border-radius: 0;">SOLICITAR QR</button>
                                </form>
                                <a href="{{ route('panel.mis.qrs', ['evento' => $evento->id_evento]) }}" class="text-white text-decoration-none small fw-bold">VER MIS REGISTROS <i class="bi bi-arrow-right"></i></a>
                            @elseif(!$isAdmin)
                                <button class="btn btn-outline-light btn-lg w-100 fw-bold" style="border-radius: 0;" data-bs-toggle="modal" data-bs-target="#loginModal">INICIAR SESIÓN</button>
                            @endif
                        @endif

                        @if($isAdmin)
                            <div class="mt-5 pt-5 border-top border-white border-opacity-25">
                                <a href="{{ route('admin.eventos.edit', $evento->id_evento) }}" class="btn btn-dark w-100 text-uppercase fw-bold mb-2">Editar Evento</a>
                            </div>
                        @endif
                    </div>
                    
                    <div class="mt-4 text-center">
                        <a href="{{ route('eventos.index') }}" class="text-decoration-none text-muted small fw-bold"><i class="bi bi-arrow-left"></i> VOLVER AL CALENDARIO</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection