@extends('layouts.admin')

@section('title', 'Crear Evento')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-calendar-plus text-primary"></i>
            Crear Nuevo Evento
        </h1>
        <a href="{{ route('admin.eventos.index') }}" class="btn btn-secondary btn-sm">
            <i class="fas fa-arrow-left"></i> Volver a Lista
        </a>
    </div>

    <form id="formCrearEvento" action="{{ route('admin.eventos.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <!-- Información Básica -->
            <div class="col-lg-8">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-info-circle"></i> Información Básica
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="nombre" class="form-label">Nombre del Evento <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('nombre') is-invalid @enderror" 
                                           id="nombre" name="nombre" value="{{ old('nombre') }}" required>
                                    @error('nombre')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="tipo_evento" class="form-label">Tipo de Evento <span class="text-danger">*</span></label>
                                    <select class="form-select @error('tipo_evento') is-invalid @enderror" id="tipo_evento" name="tipo_evento" required>
                                        <option value="">Seleccionar tipo</option>
                                        <option value="torneo" {{ old('tipo_evento') == 'torneo' ? 'selected' : '' }}>Torneo</option>
                                        <option value="partido_amistoso" {{ old('tipo_evento') == 'partido_amistoso' ? 'selected' : '' }}>Partido Amistoso</option>
                                        <option value="entrenamiento" {{ old('tipo_evento') == 'entrenamiento' ? 'selected' : '' }}>Entrenamiento</option>
                                        <option value="clinica" {{ old('tipo_evento') == 'clinica' ? 'selected' : '' }}>Clínica Deportiva</option>
                                        <option value="campeonato" {{ old('tipo_evento') == 'campeonato' ? 'selected' : '' }}>Campeonato</option>
                                    </select>
                                    @error('tipo_evento')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="descripcion" class="form-label">Descripción</label>
                            <textarea class="form-control @error('descripcion') is-invalid @enderror" 
                                      id="descripcion" name="descripcion" rows="4">{{ old('descripcion') }}</textarea>
                            @error('descripcion')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="fecha_inicio" class="form-label">Fecha de Inicio <span class="text-danger">*</span></label>
                                    <input type="datetime-local" class="form-control @error('fecha_inicio') is-invalid @enderror" 
                                           id="fecha_inicio" name="fecha_inicio" value="{{ old('fecha_inicio') }}" required>
                                    @error('fecha_inicio')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="fecha_fin" class="form-label">Fecha de Fin <span class="text-danger">*</span></label>
                                    <input type="datetime-local" class="form-control @error('fecha_fin') is-invalid @enderror" 
                                           id="fecha_fin" name="fecha_fin" value="{{ old('fecha_fin') }}" required>
                                    @error('fecha_fin')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="hora_inicio" class="form-label">Hora de Inicio <span class="text-danger">*</span></label>
                                    <input type="time" class="form-control @error('hora_inicio') is-invalid @enderror" 
                                           id="hora_inicio" name="hora_inicio" value="{{ old('hora_inicio') }}" required>
                                    @error('hora_inicio')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="hora_fin" class="form-label">Hora de Fin <span class="text-danger">*</span></label>
                                    <input type="time" class="form-control @error('hora_fin') is-invalid @enderror" 
                                           id="hora_fin" name="hora_fin" value="{{ old('hora_fin') }}" required>
                                    @error('hora_fin')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="fecha_limite_inscripcion" class="form-label">Fecha Límite de Inscripción</label>
                                    <input type="datetime-local" class="form-control @error('fecha_limite_inscripcion') is-invalid @enderror" 
                                           id="fecha_limite_inscripcion" name="fecha_limite_inscripcion" value="{{ old('fecha_limite_inscripcion') }}">
                                    @error('fecha_limite_inscripcion')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="ubicacion" class="form-label">Ubicación</label>
                                    <input type="text" class="form-control @error('ubicacion') is-invalid @enderror" 
                                           id="ubicacion" name="ubicacion" value="{{ old('ubicacion') }}">
                                    @error('ubicacion')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Configuración de Equipos -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-users-cog"></i> Configuración de Equipos
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="capacidad_maxima" class="form-label">Máximo de Equipos</label>
                                    <input type="number" class="form-control @error('capacidad_maxima') is-invalid @enderror" 
                                           id="capacidad_maxima" name="capacidad_maxima" value="{{ old('capacidad_maxima') }}" min="1">
                                    @error('capacidad_maxima')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="min_participantes" class="form-label">Mínimo de Equipos</label>
                                    <input type="number" class="form-control @error('min_participantes') is-invalid @enderror" 
                                           id="min_participantes" name="min_participantes" value="{{ old('min_participantes') }}" min="1">
                                    @error('min_participantes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="edad_minima" class="form-label">Edad Mínima</label>
                                    <input type="number" class="form-control @error('edad_minima') is-invalid @enderror" 
                                           id="edad_minima" name="edad_minima" value="{{ old('edad_minima') }}" min="1">
                                    @error('edad_minima')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="categoria" class="form-label">Categoría</label>
                                    <select class="form-select @error('categoria') is-invalid @enderror" id="categoria" name="categoria">
                                        <option value="">Seleccionar categoría</option>
                                        <option value="infantil" {{ old('categoria') == 'infantil' ? 'selected' : '' }}>Infantil</option>
                                        <option value="juvenil" {{ old('categoria') == 'juvenil' ? 'selected' : '' }}>Juvenil</option>
                                        <option value="adulto" {{ old('categoria') == 'adulto' ? 'selected' : '' }}>Adulto</option>
                                        <option value="senior" {{ old('categoria') == 'senior' ? 'selected' : '' }}>Senior</option>
                                        <option value="mixta" {{ old('categoria') == 'mixta' ? 'selected' : '' }}>Mixta</option>
                                    </select>
                                    @error('categoria')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="nivel" class="form-label">Nivel</label>
                                    <select class="form-select @error('nivel') is-invalid @enderror" id="nivel" name="nivel">
                                        <option value="">Seleccionar nivel</option>
                                        <option value="principiante" {{ old('nivel') == 'principiante' ? 'selected' : '' }}>Principiante</option>
                                        <option value="intermedio" {{ old('nivel') == 'intermedio' ? 'selected' : '' }}>Intermedio</option>
                                        <option value="avanzado" {{ old('nivel') == 'avanzado' ? 'selected' : '' }}>Avanzado</option>
                                        <option value="profesional" {{ old('nivel') == 'profesional' ? 'selected' : '' }}>Profesional</option>
                                        <option value="todos" {{ old('nivel') == 'todos' ? 'selected' : '' }}>Todos los niveles</option>
                                    </select>
                                    @error('nivel')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Canchas Asignadas -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-map-marker-alt"></i> Canchas Asignadas
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="cancha_id" class="form-label">Seleccionar Cancha</label>
                            <select class="form-select @error('cancha_id') is-invalid @enderror" id="cancha_id" name="cancha_id" required>
                                <option value="">Seleccionar cancha</option>
                                @foreach($canchas ?? [] as $cancha)
                                    <option value="{{ $cancha->id }}" 
                                            {{ old('cancha_id') == $cancha->id ? 'selected' : '' }}>
                                        {{ $cancha->nombre }} - {{ $cancha->tipo }}
                                    </option>
                                @endforeach
                            </select>
                            @error('cancha_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Organizador -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-user-tie"></i> Organizador
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="organizador_id" class="form-label">Seleccionar Organizador</label>
                            <select class="form-select @error('organizador_id') is-invalid @enderror" id="organizador_id" name="organizador_id" required>
                                <option value="">Seleccionar organizador</option>
                                @foreach($organizadores ?? [] as $user)
                                    <option value="{{ $user->id }}" 
                                            {{ old('organizador_id') == $user->id ? 'selected' : '' }}>
                                        {{ $user->name }} - {{ $user->email }}
                                    </option>
                                @endforeach
                            </select>
                            @error('organizador_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Panel Lateral -->
            <div class="col-lg-4">
                <!-- Estado y Configuración -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-cog"></i> Estado y Configuración
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="estado" class="form-label">Estado</label>
                            <select class="form-select @error('estado') is-invalid @enderror" id="estado" name="estado" required>
                                <option value="">Seleccionar estado</option>
                                <option value="programado" {{ old('estado') == 'programado' ? 'selected' : '' }}>Programado</option>
                                <option value="abierto" {{ old('estado') == 'abierto' ? 'selected' : '' }}>Abierto</option>
                                <option value="cerrado" {{ old('estado') == 'cerrado' ? 'selected' : '' }}>Cerrado</option>
                                <option value="en_curso" {{ old('estado') == 'en_curso' ? 'selected' : '' }}>En Curso</option>
                                <option value="finalizado" {{ old('estado') == 'finalizado' ? 'selected' : '' }}>Finalizado</option>
                                <option value="cancelado" {{ old('estado') == 'cancelado' ? 'selected' : '' }}>Cancelado</option>
                            </select>
                            @error('estado')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="requiere_aprobacion" 
                                       name="requiere_aprobacion" value="1" {{ old('requiere_aprobacion') ? 'checked' : '' }}>
                                <label class="form-check-label" for="requiere_aprobacion">
                                    Requiere Aprobación
                                </label>
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="es_publico" 
                                       name="es_publico" value="1" {{ old('es_publico') ? 'checked' : '' }}>
                                <label class="form-check-label" for="es_publico">
                                    Evento Público
                                </label>
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="permite_invitados" 
                                       name="permite_invitados" value="1" {{ old('permite_invitados') ? 'checked' : '' }}>
                                <label class="form-check-label" for="permite_invitados">
                                    Permite Invitados
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Precios -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-dollar-sign"></i> Precios
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="es_gratuito" 
                                       name="es_gratuito" value="1" {{ old('es_gratuito') ? 'checked' : '' }}>
                                <label class="form-check-label" for="es_gratuito">
                                    Evento Gratuito
                                </label>
                            </div>
                        </div>

                        <div id="preciosContainer" style="{{ old('es_gratuito') ? 'display: none;' : '' }}">
                            <div class="mb-3">
                                <label for="precio_inscripcion" class="form-label">Precio de Inscripción</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control @error('precio_inscripcion') is-invalid @enderror" 
                                           id="precio_inscripcion" name="precio_inscripcion" 
                                           value="{{ old('precio_inscripcion') }}" step="0.01" min="0">
                                </div>
                                @error('precio_inscripcion')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="precio_descuento" class="form-label">Precio con Descuento</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control @error('precio_descuento') is-invalid @enderror" 
                                           id="precio_descuento" name="precio_descuento" 
                                           value="{{ old('precio_descuento') }}" step="0.01" min="0">
                                </div>
                                @error('precio_descuento')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="fecha_limite_descuento" class="form-label">Fecha Límite Descuento</label>
                                <input type="datetime-local" class="form-control @error('fecha_limite_descuento') is-invalid @enderror" 
                                       id="fecha_limite_descuento" name="fecha_limite_descuento" 
                                       value="{{ old('fecha_limite_descuento') }}">
                                @error('fecha_limite_descuento')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Imagen del Evento -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-image"></i> Imagen del Evento
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="imagen" class="form-label">Imagen Principal</label>
                            <input type="file" class="form-control @error('imagen') is-invalid @enderror" 
                                   id="imagen" name="imagen" accept="image/*">
                            @error('imagen')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Formatos permitidos: JPG, PNG, GIF. Tamaño máximo: 2MB</div>
                        </div>
                        <div id="imagenPreview" class="text-center" style="display: none;">
                            <img id="imagenPreviewImg" src="" alt="Preview" class="img-fluid rounded" style="max-height: 200px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Botones de Acción -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow mb-4">
                    <div class="card-body text-center">
                        <button type="submit" class="btn btn-primary btn-lg me-3">
                            <i class="fas fa-save"></i> Crear Evento
                        </button>
                        <button type="button" class="btn btn-secondary btn-lg me-3" onclick="guardarBorrador()">
                            <i class="fas fa-file-alt"></i> Guardar como Borrador
                        </button>
                        <a href="{{ route('admin.eventos.index') }}" class="btn btn-outline-secondary btn-lg">
                            <i class="fas fa-times"></i> Cancelar
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Inicializar Select2 para cancha
    $('#cancha_id').select2({
        placeholder: 'Seleccionar cancha',
        allowClear: true
    });

    // Preview de imagen
    $('#imagen').on('change', function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#imagenPreviewImg').attr('src', e.target.result);
                $('#imagenPreview').show();
            };
            reader.readAsDataURL(file);
        } else {
            $('#imagenPreview').hide();
        }
    });

    // Toggle precios según evento gratuito
    $('#es_gratuito').on('change', function() {
        if (this.checked) {
            $('#preciosContainer').hide();
            $('#precio_inscripcion, #precio_descuento').val('').prop('disabled', true);
        } else {
            $('#preciosContainer').show();
            $('#precio_inscripcion, #precio_descuento').prop('disabled', false);
        }
    });

    // Validación de fechas
    $('#fecha_inicio, #fecha_fin').on('change', function() {
        const fechaInicio = new Date($('#fecha_inicio').val());
        const fechaFin = new Date($('#fecha_fin').val());
        
        if (fechaInicio && fechaFin && fechaInicio >= fechaFin) {
            Swal.fire('Error', 'La fecha de fin debe ser posterior a la fecha de inicio', 'error');
            $('#fecha_fin').val('');
        }
    });

    // Validación de equipos
    $('#min_participantes, #capacidad_maxima').on('change', function() {
        const min = parseInt($('#min_participantes').val()) || 0;
        const max = parseInt($('#capacidad_maxima').val()) || 0;
        
        if (min > 0 && max > 0 && min > max) {
            Swal.fire('Error', 'El mínimo de equipos no puede ser mayor al máximo', 'error');
            $('#min_participantes').val('');
        }
    });

    // Validación del formulario
    $('#formCrearEvento').on('submit', function(e) {
        console.log('Formulario enviado - iniciando validación');
        console.log('Evento original:', e);
        console.log('Formulario:', this);
        console.log('Action del formulario:', $(this).attr('action'));
        console.log('Method del formulario:', $(this).attr('method'));
        
        // Validaciones básicas
        if (!$('#nombre').val().trim()) {
            e.preventDefault();
            console.log('Error: Nombre del evento requerido');
            Swal.fire('Error', 'El nombre del evento es requerido', 'error');
            return false;
        }
        
        if (!$('#tipo_evento').val()) {
            e.preventDefault();
            Swal.fire('Error', 'Debe seleccionar un tipo de evento', 'error');
            return false;
        }
        
        if (!$('#fecha_inicio').val() || !$('#fecha_fin').val()) {
            e.preventDefault();
            Swal.fire('Error', 'Las fechas de inicio y fin son requeridas', 'error');
            return false;
        }
        
        if (!$('#hora_inicio').val() || !$('#hora_fin').val()) {
            e.preventDefault();
            Swal.fire('Error', 'Las horas de inicio y fin son requeridas', 'error');
            return false;
        }
        
        // Validar que una cancha esté seleccionada
        if (!$('#cancha_id').val()) {
            e.preventDefault();
            Swal.fire('Error', 'Debe seleccionar una cancha', 'error');
            return false;
        }
        
        // Validar que un organizador esté seleccionado
        if (!$('#organizador_id').val()) {
            e.preventDefault();
            Swal.fire('Error', 'Debe seleccionar un organizador', 'error');
            return false;
        }
        
        // Validar capacidad máxima
        if (!$('#capacidad_maxima').val() || $('#capacidad_maxima').val() < 2) {
            e.preventDefault();
            Swal.fire('Error', 'La capacidad máxima debe ser al menos 2 equipos', 'error');
            return false;
        }
        
        // Si no es gratuito, validar precio
        if (!$('#es_gratuito').is(':checked') && !$('#precio_inscripcion').val()) {
            e.preventDefault();
            Swal.fire('Error', 'Debe especificar el precio de inscripción', 'error');
            return false;
        }
        
        // Si llegamos aquí, el formulario es válido, permitir envío
        console.log('Formulario válido - enviando...');
        // NO llamamos e.preventDefault() aquí para permitir el envío
        return true;
    });
});

function guardarBorrador() {
    $('#estado').val('borrador');
    $('#formCrearEvento').submit();
}
</script>
@endpush