@extends('layouts.app')
@section('titulo', 'Ganadores')

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

@section('contenido')

{{-- Header --}}
<div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
    <div>
        <h4 class="mb-0" style="font-weight:700;color:var(--text)">Ganadores</h4>
        <small style="color:var(--text-sub)">Historial completo por evento</small>
    </div>
    @if($eventoId)
    <a href="{{ route('ganadores.csv', $eventoId) }}?formato=xlsx" class="btn btn-secondary btn-sm">
        ↓ Exportar Excel
    </a>
    @else
    <a href="{{ route('ganadores.index') }}?evento_id=0&export=1" class="btn btn-secondary btn-sm">
        ↓ Exportar Excel (todos)
    </a>
    @endif
</div>

{{-- Filtros --}}
<div class="card mb-4">
    <div class="card-body" style="padding:1rem 1.25rem">
        <form method="GET" action="{{ route('ganadores.index') }}" class="row g-2 align-items-end">
            <div class="col-12 col-md-3">
                <label class="form-label" style="font-size:12px;font-weight:600;color:var(--text-sub)">EVENTO</label>
                <select name="evento_id" class="form-control form-control-sm" onchange="this.form.submit()">
                    <option value="">Todos los eventos</option>
                    @foreach($eventos as $ev)
                        <option value="{{ $ev->id }}" {{ $eventoId == $ev->id ? 'selected' : '' }}>
                            {{ $ev->nombre }} {{ $ev->activo ? '●' : '' }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-12 col-md-3">
                <label class="form-label" style="font-size:12px;font-weight:600;color:var(--text-sub)">ESTADO</label>
                <select name="estado" class="form-control form-control-sm">
                    <option value="ganador"  {{ $estado === 'ganador'  ? 'selected' : '' }}>Ganadores</option>
                    <option value="al_agua"  {{ $estado === 'al_agua'  ? 'selected' : '' }}>Al agua</option>
                    <option value="anulado"  {{ $estado === 'anulado'  ? 'selected' : '' }}>Anulados</option>
                    <option value=""         {{ $estado === ''         ? 'selected' : '' }}>Todos</option>
                </select>
            </div>
            @if($segmentos->count())
            <div class="col-12 col-md-2">
                <label class="form-label" style="font-size:12px;font-weight:600;color:var(--text-sub)">SEGMENTO</label>
                <select name="zona" class="form-control form-control-sm">
                    <option value="">Todas</option>
                    @foreach($segmentos as $z)
                        <option value="{{ $z }}" {{ $segmento === $z ? 'selected' : '' }}>{{ $z }}</option>
                    @endforeach
                </select>
            </div>
            @endif
            <div class="col-12 col-md-3">
                <label class="form-label" style="font-size:12px;font-weight:600;color:var(--text-sub)">BUSCAR</label>
                <input type="text" name="q" class="form-control form-control-sm"
                       value="{{ $busqueda }}" placeholder="Nombre, documento o boleta…">
            </div>
            <div class="col-12 col-md-1">
                <button type="submit" class="btn btn-primary btn-sm w-100">Filtrar</button>
            </div>
        </form>
    </div>
</div>

{{-- Contadores --}}
@if($totales)
<div class="row g-2 mb-3">
    @foreach([['ganador','#16a34a','Ganadores'],['al_agua','#d97706','Al Agua'],['anulado','#dc2626','Anulados']] as [$key,$color,$label])
    <div class="col-4">
        <div class="card text-center" style="padding:.6rem">
            <div style="font-size:22px;font-weight:800;color:{{ $color }}">{{ $totales[$key] }}</div>
            <div style="font-size:11px;color:var(--text-sub);font-weight:600">{{ $label }}</div>
        </div>
    </div>
    @endforeach
</div>
@endif

{{-- Tabla de ganadores --}}
<div class="card">
    <div class="table-responsive">
        <table class="table mb-0">
            <thead>
                <tr>
                    <th>Participante</th>
                    <th>Documento</th>
                    <th>Boleta</th>
                    <th>Segmento</th>
                    <th>Premio</th>
                    <th>Lugar</th>
                    <th>Estado</th>
                    <th style="color:var(--text-sub)">Fecha</th>
                </tr>
            </thead>
            <tbody>
                @forelse($ganadores as $g)
                <tr>
                    <td style="font-weight:500">{{ $g->participante?->nombre ?? '—' }}</td>
                    <td style="font-size:13px;color:var(--text-sub)">{{ $g->participante?->documento ?? '—' }}</td>
                    <td>
                        <code style="background:var(--blue-light);color:var(--blue);padding:1px 6px;border-radius:4px;font-size:12px">
                            {{ $g->participante?->boleta ?? '—' }}
                        </code>
                    </td>
                    <td>
                        <span style="background:#F3F4F6;color:var(--text-sub);font-size:11px;padding:2px 7px;border-radius:4px">
                            {{ $g->participante?->segmento ?? '—' }}
                        </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;text-align:center">{{ $g->lugar }}°</td>
                    <td>
                        @if($g->estado === 'ganador')
                            <span style="color:#16a34a;font-size:12px;font-weight:600">● Ganador</span>
                        @elseif($g->estado === 'al_agua')
                            <span style="color:#d97706;font-size:12px;font-weight:600">◑ Al agua</span>
                        @else
                            <span style="color:#dc2626;font-size:12px;font-weight:600">✕ Anulado</span>
                        @endif
                    </td>
                    <td style="font-size:12px;color:var(--text-sub);white-space:nowrap">
                        {{ $g->created_at->format('d/m H:i') }}
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center" style="color:var(--text-sub);padding:2.5rem">
                        No hay ganadores con los filtros actuales.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($ganadores->hasPages())
    <div style="padding:1rem 1.25rem;border-top:1px solid var(--border)">
        {{ $ganadores->links() }}
    </div>
    @endif
</div>
@endsection