@extends('layouts.app')

@section('titulo', 'Nuevo Evento — Sorteos FEL')

@section('contenido')
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow-sm border-0">
            <div class="card-header border-0 py-3" style="background-color:#1a3a6b">
                <h5 class="text-white mb-0 fw-bold"><i class="bi bi-calendar-plus"></i> Nuevo Evento</h5>
            </div>
            <div class="card-body p-4">
                <form method="POST" action="{{ route('eventos.store') }}">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label fw-bold">Nombre del evento</label>
                        <input type="text" name="nombre" class="form-control" placeholder="Ej: Asamblea General 2026" value="{{ old('nombre') }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Tipo de evento</label>
                        <select name="tipo" class="form-select" required>
                            <option value="">Seleccione...</option>
                            <option value="Asamblea" {{ old('tipo')=='Asamblea'?'selected':'' }}>Asamblea</option>
                            <option value="Fiesta" {{ old('tipo')=='Fiesta'?'selected':'' }}>Fiesta / Celebración</option>
                            <option value="Feria" {{ old('tipo')=='Feria'?'selected':'' }}>Feria de Convenios</option>
                            <option value="Dia especial" {{ old('tipo')=='Dia especial'?'selected':'' }}>Día Especial</option>
                            <option value="General" {{ old('tipo')=='General'?'selected':'' }}>General</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Fecha del evento</label>
                        <input type="date" name="fecha" class="form-control" value="{{ old('fecha') }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Descripción <span class="text-muted fw-normal">(opcional)</span></label>
                        <textarea name="descripcion" class="form-control" rows="3" placeholder="Descripción del evento...">{{ old('descripcion') }}</textarea>
                    </div>
                    <div class="mb-4">
                        <label class="form-label fw-bold">Segundos cuenta regresiva</label>
                        <input type="number" name="segundos_cuenta_regresiva" class="form-control" value="{{ old('segundos_cuenta_regresiva', 10) }}" min="3" max="60" required>
                        <small class="text-muted">Entre 3 y 60 segundos. Por defecto: 10</small>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-fel px-4">
                            <i class="bi bi-check-circle"></i> Crear Evento
                        </button>
                        <a href="{{ route('eventos.index') }}" class="btn btn-outline-secondary px-4">Cancelar</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection