<?= $this->extend('layouts/master') ?>
<?= $this->section('title') ?>
Agenda y Eventos
<?= $this->endSection() ?>

<?= $this->section('css') ?>
<style>
    .drop-zone {
        border: 2px dashed #5d87ff;
        border-radius: 8px;
        padding: 2rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
        background: #f8f9fa;
        position: relative;
        min-height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .drop-zone:hover {
        background: #e8f4fd;
        border-color: #4a76e8;
    }

    .drop-zone.dragover {
        background: #d0e7ff;
        border-color: #2a5bd7;
        transform: scale(1.02);
    }

    .drop-zone-content {
        pointer-events: none;
    }

    .drop-zone-preview {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .drop-zone-preview img {
        max-width: 100%;
        max-height: 200px;
        border-radius: 8px;
        object-fit: contain;
    }

    .remove-image {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .alert-floating {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        min-width: 300px;
        animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
        from {
            transform: translateX(400px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
</style>
<?= $this->endSection() ?>

<?= $this->section('pageContent') ?>

<?php if (session()->getFlashdata('success')): ?>
    <div class="alert alert-success alert-dismissible fade show alert-floating" role="alert">
        <i class="ti ti-check me-2"></i>
        <?= session()->getFlashdata('success') ?>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <script>
        setTimeout(() => {
            const alert = document.querySelector('.alert-floating');
            if (alert) {
                alert.remove();
            }
        }, 5000);
    </script>
<?php endif; ?>

<?php if (session()->getFlashdata('error')): ?>
    <div class="alert alert-danger alert-dismissible fade show alert-floating" role="alert">
        <i class="ti ti-alert-circle me-2"></i>
        <?= session()->getFlashdata('error') ?>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <script>
        setTimeout(() => {
            const alert = document.querySelector('.alert-floating');
            if (alert) {
                alert.remove();
            }
        }, 5000);
    </script>
<?php endif; ?>

<div class="card">
    <div class="card-body">

        <div class="d-flex justify-content-between align-items-center mb-4">
            <h5 class="card-title fw-semibold m-0">
                Agenda y Eventos
            </h5>
            <?php if ($crear_permiso) { ?>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalNuevoEvento">
                <i class="ti ti-plus"></i> Nuevo Evento
            </button>
            <?php } ?>
        </div>



        <div class="row">
            <div class="col-md-12 mb-3">
                <?php
                if (empty(session()->get('usuario')["organizacion_id"])) {
                ?>
                    <div
                        class="alert alert-warning"
                        role="alert">
                        <strong>Atención</strong> Tu usuario no pertenece a ninguna organización, contacta al administrador
                    </div>

                <?php
                } else { ?>
                    <?= view('eventos/calendario') ?>
                <?php } ?>
            </div>
        </div>

    </div>
</div>

<!-- Modal Nuevo Evento -->
<div class="modal fade" id="modalNuevoEvento" tabindex="-1" aria-labelledby="modalNuevoEventoLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalNuevoEventoLabel">Crear Nuevo Evento</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form id="formNuevoEvento">
                <div class="modal-body">
                    <!-- Campos requeridos por la BD - deben venir de la sesión del usuario -->
                    <!-- <input type="hidden" id="organizacion_id" name="organizacion_id" value="<?= session()->get('usuario')['organizacion_id'] ?? '' ?>"> -->
                    <!-- <input type="hidden" id="usuario_id" name="usuario_id" value="<?= session()->get('usuario')['id'] ?? '' ?>"> -->
                    
                    <div class="mb-3">
                        <label for="nombre" class="form-label">Nombre del Evento</label>
                        <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Ej: Reunión de Vecinos" required>
                    </div>

                    <div class="mb-3">
                        <label for="descripcion" class="form-label">Descripción</label>
                        <textarea class="form-control" id="descripcion" name="descripcion" rows="3" placeholder="Descripción del evento"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="fechaInicio" class="form-label">Fecha y Hora de Inicio</label>
                        <input type="datetime-local" class="form-control" id="fechaInicio" name="fechaInicio" required>
                    </div>

                    <div class="mb-3">
                        <label for="fechaFin" class="form-label">Fecha y Hora de Fin</label>
                        <input type="datetime-local" class="form-control" id="fechaFin" name="fechaFin" required>
                    </div>

                    <div class="mb-3">
                        <label for="ubicacion" class="form-label">Ubicación</label>
                        <input type="text" class="form-control" id="ubicacion" name="ubicacion" placeholder="Ej: Salón Comunal" required>
                    </div>

                    <div class="mb-3">
                        <label for="imagen" class="form-label">Imagen del Evento</label>
                        <div class="drop-zone" id="dropZone">
                            <div class="drop-zone-content" id="dropZoneContent">
                                <i class="ti ti-cloud-upload" style="font-size: 3rem; color: #5d87ff;"></i>
                                <p class="mb-2">Arrastra una imagen aquí o haz clic para seleccionar</p>
                                <p class="text-muted small">JPG, PNG, GIF o WEBP (máx. 5MB)</p>
                            </div>
                            <div class="drop-zone-preview" id="dropZonePreview" style="display: none;">
                                <img id="imagePreview" src="" alt="Preview">
                                <button type="button" class="btn btn-sm btn-danger remove-image" id="removeImage">
                                    <i class="ti ti-x"></i>
                                </button>
                            </div>
                        </div>
                        <input type="file" class="form-control d-none" id="imagen" name="imagen" accept="image/*">
                    </div>

                    <div class="mb-3">
                        <label for="color" class="form-label">Color del Evento</label>
                        <select class="form-select" id="color" name="color" required>
                            <option value="event-primary" selected>Azul</option>
                            <option value="event-success">Verde</option>
                            <option value="event-danger">Rojo</option>
                            <option value="event-warning">Amarillo</option>
                            <option value="event-info">Cian</option>
                            <option value="event-dark">Oscuro</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button id="btnGuardarEvento" type="button" class="btn btn-primary">Guardar Evento</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Editar Evento -->
<div class="modal fade" id="modalEditarEvento" tabindex="-1" aria-labelledby="modalEditarEventoLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalEditarEventoLabel">Editar Evento</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formEditarEvento">
                <input type="hidden" id="eventoId" name="eventoId">
                <input type="hidden" id="imagenActual" name="imagenActual">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="nombreEdit" class="form-label">Nombre del Evento</label>
                        <input type="text" class="form-control" id="nombreEdit" name="nombre" placeholder="Ej: Reunión de Vecinos" required>
                    </div>

                    <div class="mb-3">
                        <label for="descripcionEdit" class="form-label">Descripción</label>
                        <textarea class="form-control" id="descripcionEdit" name="descripcion" rows="3" placeholder="Descripción del evento"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="fechaInicioEdit" class="form-label">Fecha y Hora de Inicio</label>
                        <input type="datetime-local" class="form-control" id="fechaInicioEdit" name="fechaInicio" required>
                    </div>

                    <div class="mb-3">
                        <label for="fechaFinEdit" class="form-label">Fecha y Hora de Fin</label>
                        <input type="datetime-local" class="form-control" id="fechaFinEdit" name="fechaFin" required>
                    </div>

                    <div class="mb-3">
                        <label for="ubicacionEdit" class="form-label">Ubicación</label>
                        <input type="text" class="form-control" id="ubicacionEdit" name="ubicacion" placeholder="Ej: Salón Comunal" required>
                    </div>

                    <div class="mb-3">
                        <label for="imagenEdit" class="form-label">Imagen del Evento</label>
                        
                        <!-- Imagen actual -->
                        <div class="current-image-container" id="currentImageContainer" style="display: none;">
                            <div class="alert alert-info d-flex align-items-center justify-content-between" role="alert">
                                <div class="d-flex align-items-center">
                                    <i class="ti ti-photo me-2"></i>
                                    <span>Imagen actual del evento</span>
                                </div>
                                <button type="button" class="btn btn-sm btn-danger" id="btnEliminarImagenActual">
                                    <i class="ti ti-trash"></i> Eliminar
                                </button>
                            </div>
                            <img id="imagenActualPreview" src="" alt="Imagen actual" style="max-width: 100%; max-height: 200px; border-radius: 8px; margin-bottom: 1rem;">
                        </div>

                        <!-- Drop zone para nueva imagen -->
                        <div class="drop-zone" id="dropZoneEdit">
                            <div class="drop-zone-content" id="dropZoneContentEdit">
                                <i class="ti ti-cloud-upload" style="font-size: 3rem; color: #5d87ff;"></i>
                                <p class="mb-2">Arrastra una imagen aquí o haz clic para seleccionar</p>
                                <p class="text-muted small">JPG, PNG, GIF o WEBP (máx. 5MB)</p>
                            </div>
                            <div class="drop-zone-preview" id="dropZonePreviewEdit" style="display: none;">
                                <img id="imagePreviewEdit" src="" alt="Preview">
                                <button type="button" class="btn btn-sm btn-danger remove-image" id="removeImageEdit">
                                    <i class="ti ti-x"></i>
                                </button>
                            </div>
                        </div>
                        <input type="file" class="form-control d-none" id="imagenEdit" name="imagen" accept="image/*">
                        <input type="hidden" id="eliminarImagen" name="eliminarImagen" value="0">
                    </div>

                    <div class="mb-3">
                        <label for="colorEdit" class="form-label">Color del Evento</label>
                        <select class="form-select" id="colorEdit" name="color" required>
                            <option value="event-primary">Azul</option>
                            <option value="event-success">Verde</option>
                            <option value="event-danger">Rojo</option>
                            <option value="event-warning">Amarillo</option>
                            <option value="event-info">Cian</option>
                            <option value="event-dark">Oscuro</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button id="btnActualizarEvento" type="button" class="btn btn-primary">Actualizar Evento</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    (function() {
        console.log('Script cargado');
        
        const formNuevoEvento = document.getElementById('formNuevoEvento');
        const modal = document.getElementById('modalNuevoEvento');
        const submitBtn = document.getElementById('btnGuardarEvento');
        const dropZone = document.getElementById('dropZone');
        const fileInput = document.getElementById('imagen');
        const dropZoneContent = document.getElementById('dropZoneContent');
        const dropZonePreview = document.getElementById('dropZonePreview');
        const imagePreview = document.getElementById('imagePreview');
        const removeImageBtn = document.getElementById('removeImage');
        
        console.log('formNuevoEvento:', formNuevoEvento);
        console.log('submitBtn:', submitBtn);
        
        if (!formNuevoEvento || !submitBtn) {
            console.error('Formulario o botón no encontrado');
            return;
        }
        
        // Drag and Drop functionality
        dropZone.addEventListener('click', () => {
            fileInput.click();
        });

        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropZone.classList.add('dragover');
        });

        dropZone.addEventListener('dragleave', () => {
            dropZone.classList.remove('dragover');
        });

        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZone.classList.remove('dragover');
            
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                handleFile(files[0]);
            }
        });

        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                handleFile(e.target.files[0]);
            }
        });

        removeImageBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            clearImage();
        });

        function handleFile(file) {
            // Validar tipo de archivo
            const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
            if (!validTypes.includes(file.type)) {
                mostrarMensaje('error', 'El archivo debe ser una imagen (JPG, PNG, GIF o WEBP).');
                return;
            }

            // Validar tamaño (máximo 5MB)
            if (file.size > 5242880) {
                mostrarMensaje('error', 'La imagen no puede superar los 5MB.');
                return;
            }

            // Crear preview
            const reader = new FileReader();
            reader.onload = (e) => {
                imagePreview.src = e.target.result;
                dropZoneContent.style.display = 'none';
                dropZonePreview.style.display = 'flex';
            };
            reader.readAsDataURL(file);

            // Asignar archivo al input
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(file);
            fileInput.files = dataTransfer.files;
        }

        function clearImage() {
            fileInput.value = '';
            imagePreview.src = '';
            dropZoneContent.style.display = 'block';
            dropZonePreview.style.display = 'none';
        }
        
         // Agregar listener al botón directamente ya que es type="button"
        submitBtn.addEventListener('click', async function(e) {
            e.preventDefault();
            e.stopPropagation();      

            console.log('✅ 1. Botón clickeado - procesando evento');
            
            // Obtener valores de campos (fuera del try para que estén disponibles en todo el scope)
            const nombre = document.getElementById('nombre').value.trim();
            const descripcion = document.getElementById('descripcion').value.trim();
            const fechaInicio = document.getElementById('fechaInicio').value;
            const fechaFin = document.getElementById('fechaFin').value;
            const ubicacion = document.getElementById('ubicacion').value.trim();
            const color = document.getElementById('color').value;
            const imagen = document.getElementById('imagen').files[0];
            
            console.log('✅ 2. Valores obtenidos:', {nombre, descripcion, fechaInicio, fechaFin, ubicacion, color, imagen});
            
            // Validar que todos los campos requeridos estén completos
            if (!nombre || !fechaInicio || !fechaFin || !ubicacion || !color) {
                console.error('❌ Faltan campos requeridos');
                mostrarMensaje('error', 'Por favor complete todos los campos requeridos.');
                return;
            }
            console.log('✅ 3. Campos requeridos OK');
            
            // Validar que fecha fin sea posterior a fecha inicio
            if (new Date(fechaFin) <= new Date(fechaInicio)) {
                console.error('❌ Fechas inválidas');
                mostrarMensaje('error', 'La fecha de fin debe ser posterior a la fecha de inicio.');
                return;
            }
            console.log('✅ 4. Fechas OK');
            
            // Preparar datos para enviar
            console.log('✅ 5. Creando FormData...');
            const formData = new FormData();
            formData.append('nombre', nombre);
            formData.append('descripcion', descripcion);
            formData.append('fecha_inicio', fechaInicio);
            formData.append('fecha_fin', fechaFin);
            formData.append('ubicacion', ubicacion);
            formData.append('color', color);
            console.log('✅ 6. FormData creado con campos básicos');
            
            // Agregar imagen si existe
            if (imagen) {
                console.log('📷 Imagen capturada:', imagen);
                console.log('📁 Nombre:', imagen.name);
                console.log('📊 Tamaño:', imagen.size, 'bytes');
                console.log('🎨 Tipo:', imagen.type);
                formData.append('imagen', imagen);
            } else {
                console.log('⚠️ No se seleccionó ninguna imagen');
            }
            
            // Verificar contenido del FormData
            console.log('📦 FormData a enviar:');
            for (let pair of formData.entries()) {
                if (pair[1] instanceof File) {
                    console.log(pair[0], ':', pair[1].name, '(' + pair[1].size + ' bytes)');
                } else {
                    console.log(pair[0], ':', pair[1]);
                }
            }
            
             // Campos comentados - descomentar cuando estén disponibles en el formulario
             // formData.append('organizacion_id', document.getElementById('organizacion_id').value);
             // formData.append('usuario_id', document.getElementById('usuario_id').value);
            
             // Bloquear UI durante el envío
            bloquearUI(true);
            
            try {
                // Enviar datos al servidor
                const response = await fetch('<?= base_url('eventos/store') ?>', {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                
                // Desbloquear UI
                bloquearUI(false);
                
                // Manejar respuesta
                if (data.success) {
                    // Cerrar modal inmediatamente
                    const bsModal = bootstrap.Modal.getInstance(modal);
                    if (bsModal) {
                        bsModal.hide();
                    }
                    
                    // Limpiar formulario
                    formNuevoEvento.reset();
                    clearImage();
                    
                    // Recargar página para mostrar el nuevo evento
                    //location.reload();
                } else {
                    // Mostrar mensaje de error
                    mostrarMensaje('error', data.message);
                    
                    // Si hay errores de validación específicos, mostrarlos
                    if (data.errors) {
                        let erroresHTML = '<ul class="mb-0">';
                        Object.values(data.errors).forEach(error => {
                            erroresHTML += `<li>${error}</li>`;
                        });
                        erroresHTML += '</ul>';
                        mostrarMensaje('error', erroresHTML);
                    }
                }
                
            } catch (error) {
                console.error('Error al enviar el formulario:', error);
                bloquearUI(false);
                mostrarMensaje('error', 'Error al conectar con el servidor. Por favor intente nuevamente.');
            }
        });
        
         // Función para bloquear/desbloquear la UI
        function bloquearUI(bloquear) {
            const inputs = formNuevoEvento.querySelectorAll('input, select, textarea, button');
            
            inputs.forEach(input => {
                input.disabled = bloquear;
            });
            
            if (bloquear) {
                submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Guardando...';
            } else {
                submitBtn.innerHTML = 'Guardar Evento';
            }
        }
        
         // Función para mostrar mensajes
        function mostrarMensaje(tipo, mensaje) {
             // Crear elemento de alerta
            const alertClass = tipo === 'success' ? 'alert-success' : 'alert-danger';
            const iconClass = tipo === 'success' ? 'ti-check' : 'ti-alert-circle';             
            const alert = document.createElement('div');

            alert.className = `alert ${alertClass} alert-dismissible fade show`;
            alert.setAttribute('role', 'alert');
            alert.innerHTML = `
                <i class="ti ${iconClass} me-2"></i>
                ${mensaje}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            `;
            
             // Insertar antes del modal body
            const modalBody = formNuevoEvento.querySelector('.modal-body');
            modalBody.insertBefore(alert, modalBody.firstChild);
            
             // Auto-eliminar después de 5 segundos
            setTimeout(() => {
                alert.remove();
            }, 5000);
        }
        
         // Limpiar mensajes al abrir el modal
        modal.addEventListener('show.bs.modal', function() {
            const alerts = formNuevoEvento.querySelectorAll('.alert');
            alerts.forEach(alert => alert.remove());
            clearImage();
        });
    })();

    // ==================== EDICIÓN Y ELIMINACIÓN DE EVENTOS ====================
    (function() {
        let eventoActual = null;
        
        const formEditarEvento = document.getElementById('formEditarEvento');
        const modalEditar = document.getElementById('modalEditarEvento');
        const btnActualizar = document.getElementById('btnActualizarEvento');
        const dropZoneEdit = document.getElementById('dropZoneEdit');
        const fileInputEdit = document.getElementById('imagenEdit');
        const dropZoneContentEdit = document.getElementById('dropZoneContentEdit');
        const dropZonePreviewEdit = document.getElementById('dropZonePreviewEdit');
        const imagePreviewEdit = document.getElementById('imagePreviewEdit');
        const removeImageBtnEdit = document.getElementById('removeImageEdit');
        const currentImageContainer = document.getElementById('currentImageContainer');
        const imagenActualPreview = document.getElementById('imagenActualPreview');
        const btnEliminarImagenActual = document.getElementById('btnEliminarImagenActual');
        const eliminarImagenInput = document.getElementById('eliminarImagen');
        
        // Escuchar clicks en los botones de editar y eliminar del modal de detalles
        document.addEventListener('click', function(e) {
            // Botón Editar
            if (e.target.closest('#btnEditarEventoModal')) {
                const eventoId = e.target.closest('#btnEditarEventoModal').dataset.eventoId;
                if (eventoId) {
                    abrirModalEdicion(eventoId);
                }
            }
            
            // Botón Eliminar
            if (e.target.closest('#btnEliminarEventoModal')) {
                const eventoId = e.target.closest('#btnEliminarEventoModal').dataset.eventoId;
                if (eventoId) {
                    confirmarEliminacion(eventoId);
                }
            }
        });
        
        // Drag and Drop functionality para edición
        dropZoneEdit.addEventListener('click', () => {
            fileInputEdit.click();
        });

        dropZoneEdit.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropZoneEdit.classList.add('dragover');
        });

        dropZoneEdit.addEventListener('dragleave', () => {
            dropZoneEdit.classList.remove('dragover');
        });

        dropZoneEdit.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZoneEdit.classList.remove('dragover');
            
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                handleFileEdit(files[0]);
            }
        });

        fileInputEdit.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                handleFileEdit(e.target.files[0]);
            }
        });

        removeImageBtnEdit.addEventListener('click', (e) => {
            e.stopPropagation();
            clearImageEdit();
        });

        btnEliminarImagenActual.addEventListener('click', async () => {
            const result = await Swal.fire({
                title: '¿Eliminar imagen actual?',
                text: 'Esta acción no se puede deshacer.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#fa896b',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar',
                reverseButtons: true
            });
            
            if (result.isConfirmed) {
                currentImageContainer.style.display = 'none';
                eliminarImagenInput.value = '1';
                document.getElementById('imagenActual').value = '';
            }
        });

        function handleFileEdit(file) {
            const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
            if (!validTypes.includes(file.type)) {
                mostrarMensajeEdit('error', 'El archivo debe ser una imagen (JPG, PNG, GIF o WEBP).');
                return;
            }

            if (file.size > 5242880) {
                mostrarMensajeEdit('error', 'La imagen no puede superar los 5MB.');
                return;
            }

            const reader = new FileReader();
            reader.onload = (e) => {
                imagePreviewEdit.src = e.target.result;
                dropZoneContentEdit.style.display = 'none';
                dropZonePreviewEdit.style.display = 'flex';
            };
            reader.readAsDataURL(file);

            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(file);
            fileInputEdit.files = dataTransfer.files;
        }

        function clearImageEdit() {
            fileInputEdit.value = '';
            imagePreviewEdit.src = '';
            dropZoneContentEdit.style.display = 'block';
            dropZonePreviewEdit.style.display = 'none';
        }
        
        async function abrirModalEdicion(eventoId) {
            try {
                // Obtener datos del evento desde la variable global
                if (!window.eventoActualGlobal) {
                    alert('Error: No se encontraron los datos del evento');
                    return;
                }
                
                eventoActual = window.eventoActualGlobal;
                
                // Llenar el formulario
                document.getElementById('eventoId').value = eventoActual.id;
                document.getElementById('nombreEdit').value = eventoActual.nombre;
                document.getElementById('descripcionEdit').value = eventoActual.descripcion || '';
                document.getElementById('fechaInicioEdit').value = formatDatetimeLocal(eventoActual.fechaInicio);
                document.getElementById('fechaFinEdit').value = formatDatetimeLocal(eventoActual.fechaFin);
                document.getElementById('ubicacionEdit').value = eventoActual.ubicacion;
                document.getElementById('colorEdit').value = eventoActual.color;
                
                // Manejar imagen actual
                if (eventoActual.imagen) {
                    document.getElementById('imagenActual').value = eventoActual.imagen;
                    imagenActualPreview.src = '<?= base_url() ?>' + eventoActual.imagen;
                    currentImageContainer.style.display = 'block';
                    eliminarImagenInput.value = '0';
                } else {
                    currentImageContainer.style.display = 'none';
                    document.getElementById('imagenActual').value = '';
                }
                
                clearImageEdit();
                
                // Cerrar modal de detalles y abrir modal de edición
                const modalDetalles = bootstrap.Modal.getInstance(document.getElementById('eventModal'));
                if (modalDetalles) {
                    modalDetalles.hide();
                }
                
                const modalEditarBS = new bootstrap.Modal(modalEditar);
                modalEditarBS.show();
                
            } catch (error) {
                console.error('Error al cargar evento:', error);
                alert('Error al cargar los datos del evento');
            }
        }
        
        function formatDatetimeLocal(dateString) {
            const date = new Date(dateString);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            return `${year}-${month}-${day}T${hours}:${minutes}`;
        }
        
        // Actualizar evento
        btnActualizar.addEventListener('click', async function(e) {
            e.preventDefault();
            
            const eventoId = document.getElementById('eventoId').value;
            const nombre = document.getElementById('nombreEdit').value.trim();
            const descripcion = document.getElementById('descripcionEdit').value.trim();
            const fechaInicio = document.getElementById('fechaInicioEdit').value;
            const fechaFin = document.getElementById('fechaFinEdit').value;
            const ubicacion = document.getElementById('ubicacionEdit').value.trim();
            const color = document.getElementById('colorEdit').value;
            const imagen = document.getElementById('imagenEdit').files[0];
            const eliminarImagen = document.getElementById('eliminarImagen').value;
            
            if (!nombre || !fechaInicio || !fechaFin || !ubicacion || !color) {
                mostrarMensajeEdit('error', 'Por favor complete todos los campos requeridos.');
                return;
            }
            
            if (new Date(fechaFin) <= new Date(fechaInicio)) {
                mostrarMensajeEdit('error', 'La fecha de fin debe ser posterior a la fecha de inicio.');
                return;
            }
            
            const formData = new FormData();
            formData.append('nombre', nombre);
            formData.append('descripcion', descripcion);
            formData.append('fecha_inicio', fechaInicio);
            formData.append('fecha_fin', fechaFin);
            formData.append('ubicacion', ubicacion);
            formData.append('color', color);
            formData.append('usuario_id', eventoActual?.usuario_id || 1);
            
            if (imagen) {
                console.log('📷 [EDITAR] Imagen capturada:', imagen);
                console.log('📁 [EDITAR] Nombre:', imagen.name);
                console.log('📊 [EDITAR] Tamaño:', imagen.size, 'bytes');
                formData.append('imagen', imagen);
            } else {
                console.log('⚠️ [EDITAR] No se seleccionó nueva imagen');
            }
            
            if (eliminarImagen === '1') {
                formData.append('eliminar_imagen', '1');
                console.log('🗑️ [EDITAR] Marcado para eliminar imagen actual');
            }
            
            bloquearUIEdit(true);
            
            try {
                const response = await fetch(`<?= base_url('eventos/update') ?>/${eventoId}`, {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                
                bloquearUIEdit(false);
                
                if (data.success) {
                    const modalEditarBS = bootstrap.Modal.getInstance(modalEditar);
                    if (modalEditarBS) {
                        modalEditarBS.hide();
                    }
                    
                    formEditarEvento.reset();
                    clearImageEdit();
                    
                    //location.reload();
                } else {
                    mostrarMensajeEdit('error', data.message);
                    
                    if (data.errors) {
                        let erroresHTML = '<ul class="mb-0">';
                        Object.values(data.errors).forEach(error => {
                            erroresHTML += `<li>${error}</li>`;
                        });
                        erroresHTML += '</ul>';
                        mostrarMensajeEdit('error', erroresHTML);
                    }
                }
                
            } catch (error) {
                console.error('Error al actualizar el evento:', error);
                bloquearUIEdit(false);
                mostrarMensajeEdit('error', 'Error al conectar con el servidor. Por favor intente nuevamente.');
            }
        });
        
        async function confirmarEliminacion(eventoId) {
            const result = await Swal.fire({
                title: '¿Eliminar evento?',
                text: 'Esta acción no se puede deshacer.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#fa896b',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar',
                reverseButtons: true
            });
            
            if (!result.isConfirmed) {
                return;
            }
            
            try {
                const response = await fetch(`<?= base_url('eventos/delete') ?>/${eventoId}`, {
                    method: 'POST'
                });
                
                const data = await response.json();
                
                if (data.success) {
                    const modalDetalles = bootstrap.Modal.getInstance(document.getElementById('eventModal'));
                    if (modalDetalles) {
                        modalDetalles.hide();
                    }
                    
                    //location.reload();
                } else {
                    Swal.fire({
                        title: 'Error',
                        text: 'Error al eliminar el evento: ' + data.message,
                        icon: 'error',
                        confirmButtonColor: '#5d87ff'
                    });
                }
                
            } catch (error) {
                console.error('Error al eliminar el evento:', error);
                Swal.fire({
                    title: 'Error',
                    text: 'Error al conectar con el servidor. Por favor intente nuevamente.',
                    icon: 'error',
                    confirmButtonColor: '#5d87ff'
                });
            }
        }
        
        function bloquearUIEdit(bloquear) {
            const inputs = formEditarEvento.querySelectorAll('input, select, textarea, button');
            
            inputs.forEach(input => {
                input.disabled = bloquear;
            });
            
            if (bloquear) {
                btnActualizar.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Actualizando...';
            } else {
                btnActualizar.innerHTML = 'Actualizar Evento';
            }
        }
        
        function mostrarMensajeEdit(tipo, mensaje) {
            const alertClass = tipo === 'success' ? 'alert-success' : 'alert-danger';
            const iconClass = tipo === 'success' ? 'ti-check' : 'ti-alert-circle';             
            const alert = document.createElement('div');

            alert.className = `alert ${alertClass} alert-dismissible fade show`;
            alert.setAttribute('role', 'alert');
            alert.innerHTML = `
                <i class="ti ${iconClass} me-2"></i>
                ${mensaje}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            `;
            
            const modalBody = formEditarEvento.querySelector('.modal-body');
            modalBody.insertBefore(alert, modalBody.firstChild);
            
            setTimeout(() => {
                alert.remove();
            }, 5000);
        }
        
        modalEditar.addEventListener('show.bs.modal', function() {
            const alerts = formEditarEvento.querySelectorAll('.alert');
            alerts.forEach(alert => alert.remove());
        });
    })();
    
</script>
<?= $this->endSection() ?>