@php
    $VerEditor = auth()->user()->can('Calendario - Visor') || auth()->user()->can('Calendario - Editor');
@endphp
@if ($VerEditor)
    @extends('layouts.app')
    @section('tituloModulo', 'CALENDARIO')
    @section('contenido')
        <!-- FullCalendar CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" />
        <style>
            /* Mejoras visuales para FullCalendar */
            .fc-event {
                cursor: pointer;
                border-radius: 4px;
                padding: 2px;
            }
            .fc-event-title {
                font-weight: 500;
            }
            .fc-today-button {
                text-transform: capitalize !important;
            }
            .fc .fc-button-primary {
                background-color: #435ebe;
                border-color: #435ebe;
            }
            .fc .fc-button-primary:not(:disabled):active,
            .fc .fc-button-primary:not(:disabled).fc-button-active {
                background-color: #3950a2;
                border-color: #3950a2;
            }
            .fc-day-today {
                background-color: rgba(67, 94, 190, 0.1) !important;
            }
            .fc-toolbar-title {
                font-size: 1.25rem !important;
                text-transform: capitalize;
            }
            /* Ocultar botones no utilizados */
            .fc-dayGridMonth-button,
            .fc-timeGridWeek-button,
            .fc-timeGridDay-button,
            .fc-listMonth-button {
                display: none !important;
            }
            /* Estilo para el botón de crear evento en el calendario */
            .fc-crearEventoBtn-button.fc-button {
                background-color: #28a745 !important;
                border-color: #28a745 !important;
                color: white !important;
            }
            .fc-crearEventoBtn-button.fc-button:hover {
                background-color: #218838 !important;
                border-color: #1e7e34 !important;
            }
            /* Alinear mejor la barra de herramientas del calendario */
            .fc-header-toolbar {
                padding: 10px !important;
                margin-bottom: 0 !important;
            }
            #calendar {
                width: 100% !important;
                height: auto !important;
                min-height: 500px;
            }
            /* Estilos para el contenedor del calendario */
            #fullcalendar-container {
                padding: 0 !important;
                margin: 0 !important;
                width: 100% !important;
                overflow: hidden !important;
            }
            /* IMPORTANTE: Reglas para prevenir descuadre de tabla */
            .fc-scrollgrid-sync-table {
                width: 100% !important;
            }
            .fc-scrollgrid {
                border-collapse: separate !important;
                border-spacing: 0 !important;
                width: 100% !important;
            }
            .fc table {
                width: 100% !important;
                box-sizing: border-box !important;
                table-layout: fixed !important;
                border-collapse: collapse !important;
                border-spacing: 0 !important;
            }
            .fc-theme-standard td,
            .fc-theme-standard th {
                border: 1px solid #ddd !important;
            }
            /* Estilos para días del mes */
            .fc-daygrid-day {
                min-height: 60px !important;
                height: auto !important;
            }
            /* Alineación correcta de los números de día */
            .fc-daygrid-day-number {
                padding: 4px 8px !important;
                font-weight: 600 !important;
                color: #444 !important;
            }
            /* Día actual más destacado */
            .fc-day-today .fc-daygrid-day-number {
                background-color: #435ebe !important;
                color: white !important;
                border-radius: 50% !important;
                width: 28px !important;
                height: 28px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                margin: 4px !important;
            }
            /* Diseño para el calendario que ocupa todo el ancho disponible */
            .card-body {
                padding: 0.5rem !important;
            }
            .card {
                margin-bottom: 0 !important;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
                border-radius: 8px !important;
            }
            /* Reglas Mobile-First */
            @media (max-width: 812px) {
                /* CRÍTICO: Prevenir descuadre de tablas */
                table.fc-scrollgrid,
                table.fc-scrollgrid-sync-table {
                    width: 100% !important;
                    display: table !important;
                }
                table.fc-scrollgrid tr,
                table.fc-scrollgrid-sync-table tr {
                    display: table-row !important;
                }
                table.fc-scrollgrid td,
                table.fc-scrollgrid th,
                table.fc-scrollgrid-sync-table td,
                table.fc-scrollgrid-sync-table th {
                    display: table-cell !important;
                }
                /* Botones más compactos */
                .fc-toolbar-chunk button {
                    padding: 0.3rem 0.5rem !important;
                    font-size: 0.875rem !important;
                }
                /* Estructura correcta del encabezado */
                .fc-header-toolbar {
                    flex-wrap: wrap !important;
                    padding: 0.5rem !important;
                }
                .fc-toolbar-chunk:nth-child(2) {
                    order: -1;
                    width: 100%;
                    margin-bottom: 0.5rem;
                    text-align: center;
                }
                /* Ajuste de tamaños */
                .fc-daygrid-day-number {
                    font-size: 0.8rem !important;
                }
                .fc-event-title {
                    font-size: 0.8rem !important;
                }
                /* Equilibrar alturas de celdas */
                .fc-daygrid-day {
                    min-height: 45px !important;
                }
                .fc-day-today .fc-daygrid-day-number {
                    width: 24px !important;
                    height: 24px !important;
                }
            }
            /* Ajustes específicos para pantallas muy pequeñas */
            @media (max-width: 400px) {
                .fc-col-header-cell-cushion {
                    font-size: 0.7rem !important;
                }
                .fc-toolbar-title {
                    font-size: 1rem !important;
                }
                .fc-daygrid-day-number {
                    font-size: 0.7rem !important;
                }
                .fc-button {
                    padding: 0.2rem 0.4rem !important;
                    font-size: 0.75rem !important;
                }
            }
            /* Ajustes para móvil */
            @media (max-width: 768px) {
                .fc-toolbar {
                    flex-direction: column !important;
                }
                .fc-toolbar-chunk {
                    margin-bottom: 10px !important;
                    display: flex !important;
                    justify-content: center !important;
                }
                .fc-toolbar-title {
                    font-size: 1.2rem !important;
                    margin: 0 !important;
                    padding: 5px 0 !important;
                    text-align: center !important;
                }
            }
        </style>
        <div class="card">
            <div class="card-body p-0">
                <!-- Eliminamos el header con el título "Calendario" -->
                <div id="fullcalendar-container" class="p-2">
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
        <!-- Modal para crear evento -->
        <div class="modal fade" id="asignar" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Agregar fecha</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="crearEventoForm">
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12 col-12">
                                    <label class="control-label is-required">Evento</label>
                                    <input class="form-control" type="text" name="evento" id="evento" required>
                                </div>
                                <div class="col-md-12 col-12">
                                    <label class="control-label">Comentario</label>
                                    <textarea class="form-control" name="comentario" id="comentario" rows="3"></textarea>
                                </div>
                                <div class="col-md-12 col-12">
                                    <label class="control-label">URL</label>
                                    <input class="form-control" type="text" name="url" id="eventUrl">
                                </div>
                                <div class="col-md-12 col-12">
                                    <label class="control-label is-required">Fecha de inicio</label>
                                    <input class="form-control" type="datetime-local" name="fecha_inicio" id="fecha_inicio"
                                        required>
                                </div>
                                <div class="col-md-12 col-12">
                                    <label class="control-label">¿El evento tiene una fecha de fin?</label>
                                    <div>
                                        <input type="checkbox" id="hasFechaFin" name="hasFechaFin"
                                            onchange="toggleFechaFin()">
                                        <label for="hasFechaFin">Sí, especificar fecha de fin</label>
                                    </div>
                                </div>
                                <div class="col-md-12 col-12">
                                    <label class="control-label">Fecha fin (opcional)</label>
                                    <input class="form-control" type="datetime-local" name="fecha_fin" id="fecha_fin"
                                        disabled>
                                </div>
                                <div class="col-md-6 col-12">
                                    <label class="control-label">Curso</label>
                                    <select class="form-select curso" aria-label="Default select example" name="curso"
                                        id="curso">
                                        <option value="">Selecciona un curso</option>
                                        @foreach ($cursos as $curso)
                                            <option value="{{ $curso->id }}">{{ $curso->nombre_curs }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 col-12">
                                    <label class="control-label">Grupo</label>
                                    <select class="form-select inputCs grupo" aria-label="Default select example"
                                        name="grupo" id="grupo">
                                        <option value="">Selecciona el grupo</option>
                                    </select>
                                </div>
                                <div class="col-md-6 col-12">
                                    <label class="control-label">Módulo</label>
                                    <select class="form-select inputCs modulo" aria-label="Default select example"
                                        name="modulo" id="modulo">
                                        <option value="">Selecciona el modulo</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success"><i class="bx bx-save"></i> Guardar</button>
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i
                                    class="bx bxs-x-circle"></i>
                                Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- Modal para editar evento -->
        <div class="modal fade" id="editEventoModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Editar evento</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="editEventoForm">
                        <div class="modal-body">
                            <input type="hidden" id="editEventoId" name="eventId">
                            <div class="row">
                                <div class="col-md-12 col-12">
                                    <label class="control-label is-required">Evento</label>
                                    <input class="form-control" type="text" id="editEventoTitle" name="evento"
                                        required>
                                </div>
                                <div class="col-md-12 col-12">
                                    <label class="control-label">Comentario</label>
                                    <textarea class="form-control" name="comentario" id="editComentario" rows="3"></textarea>
                                </div>
                                <div class="col-md-12 col-12">
                                    <label class="control-label">URL</label>
                                    <input class="form-control" type="text" name="url" id="editUrl">
                                </div>
                                <div class="col-md-12 col-12">
                                    <label class="control-label is-required">Fecha de inicio</label>
                                    <input class="form-control" type="datetime-local" id="editFechaInicio"
                                        name="fecha_inicio" required>
                                </div>
                                <div class="col-md-12 col-12">
                                    <label class="control-label">¿El evento tiene una fecha de fin?</label>
                                    <div>
                                        <input type="checkbox" id="editHasFechaFin" name="editHasFechaFin"
                                            onchange="toggleEditFechaFin()">
                                        <label for="editHasFechaFin">Sí, especificar fecha de fin</label>
                                    </div>
                                </div>
                                <div class="col-md-12 col-12">
                                    <label class="control-label">Fecha fin (opcional)</label>
                                    <input class="form-control" type="datetime-local" id="editFechaFin" name="fecha_fin"
                                        disabled>
                                </div>
                                <div class="col-md-6 col-12">
                                    <label class="control-label">Curso</label>
                                    <select class="form-select" id="editCurso" name="curso">
                                        <option value="">Selecciona un curso</option>
                                        @foreach ($cursos as $curso)
                                            <option value="{{ $curso->id }}">{{ $curso->nombre_curs }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 col-12">
                                    <label class="control-label">Grupo</label>
                                    <select class="form-select" id="editGrupo" name="grupo">
                                        <option value="">Selecciona el grupo</option>
                                    </select>
                                </div>
                                <div class="col-md-6 col-12">
                                    <label class="control-label">Módulo</label>
                                    <select class="form-select" id="editModulo" name="modulo">
                                        <option value="">Selecciona el módulo</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success"><i class="bx bx-save"></i> Guardar</button>
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i
                                    class="bx bxs-x-circle"></i>
                                Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- Modal para mostrar detalles del evento -->
        <div class="modal fade" id="eventoModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalTitle"></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body" id="modalBody"></div>
                    <div class="modal-footer" id="modalFooter"></div>
                </div>
            </div>
        </div>
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <!-- Scripts de FullCalendar -->
        <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales-all.min.js"></script>
        <script>
            function getCSRFToken() {
                // Intenta obtener del meta tag
                const tokenMeta = document.querySelector('meta[name="csrf-token"]');
                if (tokenMeta) {
                    return tokenMeta.getAttribute('content');
                }
                // Si no está disponible, usa el token proporcionado por Blade
                return '{{ csrf_token() }}';
            }
            // Variables globales
            const canEdit = @json(auth()->user()->can('Calendario - Editor'));
            let calendar;
            // Funciones auxiliares
            function toggleEditFechaFin() {
                const fechaFinInput = document.getElementById('editFechaFin');
                const hasFechaFin = document.getElementById('editHasFechaFin');
                fechaFinInput.disabled = !hasFechaFin.checked;
                if (!hasFechaFin.checked) {
                    fechaFinInput.value = '';
                }
            }
            function toggleFechaFin() {
                const fechaFinInput = document.getElementById('fecha_fin');
                const hasFechaFin = document.getElementById('hasFechaFin');
                fechaFinInput.disabled = !hasFechaFin.checked;
                if (!hasFechaFin.checked) {
                    fechaFinInput.value = '';
                }
            }
            // Formatear fechas para la interfaz
            function formatDateTime(date) {
                if (!date) return 'N/A';
                // Si no es un objeto Date, intentar convertirlo
                let dateObj;
                if (date instanceof Date) {
                    dateObj = date;
                } else {
                    dateObj = new Date(date);
                }
                // Si la conversión falla, devolver el string original
                if (isNaN(dateObj.getTime())) {
                    return String(date);
                }
                const day = dateObj.getDate().toString().padStart(2, '0');
                const monthNames = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
                    'octubre', 'noviembre', 'diciembre'
                ];
                const month = monthNames[dateObj.getMonth()];
                const year = dateObj.getFullYear();
                const hours = dateObj.getHours().toString().padStart(2, '0');
                const minutes = dateObj.getMinutes().toString().padStart(2, '0');
                return `${day} de ${month} de ${year}, ${hours}:${minutes}`;
            }
            // Formatear fechas para inputs HTML
            function formatDateTimeForInput(date) {
                if (!(date instanceof Date) || isNaN(date)) return '';
                return date.toISOString().slice(0, 16); // Formato para input datetime-local: "YYYY-MM-DDThh:mm"
            }
            // Manejo de cursos, módulos y grupos
            $(document).ready(function() {
                // Modal de creación de evento
                $('#asignar').on('show.bs.modal', function(event) {
                    $('.curso').off('change');
                    $('.curso').on('change', function() {
                        var id = $(this).val();
                        if (id) {
                            $.get('{{ Request::root() }}/calendario/buscar/modulos/' + id, function(
                                data) {
                                var html_select =
                                    '<option value="">Selecciona el módulo</option>';
                                for (var i = 0; i < data.length; ++i)
                                    html_select += '<option value="' + data[i].id + '">' + data[
                                        i].nombre_cumo + '</option>';
                                $('.modulo').html(html_select);
                            });
                            $.get('{{ Request::root() }}/calendario/buscar/grupo/' + id, function(
                                data) {
                                var html_select =
                                    '<option value="">Selecciona el grupo</option>';
                                for (var i = 0; i < data.length; ++i)
                                    html_select += '<option value="' + data[i].id + '">' + data[
                                        i].nombre_grup + '</option>';
                                $('.grupo').html(html_select);
                            });
                        } else {
                            $('.modulo').html('<option value="">Selecciona el módulo</option>');
                            $('.grupo').html('<option value="">Selecciona el grupo</option>');
                        }
                    });
                });
                // Modal de edición de evento
                $('#editEventoModal').on('show.bs.modal', function(event) {
                    const cursoSelect = document.getElementById('editCurso');
                    const grupoSelect = document.getElementById('editGrupo');
                    const moduloSelect = document.getElementById('editModulo');
                    $(cursoSelect).off('change');
                    $(cursoSelect).on('change', function() {
                        const cursoId = this.value;
                        if (cursoId) {
                            fetch('{{ Request::root() }}/calendario/buscar/modulos/' + cursoId)
                                .then(response => response.json())
                                .then(data => {
                                    let html_select =
                                        '<option value="">Selecciona el módulo</option>';
                                    for (let i = 0; i < data.length; i++) {
                                        html_select +=
                                            `<option value="${data[i].id}">${data[i].nombre_cumo}</option>`;
                                    }
                                    moduloSelect.innerHTML = html_select;
                                })
                                .catch(error => {
                                    console.error('Error al cargar módulos:', error);
                                });
                            fetch('{{ Request::root() }}/calendario/buscar/grupo/' + cursoId)
                                .then(response => response.json())
                                .then(data => {
                                    let html_select =
                                        '<option value="">Selecciona el grupo</option>';
                                    for (let i = 0; i < data.length; i++) {
                                        html_select +=
                                            `<option value="${data[i].id}">${data[i].nombre_grup}</option>`;
                                    }
                                    grupoSelect.innerHTML = html_select;
                                })
                                .catch(error => {
                                    console.error('Error al cargar grupos:', error);
                                });
                        } else {
                            moduloSelect.innerHTML = '<option value="">Selecciona el módulo</option>';
                            grupoSelect.innerHTML = '<option value="">Selecciona el grupo</option>';
                        }
                    });
                });
            });
            // Inicializar calendario cuando el DOM esté listo
            document.addEventListener('DOMContentLoaded', function() {
                const calendarEl = document.getElementById('calendar');
                // Inicializar el calendario con FullCalendar
                calendar = new FullCalendar.Calendar(calendarEl, {
                    // Configuración general
                    locale: 'es',
                    initialView: 'dayGridMonth',
                    height: 'auto',
                    aspectRatio: 1.8, // Aumentamos para mejor visualización en pantallas anchas
                    firstDay: 1, // Iniciar en lunes
                    selectable: canEdit, // Permitir seleccionar fechas solo a editores
                    unselectAuto: true, // Deseleccionar al hacer clic fuera
                    fixedWeekCount: false, // Muestra solo las semanas necesarias del mes
                    showNonCurrentDates: false, // Ocultar días que no son del mes actual
                    // Configuración del encabezado
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: canEdit ? 'crearEventoBtn' : ''
                    },
                    // Definir el botón personalizado
                    customButtons: {
                        crearEventoBtn: {
                            text: 'Crear evento',
                            click: function() {
                                abrirModalCrearEvento(new Date());
                            }
                        }
                    },
                    // Personalización de botones
                    buttonText: {
                        today: 'Hoy',
                        month: 'Mes'
                    },
                    // Formato para títulos más amigables
                    titleFormat: {
                        year: 'numeric',
                        month: 'long'
                    },
                    // Manejadores de eventos
                    dateClick: function(info) {
                        if (canEdit) {
                            abrirModalCrearEvento(info.date);
                        }
                    },
                    eventClick: function(info) {
                        mostrarDetallesEvento(info.event);
                    },
                    select: function(info) {
                        if (canEdit) {
                            abrirModalCrearEvento(info.start, info.end);
                        }
                    },
                    // Cargar eventos
                    events: function(fetchInfo, successCallback, failureCallback) {
                        fetch('{{ route('calendario.eventos') }}')
                            .then(response => {
                                if (!response.ok) {
                                    throw new Error('Error al cargar los eventos');
                                }
                                return response.json();
                            })
                            .then(events => {
                                // Transformar eventos al formato de FullCalendar
                                const formattedEvents = events.map(event => ({
                                    id: event.id,
                                    title: event.title,
                                    start: event.start,
                                    end: event.end,
                                    backgroundColor: '#ff9500',
                                    borderColor: '#ff9500',
                                    textColor: '#ffffff',
                                    extendedProps: {
                                        raw: event.raw
                                    }
                                }));
                                successCallback(formattedEvents);
                            })
                            .catch(error => {
                                console.error('Error al cargar los eventos:', error);
                                failureCallback(error);
                                Swal.fire({
                                    title: 'Error',
                                    text: 'No se pudieron cargar los eventos.',
                                    icon: 'error',
                                    confirmButtonColor: '#3085d6',
                                    confirmButtonText: 'Aceptar'
                                });
                            });
                    }
                });
                // Renderizar el calendario
                calendar.render();
                setTimeout(() => {
                    const crearEventoBtn = document.querySelector('.fc-crearEventoBtn-button');
                    if (crearEventoBtn) {
                        crearEventoBtn.classList.add('btn', 'btn-success');
                        crearEventoBtn.innerHTML = '<i class="bx bxs-folder-plus"></i> Crear evento';
                    }
                }, 100);
                // Manejar envío del formulario de creación
                document.getElementById('crearEventoForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    const form = this; // Referencia al formulario
                    const formData = new FormData(form);
                    // Añadir token CSRF si no está incluido
                    if (!formData.has('_token')) {
                        formData.append('_token', '{{ csrf_token() }}');
                    }
                    // Verificar si hay fecha fin
                    const hasFechaFin = document.getElementById('hasFechaFin').checked;
                    if (!hasFechaFin) {
                        formData.delete('fecha_fin'); // Eliminar fecha_fin si está deshabilitada
                    }
                    // Crear petición XHR en lugar de fetch (más compatible con Laravel)
                    const xhr = new XMLHttpRequest();
                    xhr.open('POST', '{{ route('calendario.store') }}');
                    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                    xhr.setRequestHeader('Accept', 'application/json');
                    xhr.onload = function() {
                        try {
                            // Intentar parsear la respuesta como JSON
                            const response = JSON.parse(xhr.responseText);
                            // Respuesta exitosa
                            Swal.fire({
                                title: '¡Éxito!',
                                text: 'Evento creado correctamente',
                                icon: 'success',
                                confirmButtonColor: '#3085d6',
                                confirmButtonText: 'Aceptar'
                            });
                            // Cerrar el modal
                            const modal = bootstrap.Modal.getInstance(document.getElementById('asignar'));
                            modal.hide();
                            // Refrescar el calendario
                            calendar.refetchEvents();
                            // Resetear el formulario
                            form.reset();
                            // Recargar el sitio para reflejar todos los cambios
                            location.reload();
                        } catch (error) {
                            // Error al parsear JSON (probablemente recibimos HTML)
                            console.error('Error al procesar la respuesta:', error);
                            if (xhr.status === 419) {
                                // Error de CSRF token
                                Swal.fire({
                                    title: 'Error de sesión',
                                    text: 'Tu sesión ha expirado. ¿Deseas recargar la página?',
                                    icon: 'warning',
                                    showCancelButton: true,
                                    confirmButtonColor: '#3085d6',
                                    cancelButtonColor: '#d33',
                                    confirmButtonText: 'Sí, recargar',
                                    cancelButtonText: 'No'
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        window.location.reload();
                                    }
                                });
                            } else {
                                Swal.fire({
                                    title: 'Error',
                                    text: 'Error al crear el evento. Por favor, intenta nuevamente.',
                                    icon: 'error',
                                    confirmButtonColor: '#3085d6',
                                    confirmButtonText: 'Aceptar'
                                });
                            }
                        }
                    };
                    xhr.onerror = function() {
                        Swal.fire({
                            title: 'Error de conexión',
                            text: 'No se pudo conectar con el servidor. Verifica tu conexión a internet.',
                            icon: 'error',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'Aceptar'
                        });
                    };
                    // Enviar el formulario
                    xhr.send(formData);
                });
                // Manejar envío del formulario de edición
                document.getElementById('editEventoForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    const eventId = document.getElementById('editEventoId').value;
                    const title = document.getElementById('editEventoTitle').value;
                    const comentario = document.getElementById('editComentario').value;
                    const url = document.getElementById('editUrl').value;
                    const fechaInicio = document.getElementById('editFechaInicio').value;
                    const hasFechaFin = document.getElementById('editHasFechaFin').checked;
                    const fechaFin = hasFechaFin ? document.getElementById('editFechaFin').value : null;
                    const curso = document.getElementById('editCurso').value || null;
                    const grupo = document.getElementById('editGrupo').value || null;
                    const modulo = document.getElementById('editModulo').value || null;
                    // Enviar solicitud al servidor
                    fetch('{{ route('calendario.update', '') }}/' + eventId, {
                            method: 'PUT',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest' // Importante para Laravel
                            },
                            body: JSON.stringify({
                                evento: title,
                                comentario: comentario,
                                url: url,
                                fecha_inicio: fechaInicio,
                                fecha_fin: fechaFin,
                                curso: curso,
                                grupo: grupo,
                                modulo: modulo
                            }),
                        })
                        .then(response => {
                            if (!response.ok) {
                                return response.json().then(err => {
                                    throw new Error(err.errors ? err.errors.join(', ') :
                                        'Error al actualizar el evento');
                                });
                            }
                            return response.json();
                        })
                        .then(data => {
                            Swal.fire({
                                title: '¡Éxito!',
                                text: 'Evento actualizado',
                                icon: 'success',
                                confirmButtonColor: '#3085d6',
                                confirmButtonText: 'Aceptar'
                            });
                            // Cerrar los modales
                            const editModal = bootstrap.Modal.getInstance(document.getElementById(
                                'editEventoModal'));
                            const viewModal = bootstrap.Modal.getInstance(document.getElementById(
                                'eventoModal'));
                            if (editModal) editModal.hide();
                            if (viewModal) viewModal.hide();
                            // Refrescar el calendario
                            calendar.refetchEvents();
                            // Recargar el sitio para reflejar todos los cambios
                            location.reload();
                        })
                        .catch(error => {
                            console.error('Error al actualizar el evento:', error);
                            Swal.fire({
                                title: 'Error',
                                text: error.message || 'Error al actualizar el evento.',
                                icon: 'error',
                                confirmButtonColor: '#3085d6',
                                confirmButtonText: 'Aceptar'
                            });
                        });
                });
            });
            // Función para abrir el modal de creación de evento
            function abrirModalCrearEvento(startDate, endDate = null) {
                // Resetear el formulario
                document.getElementById('crearEventoForm').reset();
                // Establecer la fecha inicial
                document.getElementById('fecha_inicio').value = formatDateTimeForInput(startDate);
                // Si hay fecha de fin, establecerla
                if (endDate) {
                    document.getElementById('hasFechaFin').checked = true;
                    document.getElementById('fecha_fin').disabled = false;
                    document.getElementById('fecha_fin').value = formatDateTimeForInput(endDate);
                } else {
                    document.getElementById('hasFechaFin').checked = false;
                    document.getElementById('fecha_fin').disabled = true;
                    document.getElementById('fecha_fin').value = '';
                }
                // Resetear selects de curso, grupo y módulo
                document.getElementById('curso').value = '';
                document.getElementById('grupo').innerHTML = '<option value="">Selecciona el grupo</option>';
                document.getElementById('modulo').innerHTML = '<option value="">Selecciona el módulo</option>';
                // Mostrar el modal
                const modal = new bootstrap.Modal(document.getElementById('asignar'));
                modal.show();
            }
            // Función para mostrar detalles de un evento
            function mostrarDetallesEvento(event) {
                const modal = new bootstrap.Modal(document.getElementById('eventoModal'));
                document.getElementById('modalTitle').innerText = event.title;
                // Construir el contenido del modal
                let details = ``;
                const rawData = event.extendedProps.raw;
                if (rawData) {
                    details += `
            <!-- Sección de usuario -->
            <div class="d-flex align-items-center mb-4 pb-3 border-bottom">
                <i class="bx bxs-user fs-3 me-3 text-primary"></i>
                <div>
                    <div class="d-flex align-items-center mb-1">
                        <h6 class="text-dark mb-0 me-2 fw-semibold">Profesor:</h6>
                        <span>${rawData.profesor}</span>
                    </div>
                </div>
            </div>
            <!-- Sección de fechas -->
            <div class="d-flex align-items-center mb-4 pb-3 border-bottom">
                <i class="bx bx-calendar-event fs-3 me-3 text-primary"></i>
                <div>
                    <div class="d-flex align-items-center mb-1">
                        <h6 class="text-dark mb-0 me-2 fw-semibold">Inicio:</h6>
                        <span>${formatDateTime(event.start)}</span>
                    </div>
                    <div class="d-flex align-items-center">
                        <h6 class="text-dark mb-0 me-2 fw-semibold">Fin:</h6>
                        <span>${event.end ? formatDateTime(event.end) : '<span class="badge bg-light text-secondary">No definido</span>'}</span>
                    </div>
                </div>
            </div>
            <!-- Información académica (si existe) -->
            ${(rawData.curso || rawData.grupo || rawData.modulo) ? `
                                        <div class="d-flex align-items-start mb-4 pb-3 border-bottom">
                                            <i class="bx bx-book-open fs-3 me-3 text-success"></i>
                                            <div>
                                                ${rawData.curso ? `
                            <div class="d-flex align-items-center mb-1">
                                <h6 class="text-dark mb-0 me-2 fw-semibold">Curso:</h6>
                                <span>${rawData.curso}</span>
                            </div>
                        ` : ''}
                                                ${rawData.grupo ? `
                            <div class="d-flex align-items-center mb-1">
                                <h6 class="text-dark mb-0 me-2 fw-semibold">Grupo:</h6>
                                <span>${rawData.grupo}</span>
                            </div>
                        ` : ''}
                                                ${rawData.modulo ? `
                            <div class="d-flex align-items-center">
                                <h6 class="text-dark mb-0 me-2 fw-semibold">Módulo:</h6>
                                <span>${rawData.modulo}</span>
                            </div>
                        ` : ''}
                                            </div>
                                        </div>
                                    ` : ''}
            <!-- Comentario (si existe) -->
            ${rawData.comentario ? `
                                        <div class="mb-3 pb-3 border-bottom">
                                            <div class="d-flex align-items-center mb-2">
                                                <i class="bx bx-message-square-detail fs-4 me-2 text-secondary"></i>
                                                <h6 class="mb-0 fw-semibold">Comentario</h6>
                                            </div>
                                            <div class="ms-4 mt-1">
                                                <p class="text-muted fst-italic mb-0">${rawData.comentario}</p>
                                            </div>
                                        </div>
                                    ` : ''}
            <!-- URL (si existe) -->
            ${rawData.url ? `
                                        <div class="mb-3">
                                            <div class="d-flex align-items-center mb-2">
                                                <i class="bx bx-link-alt fs-4 me-2 text-info"></i>
                                                <h6 class="mb-0 fw-semibold">Enlace</h6>
                                            </div>
                                            <div class="ms-4 mt-1">
                                                <a href="${rawData.url}" target="_blank" class="btn btn-outline-info btn-sm">
                                                    <i class="bx bx-link-external me-1"></i> Abrir enlace
                                                </a>
                                            </div>
                                        </div>
                                    ` : ''}
        `;
                } else {
                    details = '<p class="text-center text-muted">No hay información disponible para este evento.</p>';
                }
                document.getElementById('modalBody').innerHTML = details;
                const modalFooter = document.getElementById('modalFooter');
                if (canEdit) {
                    modalFooter.innerHTML = `
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-primary" onclick="editEvent('${event.id}')">Editar</button>
            <button type="button" class="btn btn-danger" onclick="deleteEvent('${event.id}')">Eliminar</button>
        `;
                } else {
                    modalFooter.innerHTML = `
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        `;
                }
                modal.show();
            }
            // Función para editar un evento
            function editEvent(eventId) {
                const modal = new bootstrap.Modal(document.getElementById('editEventoModal'));
                fetch('{{ route('calendario.eventos') }}')
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Error al cargar el evento para edición');
                        }
                        return response.json();
                    })
                    .then(events => {
                        const event = events.find(e => e.id == eventId);
                        if (event) {
                            document.getElementById('editEventoId').value = eventId;
                            document.getElementById('editEventoTitle').value = event.title;
                            document.getElementById('editComentario').value = event.raw.comentario || '';
                            document.getElementById('editUrl').value = event.raw.url || '';
                            document.getElementById('editFechaInicio').value = event.start.replace('Z', '');
                            document.getElementById('editFechaFin').value = event.end ? event.end.replace('Z', '') : '';
                            document.getElementById('editHasFechaFin').checked = !!event.end;
                            document.getElementById('editFechaFin').disabled = !event.end;
                            // Cargar información del curso, grupo y módulo
                            const cursoSelect = document.getElementById('editCurso');
                            const grupoSelect = document.getElementById('editGrupo');
                            const moduloSelect = document.getElementById('editModulo');
                            cursoSelect.value = event.raw.idCurso || '';
                            if (event.raw.idCurso) {
                                // Cargar módulos relacionados con el curso
                                fetch('{{ Request::root() }}/calendario/buscar/modulos/' + event.raw.idCurso)
                                    .then(response => response.json())
                                    .then(data => {
                                        let html_select = '<option value="">Selecciona el módulo</option>';
                                        for (let i = 0; i < data.length; i++) {
                                            html_select +=
                                                `<option value="${data[i].id}">${data[i].nombre_cumo}</option>`;
                                        }
                                        moduloSelect.innerHTML = html_select;
                                        moduloSelect.value = event.raw.idModulo || '';
                                    })
                                    .catch(error => {
                                        console.error('Error al cargar módulos:', error);
                                    });
                                // Cargar grupos relacionados con el curso
                                fetch('{{ Request::root() }}/calendario/buscar/grupo/' + event.raw.idCurso)
                                    .then(response => response.json())
                                    .then(data => {
                                        let html_select = '<option value="">Selecciona el grupo</option>';
                                        for (let i = 0; i < data.length; i++) {
                                            html_select +=
                                                `<option value="${data[i].id}">${data[i].nombre_grup}</option>`;
                                        }
                                        grupoSelect.innerHTML = html_select;
                                        grupoSelect.value = event.raw.idGrupo || '';
                                    })
                                    .catch(error => {
                                        console.error('Error al cargar grupos:', error);
                                    });
                            } else {
                                // Si no hay curso seleccionado, limpiar los selects de módulo y grupo
                                moduloSelect.innerHTML = '<option value="">Selecciona el módulo</option>';
                                grupoSelect.innerHTML = '<option value="">Selecciona el grupo</option>';
                            }
                        } else {
                            Swal.fire({
                                title: 'Error',
                                text: 'No se encontró el evento para editar.',
                                icon: 'error',
                                confirmButtonColor: '#3085d6',
                                confirmButtonText: 'Aceptar'
                            });
                        }
                    })
                    .catch(error => {
                        console.error('Error al cargar el evento para edición:', error);
                        Swal.fire({
                            title: 'Error',
                            text: 'Error al cargar el evento para edición.',
                            icon: 'error',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'Aceptar'
                        });
                    });
                modal.show();
            }
            // Función para eliminar un evento
            function deleteEvent(eventId) {
                Swal.fire({
                    title: '¿Estás seguro?',
                    text: '¿Deseas eliminar este evento?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sí, eliminar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        fetch('{{ route('calendario.delete', '') }}/' + eventId, {
                                method: 'GET', // Método correcto según tu configuración
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json',
                                    'X-Requested-With': 'XMLHttpRequest' // Importante para Laravel
                                },
                            })
                            .then(response => {
                                if (!response.ok) {
                                    return response.json().catch(() => {
                                        throw new Error('Error al eliminar el evento');
                                    }).then(err => {
                                        throw new Error(err.message || 'Error al eliminar el evento');
                                    });
                                }
                                const contentType = response.headers.get('content-type');
                                if (contentType && contentType.includes('application/json')) {
                                    return response.json();
                                }
                                return {};
                            })
                            .then(() => {
                                Swal.fire({
                                    title: '¡Eliminado!',
                                    text: 'El evento ha sido eliminado.',
                                    icon: 'success',
                                    confirmButtonColor: '#3085d6',
                                    confirmButtonText: 'Aceptar'
                                });
                                // Cerrar el modal de detalles
                                const eventoModal = document.getElementById('eventoModal');
                                if (eventoModal) {
                                    const modalInstance = bootstrap.Modal.getInstance(eventoModal);
                                    if (modalInstance) modalInstance.hide();
                                }
                                // Refrescar el calendario
                                calendar.refetchEvents();
                            })
                            .catch(error => {
                                console.error('Error al eliminar el evento:', error);
                                Swal.fire({
                                    title: 'Error',
                                    text: error.message || 'No se pudo eliminar el evento.',
                                    icon: 'error',
                                    confirmButtonColor: '#3085d6',
                                    confirmButtonText: 'Aceptar'
                                });
                            });
                    }
                });
            }
        </script>
    @endsection
@endif