@extends('layouts.app')
@section('titulo', $evento->nombre)

@section('breadcrumb')
    <a href="{{ route('inicio') }}" style="color:var(--blue)">Inicio</a>
    <span style="margin:0 6px;color:var(--border)">›</span>
    <a href="{{ route('eventos.index') }}" style="color:var(--blue)">Eventos</a>
    <span style="margin:0 6px;color:var(--border)">›</span>
    <span style="color:var(--text)">{{ $evento->nombre }}</span>
@endsection

@section('contenido')
{{-- Header del evento --}}
<div class="d-flex align-items-start justify-content-between mb-4 flex-wrap gap-2">
    <div>
        <div class="d-flex align-items-center gap-2 mb-1">
            <h4 class="mb-0" style="font-weight:700;color:var(--text)">{{ $evento->nombre }}</h4>
            @if($evento->activo)
                <span style="background:#dcfce7;color:#15803d;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px">● ACTIVO</span>
            @else
                <span style="background:#F3F4F6;color:var(--text-sub);font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px">Inactivo</span>
            @endif
        </div>
        <div style="font-size:13px;color:var(--text-sub)">
            <span>{{ $evento->tipo }}</span>
            <span style="margin:0 8px;color:var(--border)">·</span>
            <span>{{ \Carbon\Carbon::parse($evento->fecha)->isoFormat('dddd D [de] MMMM [de] YYYY') }}</span>
            <span style="margin:0 8px;color:var(--border)">·</span>
            <span>Countdown: {{ $evento->segundos_cuenta_regresiva }}s</span>
        </div>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('eventos.edit', $evento) }}" class="btn btn-secondary btn-sm">Editar</a>
        <a href="{{ route('sorteos.index') }}" class="btn btn-primary btn-sm">Ir a Sorteos</a>
        <a href="{{ route('eventos.reporte', \$evento) }}" target="_blank" class="btn btn-secondary btn-sm" style="font-size:12px">📄 Reporte</a>
    </div>
</div>

@if($evento->descripcion)
<div class="card mb-4">
    <div class="card-body" style="padding:1rem 1.25rem">
        <div style="font-size:12px;font-weight:600;text-transform:uppercase;color:var(--text-sub);letter-spacing:.5px;margin-bottom:.5rem">Descripción</div>
        <p style="margin:0;color:var(--text);font-size:14px;line-height:1.6">{{ $evento->descripcion }}</p>
    </div>
</div>
@endif

{{-- Métricas del evento --}}
<div class="row g-3 mb-4">
    @php
        $totalParticipantes = $evento->participantes()->count();
        $participantesDisp  = $evento->participantes()->where('baneado', false)->count();
        $totalPremios       = $evento->premios()->count();
        $premiosSorteados   = $evento->premios()->where('estado', 'sorteado')->count();
        $ganadoresTotales   = \App\Models\Ganador::whereHas('sorteo', fn($q)=>$q->whereHas('premio', fn($q2)=>$q2->where('evento_id',$evento->id)))->where('estado','ganador')->count();
    @endphp
    @foreach([
        ['Participantes', $totalParticipantes, $participantesDisp . ' disponibles'],
        ['Premios', $totalPremios, $premiosSorteados . ' sorteados'],
        ['Ganadores', $ganadoresTotales, 'estado: ganador'],
        ['Sorteos hoy', \App\Models\Sorteo::whereHas('premio', fn($q)=>$q->where('evento_id',$evento->id))->whereDate('created_at', today())->count(), now()->format('d/m/Y')],
    ] as $m)
    <div class="col-6 col-md-3">
        <div class="card h-100">
            <div class="card-body" style="padding:.9rem 1rem">
                <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-sub)">{{ $m[0] }}</div>
                <div style="font-size:28px;font-weight:800;color:var(--blue);line-height:1.2;margin:4px 0 2px">{{ $m[1] }}</div>
                <div style="font-size:11px;color:var(--text-sub)">{{ $m[2] }}</div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- Premios y sorteos --}}
<div class="card mb-4">
    <div style="padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
        <span style="font-weight:600;font-size:14px;color:var(--text)">Premios del Evento</span>
        <a href="{{ route('premios.create', ['evento' => $evento->id]) }}" class="btn btn-primary btn-sm" style="font-size:12px">+ Agregar Premio</a>
    </div>
    <div class="table-responsive">
        <table class="table mb-0">
            <thead>
                <tr>
                    <th>Premio</th>
                    <th>Tipo</th>
                    <th>Ganadores</th>
                    <th>Estado</th>
                    <th class="text-end">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @forelse($evento->premios()->orderBy('orden')->get() as $premio)
                <tr>
                    <td>
                        <span style="font-size:1.3rem;margin-right:6px">{{ $premio->emoji }}</span>
                        <span style="font-weight:500">{{ $premio->nombre }}</span>
                    </td>
                    <td>
                        <span style="background:var(--blue-light);color:var(--blue);font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px">
                            {{ $premio->tipo_sorteo === 'al_agua' ? 'Al Agua' : 'Normal' }}
                        </span>
                    </td>
                    <td style="color:var(--text-sub);font-size:13px">{{ $premio->cantidad_ganadores }}</td>
                    <td>
                        @if($premio->estado === 'sorteado')
                            <span style="color:#16a34a;font-weight:600;font-size:12px">● Sorteado</span>
                        @else
                            <span style="color:var(--text-sub);font-size:12px">○ Pendiente</span>
                        @endif
                    </td>
                    <td class="text-end">
                        <a href="{{ route('premios.edit', $premio) }}" class="btn btn-secondary btn-sm" style="font-size:11px">Editar</a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center" style="color:var(--text-sub);padding:2.5rem">
                        No hay premios. <a href="{{ route('premios.create', ['evento' => $evento->id]) }}">Agregar el primero</a>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Últimos ganadores --}}
@php
    $ganadores = \App\Models\Ganador::with(['participante', 'sorteo.premio'])
        ->whereHas('sorteo.premio', fn($q) => $q->where('evento_id', $evento->id))
        ->where('estado', 'ganador')
        ->latest()
        ->limit(10)
        ->get();
@endphp
@if($ganadores->count() > 0)
<div class="card">
    <div style="padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
        <span style="font-weight:600;font-size:14px;color:var(--text)">Últimos ganadores</span>
        <a href="{{ route('ganadores.csv', $evento) }}" class="btn btn-secondary btn-sm" style="font-size:12px">Exportar CSV</a>
    </div>
    <div class="table-responsive">
        <table class="table mb-0">
            <thead>
                <tr><th>Participante</th><th>Documento</th><th>Zona</th><th>Premio</th><th>Lugar</th></tr>
            </thead>
            <tbody>
                @foreach($ganadores as $g)
                <tr>
                    <td style="font-weight:500">{{ $g->participante?->nombre ?? '—' }}</td>
                    <td style="color:var(--text-sub);font-size:13px">{{ $g->participante?->documento ?? '—' }}</td>
                    <td><span style="background:#F3F4F6;color:var(--text-sub);font-size:11px;padding:2px 7px;border-radius:4px">{{ $g->participante?->zona ?? '—' }}</span></td>
                    <td style="font-size:13px">{{ $g->sorteo?->premio?->emoji }} {{ $g->sorteo?->premio?->nombre ?? '—' }}</td>
                    <td style="color:var(--text-sub);font-size:13px">{{ $g->lugar }}°</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif
@endsection