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

@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)">Premios</span>
@endsection

@section('contenido')

@if(session('success'))
    <div style="background:#f0fdf4;border-left:3px solid #16a34a;border-radius:7px;padding:11px 16px;margin-bottom:1rem;color:#15803d;font-size:13px">{{ session('success') }}</div>
@endif
@if(session('error'))
    <div style="background:#fef2f2;border-left:3px solid #dc2626;border-radius:7px;padding:11px 16px;margin-bottom:1rem;color:#dc2626;font-size:13px">{{ session('error') }}</div>
@endif

<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h4 class="mb-0" style="font-weight:700;color:var(--text)">Premios</h4>
        <small style="color:var(--text-sub)">
            @if(isset($evento))
                Evento: {{ $evento->nombre }}
            @else
                Todos los eventos
            @endif
        </small>
    </div>
    @if(isset($evento))
    <a href="{{ route('premios.create', ['evento' => $evento->id]) }}" class="btn 
                {{-- Sprint V: Filtro horario del sorteo --}}
                <div class="row g-3 mt-1">
                    <div class="col-12">
                        <label class="form-label" style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-sub)">
                            Filtro horario <span style="font-weight:400">(opcional — limita participantes por hora de registro)</span>
                        </label>
                    </div>
                    <div class="col-6">
                        <label class="form-label" style="font-size:13px;font-weight:600">Desde</label>
                        <input type="time" name="hora_desde" class="form-control"
                               value="{{ old('hora_desde', $premio->hora_desde ?? '') }}"
                               placeholder="HH:MM">
                        <div style="font-size:11px;color:var(--text-sub);margin-top:3px">Participantes registrados desde esta hora</div>
                    </div>
                    <div class="col-6">
                        <label class="form-label" style="font-size:13px;font-weight:600">Hasta</label>
                        <input type="time" name="hora_hasta" class="form-control"
                               value="{{ old('hora_hasta', $premio->hora_hasta ?? '') }}"
                               placeholder="HH:MM">
                        <div style="font-size:11px;color:var(--text-sub);margin-top:3px">Participantes registrados hasta esta hora</div>
                    </div>
                </div>

                btn-primary btn-sm">+ Nuevo Premio</a>
    @endif
</div>

<div class="card">
    <div class="table-responsive">
        <table class="table mb-0">
            <thead>
                <tr>
                    <th>Premio</th>
                    <th>Evento</th>
                    <th>Tipo</th>
                    <th>Ganadores</th>
                    <th>Orden</th>
                    <th>Estado</th>
                    <th class="text-end">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @forelse(isset($premios) ? $premios : [] as $premio)
                <tr style="{{ $premio->estado === 'sorteado' ? 'opacity:.7' : '' }}">
                    <td>
                        <span style="font-size:1.3rem;margin-right:8px">{{ $premio->emoji }}</span>
                        <span style="font-weight:500">{{ $premio->nombre }}</span>
                        @if($premio->imagen_url)
                            <span style="font-size:11px;color:var(--text-sub);margin-left:4px">📷</span>
                        @endif
                    </td>
                    <td style="font-size:13px;color:var(--text-sub)">{{ $premio->evento?->nombre ?? '—' }}</td>
                    <td>
                        @if($premio->tipo_sorteo === 'al_agua')
                            <span style="background:#FEF3C7;color:#92400E;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px">Al Agua</span>
                        @else
                            <span style="background:var(--blue-light);color:var(--blue);font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px">Normal</span>
                        @endif
                    </td>
                    <td style="color:var(--text-sub);font-size:13px;text-align:center">{{ $premio->cantidad_ganadores }}</td>
                    <td style="color:var(--text-sub);font-size:13px;text-align:center">{{ $premio->orden }}</td>
                    <td>
                        @if($premio->estado === 'sorteado')
                            <span style="color:#16a34a;font-size:12px;font-weight:600">● 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>
                        @if($premio->estado !== 'sorteado')
                        <form method="POST" action="{{ route('premios.destroy', $premio) }}" style="display:inline"
                              onsubmit="return confirm('¿Eliminar premio {{ $premio->nombre }}?')">
                            @csrf @method('DELETE')
                            <button class="btn btn-danger btn-sm" style="font-size:11px">Eliminar</button>
                        </form>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="text-center" style="color:var(--text-sub);padding:2.5rem">
                        No hay premios registrados.
                        @if(isset($evento))
                            <a href="{{ route('premios.create', ['evento' => $evento->id]) }}">Crear el primero</a>
                        @endif
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection