@extends('layouts.app')

@section('titulo', 'Eventos — Sorteos FEL')
@section('breadcrumb')
    <a href="{{ route('inicio') }}" style="color:var(--primary, #1D3D8E)">Inicio</a>
    <span style="margin:0 6px;color:var(--border)">›</span>
    <span style="color:var(--text)">Eventos</span>

{{-- ═══════════════════════════════════════════════════════════
     MODAL ARCHIVO — EVENTOS CERRADOS
═══════════════════════════════════════════════════════════ --}}
<div class="modal fade" id="modalEventosCerrados" tabindex="-1"
     aria-labelledby="modalEventosCerradosLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content border-0 shadow">
            <div class="modal-header" style="background:var(--surface-2);border-bottom:1px solid var(--border);">
                <h5 class="modal-title fw-bold" id="modalEventosCerradosLabel"
                    style="font-family:'DM Serif Display',serif;font-weight:400;color:#0F172A">
                    <i class="bi bi-archive"></i>&nbsp; Archivo — Eventos cerrados
                </h5>
                <span class="badge bg-secondary ms-2" style="font-size:12px;">
                    {{ $eventosCerrados->count() }} eventos
                </span>
                <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                @if($eventosCerrados->isEmpty())
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-inbox" style="font-size:3rem;opacity:.4;"></i>
                        <p class="mt-3">No hay eventos cerrados aún.</p>
                    </div>
                @else
                    <table class="table table-hover mb-0" style="font-size:13px;">
                        <thead style="background:var(--surface-2);position:sticky;top:0;z-index:1;">
                            <tr style="color:var(--text-sub);font-size:11px;text-transform:uppercase;letter-spacing:.5px;">
                                <th class="px-4 py-3">Evento</th>
                                <th class="py-3">Tipo</th>
                                <th class="py-3">Fecha</th>
                                <th class="py-3">Participantes</th>
                                <th class="py-3 text-end pe-4">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($eventosCerrados as $ev)
                            <tr style="border-bottom:1px solid var(--border);vertical-align:middle;">
                                <td class="px-4 py-3">
                                    <div class="fw-semibold" style="color:var(--text);">{{ $ev->nombre }}</div>
                                </td>
                                <td class="py-3" style="color:var(--text-sub);">
                                    <i class="bi bi-tag" style="font-size:11px;"></i>
                                    {{ $ev->tipo }}
                                </td>
                                <td class="py-3" style="color:var(--text-sub);white-space:nowrap;">
                                    <i class="bi bi-calendar" style="font-size:11px;"></i>
                                    {{ $ev->fecha->format('d/m/Y') }}
                                </td>
                                <td class="py-3" style="color:var(--text-sub);">
                                    <i class="bi bi-people" style="font-size:11px;"></i>
                                    {{ $ev->participantes_count ?? 0 }}
                                </td>
                                <td class="py-3 text-end pe-4">
                                    <div class="d-flex gap-2 justify-content-end">
                                        <a href="{{ route('participantes.index', $ev) }}"
                                           class="btn btn-outline-secondary btn-sm"
                                           style="font-size:12px;">
                                            <i class="bi bi-people"></i> Participantes
                                        </a>
                                        <form method="POST" action="{{ route('eventos.duplicar', $ev) }}" class="d-inline">
                                            @csrf
                                            <button type="submit" class="btn btn-sm"
                                                    style="background:var(--secondary,#8BBF2B);color:#fff;border:none;font-size:12px;"
                                                    title="Duplicar como borrador">
                                                <i class="bi bi-files"></i> Duplicar
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
            <div class="modal-footer" style="background:var(--surface-2);border-top:1px solid var(--border);">
                <small class="text-muted me-auto">
                    <i class="bi bi-info-circle"></i>
                    Los eventos cerrados pueden duplicarse como borrador para reutilizarlos.
                </small>
                <button type="button" class="btn btn-secondary btn-sm"
                        data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('contenido')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="fw-bold mb-0" style="font-family:'DM Serif Display',serif;font-weight:400;color:#0F172A">
        <i class="bi bi-calendar-event"></i> Eventos
    </h2>
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-outline-secondary"
                data-bs-toggle="modal" data-bs-target="#modalEventosCerrados"
                style="font-size:13px;">
            <i class="bi bi-archive"></i> Eventos cerrados
        </button>
        <a href="{{ route('eventos.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> Nuevo Evento
        </a>
    </div>
</div>

@if($eventosActivos->isEmpty())
    <div class="text-center py-5">
        <i class="bi bi-calendar-x" style="font-size:4rem; color:#ccc"></i>
        <p class="text-muted mt-3">No hay eventos creados aún.</p>
        <a href="{{ route('eventos.create') }}" class="btn btn-primary mt-2">Crear primer evento</a>
    </div>
@else
    <div class="row g-4">
        @foreach($eventosActivos as $evento)
        @php
            $estadoColor = $evento->estado_color ?? '#94A3B8';
            $estadoLabel = $evento->estado_label ?? 'Borrador';
            $editable   = $evento->puedeEditarse();
        @endphp
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <h5 class="card-title fw-bold mb-0">{{ $evento->nombre }}</h5>
                        <span class="badge" style="background:{{ $estadoColor }};color:#fff;font-size:11px;padding:4px 10px;border-radius:4px">
                            ● {{ $estadoLabel }}
                        </span>
                    </div>
                    <p class="text-muted mb-1" style="font-size:13px"><i class="bi bi-tag"></i> {{ $evento->tipo }}</p>
                    <p class="text-muted mb-1" style="font-size:13px"><i class="bi bi-calendar"></i> {{ $evento->fecha->format('d/m/Y') }}</p>
                    <p class="text-muted mb-3" style="font-size:13px"><i class="bi bi-people"></i> {{ $evento->participantes_count ?? 0 }} participantes</p>
                </div>
                <div class="card-footer bg-transparent border-0 pt-0">
                    {{-- Línea 1: sorteos y participantes --}}
                    <div class="d-flex gap-2 mb-2">
                        @if($evento->esActivo())
                            <a href="{{ route('sorteos.index', $evento) }}" class="btn btn-primary btn-sm flex-fill" style="font-size:12px">
                                <i class="bi bi-shuffle"></i> Sorteos
                            </a>
                        @else
                            <button type="button" class="btn btn-sm flex-fill"
                                    style="font-size:12px;background:#E5E7EB;color:#94A3B8;border:none;cursor:not-allowed"
                                    title="{{ $evento->esBorrador() ? 'Activá el evento para poder sortear' : 'Evento cerrado' }}"
                                    disabled>
                                <i class="bi bi-shuffle"></i> Sorteos
                            </button>
                        @endif
                        <a href="{{ route('participantes.index', $evento) }}" class="btn btn-outline-secondary btn-sm flex-fill" style="font-size:12px">
                            <i class="bi bi-people"></i> Participantes
                        </a>
                    </div>

                    {{-- Línea 2: acciones de estado + duplicar + editar --}}
                    <div class="d-flex gap-1 flex-wrap">
                        @if($editable)
                            <a href="{{ route('eventos.edit', $evento) }}" class="btn btn-outline-secondary btn-sm" title="Editar" style="font-size:12px">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <form method="POST" action="{{ route('eventos.activar', $evento) }}" class="d-inline"
                                  onsubmit="return confirm('¿Activar este evento? Otros eventos activos se cerrarán automáticamente.');">
                                @csrf
                                <button type="submit" class="btn btn-sm" style="background:var(--secondary,#8BBF2B);color:#fff;border:none;font-size:12px">
                                    <i class="bi bi-play-fill"></i> Activar
                                </button>
                            </form>
                        @endif

                        @if($evento->esActivo())
                            <form method="POST" action="{{ route('eventos.cerrar', $evento) }}" class="d-inline"
                                  onsubmit="return confirm('¿Cerrar este evento? No se podrán hacer más sorteos.');">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-outline-secondary" style="font-size:12px">
                                    <i class="bi bi-stop-fill"></i> Cerrar
                                </button>
                            </form>
                        @endif

                        {{-- Duplicar siempre disponible --}}
                        <form method="POST" action="{{ route('eventos.duplicar', $evento) }}" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-sm" style="background:var(--secondary,#8BBF2B);color:#fff;border:none;font-size:12px" title="Duplicar evento">
                                <i class="bi bi-files"></i> Duplicar
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
@endif
@endsection