@extends('layouts.app')

@section('title', 'Rol Dash8 Q400')

@section('css')
    <style>
        .table td.selected {
            background-color: #e8dddd;
        }

        .table-container {
            overflow-x: auto;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid rgba(0, 0, 0, 0.1);
            padding: 8px;
            text-align: center;
        }
        .sticky {
            position: -webkit-sticky;
            position: sticky;
            left: 0;
            z-index: 1;
        }
        .segundo-sticky {
            position: -webkit-sticky;
            position: sticky;
            left: 80px; /* Adjust this value to match the width of the first column */
            z-index: 1;
        }
        .colaborador-datos, .colaborador-cargo {
            background-color: #fff !important;
        }

        @media (max-width: 768px) {
            table {
                width: 80%; /* Reduce the table width to 80% on mobile devices */
            }
            th, td {
                padding: 4px; /* Reduce padding for smaller cells */
            }
            .sticky, .second-sticky {
                left: 0; /* Ensure sticky columns are correctly positioned */
            }
        }
        .swal-high-zindex {
            z-index: 9999 !important;
        }

        .fecha-adicional-seleccionada {
            background-color: #ffc107 !important;
            border: 2px solid #ff8800 !important;
        }

        .swal2-container {
            z-index: 20000 !important;
        }

        .comentario-icon {
            position: relative !important;
            z-index: 9999 !important;
            pointer-events: auto !important;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important; /* ← Sombra para efecto 3D */
            transition: all 0.2s ease !important; /* ← Transición suave */
            color: rgb(252, 252, 252) !important;
        }

        .comentario-icon:hover {
            color: #afabab !important; /* ← Color más oscuro al hover */
            transform: scale(1.1) !important; /* ← Agrandar ligeramente al hover */
        }

        .comentario-icon:hover::after {
            content: attr(data-tooltip)!important;
            position: absolute !important;
            background: #333 !important;
            color: white !important;
            padding: 8px 12px !important;
            border-radius: 4px !important;
            white-space: pre-wrap !important;
            z-index: 10000 !important;
            bottom: 125% !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            font-size: 12px !important;
            max-width: 300px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
            pointer-events: auto !important;
        }
        /* Hacer que el contenedor table-responsive tenga altura máxima y scroll */
        .table-responsive {
            max-height: 70vh; /* Ajusta según necesites */
            overflow-y: auto;
        }

        /* Hacer sticky el thead dentro del contenedor responsive */
        .table-responsive #tabla-rol thead {
            position: sticky !important;
            top: 0 !important;
            z-index: 1000 !important;
        }

        .table-responsive #tabla-rol thead th {
            position: sticky !important;
            top: 0 !important;
            z-index: 1000 !important;
        }

        .celda-limpiada {
            animation: limpiarCelda 1s ease;
        }

        @keyframes limpiarCelda {
            0% {
                background-color: #e897a3;
                transform: scale(1.05);
            }
            100% {
                background-color: transparent;
                transform: scale(1);
            }
        }

        .header-colaborador {
            background-color: #092b54 !important;
            color: white !important;
            text-align: center;
            vertical-align: middle;
            font-size: 8px !important;
        }
        .th-dia {
            background-color: #092b54;
            color: white;
            text-align: center;
            font-size: 8px !important;
        }

        .th-dia-fin-semana {
            background-color: #092b54;
            color: red;
            text-align: center;
            font-size: 8px !important;
        }

        /* Estilo para el total de horas */
        .th-total-horas {
            background-color: #092b54 !important;
            color: white !important;
            text-align: center;
            vertical-align: middle;
            font-size: 8px !important;
        }
    </style>
@endsection

@section('content')
    <div class="card mt-2 p-3">
        <div class="row">
            <div class="col-md-3 d-flex flex-column">
                @can('rol_programacion_diasQ400.select')
                    <label for="mes">Seleccionar mes: <span class="text-danger">*</span></label>
                    <input type="month" id="mes" name="mes" class="form-control mt-2">
                @endcan
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <div class="form-check form-switch d-none" id="toggleDiasContainer">
                    <input class="form-check-input" type="checkbox" id="toggleDiasAnteriores" checked>
                    <label class="form-check-label" for="toggleDiasAnteriores">
                        <span id="textoToggleDias">Ocultar días del mes anterior</span>
                    </label>
                </div>
            </div>
            <div class="col-md-6 d-flex align-items-end">
                @can('rol_programacion_diasQ400.mostrar')
                    <button id="btnMostrar" onclick="actualizarTabla()" class="btn btn-success w-100" style="display: none;">Mostrar</button>
                @endcan
            </div>
        </div>
    </div>
    <div class="card mt-2">
        <div class="card-header d-flex justify-content-between py-2">
            <h6 id="titulo" class="mb-0"></h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="tabla-rol" class="table d-none" style="font-size: 9px;">
                    <thead>
                        <tr>
                            <th rowspan="2" class="sticky header-colaborador">Cargo</th>
                            <th rowspan="2" class="segundo-sticky header-colaborador">Tripulantes de Vuelo Dash8 Q400</th>
                            @foreach ($dias_preparados as $dia)
                                <th class="{{ $dia['es_fin_de_semana'] ? 'th-dia-fin-semana' : 'th-dia' }}">
                                    {{ $dia['dia_semana'] }}
                                </th>
                            @endforeach
                            <th rowspan="2" class="th-total-horas">
                                Total sumas Horas
                            </th>
                        </tr>
                        <tr>
                            @foreach ($dias_preparados as $dia)
                                <th class="{{ $dia['es_fin_de_semana'] ? 'th-dia-fin-semana' : 'th-dia' }}">
                                    {{ $dia['dia_numero'] }}
                                </th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($colaboradoresQ400 as $index => $colaborador)
                            <tr data-colaborador-id="{{ $colaborador->id }}">
                                <td class="colaborador-cargo sticky">{{ $colaborador->appcargo->cargo_vuelo }}</td>
                                <td class="colaborador-datos segundo-sticky">{{ $colaborador->nombre_completo }}</td>
                                @foreach ($dias_del_mes as $index => $dia)
                                    <td style="width: 100px; text-align: center; vertical-align: middle; border: 1px solid rgba(0, 0, 0, 0.1);" contenteditable="true"  data-dia="{{ $dia['dia'] }}" data-fecha="{{ $dia['fecha_completa'] }}" class="celda-editable @if($index < 7) mes-anterior @endif">
                                    </td>
                                @endforeach
                                <td style="text-align: center; vertical-align: middle; border: 1px solid rgba(0, 0, 0, 0.1); font-weight: bold;" class="total-horas">
                                    {{ $colaborador->total_horas_mes }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="mt-2">
                @can('rol_programa_diasQ400.guardar')
                    <button class="btn btn-primary sm mt-2" id="guardarTabla" style="display: none">Guardar</button>
                @endcan
            </div>
            <div class="mt-2">
                @can('rol_programa_diasQ400.retorno-instruccion')
                    <button class="btn btn-danger sm mt-2 d-none" id="devolverAInstrucciones">Devolver a Instrucción</button>
                @endcan
            </div>
            <div class="mt-2">
                @can('rol_programa_diasQ400.exportar')
                    <button class="btn btn-success sm mt-2" id="exportarExcel" style="display: none">Exportar a Excel</button>
                @endcan
            </div>
        </div>
    </div>
    <!-- Codigo para el modal -->
    <div class="modal fade" id="modal-eventos" tabindex="-1" role="dialog" aria-labelledby="modalEventosLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalEventosLabel">Asignaciones</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <ul class="nav nav-tabs" id="asignacionTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="eventos-tab" data-bs-toggle="tab" data-bs-target="#eventos-content" type="button" role="tab" aria-controls="eventos-content" aria-selected="true">
                                Eventos <i class="fa-solid fa-calendar ms-2"></i>
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="vuelos-tab" data-bs-toggle="tab" data-bs-target="#vuelos-content" type="button" role="tab" aria-controls="vuelos-content" aria-selected="false">
                                Vuelos <i class="fas fa-plane ms-2"></i>
                            </button>
                        </li>
                    </ul>
                    <div class="tab-content mt-3" id="asignacionTabsContent">
                        <!-- PESTAÑA EVENTOS -->
                        <div class="tab-pane fade show active" id="eventos-content" role="tabpanel" aria-labelledby="eventos-tab">
                            <label for="evento-id">Evento:</label>
                            <select id="evento-id" name="evento_id" class="form-select">
                                <option value="">Seleccione evento: </option>
                                @foreach($eventos_jefe_roles as $evento)
                                    <option value="{{ $evento->id }}" data-nombre="{{ $evento->nombre }}">{{ $evento->nombre }} - {{ $evento->descripcion }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- PESTAÑA VUELOS -->
                        <form id="asignar-vuelos-modal" action="{{ route('colaboradoresQ.asignarVuelos') }}" method="POST">
                            @csrf
                            <div class="tab-pane fade" id="vuelos-content" role="tabpanel" aria-labelledby="vuelos-tab">
                                <div class="row">
                                    <input type="hidden" id="colaborador_id" name="colaborador_id" value="">
                                    <div class="alert alert-info mb-3">
                                        <strong>Colaborador: <i class="fas fa-address-card"></i></strong> <span id="colaborador-nombre"></span>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="fecha_vuelo">Fecha:</label>
                                        <input type="date" id="fecha_vuelo" name="fecha_vuelo" class="form-control" readonly>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Fechas adicionales:</label>
                                        <div id="calendar-modal" style="height: 300px;"></div>
                                        <input type="hidden" id="fechas_adicionales" name="fechas_adicionales" value="">
                                        <small class="text-muted">Selecciona días adicionales para el mismo vuelo</small>
                                    </div>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-md-6">
                                        <label for="vuelo-select">Vuelo:</label>
                                        <select id="vuelo-select" class="form-select" name="vuelos[0][vuelo_id]">
                                            <option value="">Seleccione vuelo...</option>
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <label>Tramos:</label>
                                        <div id="tramos-info" class="form-control" style="min-height: 38px; background-color: #f1f2f3;">
                                        </div>
                                    </div>
                                </div>
                                <!-- Container para vuelos adicionales -->
                                <div class="mt-2" id="vuelos-container-modal">
                                </div>
                                <div class="d-flex gap-2 mt-2">
                                    <button type="button" class="btn btn-success w-50 w-md-auto" id="agregar-vuelo-modal">
                                        <i class="fa-solid fa-plus"></i>
                                    </button>
                                    <button type="button" class="btn btn-danger w-50 w-md-auto" id="eliminar-vuelo-modal">
                                        <i class="fa-solid fa-minus"></i>
                                    </button>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-md-12">
                                        <label>Tripulantes requeridos:</label>
                                        <div id="tripulantes-info" class="border p-2 bg-light text-muted">
                                            --
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning limpiar">Limpiar</button>
                    <button type="button" class="btn btn-success" id="btn-asignar" style="display: none;">Asignar</button>
                    <button type="button" class="btn btn-primary close" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <!-- Codigo para mostrar - actualizar tabla y los encabezados-->
    <script>
        const inputMes = document.getElementById('mes');
        const btnMostrar = document.getElementById('btnMostrar');

        inputMes.addEventListener('change', function() {
            if (this.value) {
                btnMostrar.style.display = 'block';
            }
        });
    </script>

    <script>
        // Codigo para actualizar tabla según mes seleccionado
        function actualizarTabla() {
            mostrarTabla();
            actualizarTituloMes();
            cargarEventosDelMes();
        }

        function actualizarTablaDesdeModal() {
            mostrarTabla();
            actualizarTituloMes();
            cargarEventosDelMes(false); // Pasamos false para NO mostrar la alerta
        }

        // Codigo para mostrar la tabla una vez seleccionado el mes
        function mostrarTabla() {
            const tabla       = document.getElementById('tabla-rol');
            const btnGuardar  = document.getElementById('guardarTabla');
            const btnExportar = document.getElementById('exportarExcel');
            const btnDevolver = document.getElementById('devolverAInstrucciones');
            const toggleDias  = document.getElementById('toggleDiasContainer');

            tabla.classList.remove('d-none');
            btnGuardar.classList.remove('d-none');
            btnExportar.classList.remove('d-none');
            toggleDias.classList.remove('d-none');
        }

        //Funcion para actualizar los encabezados de la tabla
        function actualizarTituloMes() {
            const titulo_mes = document.getElementById('titulo');
            const select_mes = document.getElementById('mes');
            if (!titulo_mes || !select_mes) return;

            const [anio, mes] = select_mes.value.split('-');
            const nombre_mes = new Date(anio, mes - 1, 1).toLocaleString('es-ES', { month: 'long' });

            titulo_mes.textContent = `ROL - ÚLTIMOS 7 DÍAS + ${nombre_mes.toUpperCase()} ${anio}`;
        }

        // Función para ocultar/mostrar días del mes anterior
        document.getElementById('toggleDiasAnteriores').addEventListener('change', function() {
            const diasAnterioresBody = document.querySelectorAll('td.mes-anterior'); // Celdas del cuerpo
            const encabezadosDiasAnteriores = document.querySelectorAll('th[style*="background-color: rgb(108, 117, 125)"]');
            const display = this.checked ? 'table-cell' : 'none';
            // Ocultar celdas del cuerpo
            diasAnterioresBody.forEach(celda => {
                celda.style.display = display;
            });
            // Ocultar encabezados de días anteriores
            encabezadosDiasAnteriores.forEach(encabezado => {
                encabezado.style.display = display;
            });
        });

        // Funcion para cambiar texto en switch
        document.addEventListener('DOMContentLoaded', function () {
            const toggleInput = document.getElementById('toggleDiasAnteriores');
            const textoLabel = document.getElementById('textoToggleDias');

            toggleInput.addEventListener('change', function () {
                if (this.checked) {
                    textoLabel.textContent = 'Ocultar días del mes anterior';
                } else {
                    textoLabel.textContent = 'Mostrar días del mes anterior';
                }
            });
        });
    </script>

    <!-- Codigo para exportar a Excel -->
    @if(session('error'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: "{{ session('error') }}",
                });
            });
        </script>
    @endif
    <script>
        $(document).ready(function () {
            $('#exportarExcel').on('click', function (e) {
                e.preventDefault();
                var mesAnio = $('#mes').val();
                if (!mesAnio) {
                    alert('Por favor, selecciona un mes y un año.');
                    return;
                }
                var [anio, mes] = mesAnio.split('-');
                var url = URLs+'/exportar-rol-programacion-diasQ?mes='+mes+'&anio='+anio;
                window.location.href = url;
            });
        });
    </script>

    <!-- Codigo para seleccion de celdas, envio de eventos a la BD -->
    <script>
        $(document).ready(function() {
            let isSelecting = false;
            let selectedCells = [];
            const color_map = {
                '10': '#323391',  // Color para el Evento 10
                '11': '#E6B418',  // Color para el Evento 11
                '12': '#E83A26',  // Color para el Evento 12
                '13': '#DAEEF3',  // Color para el Evento 13
                '14': '#2EF086',  // Color para el Evento 14
                '15': '#1FCCFE',  // Color para el Evento 15
                '16': '#E83A26',  // Color para el Evento 16
                '17': '#95B3D7',  // Color para el Evento 17
                '18': '#9B32E0',  // Color para el Evento 18
            };

            // Codigo para seleccion de celdas
            $('table').on('mousedown', '.celda-editable:not(.no-editable)', function(e) {
                const $celda = $(this);
                const cellText = $(this).text().trim().toUpperCase();
                const isVacOrCum = cellText === 'VAC' || cellText === 'CUM';
                const isMesAnterior = $celda.hasClass('mes-anterior');
                const isEditable = !$celda.hasClass('no-editable') || isVacOrCum || isMesAnterior;
                if (!isEditable) {
                    // Mostrar la alerta de SweetAlert y salir de la función
                    Swal.fire({
                        icon: 'warning',
                        title: 'Celda no editable',
                        text: 'Debe seleccionar una celda vacía o con VAC/CUM.',
                        confirmButtonText: 'Entendido'
                    });
                    return;
                }

                isSelecting = true;
                selectedCells = [$celda[0]]; // Inicia la selección con la celda actual
                $celda.addClass('selected'); // Visualmente indica que la celda está seleccionada
                e.preventDefault();

                // Función para extender la selección al mover el mouse sobre otras celdas
                $(document).on('mouseenter', '.celda-editable', function() {
                    if (isSelecting) {
                        const texto = $(this).text().trim().toUpperCase();
                        const VacOcum = texto === 'VAC' || texto === 'CUM';
                        const esMesAnterior = $(this).hasClass('mes-anterior');
                        const editable = (!$(this).hasClass('no-editable') && $(this).hasClass('celda-editable')) || VacOcum || esMesAnterior;

                        // Solo permitir seleccionar celdas que sean editables o tengan VAC/CUM
                        if (editable && !selectedCells.includes(this)) {
                            selectedCells.push(this);
                            $(this).addClass('selected');
                        }

                    }
                });

                // Función para detener la selección cuando el usuario suelta el botón del mouse
                $(document).on('mouseup', function () {
                    if (isSelecting){
                        isSelecting = false;
                        $(document).off('mouseenter');
                        $(document).off('mouseup');
                        if (selectedCells.length > 0) {
                            inicializarModal(selectedCells[0]);
                            $('#modal-eventos').modal('show');
                        } else {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Selección inválida',
                                text: 'No se seleccionaron celdas válidas.',
                                confirmButtonText: 'Entendido'
                            });
                        }
                    }
                });
            });

            // Guardar el evento seleccionado en cada celda seleccionada y limpiar la selección
            $('#evento-id').change(function() {
                const eventoId = $(this).val();
                const evento_texto = $(this).find('option:selected').data('nombre');
                if (eventoId) {
                    selectedCells.forEach(function(cell) {
                        $(cell)
                            .data('evento-id', eventoId) // Asigna el ID del evento a la celda
                            .text(evento_texto) // Opcional: muestra el texto del evento en la celda
                            .css('backgroundColor', color_map[eventoId] || '#FFFFFF') // Cambia el color de fondo según el evento
                            .removeClass('selected') // Limpia la clase de selección
                    });
                }
                $('#modal-eventos').modal('hide'); // Ocultar el modal
                selectedCells = []; // Resetear el array de celdas seleccionadas
                $(this).val(''); // Resetear a un valor por defecto del select
            });

            // Enviar datos a la base de datos
            $('#guardarTabla').click(function(event) {
                event.preventDefault();
                let datosEventos = [];
                $('.celda-editable').each(function() {
                    const colaboradorId = $(this).closest('tr').data('colaborador-id');
                    const eventoId      = $(this).data('evento-id');
                    const dia           = $(this).data('dia');
                    const anio          = $('#mes').val().substring(0, 4);
                    const mes           = $('#mes').val().substring(5, 7);
                    if (eventoId) {
                        datosEventos.push({
                            colaborador_id: colaboradorId,
                            evento_id: eventoId,
                            fecha: `${anio}-${mes}-${dia}`,
                        });
                    }
                });
                if (datosEventos.length > 0) {
                    $.ajax({
                        url: URLs+'/guardar-eventos-colaborador', // Asegúrate de que esta URL es correcta
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({eventos: datosEventos}),
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                    })
                    .done(function (response) {
                        // Mostrar SweetAlert con un mensaje de éxito
                        Swal.fire({
                            icon: 'success',
                            title: 'Eventos guardados',
                            text: 'Los eventos han sido guardados correctamente.',
                            confirmButtonText: 'Aceptar'
                        });
                    })
                    .fail(function(xhr, status, error) {
                        // Mostrar SweetAlert con un mensaje de error
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Ocurrió un error al guardar los eventos. Por favor, inténtalo nuevamente.',
                            confirmButtonText: 'Aceptar'
                        });
                    });
                } else {
                    Swal.fire({
                        icon: 'info',
                        title: 'Sin cambios',
                        text: 'No hay eventos para guardar.',
                        confirmButtonText: 'Aceptar',
                    });
                }
            });
        });
    </script>

    <!-- Codigo para cargar los eventos de la BD -->
    <script>
        @auth
            var GuardarTabla       = @json(auth()->user()->can('rol_programa_diasQ400.guardar'));
            var retornoInstruccion = @json(auth()->user()->can('rol_programa_diasQ400.retorno-instruccion'));
            var ExportarTabla      = @json(auth()->user()->can('rol_programa_diasQ400.exportar'));
        @else
            var GuardarTabla       = false;
            var retornoInstruccion = false;
            var ExportarTabla      = false;
        @endauth
        const color_map = {
            '1': '#FFC000',  // Color para el Evento 1
            '2': '#B1A0C7',  // Color para el Evento 2
            '3': '#DAEEF3',  // Color para el Evento 3
            '4': 'yellow',  // Color para el Evento 4
            '5': '#538DD5',  // Color para el Evento 5
            '6': '#FABF8F',  // Color para el Evento 6
            '7': '#95B3D7',  // Color para el Evento 7
            '8': '#C4D79B',  // Color para el Evento 8
            '9': '#92D050',  // Color para el Evento 9
            '10': '#323391',  // Color para el Evento 10
            '11': '#E6B418',  // Color para el Evento 11
            '12': '#E83A26',  // Color para el Evento 12
            '13': '#DAEEF3',  // Color para el Evento 13
            '14': '#2EF086',  // Color para el Evento 14
            '15': '#1FCCFE',  // Color para el Evento 15
            '16': '#E83A26',  // Color para el Evento 16
            '17': '#95B3D7',  // Color para el Evento 17
            '18': '#9B32E0',  // Color para el Evento 18
            '19': '#FFC000',
            '20': '#95B3D7',
            '21': '#C4D79B',
            '22': '#92D050',
            '23': '#FFC000',
        };
        const color_map_vuelos_Q400 = {
            '104': '#e57332',
            '105': '#e57332',
            '106': '#e57332',
            '107': '#e57332',
            '108': '#e57332',
            '109': '#e57332',
            '4220': '#e57332',
            '4221': '#e57332',
            '4222': '#e57332',
            '4223': '#e57332',
            '4120': '#e57332',
            '4121': '#e57332',
        };
        let cargo_id_Q400 = @json($cargoIdsQ400);

        function actualizarDataFechasCeldas() {
            const mes_seleccionado = document.getElementById('mes').value;
            const [anio, mes] = mes_seleccionado.split('-');
            const anioNum = parseInt(anio, 10);
            const mesNum = parseInt(mes, 10);

            // Calcular los últimos 7 días del mes anterior
            const ultimoDiaMesAnterior = new Date(anioNum, mesNum - 1, 0);
            const diasMesAnterior = [];

            for (let i = 6; i >= 0; i--) {
                const dia = new Date(ultimoDiaMesAnterior);
                dia.setDate(ultimoDiaMesAnterior.getDate() - i);
                diasMesAnterior.push({
                    fecha: dia.toISOString().split('T')[0],
                    dia: dia.getDate(),
                    diaSemana: ['D', 'L', 'M', 'X', 'J', 'V', 'S'][dia.getDay()],
                    esFinDeSemana: dia.getDay() === 0 || dia.getDay() === 6,
                    esMesAnterior: true
                });
            }
            // Calcular días del mes seleccionado
            const diasEnMes = new Date(anioNum, mesNum, 0).getDate();
            const diasMesSeleccionado = [];
            for (let i = 1; i <= diasEnMes; i++) {
                const dia = new Date(anioNum, mesNum - 1, i);
                diasMesSeleccionado.push({
                    fecha: dia.toISOString().split('T')[0],
                    dia: dia.getDate(),
                    diaSemana: ['D', 'L', 'M', 'X', 'J', 'V', 'S'][dia.getDay()],
                    esFinDeSemana: dia.getDay() === 0 || dia.getDay() === 6,
                    esMesAnterior: false
                });
            }
            const todasLasFechas = [...diasMesAnterior, ...diasMesSeleccionado];
            actualizarHeaderTabla(todasLasFechas);
            // Actualizar todas las celdas con las nuevas fechas
            const filas = document.querySelectorAll('#tabla-rol tbody tr');
            filas.forEach(fila => {
                const todasLasCeldas = fila.querySelectorAll('td:nth-child(n+3):not(.total-horas)');
                // Ocultar todas las celdas primero
                todasLasCeldas.forEach(celda => {
                    celda.style.display = 'none';
                });
                todasLasFechas.forEach((dia, index) => {
                    const celda = todasLasCeldas[index];
                    if (celda) {
                        celda.style.display = 'table-cell';
                        celda.setAttribute('data-fecha', dia.fecha);
                        celda.setAttribute('data-dia', dia.dia);
                    }
                });
            });

            document.querySelectorAll('.total-horas').forEach(celda => {
                celda.style.display = 'table-cell';
            });
        }

        function actualizarHeaderTabla(dias) {
            const primeraFila = document.querySelector('#tabla-rol thead tr:first-child');
            const segundaFila = document.querySelector('#tabla-rol thead tr:last-child');

            const thsDiaSemana = primeraFila.querySelectorAll('th');
            const thsNumeroDia = segundaFila.querySelectorAll('th');

            // Limpiar todos los elementos primero
            for (let i = 2; i < thsDiaSemana.length; i++) {
                thsDiaSemana[i].style.display = 'none';
            }
            for (let i = 0; i < thsNumeroDia.length; i++) {
                thsNumeroDia[i].style.display = 'none';
            }

            dias.forEach((dia, index) => {
                // Actualizar día de la semana (primera fila)
                const thDiaSemana = thsDiaSemana[index + 2];
                if (thDiaSemana && index + 2 < thsDiaSemana.length - 1) {
                    thDiaSemana.style.display = 'table-cell';
                    thDiaSemana.textContent = dia.diaSemana;
                    thDiaSemana.style.color = dia.esFinDeSemana ? 'red' : 'white';
                    thDiaSemana.style.backgroundColor = dia.esMesAnterior ? '#6c757d' : '#092b54';
                }

                // Actualizar número de día (segunda fila)
                // Los th de la segunda fila empiezan después de todos los de la primera fila
                const thNumeroDia = thsNumeroDia[index];
                if (thNumeroDia && index < thsNumeroDia.length) {
                    thNumeroDia.style.display = 'table-cell';
                    thNumeroDia.textContent = dia.dia;
                    thNumeroDia.style.color = dia.esFinDeSemana ? 'red' : 'white';
                    thNumeroDia.style.backgroundColor = dia.esMesAnterior ? '#6c757d' : '#092b54';
                }
            });

            const ultimoTh = thsDiaSemana[thsDiaSemana.length - 1];
            if (ultimoTh) {
                ultimoTh.style.display = 'table-cell';
                // Restaurar texto si fue sobreescrito
                if (!ultimoTh.textContent.includes('HORAS') && !ultimoTh.textContent.includes('Total')) {
                    ultimoTh.innerHTML = 'Total sumas Horas';
                }
            }
        }

        function cargarEventosDelMes(mostrarAlerta = true) {
            actualizarDataFechasCeldas();
            const mesSeleccionado = document.getElementById('mes').value;
            const [anio, mes] = mesSeleccionado.split('-');
            const filas_contenido = document.querySelectorAll('#tabla-rol tbody tr');
            const tipoEquipo = obtenerTipoEquipoDeVista();
            limpiarTabla(filas_contenido);

             // Crear ambas promesas y ejecutarlas en paralelo
            const promesaEventos = $.ajax({
                url: URLs+'/obtener-eventos-con-dias',
                type: 'GET',
                data: { mes, anio, cargo_ids: cargo_id_Q400 }
            });

            const promesaEstado = $.ajax({
                url: URLs+'/obtener-estado-eventos',
                type: 'GET',
                data: { mes, anio, tipoEquipo }
            });

            const promesaColaboradores = $.ajax({
                url: URLs+'/obtener-colaboradoresQ-horas',
                type: 'GET',
                data: { mes: mesSeleccionado }
            });

            // Ejecutar ambas promesas en paralelo y procesar los resultados cuando ambas terminen
            Promise.all([promesaEventos, promesaEstado, promesaColaboradores])
                .then(([eventosResponse, estadoEvento, colaboradoresResponse]) => {
                    const cantidadEventos = eventosResponse.length || 0;
                    configurarInterfazSegunEstado(estadoEvento, cantidadEventos, tipoEquipo);
                    actualizarTablaConEventos(filas_contenido, eventosResponse, estadoEvento.estado);
                    actualizarHorasColaboradores(colaboradoresResponse);

                    // Este bloque se ejecuta después de procesar los eventos
                    habilitarCeldasEditables(estadoEvento.estado);
                    habilitarCeldasVacCum(estadoEvento.estado);
                    mostrarEventosMesAnterior(eventosResponse, filas_contenido);
                    corregirPropiedadesCeldas(estadoEvento.estado);
                })
                .catch(function(error) {
                    console.error('Error al cargar los datos:', error);
                    // Mostrar mensaje de error al usuario
                    Swal.fire({
                        icon: 'error',
                        title: 'Error de conexión',
                        text: 'Hubo un problema al cargar los datos. Por favor, intenta nuevamente.',
                        confirmButtonText: 'Aceptar'
                    });
                });
        }

        function actualizarHorasColaboradores(colaboradores) {
            colaboradores.forEach(colaborador => {
                // Buscar la fila del colaborador y actualizar su celda de horas
                const fila = document.querySelector(`tr[data-colaborador-id="${colaborador.id}"]`);
                if (fila) {
                    const celdaHoras = fila.querySelector('.total-horas');
                    if (celdaHoras) {
                        celdaHoras.textContent = colaborador.total_horas_mes;
                    }
                }
            });
        }

        function limpiarTabla(filas_contenido) {
            filas_contenido.forEach(fila => {
                const celdasVacCum = [];
                // Limpiar TODAS las celdas de días, no solo .celda-editable
                const todasLasCeldasDias = fila.querySelectorAll('td:nth-child(n+3):not(.total-horas)');
                todasLasCeldasDias.forEach((celda, index) => {
                    const contenidoCelda = celda.textContent.trim().toUpperCase();
                    const esVacOCum = contenidoCelda === 'VAC' || contenidoCelda === 'CUM';
                    // Si es VAC o CUM, guardar la información
                    if (esVacOCum) {
                        celdasVacCum.push({
                            celda: celda,
                            contenido: celda.textContent,
                            color: celda.style.backgroundColor
                        });
                    }
                    // LIMPIAR TODO - contenido, estilos y clases
                    celda.textContent = '';
                    celda.style.backgroundColor = '';
                    celda.style.color = '';
                    celda.classList.remove('no-editable', 'selected');
                    celda.setAttribute('contenteditable', 'true');
                });
                // Limpiar celdas no seleccionables (por si acaso)
                fila.querySelectorAll('td.no-select').forEach(celda => {
                    celda.textContent = '';
                    celda.style.backgroundColor = '';
                    celda.style.color = '';
                });
                // Restaurar las celdas VAC y CUM
                celdasVacCum.forEach(item => {
                    item.celda.textContent = item.contenido;
                    item.celda.style.backgroundColor = item.color;
                    item.celda.classList.remove('no-editable');
                    item.celda.setAttribute('contenteditable', 'true');
                    item.celda.style.pointerEvents = 'auto';
                });
            });
        }

        function configurarInterfazSegunEstado(estadoEvento, cantidadEventos, tipoEquipo, mostrarAlerta = true) {
            const botonGuardar = document.getElementById('guardarTabla');
            const botonExportar = document.getElementById('exportarExcel');
            const botonRetornar = document.getElementById('devolverAInstrucciones');
            const filas_contenido = document.querySelectorAll('#tabla-rol tbody tr');

            // Configurar según el estado
            if (!estadoEvento.estado || estadoEvento.estado === 'pendiente' || estadoEvento.estado === 'retorno_instrucciones') {
                // Estado: Pendiente o retornado a instrucciones
                if (GuardarTabla) botonGuardar.style.display = 'none';
                if (ExportarTabla) botonExportar.style.display = 'none';
                if (retornoInstruccion) botonRetornar.classList.add('d-none');

                $('td:not(:first-child):not(.total-horas)').each(function() {
                    $(this).attr('contenteditable', 'false');
                    $(this).addClass('no-editable');

                    // Preservar el color de fondo si existe, sino usar gris
                    const currentBgColor = $(this).css('background-color');
                    if (currentBgColor && currentBgColor !== 'rgba(0, 0, 0, 0)' && currentBgColor !== 'transparent') {
                        $(this).css({
                            'opacity': '0.7',
                            'cursor': 'not-allowed'
                        });
                    } else {
                        $(this).css({
                            'background-color': '#f0f0f0',
                            'opacity': '0.9',
                            'cursor': 'not-allowed'
                        });
                    }
                });

                $('#guardarTabla').hide();
                $('#devolverAInstrucciones').hide();
                $('#exportarExcel').hide();
                // Mostrar alerta si el estado es pendiente
                if (estadoEvento.estado === 'retorno_instrucciones') {
                    Swal.fire({
                        icon: 'info',
                        title: 'Registros devueltos a Instrucción',
                        text: 'Los registros han sido devueltos al área de Instrucción. No se pueden realizar cambios hasta que sean enviados nuevamente.',
                        confirmButtonText: 'Entendido',
                        allowOutsideClick: false
                    });
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Registros pendientes',
                        text: 'El área de Instrucción aún no ha enviado los registros. Por favor, espere a que sean enviados para poder trabajar con ellos.',
                        confirmButtonText: 'Entendido',
                        allowOutsideClick: false
                    });
                }
            } else if (estadoEvento.estado === 'enviado_roles') {
                // Estado: Enviado a roles
                if (GuardarTabla) {
                    botonGuardar.style.display = 'block';
                    filas_contenido.forEach(fila => {
                        fila.querySelectorAll('td:not(:first-child):not(.total-horas)').forEach(celda => {
                            celda.classList.remove('no-editable');
                            celda.setAttribute('contenteditable', 'true');
                        });
                    });
                }

                if (ExportarTabla) {
                    botonExportar.style.display = cantidadEventos === 0 ? 'none' : 'block';
                }

                if (retornoInstruccion && cantidadEventos > 0 && botonRetornar) {
                    botonRetornar.classList.remove('d-none');
                    botonRetornar.style.display = 'block';
                }

                // Habilitar la tabla
                $('#tabla-rol').css({
                    'user-select': 'auto',
                    'pointer-events': 'auto'
                });

                // Restaurar el estado de las celdas
                $('td:not(:first-child):not(.total-horas)').each(function() {
                    $(this).removeClass('no-editable');
                    $(this).css({
                        'opacity': '1',
                        'cursor': 'default'
                    });
                });

                // Mostrar mensaje de éxito si es enviado_roles
                if (estadoEvento.estado === 'enviado_roles'  && mostrarAlerta) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Registros disponibles',
                        text: `Los registros del Dash ${tipoEquipo} han sido enviados por Instrucción. Puede comenzar a trabajar con ellos.`,
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            }
        }

        function actualizarTablaConEventos(filas_contenido, eventos, estado) {
            filas_contenido.forEach(fila => {
                const colaboradorId = fila.dataset.colaboradorId;
                const celdas = fila.querySelectorAll('td:nth-child(n+10):not(.total-horas)');
                celdas.forEach((celda, index) => {
                    const fechaCelda = celda.getAttribute('data-fecha');
                    const eventosDelDia = eventos.filter(evento => {
                        return (
                            evento.colaborador_id === parseInt(colaboradorId) &&
                            evento.fecha === fechaCelda
                        );
                    });
                    if (eventosDelDia.length > 0) {
                        const eventoTexto = eventosDelDia.map(evento => {
                            if (evento.tipo === 'CLA') {
                                // cursos
                                return 'CLA';
                            } else if (evento.tipo === 'vuelo') {
                                // vuelos
                                return evento.numero_vuelo;
                            } else {
                                // eventos normales
                                return evento.nombre_evento;
                            }
                        }).reduce((acumulador, actual, indice, arreglo) => {
                            const numeroActual = parseInt(actual);
                            const numeroAnterior = indice > 0 ? parseInt(arreglo[indice - 1]) : null;
                            const ultimoGrupo = acumulador.length > 0 ? acumulador[acumulador.length - 1] : '';
                            const primerNumeroDelGrupo = ultimoGrupo ? parseInt(ultimoGrupo.split('/')[0]) : null;
                            if (numeroAnterior !== null &&
                                numeroActual === numeroAnterior + 1 &&
                                primerNumeroDelGrupo !== null &&
                                numeroActual === primerNumeroDelGrupo + 1) {
                                // Son consecutivos y forman un par: agregar solo último dígito
                                acumulador[acumulador.length - 1] += `/${actual.slice(-1)}`;
                            } else {
                                // No son consecutivos o ya formaron un par: agregar número completo
                                acumulador.push(actual);
                            }
                            return acumulador;
                        }, []).join(',\n');
                        celda.textContent = eventoTexto;
                        celda.style.whiteSpace = 'pre-line';
                        const comentariosDelDia = eventosDelDia
                            .filter(evento => {
                                return (evento.tipo === 'vuelo' && evento.tieneComentario) ||
                                        (evento.tipo === 'evento' && evento.tieneComentario);
                            })
                            .map(evento => {
                                if (evento.tipo === 'vuelo') {
                                    return `${evento.numero_vuelo}: ${evento.comentario}`;
                                } else if (evento.tipo === 'evento') {
                                    return `${evento.nombre_evento}: ${evento.comentario}`;
                                }
                            })
                            .join('\n');
                        if (comentariosDelDia) {
                            const tooltipTexto = comentariosDelDia.replace(/\n/g, ' | ');
                            celda.innerHTML = celda.textContent + ` <i class="fas fa-info-circle comentario-icon" data-tooltip="${tooltipTexto}" style="color: #17a2b8; cursor: help; margin-left: 3px;"></i>`;
                        }
                        // Aplicar estilos a la celda
                        const colores = eventosDelDia.map(evento => {
                            if (evento.tipo === 'vuelo') {
                                // Buscar en color_map_vuelos_Q400 para vuelos
                                return color_map_vuelos_Q400[evento.numero_vuelo];
                            } else if (evento.tipo === 'CLA') {
                                return color_map['CLA'];
                            } else {
                                // Buscar en color_map para eventos
                                return color_map[evento.evento_id];
                            }
                        });

                        // Establecer el color de fondo, dando prioridad al primer color disponible
                        const colorFondo = colores.find(color => color) || '';
                        celda.style.backgroundColor = colorFondo;
                        // Determinar si el texto debe ser oscuro o claro
                        const colorTexto = esColorOscuro(colorFondo) ? '#FFFFFF' : '#000000';
                        celda.style.color = colorTexto;
                        const esMesAnterior = celda.classList.contains('mes-anterior');
                        const puedeEditarMesAnterior = esMesAnterior && estado === 'enviado_roles';
                        if (puedeEditarMesAnterior) {
                            // Las celdas del mes anterior con eventos siguen siendo editables en enviado_roles
                            celda.classList.remove('no-editable');
                            celda.setAttribute('contenteditable', 'true');
                            celda.classList.add('celda-editable');
                        } else {
                            // Las celdas del mes actual con eventos no son editables (comportamiento original)
                            celda.classList.add('no-editable');
                            celda.setAttribute('contenteditable', 'false');
                        }
                    } else {
                        celda.textContent = '';
                        celda.style.backgroundColor = '';
                        // Celdas vacías son editables para Jefe de Instrucciones
                        if (GuardarTabla && estado !== 'retorno_instrucciones') {
                            celda.classList.remove('no-editable');
                            celda.setAttribute('contenteditable', 'true');
                        }
                    }
                });
            });
        }

        function habilitarCeldasEditables(estado) {
            const filas_contenido = document.querySelectorAll('#tabla-rol tbody tr');
            if (estado === 'enviado_roles'){
                filas_contenido.forEach(fila => {
                    fila.querySelectorAll('td:not(:first-child)').forEach(celda => {
                        const contenidoCelda = celda.textContent.trim().toUpperCase();
                        const esVacOCum = contenidoCelda === 'VAC' || contenidoCelda === 'CUM';
                        const esMesAnterior = celda.classList.contains('mes-anterior');
                        const esColumnaEditable = celda.hasAttribute('data-dia');
                        if ((celda.textContent.trim() === '' && esColumnaEditable) || esMesAnterior) {
                            celda.classList.remove('no-editable');
                            celda.setAttribute('contenteditable', 'true');
                            celda.classList.add('celda-editable');
                        } else if (esVacOCum) {
                            // Celdas con VAC o CUM también editables
                            celda.classList.remove('no-editable');
                            celda.setAttribute('contenteditable', 'true');
                        } else if (esColumnaEditable) {
                            celda.classList.add('no-editable');
                            celda.setAttribute('contenteditable', 'false');
                        }
                    });
                });
            } else {
                // Si el estado es retorno_instrucciones o pendiente, deshabilitar todas las celdas
                filas_contenido.forEach(fila => {
                    fila.querySelectorAll('td:not(:first-child)').forEach(celda => {
                        celda.classList.add('no-editable');
                        celda.setAttribute('contenteditable', 'false');
                        celda.style.pointerEvents = 'none';
                        celda.style.cursor = 'not-allowed';
                    });
                });
            }
        }

        function habilitarCeldasVacCum(estado) {
            const celdas = document.querySelectorAll('#tabla-rol td');
            if (estado === 'enviado_roles'){
                celdas.forEach(celda => {
                    const contenido = celda.textContent.trim().toUpperCase();
                    if (contenido === 'VAC' || contenido === 'CUM') {
                        celda.style.pointerEvents = 'auto';
                        celda.style.cursor = 'pointer';
                        celda.classList.remove('no-editable');
                        celda.classList.add('celda-editable');
                    }
                });
            }
        }

        function mostrarEventosMesAnterior(response, filas_contenido) {
            // Debug: Verifica si hay cursos del mes anterior en la respuesta
            const mesActual = parseInt(document.getElementById('mes').value.split('-')[1]);
            const mesAnterior = mesActual === 1 ? 12 : mesActual - 1;
            const anioActual = parseInt(document.getElementById('mes').value.split('-')[0]);
            const anioAnterior = mesActual === 1 ? anioActual - 1 : anioActual;

            // Filtrar solo los cursos del mes anterior
            const cursosMesAnterior = response.filter(evento => {
                if (!evento.fecha) return false;
                const [eventYear, eventMonth] = evento.fecha.split('-').map(Number);
                return evento.tipo === 'curso' && eventYear === anioAnterior && eventMonth === mesAnterior;
            });
            // Procesar cada fila
            filas_contenido.forEach(fila => {
                const colaboradorId = fila.dataset.colaboradorId;
                // Obtener todas las celdas del mes anterior
                const celdasMesAnterior = fila.querySelectorAll('td:nth-child(n+3):nth-child(-n+9)');

                // Procesar cada celda
                celdasMesAnterior.forEach(celda => {
                    const dia = parseInt(celda.getAttribute('data-dia'));
                    if (isNaN(dia)) {
                        return;
                    }

                    // Buscar eventos específicamente para este día y colaborador
                    const eventosDelDia = response.filter(evento => {
                        if (!evento.fecha) return false;

                        const [eventYear, eventMonth, eventDay] = evento.fecha.split('-').map(Number);
                        const coincidencia = (
                            parseInt(evento.colaborador_id) === parseInt(colaboradorId) &&
                            eventYear === anioAnterior &&
                            eventMonth === mesAnterior &&
                            eventDay === dia
                        );
                        return coincidencia;
                    });

                    // Si encontramos eventos para esta celda
                    if (eventosDelDia.length > 0) {
                        const evento = eventosDelDia[0];

                        // FORZAR el contenido de la celda y sus estilos
                        if (evento.tipo === 'curso') {
                            // Para cursos
                            celda.innerHTML = 'CURSO';
                            celda.style.backgroundColor = '#FFC000'; // Ajusta al color correcto para CLA
                            celda.style.color = 'black';
                            celda.style.textAlign = 'center';
                        } else if (evento.tipo === 'vuelo') {
                            // Para vuelos (adaptado de tu código original)
                            const numerosVuelo = eventosDelDia
                                .filter(e => e.tipo === 'vuelo')
                                .map((e, index, array) => {
                                    if (index % 2 === 0 && array[index + 1]) {
                                        const base = e.numero_vuelo;
                                        const siguiente = array[index + 1].numero_vuelo.slice(-1);
                                        return `${base}/${siguiente}`;
                                    }
                                    return null;
                                })
                                .filter(Boolean);

                            celda.innerHTML = numerosVuelo.join('\n');

                            const colorVuelo = color_map_vuelos_Q400[evento.numero_vuelo];
                            if (colorVuelo) {
                                celda.style.backgroundColor = colorVuelo;
                                const textColor = esColorOscuro(colorVuelo) ? 'white' : 'black';
                                celda.style.color = textColor;
                                celda.style.fontWeight = 'bold';
                                celda.style.textAlign = 'center';
                            }
                        } else {
                            // Para otros tipos de eventos
                            celda.innerHTML = evento.nombre_evento;
                            celda.style.backgroundColor = color_map[evento.evento_id] || '#FFFFFF';
                        }

                        // Asegurar que la celda se mantenga no editable
                        celda.setAttribute('contenteditable', 'true');
                        celda.classList.add('celda-editable', 'mes-anterior');
                    }
                });
            });
        }

        function corregirPropiedadesCeldas(estado) {
            // Buscar todas las celdas que deberían ser no editables
            const celdas = document.querySelectorAll('#tabla-rol td');
            celdas.forEach(celda => {
                const contenido = celda.textContent.trim().toUpperCase();
                const esVacOCum = contenido === 'VAC' || contenido === 'CUM';
                const estaVacia = contenido === '';
                const esMesAnterior = celda.classList.contains('mes-anterior');
                // Si NO es estado enviado_roles, bloquear TODO
                if (estado !== 'enviado_roles') {
                    celda.classList.remove('celda-editable');
                    celda.classList.add('no-editable');
                    celda.setAttribute('contenteditable', 'false');
                    celda.style.pointerEvents = 'none';
                    celda.style.cursor = 'not-allowed';
                    celda.style.opacity = '0.7';
                    return;
                }
                if (esMesAnterior || esVacOCum || estaVacia)  {
                    // Celdas del mes anterior, VAC/CUM o vacías: EDITABLES
                    celda.classList.remove('no-editable');
                    celda.classList.add('celda-editable');
                    celda.setAttribute('contenteditable', 'false');
                    celda.style.pointerEvents = 'auto';
                    celda.style.cursor = 'pointer';
                } else {
                    // Celdas con otro contenido: deben ser NO editables
                    celda.classList.remove('celda-editable');
                    celda.classList.add('no-editable');
                    celda.setAttribute('contenteditable', 'false');
                    celda.style.pointerEvents = 'auto';
                    celda.style.cursor = 'pointer';
                }
            });

            // Volver a asignar el evento para mostrar alertas
            $(document).off('mousedown', 'td').on('mousedown', 'td', function(e) {
                const cellText = $(this).text().trim().toUpperCase();
                const isVacOrCum = cellText === 'VAC' || cellText === 'CUM';
                const isEditable = $(this).attr('contenteditable') === 'true';
                const isMesAnterior = $(this).hasClass('mes-anterior');

                if (isMesAnterior && estado !== 'enviado_roles') {
                    e.stopPropagation();
                    e.preventDefault();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Día del mes anterior',
                        text: 'No puedes editar los días del mes anterior.',
                        confirmButtonText: 'Entendido'
                    });
                    return false;
                }
                if (estado !== 'enviado_roles' && !isEditable && !isVacOrCum) {
                    e.stopPropagation();
                    e.preventDefault();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Celda no editable',
                        text: 'Esta celda no se puede editar porque ya contiene un evento que no es VAC o CUM.',
                        confirmButtonText: 'Entendido'
                    });
                    return false;
                }
            });
        }

        function esColorOscuro(hexColor) {
            const hex = hexColor.replace('#', '');
            const r = parseInt(hex.substring(0, 2), 16);
            const g = parseInt(hex.substring(2, 4), 16);
            const b = parseInt(hex.substring(4, 6), 16);
            const luminancia = 0.2126 * (r / 255) + 0.7152 * (g / 255) + 0.0722 * (b / 255);
            return luminancia < 0.5;
        }

        function obtenerTipoEquipoDeVista() {
            // Obtener la URL actual
            const urlActual = window.location.pathname;

            // Comprobar las rutas específicas
            if (urlActual.includes('mostrar-rol-con-dias-colaboradoresB')) {
                return 'B737';
            } else if (urlActual.includes('mostrar-rol-con-dias-colaboradoresQ')) {
                return 'Q400';
            } else if (urlActual.includes('mostrar-rol-con-dias-colaboradoresT')) {
                return 'Tripulantes';
            }

            // Si no coincide con ninguna ruta conocida, devolver un valor por defecto
            console.warn('No se pudo determinar el tipo de equipo desde la URL:', urlActual);
            return null;
        }
    </script>

    <!-- Codigo para funcionamiento y cierre del modal -->
    <script>
        $(document).ready(function() {
            let celda_seleccionada = null;
            habilitarClicksEnEventos();
            $(".close").click(function() {
                $("#modal-eventos").modal('hide');
            });

            // Evento de clic para seleccionar una celda (con delegación para manejar celdas dinámicas)
            $(document).on('click', 'td.celda-editable', function () {
                if (!$(this).hasClass("no-editable") && $(this).css("pointer-events") !== "none") {
                celda_seleccionada = $(this); // Almacenar la referencia a la celda seleccionada
                // Resaltar la celda seleccionada
                $('td.celda-editable').removeClass('selected'); // Quitar la clase 'selected' de otras celdas
                celda_seleccionada.addClass('selected');
                } else {
                    console.log("Celda no editable seleccionada. Ignorando click");
                }
            });

            $(".limpiar").click(function () {
                // Verificar si hay una celda seleccionada
                if (celda_seleccionada) {
                    // Limpiar el contenido y el estilo de la celda seleccionada
                    celda_seleccionada.text(""); // Limpiar el contenido
                    celda_seleccionada.css("background-color", ""); // Limpiar el color de fondo
                    celda_seleccionada.data("dia", ""); // Limpiar el atributo de datos
                    celda_seleccionada.removeClass('selected'); // Remover la clase 'celda-editable'
                } else {
                    // Mostrar un mensaje o realizar otra acción si no hay celda seleccionada
                    console.log("No hay celda seleccionada para limpiar");
                }
                $("#modal-eventos").modal('hide');
            });

            $('#devolverAInstrucciones').click(function() {
                const tipoEquipo = obtenerTipoEquipoDeVista();
                Swal.fire({
                    title: '¿Devolver a Instrucción?',
                    text: `Los registros del Dash ${tipoEquipo} serán devueltos para corrección.`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Sí, devolver',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const mesSeleccionado = document.getElementById('mes').value;
                        const [anio, mes] = $('#mes').val().split('-');

                        $.ajax({
                            url: URLs+'/devolver-a-instrucciones',
                            type: 'POST',
                            data: { mes: mes, anio: anio, tipoEquipo: tipoEquipo },
                            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                            success: function(response) {
                                Swal.fire('Devuelto', `Los registros del Dash ${tipoEquipo} han sido devueltos a Instrucción.`, 'success')
                                .then(() => {
                                    // Recargar eventos
                                    cargarEventosDelMes();
                                });
                            },
                            error: function() {
                                Swal.fire('Error', 'No se pudo devolver los registros.', 'error');
                            }
                        });
                    }
                });
            });
        });
        function habilitarClicksEnEventos() {
            $('.no-editable:not(.colaborador-datos)').each(function() {
                const $celda = $(this);
                // Solo habilitar si tiene contenido (evento)
                if ($celda.text().trim() !== '') {
                    $celda.css({
                        'pointer-events': 'auto !important',
                        'cursor': 'pointer !important'
                    });
                }
            });
        }

        $(document).ready(function() {
            setTimeout(corregirPropiedadesCeldas, 500);
        });

        let colaboradorId = null;
        let fechaSeleccionada = null;
        let diaSeleccionado = null;
        let vuelos_seleccionados_modal = {};
        let vueloIndex_modal = 1;
        let vuelos_data_modal = [];

        // Mostrar/ocultar botón Asignar según pestaña activa
        document.addEventListener('DOMContentLoaded', function() {
            const eventosTab = document.getElementById('eventos-tab');
            const vuelosTab = document.getElementById('vuelos-tab');
            const btnAsignar = document.getElementById('btn-asignar');
            eventosTab.addEventListener('click', function() {
                btnAsignar.style.display = 'none';
            });
            vuelosTab.addEventListener('click', function() {
                btnAsignar.style.display = 'inline-block';
                if (colaboradorId) {
                    cargarVuelos();
                }
            });
        });

        function limpiarModal() {
            document.getElementById('vuelo-select').innerHTML = '<option value="">Seleccione vuelo...</option>';
            document.getElementById('tramos-info').innerHTML = 'Seleccione un vuelo';
            document.getElementById('tripulantes-info').innerHTML = '--';
            document.getElementById('btn-asignar').disabled = false;
            document.getElementById('btn-asignar').textContent = 'Asignar';
        }

        let esModoEdicion = false;
        function inicializarModal(celda = null) {
            esModoEdicion = false;
            limpiarModal();
            limpiarVuelosDinamicos();
            let $celda;
            // Si no se pasa celda, usar la primera de selectedCells (si existe)
            if (celda) {
                $celda = $(celda);
            } else if (typeof selectedCells !== 'undefined' && selectedCells.length > 0) {
                $celda = $(selectedCells[0]);
            } else {
                return;
            }
            const $fila = $celda.closest('tr');

            // Obtener datos
            colaboradorId = $fila.data('colaborador-id');
            colaboradorNombre = $fila.find('.colaborador-datos').text();
            fechaSeleccionada = $celda.data('fecha');
            diaSeleccionado = $celda.data('dia');
            // Pre-llenar fecha en input
            const fechaInput = document.getElementById('fecha_vuelo');
            if (fechaInput && fechaSeleccionada) {
                fechaInput.value = fechaSeleccionada;
            }
            document.getElementById('colaborador_id').value = colaboradorId;
            document.getElementById('colaborador-nombre').textContent = colaboradorNombre;
            const vuelosTab = document.getElementById('vuelos-content');
            if (vuelosTab.classList.contains('show') && vuelosTab.classList.contains('active')) {
                cargarVuelos();
            }
            inicializarCalendarModal();
            document.getElementById('btn-asignar').textContent = 'Asignar';
        }

        // Función para cargar vuelos en el select
        function cargarVuelos() {
            if (!colaboradorId) {
                console.error('No hay colaboradorId definido');
                return Promise.reject('No hay colaboradorId');
            }

            const vueloSelect = document.getElementById('vuelo-select');
            // Limpiar select
            vueloSelect.innerHTML = '<option value="">Cargando vuelos...</option>';
            // AJAX para cargar vuelos
            return fetch(`/vuelos-modal/${colaboradorId}`)
                .then(response => response.json())
                .then(data => {
                    vueloSelect.innerHTML = '<option value="">Seleccione vuelo...</option>';
                    if (data.success && data.vuelos.length > 0) {
                        vuelos_data_modal = data.vuelos;
                        data.vuelos.forEach(vuelo => {
                            const option = document.createElement('option');
                            option.value = vuelo.id;
                            option.textContent = vuelo.numero_vuelo;
                            vueloSelect.appendChild(option);
                        });
                    } else {
                        vueloSelect.innerHTML = '<option value="">No hay vuelos disponibles</option>';
                        vuelos_data_modal = [];
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    vueloSelect.innerHTML = '<option value="">Error al cargar vuelos</option>';
                    vuelos_data_modal = [];
                    throw error;
                });
        }

        // Función para cargar el calendar con eventos
        function inicializarCalendarModal(vueloId = null) {
            if (!colaboradorId) {
                console.error('No hay colaboradorId definido para el calendar');
                return;
            }

            var fechasDisponibles = null;
            if (vueloId) {
                // la petición AJAX
                $.ajax({
                    url: `/fechas-disponibles/${vueloId}`,
                    async: false,
                    success: function(data) {
                        fechasDisponibles = data;
                    },
                    error: function() {
                        console.error('Error al obtener fechas disponibles');
                    }
                });
            }

            // Destruir calendar anterior si existe
            if ($('#calendar-modal').hasClass('fc')) {
                $('#calendar-modal').fullCalendar('destroy');
            }

            // Cargar eventos del colaborador específico en el calendar
            fetch(`/colaborador-eventos/${colaboradorId}`)
                .then(response => response.json())
                .then(data => {
                    $('#calendar-modal').fullCalendar({
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month'
                        },
                        defaultView: 'month',
                        locale: 'es',
                        selectable: true,
                        selectHelper: true,
                        events: data.eventos,
                        eventRender: function(event, element) {
                            // Solo aplicar tooltip a los vuelos (que tienen vueloId)
                            if (event.vueloId) {
                                element.attr('data-toggle', 'tooltip');
                                element.attr('title', 'Vuelo: ' + event.title);
                                element.tooltip({
                                    container: 'body',
                                    placement: 'top',
                                    trigger: 'hover'
                                });
                            }
                            // Para otros eventos (permisos, cursos) también puedes agregar tooltip si quieres
                            else {
                                element.attr('data-toggle', 'tooltip');
                                element.attr('title', event.title);
                                element.tooltip({
                                    container: 'body',
                                    placement: 'top',
                                    trigger: 'hover'
                                });
                            }
                        },
                        selectable: fechasDisponibles ? false : true,
                        selectHelper: fechasDisponibles ? false : true,
                        dayRender: function(date, cell) {
                            if (fechasDisponibles) {
                                var fechaStr = date.format('YYYY-MM-DD');
                                if (fechasDisponibles.indexOf(fechaStr) === -1) {
                                    cell.css('background-color', '#f5f5f5');
                                    cell.css('color', '#ccc');
                                }
                            }
                        },
                        dayClick: function(date, jsEvent, view) {
                            if (fechasDisponibles) {
                                var fecha = date.format('YYYY-MM-DD');
                                if (fechasDisponibles.indexOf(fecha) === -1) {
                                    Swal.fire({
                                        icon: 'warning',
                                        title: 'Día no disponible',
                                        text: 'Este día no está disponible según el itinerario del vuelo seleccionado',
                                        confirmButtonText: 'Entendido',
                                        backdrop: true,
                                        target: document.body,
                                    });
                                    return false;
                                }
                                manejarSeleccionFechaAdicional(fecha);
                            }
                        },
                        eventClick: function(calEvent, jsEvent, view) {
                            Swal.fire({
                                title: '¿Eliminar asignación?',
                                html: `
                                        <strong>Vuelo:</strong> ${calEvent.title}<br>
                                        <strong>Fecha:</strong> ${calEvent.start.format('DD/MM/YYYY')}<br>
                                        <strong>¿Desea eliminar esta asignación?</strong>
                                    `,
                                icon: 'question',
                                showCancelButton: true,
                                confirmButtonText: 'Sí, eliminar',
                                cancelButtonText: 'Cancelar',
                                confirmButtonColor: '#d33'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    $.ajax({
                                        url: calEvent.tipo === 'evento' ?
                                            `/eliminar-evento/${calEvent.asignacionId}` :
                                            `/eliminar-asignacion/${calEvent.asignacionId}`,
                                        method: 'DELETE',
                                        headers: {
                                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                        },
                                        success: function(response) {
                                            if (response.success) {
                                                Swal.fire('¡Eliminado!', 'La asignación ha sido eliminada correctamente', 'success');
                                                inicializarCalendarModal();
                                                actualizarTablaDesdeModal();
                                            }
                                        },
                                        error: function() {
                                            Swal.fire('Error', 'No se pudo eliminar la asignación', 'error');
                                        }
                                    });
                                }
                            });
                        },
                        select: function(start, end) {
                            var fecha = start.format('YYYY-MM-DD');
                            manejarSeleccionFechaAdicional(fecha);
                        }
                    });
                })
                .catch(error => {
                    console.error('Error al cargar eventos del colaborador:', error);
                });
        }

        function crearFilaVueloEdicion(vueloAsignado) {
            // Generar opciones del select (igual que el botón agregar)
            let optionsHtml = '<option value="">Seleccione vuelo...</option>';
            vuelos_data_modal.forEach(vuelo => {
                // Pre-seleccionar el vuelo actual
                const selected = vuelo.id == vueloAsignado.vuelo_id ? 'selected' : '';
                optionsHtml += `<option value="${vuelo.id}" ${selected}>${vuelo.numero_vuelo}</option>`;
            });

            let newVueloRow = `
                <div class="row vuelo-row-modal mb-3">
                    <div class="col-12 col-md-6 mb-2">
                        <label for="modal-vuelo-select-${vueloIndex_modal}">Vuelo:</label>
                        <select class="form-select vuelo-select-modal" name="vuelos[${vueloIndex_modal}][vuelo_id]" id="modal-vuelo-select-${vueloIndex_modal}">
                            ${optionsHtml}
                        </select>
                    </div>
                    <div class="col-12 col-md-6 mb-2">
                        <label>Tramos:</label>
                        <div class="form-control tramos-info-modal" id="modal-tramos-info-${vueloIndex_modal}" style="min-height: 38px; background-color: #f1f2f3;">
                            Cargando tramos...
                        </div>
                    </div>
                </div>
            `;

            document.getElementById('vuelos-container-modal').insertAdjacentHTML('beforeend', newVueloRow);
                const currentIndex = vueloIndex_modal;
                vueloIndex_modal++;
                // Cargar tramos directamente SIN depender del evento change
                const tramosDiv = document.getElementById(`modal-tramos-info-${currentIndex}`);
                if (tramosDiv) {
                    fetch(`/obtener-rutas/${vueloAsignado.vuelo_id}`)
                        .then(response => response.json())
                        .then(data => {
                            const tramosTexto = data.map(ruta =>
                                `${ruta.destino_partida} - ${ruta.destino_llegada}`
                            ).join(' | ');
                            tramosDiv.innerHTML = tramosTexto;
                        })
                        .catch(error => {
                            tramosDiv.innerHTML = 'Error al cargar tramos';
                        });
                }
        }

        function cargarVueloPrincipal(vueloAsignado) {
            // Pre-seleccionar vuelo en el select principal
            const selectPrincipal = document.getElementById('vuelo-select');
            const opcionBuscada = Array.from(selectPrincipal.options).find(option => option.value == vueloAsignado.vuelo_id);
            if (opcionBuscada) {
                selectPrincipal.value = vueloAsignado.vuelo_id;
            } else {
                console.error('NO se encontró la opción con valor:', vueloAsignado.vuelo_id);
            }

            const tramosDiv = document.getElementById('tramos-info');
            if (tramosDiv) {
                tramosDiv.innerHTML = 'Cargando tramos...';
                fetch(`/obtener-rutas/${vueloAsignado.vuelo_id}`)
                    .then(response => response.json())
                    .then(data => {
                        const tramosTexto = data.map(ruta =>
                            `${ruta.destino_partida} - ${ruta.destino_llegada}`
                        ).join(' | ');
                        tramosDiv.innerHTML = tramosTexto;
                    })
                    .catch(error => {
                        tramosDiv.innerHTML = 'Error al cargar tramos';
                    });
            } else {
                console.error('No se encontró el div tramos-info');
            }
        }

        $(document).on('change', '#vuelo-select', function() {
            var vueloSeleccionado = $(this).val();
            if (vueloSeleccionado) {
                inicializarCalendarModal(vueloSeleccionado);
            } else {
                inicializarCalendarModal();
            }
        });

        // Array para almacenar fechas adicionales seleccionadas
        let fechasAdicionalesSeleccionadas = [];
        function manejarSeleccionFechaAdicional(fecha) {
            // Verificar si la fecha ya está en el array
            const index = fechasAdicionalesSeleccionadas.indexOf(fecha);
            if (index > -1) {
                fechasAdicionalesSeleccionadas.splice(index, 1);
                $(`#calendar-modal .fc-day[data-date="${fecha}"]`).removeClass('fecha-adicional-seleccionada');
            } else {
                fechasAdicionalesSeleccionadas.push(fecha);
                $(`#calendar-modal .fc-day[data-date="${fecha}"]`).addClass('fecha-adicional-seleccionada');
            }
            document.getElementById('fechas_adicionales').value = fechasAdicionalesSeleccionadas.join(',');
        }

        // Funcion para cargar los tramos de los vuelos
        document.addEventListener('change', function(e) {
            if (e.target.id === 'vuelo-select' || e.target.classList.contains('vuelo-select-modal')) {
                const vueloId = e.target.value;
                let tramosDiv;
                if (e.target.id === 'vuelo-select') {
                    tramosDiv = document.getElementById('tramos-info');
                } else {
                    const selectId = e.target.id;
                    const index = selectId.split('-').pop();
                    tramosDiv = document.getElementById(`modal-tramos-info-${index}`);
                }
                if (vueloId) {
                    tramosDiv.innerHTML = 'Cargando tramos...';
                    fetch(`/obtener-rutas/${vueloId}`)
                        .then(response => response.json())
                        .then(data => {
                            const tramosTexto = data.map(ruta =>
                                `${ruta.destino_partida} - ${ruta.destino_llegada}`
                            ).join(' | ');
                            tramosDiv.innerHTML = tramosTexto;
                        })
                        .catch(error => {
                            tramosDiv.innerHTML = 'Error al cargar tramos';
                        });
                    cargarInfoTripulantes();
                } else {
                    tramosDiv.innerHTML = 'Seleccione un vuelo para ver los tramos';
                    cargarInfoTripulantes();
                }
            }
        });

        // Función para cargar información de tripulantes de todos los vuelos seleccionados
        function cargarInfoTripulantes() {
            const tripulantesDiv = document.getElementById('tripulantes-info');
            const btnAsignar = document.getElementById('btn-asignar');
            // Obtener todos los vuelos seleccionados
            const vuelosSeleccionados = [];
            // Vuelo principal
            const vueloPrincipal = document.getElementById('vuelo-select').value;
            if (vueloPrincipal) {
                vuelosSeleccionados.push({
                    id: vueloPrincipal,
                    numero: document.getElementById('vuelo-select').options[document.getElementById('vuelo-select').selectedIndex].text
                });
            }
            // Vuelos dinámicos
            document.querySelectorAll('.vuelo-select-modal').forEach(select => {
                if (select.value) {
                    vuelosSeleccionados.push({
                        id: select.value,
                        numero: select.options[select.selectedIndex].text
                    });
                }
            });
            if (vuelosSeleccionados.length === 0) {
                tripulantesDiv.innerHTML = '';
                btnAsignar.disabled = false;
                btnAsignar.textContent = 'Asignar';
                return;
            }
            tripulantesDiv.innerHTML = 'Cargando información de tripulantes...';
            // Cargar info de cada vuelo
            Promise.all(vuelosSeleccionados.map(vuelo =>
                fetch(`/tripulantes-vuelo/${vuelo.id}?fecha=${fechaSeleccionada}`)
                    .then(response => response.json())
                    .then(data => ({...data, numero_vuelo: vuelo.numero}))
            )).then(resultados => {
                mostrarInfoTripulantes(resultados, btnAsignar);
            }).catch(error => {
                tripulantesDiv.innerHTML = 'Error al cargar información de tripulantes';
            });
        }

        // Función para mostrar información de tripulantes con formato vertical
        function mostrarInfoTripulantes(resultados, btnAsignar) {
            const tripulantesDiv = document.getElementById('tripulantes-info');
            let html = '';
            let hayVueloCompleto = false;
            resultados.forEach((data, index) => {
                const color = data.estado === 'completo' ? 'text-success' : 'text-danger';
                if (index > 0) html += ' | ';
                html += `<span class="${color}">
                    <strong>Vuelo ${data.numero_vuelo}: ${data.tripulantes_asignados}/${data.tripulantes_requeridos} tripulantes</strong>
                </span>`;

                if (data.estado === 'completo') {
                    hayVueloCompleto = true;
                }
            });

            html += '<br><br>';
            html += '<div style="display: flex; gap: 20px;">';

            // Mostrar tripulantes en columnas verticales
            resultados.forEach((data, index) => {
                html += '<div style="flex: 1;">';
                html += '<strong>Asignados:</strong><br>';
                if (data.colaboradores.length > 0) {
                    data.colaboradores.forEach((colaborador, idx) => {
                        html += `${idx + 1}- ${colaborador.nombre} ${colaborador.cargo_vuelo}<br>`;
                    });
                } else {
                    html += 'Sin asignaciones<br>';
                }
                html += '</div>';
            });

            html += '</div>';

            // Control del botón según estado de vuelos
            if (hayVueloCompleto) {
                html += '<br><div class="text-danger"><small><strong>Hay vuelos con tripulación completa. Revisar asignaciones.</strong></small></div>';
                btnAsignar.disabled = true;
                btnAsignar.textContent = 'Revisar Tripulación';
            } else {
                btnAsignar.disabled = false;
                btnAsignar.textContent = 'Asignar';
            }
            tripulantesDiv.innerHTML = html;
        }

        // Función para limpiar todos los vuelos dinámicos
        function limpiarVuelosDinamicos() {
            // Limpiar container de vuelos dinámicos
            document.getElementById('vuelos-container-modal').innerHTML = '';
            // Resetear contador
            vueloIndex_modal = 1;
            // Limpiar array de vuelos seleccionados
            vuelos_seleccionados_modal = {};
            // Limpiar información de tripulantes
            document.getElementById('tripulantes-info').innerHTML = '';
            // Resetear botón asignar
            const btnAsignar = document.getElementById('btn-asignar');
            btnAsignar.disabled = false;
            btnAsignar.textContent = 'Asignar';
        }

        function actualizarTotalHorasColaborador(colaboradorId, totalHoras) {
            const fila = document.querySelector(`tr[data-colaborador-id="${colaboradorId}"]`);
            if (fila) {
                // Buscar la celda de total horas en esa fila
                const celdaTotalHoras = fila.querySelector('.total-horas');
                if (celdaTotalHoras) {
                    // Actualizar el contenido
                    celdaTotalHoras.textContent = totalHoras;
                    // Agregar un efecto visual temporal para mostrar que se actualizó
                    celdaTotalHoras.style.transition = 'background-color 0.3s ease';
                    celdaTotalHoras.style.backgroundColor = '#28a745';
                    celdaTotalHoras.style.color = 'white';
                    // Después de 2 segundos, volver al color original
                    setTimeout(() => {
                        celdaTotalHoras.style.backgroundColor = '#f0f0f0';
                        celdaTotalHoras.style.color = '';
                    }, 2000);
                }
            }
        }

        // Función para agregar nueva fila de vuelo en el modal
        document.getElementById('agregar-vuelo-modal').addEventListener('click', function() {
            if (vuelos_data_modal.length === 0) {
                alert('Primero debe cargar los vuelos disponibles');
                return;
            }
            let optionsHtml = '<option value="">Seleccione vuelo...</option>';
            vuelos_data_modal.forEach(vuelo => {
                optionsHtml += `<option value="${vuelo.id}">${vuelo.numero_vuelo}</option>`;
            });
            let newVueloRow = `
                <div class="row vuelo-row-modal mb-3">
                    <div class="col-12 col-md-6 mb-2">
                        <label for="modal-vuelo-select-${vueloIndex_modal}">Vuelo:</label>
                        <select class="form-select vuelo-select-modal" name="vuelos[${vueloIndex_modal}][vuelo_id]" id="modal-vuelo-select-${vueloIndex_modal}">
                            ${optionsHtml}
                        </select>
                    </div>
                    <div class="col-12 col-md-6 mb-2">
                        <label>Tramos:</label>
                        <div class="form-control tramos-info-modal" id="modal-tramos-info-${vueloIndex_modal}" style="min-height: 38px; background-color: #f1f2f3;">
                            Seleccione un vuelo
                        </div>
                    </div>
                </div>
            `;
            document.getElementById('vuelos-container-modal').insertAdjacentHTML('beforeend', newVueloRow);
            vueloIndex_modal++;
        });

        // Función para eliminar la última fila de vuelo en el modal
        document.getElementById('eliminar-vuelo-modal').addEventListener('click', function() {
            const vuelosContainer = document.getElementById('vuelos-container-modal');
            const lastRow = vuelosContainer.querySelector('.vuelo-row-modal:last-child');

            if (lastRow) {
                lastRow.remove();
                if (vueloIndex_modal > 1) {
                    vueloIndex_modal--;
                }
            }
            cargarInfoTripulantes();
        });

        // Función para asignación en vuelos
        document.getElementById('btn-asignar').addEventListener('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
            event.stopImmediatePropagation();

            // Obtener el formulario del modal
            let form = document.getElementById('asignar-vuelos-modal');
            let formData = new FormData(form);
            let newFormData = new FormData();
            let vuelos_validos = [];
            // Copiar todos los campos excepto 'vuelos'
            for (let [key, value] of formData.entries()) {
                if (!key.startsWith('vuelos')) {
                    newFormData.append(key, value);
                }
            }
            // Procesar los vuelos, solo incluyendo los que tienen un ID válido
            let fecha_vuelo = formData.get('fecha_vuelo');
            for (let i = 0; i < 100; i++) {
                let vueloId = formData.get(`vuelos[${i}][vuelo_id]`);
                if (vueloId && vueloId !== "") {
                    vuelos_validos.push({
                        vuelo_id: vueloId,
                        fecha_vuelo: fecha_vuelo
                    });
                }
            }
            vuelos_validos.forEach((vuelo, index) => {
                newFormData.append(`vuelos[${index}][vuelo_id]`, vuelo.vuelo_id);
                newFormData.append(`vuelos[${index}][fecha_vuelo]`, vuelo.fecha_vuelo);
            });
            let fechaInput = newFormData.get('fecha_vuelo');
            if (fechaInput) {
                var fechaFormateada = dayjs(fechaInput).format('DD-MM-YYYY');
                newFormData.set('fecha_vuelo', fechaFormateada);
            }
            let fecha = newFormData.get('fecha_vuelo');
            if (!fecha) {
                Swal.fire({
                    title: 'Error',
                    text: 'Por favor, selecciona una fecha de vuelo.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
                return;
            }
            // Validación de vuelos seleccionados
            let vuelosSeleccionados = false;
            for (let [key, value] of newFormData.entries()) {
                if (key.includes('[vuelo_id]') && value !== "") {
                    vuelosSeleccionados = true;
                    break;
                }
            }
            if (!vuelosSeleccionados) {
                Swal.fire({
                    title: 'Error',
                    text: 'Por favor, selecciona al menos un vuelo.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
                return;
            }
            // Realizar la solicitud AJAX para guardar el registro
            fetch(form.action, {
                method : 'POST',
                body   : newFormData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept'      : 'application/json'
                }
            }).then(response => response.json())
            .then(data => {
                let icon, title;
                switch(data.status) {
                    case 'success':
                        icon = 'success';
                        title = 'Éxito';
                        break;
                    case 'info':
                        icon = 'info';
                        title = 'Información';
                        break;
                    case 'warning':
                        icon = 'warning';
                        title = 'Advertencia';
                        break;
                    case 'error':
                        icon = 'error';
                        title = 'Error';
                        break;
                    default:
                        icon = 'question';
                        title = 'Resultado';
                }
                let htmlContent = `<p>${data.message}</p>`;
                if (data.details) {
                    htmlContent += '<ul>';
                    for (let key in data.details) {
                        htmlContent += `<li>${data.details[key]}</li>`;
                    }
                    htmlContent += '</ul>';
                }

                // Mostrar la alerta de SweetAlert
                Swal.fire({
                    title            : title,
                    html             : htmlContent,
                    icon             : icon,
                    confirmButtonText: 'OK',
                    customClass: {
                        container: 'swal-high-zindex'
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        if (data.status === 'success' || data.status === 'info') {
                            if (data.colaborador_id && data.total_horas_mes) {
                                actualizarTotalHorasColaborador(data.colaborador_id, data.total_horas_mes);
                            }
                            // Cerrar el modal después de actualizar
                            $('#modal-eventos').modal('hide');
                            actualizarTabla();
                        } else if (data.code === 'RESET_SELECTION') {
                            reiniciarSeleccionModal();
                        }
                    }
                });
            })
            .catch(error => {
                Swal.fire({
                    title            : 'Error',
                    text             : 'Hubo un problema al procesar tu solicitud. Por favor, inténtalo de nuevo.',
                    icon             : 'error',
                    confirmButtonText: 'OK'
                });
            });
        });

        function reiniciarSeleccionModal() {
            document.getElementById('vuelo-select').value = '';
            document.getElementById('tramos-info').innerHTML = '';
            document.getElementById('vuelos-container-modal').innerHTML = '';
            vueloIndex_modal = 1;
            document.getElementById('vuelo-select').focus();
        }

        function actualizarComentarios() {
            let form = document.getElementById('asignar-vuelos-modal');
            let formData = new FormData(form);
            let vuelos_a_actualizar = [];
            let fecha_vuelo = formData.get('fecha_vuelo');
            const selectPrincipal = document.getElementById('vuelo-select');
            const textareaPrincipal = document.getElementById('vuelos-0-comentario');
            if (selectPrincipal.value) {
                vuelos_a_actualizar.push({
                    vuelo_id: selectPrincipal.value,
                    fecha_vuelo: fecha_vuelo,
                    comentario: textareaPrincipal.value || ''
                });
            } else {
                console.error('Select principal está vacío');
            }
            // Procesar vuelos igual que en el código original
            for (let i = 1; i < 100; i++) {
                let vueloId = formData.get(`vuelos[${i}][vuelo_id]`);
                let comentario = formData.get(`vuelos[${i}][comentario]`) || '';
                if (vueloId && vueloId !== "") {
                    vuelos_a_actualizar.push({
                        vuelo_id: vueloId,
                        fecha_vuelo: fecha_vuelo,
                        comentario: comentario
                    });
                }
            }
            // Enviar AJAX para actualizar
            fetch('/actualizar-comentarios-vuelos', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    colaborador_id: colaboradorId,
                    vuelos: vuelos_a_actualizar
                })
            })
            .then(response => response.json())
            .then(data => {
                Swal.fire({
                    title: 'Éxito',
                    html: `<p>${data.message}</p>`,
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then(() => {
                    $('#modal-eventos').modal('hide');
                    actualizarTabla();
                });
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    title: 'Error',
                    text: 'Hubo un problema al actualizar los comentarios.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            });
        }

        // Event listener para celdas con eventos (excluyendo la columna de datos del colaborador)
        $(document).on('click', '.no-editable:not(.colaborador-datos):not(.colaborador-cargo):not(.total-horas)', function(e) {
            const contenido = $(this).text().trim();
            if (!contenido) {
                return; // Si está vacía, no hacer nada
            }
            e.preventDefault();
            e.stopPropagation();
            const fecha = $(this).data('fecha');
            const tipoEvento = contenido.replace(/\s*<i[^>]*>.*?<\/i>/gi, '').trim();

            const $fila = $(this).closest('tr');
            const colaboradorId = $fila.data('colaborador-id');
            const nombreColaborador = $fila.find('.colaborador-datos').text().trim();
            if (!colaboradorId) {
                console.error('No se pudo obtener el colaborador_id');
                return;
            }
            abrirModalComentario(fecha, tipoEvento, colaboradorId, nombreColaborador);
        });

        function abrirModalComentario(fecha, tipo, colaboradorId, nombreColaborador) {
            const tipoLimpio = tipo.trim().replace(/\s+/g, '');
            const esVuelo = /^[\d\/,]+$/.test(tipoLimpio);
            if (esVuelo) {
                abrirModalComentarioVuelos(fecha, tipo, colaboradorId, nombreColaborador);
            } else {
                // Para eventos: usar la lógica original
                abrirModalComentarioEvento(fecha, tipo, colaboradorId, nombreColaborador);
            }
        }

        //Funcion para modal comentarios de eventos
        function abrirModalComentarioEvento(fecha, tipoEvento, colaboradorId, nombreColaborador) {
            // Obtener comentario actual (puede ser null/vacío)
            fetch(`/obtener-comentario-evento/${colaboradorId}/${fecha}/${tipoEvento}`)
                .then(response => response.json())
                .then(data => {
                    const comentarioActual = data.comentario || '';
                    Swal.fire({
                        title: `Comentario para ${tipoEvento}`,
                        html: `
                            <div class="form-group text-left">
                                <label><strong>Colaborador:</strong> ${nombreColaborador}</label><br>
                                <label><strong>Fecha:</strong> ${fecha}</label><br>
                                <label><strong>Evento:</strong> ${tipoEvento}</label>
                                <textarea id="comentario-evento" class="form-control mt-2" placeholder="Ingrese su comentario..." rows="4">${comentarioActual}</textarea>
                            </div>
                        `,
                        showCancelButton: true,
                        showDenyButton: true,
                        confirmButtonText: 'Guardar',
                        denyButtonText: 'Eliminar Evento',
                        cancelButtonText: 'Cancelar',
                        confirmButtonColor: '#3085d6',
                        denyButtonColor: '#d33',
                        width: '500px',
                        preConfirm: () => {
                            return document.getElementById('comentario-evento').value;
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            guardarComentarioEvento(fecha, colaboradorId, tipoEvento, result.value);
                        } else if (result.isDenied) {
                            confirmarEliminarEvento(fecha, colaboradorId, tipoEvento, nombreColaborador);
                        }
                    });
                })
                .catch(error => {
                    console.error('Error al obtener comentario:', error);
                    // Si hay error, abrir modal vacío
                    Swal.fire({
                        title: `Comentario para ${tipoEvento}`,
                        html: `
                            <div class="form-group text-left">
                                <label><strong>Colaborador:</strong> ${nombreColaborador}</label><br>
                                <label><strong>Fecha:</strong> ${fecha}</label><br>
                                <label><strong>Evento:</strong> ${tipoEvento}</label>
                                <textarea id="comentario-evento" class="form-control mt-2" placeholder="Ingrese su comentario..." rows="4"></textarea>
                            </div>
                        `,
                        showCancelButton: true,
                        showDenyButton: true,
                        confirmButtonText: 'Guardar',
                        denyButtonText: 'Eliminar Evento',
                        cancelButtonText: 'Cancelar',
                        confirmButtonColor: '#3085d6',
                        denyButtonColor: '#d33',
                        width: '500px',
                        preConfirm: () => {
                            return document.getElementById('comentario-evento').value;
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            guardarComentarioEvento(fecha, colaboradorId, tipoEvento, result.value);
                        } else if (result.isDenied) {
                            confirmarEliminarEvento(fecha, colaboradorId, tipoEvento, nombreColaborador);
                        }
                    });
                });
        }

        //Funcion para modal comentario de vuelos
        function abrirModalComentarioVuelos(fecha, tipo, colaboradorId, nombreColaborador) {
            const vuelosParam = tipo.replace(/\//g, '-');
            const vuelosParamEncoded = encodeURIComponent(vuelosParam);
            fetch(`/obtener-vuelos-comentarios/${colaboradorId}/${fecha}/${vuelosParamEncoded}`)
                .then(response => response.json())
                .then(data => {
                    // Aquí construiremos el modal de vuelos
                    mostrarModalVuelosHTML(fecha, tipo, colaboradorId, nombreColaborador, data);
                })
                .catch(error => {
                    console.error('Error al obtener vuelos:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'No se pudieron cargar los datos de los vuelos'
                    });
                });
        }

        function mostrarModalVuelosHTML(fecha, tipo, colaboradorId, nombreColaborador, vuelos) {
            // Construir HTML dinámico para cada vuelo
            let vuelosHTML = '';

            vuelos.forEach((vuelo, index) => {
                const tramosTexto = vuelo.tramos.map(tramo =>
                    `${tramo.destino_partida}-${tramo.destino_llegada}`
                ).join(' | ');

                vuelosHTML += `
                    <div class="vuelo-item mb-3">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input vuelo-checkbox"
                                id="check-vuelo-${vuelo.vuelo_id}"
                                data-vuelo-id="${vuelo.vuelo_id}">
                            <label class="form-check-label">
                                <strong>Vuelo ${vuelo.numero_vuelo}:</strong> ${tramosTexto}
                            </label>
                        </div>
                        <p class="text-danger mt-2">Seleccione el vuelo a eliminar.</p>
                        <textarea id="comentario-vuelo-${vuelo.vuelo_id}" class="form-control mt-1"
                                placeholder="Comentario para vuelo ${vuelo.numero_vuelo}..."
                                rows="2">${vuelo.comentario_actual}</textarea>
                    </div>
                `;
            });

            // Mostrar modal con SweetAlert
            Swal.fire({
                title: `Comentarios para Vuelos ${tipo}`,
                html: `
                    <div class="form-group text-left">
                        <label><strong>Colaborador:</strong> ${nombreColaborador}</label><br>
                        <label><strong>Fecha:</strong> ${fecha}</label><br><br>
                        ${vuelosHTML}
                    </div>
                `,
                showCancelButton: true,
                showDenyButton: true,
                confirmButtonText: 'Guardar',
                denyButtonText: '<span id="btn-eliminar-vuelos">Eliminar Vuelo</span>',
                cancelButtonText: 'Cancelar',
                confirmButtonColor: '#3085d6',
                denyButtonColor: '#d33',
                width: '600px',
                customClass: {
                    denyButton: 'swal2-deny-disabled' // clase que crearemos
                },
                didOpen: () => {
                    const btnEliminar = document.querySelector('.swal2-deny');
                    btnEliminar.disabled = true; // Deshabilitar al abrir
                    const checkboxes = document.querySelectorAll('.vuelo-checkbox');
                    checkboxes.forEach(checkbox => {
                        checkbox.addEventListener('change', () => {
                            // Verificar si al menos uno está marcado
                            const algunoMarcado = Array.from(checkboxes).some(cb => cb.checked);
                            btnEliminar.disabled = !algunoMarcado;
                        });
                    });
                },
                preConfirm: () => {
                    // Recopilar comentarios de todos los vuelos
                    const comentarios = [];
                    vuelos.forEach(vuelo => {
                        const comentario = document.getElementById(`comentario-vuelo-${vuelo.vuelo_id}`).value;
                        comentarios.push({
                            vuelo_id: vuelo.vuelo_id,
                            fecha_vuelo: fecha,
                            comentario: comentario
                        });
                    });
                    return comentarios;
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    guardarComentariosVuelos(colaboradorId, result.value);
                } else if (result.isDenied) {
                    const checkboxesMarcados = document.querySelectorAll('.vuelo-checkbox:checked');
                    const vuelosSeleccionados = Array.from(checkboxesMarcados).map(cb => {
                        const vueloId = parseInt(cb.dataset.vueloId);
                        return vuelos.find(v => v.vuelo_id === vueloId);
                    });
                    confirmarEliminarVuelo(fecha, colaboradorId, tipo, nombreColaborador, vuelosSeleccionados);
                }
            });
        }

        // Función confirmar Eliminar Vuelo
        function confirmarEliminarVuelo(fecha, colaboradorId, tipo, nombreColaborador, vuelos) {
            const listaVuelos = vuelos.map(v => v.numero_vuelo).join(', ');
            Swal.fire({
                title: '¿Está seguro?',
                html: `
                    <p>Se eliminarán los vuelos: <strong>${tipo}</strong></p>
                    <p>Colaborador: <strong>${nombreColaborador}</strong></p>
                    <p>Fecha: <strong>${fecha}</strong></p>
                `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    eliminarVueloColaborador(fecha, colaboradorId, vuelos);
                }
            });
        }

        function eliminarVueloColaborador(fecha, colaboradorId, vuelos) {
            // Extraer solo los vuelo_id del array de vuelos
            const vuelosIds = vuelos.map(v => v.vuelo_id);
            fetch('/desactivar-vuelo', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    colaborador_id: colaboradorId,
                    fecha: fecha,
                    vuelos_ids: vuelosIds  // Array de IDs: [123, 124, 125, 126]
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Limpiar la celda en la vista
                    if (data.vuelos_restantes.length === 0) {
                        limpiarCeldaVuelo(fecha, colaboradorId);
                    } else {
                        // Si quedan vuelos, actualizar la celda
                        actualizarCeldaConVuelosRestantes(fecha, colaboradorId, vuelos, data.vuelos_restantes);
                    }
                    if ($('#modalAsignarVuelo').is(':visible')) {
                        inicializarCalendarModal();
                    }
                    actualizarTotalHorasColaborador(colaboradorId, data.total_horas);
                    Swal.fire({
                        title: 'Eliminado',
                        text: 'Los vuelos han sido eliminados correctamente',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    });
                } else {
                    throw new Error(data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    title: 'Error',
                    text: 'No se pudo eliminar los vuelos',
                    icon: 'error'
                });
            });
        }

        function actualizarCeldaConVuelosRestantes(fecha, colaboradorId, vuelosTotales, vuelosRestantesIds) {
            const vuelosRestantes = vuelosTotales.filter(v => vuelosRestantesIds.includes(v.vuelo_id));
            const numerosVuelo = vuelosRestantes.map(v => v.numero_vuelo);
            const textoVuelos = formatearVuelosCorrelativos(numerosVuelo);
            const $fila = $(`tr[data-colaborador-id="${colaboradorId}"]`);
            if ($fila.length) {
                const $celda = $fila.find(`td[data-fecha="${fecha}"]`);
                if ($celda.length) {
                    $celda.text(textoVuelos);
                    $celda.css('background-color', 'rgb(161, 174, 42)');
                    $celda.css('white-space', 'pre-line');
                }
            }
        }

        function formatearVuelosCorrelativos(numerosVuelo) {
            return numerosVuelo
                .sort((a, b) => parseInt(a) - parseInt(b)) // Ordenar primero
                .reduce((acumulador, actual, indice, arreglo) => {
                    const numeroActual = parseInt(actual);
                    const numeroAnterior = indice > 0 ? parseInt(arreglo[indice - 1]) : null;
                    if (numeroAnterior !== null && numeroActual === numeroAnterior + 1) {
                        acumulador[acumulador.length - 1] += `/${actual.slice(-1)}`;
                    } else {
                        acumulador.push(actual);
                    }
                    return acumulador;
                }, [])
                .join(',\n');
        }

        function guardarComentarioEvento(fecha, colaboradorId, tipoEvento, comentario) {
            fetch('/actualizar-comentario-evento', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    colaborador_id: colaboradorId,
                    fecha: fecha,
                    tipo_evento: tipoEvento,
                    comentario: comentario
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Actualizar la celda con el icono si hay comentario
                    actualizarCeldaConIcono(fecha, colaboradorId, tipoEvento, comentario);

                    Swal.fire({
                        title: 'Éxito',
                        text: 'Comentario guardado correctamente',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    });
                } else {
                    throw new Error(data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    title: 'Error',
                    text: 'No se pudo guardar el comentario',
                    icon: 'error'
                });
            });
        }

        // Funcion confirmar Eliminar Evento
        function confirmarEliminarEvento(fecha, colaboradorId, tipoEvento, nombreColaborador) {
            Swal.fire({
                title: '¿Está seguro?',
                html: `
                    <p>Se eliminará el evento <strong>${tipoEvento}</strong></p>
                    <p>Colaborador: <strong>${nombreColaborador}</strong></p>
                    <p>Fecha: <strong>${fecha}</strong></p>
                    <p class="text-danger mt-2">Esta acción liberará la celda para ser reutilizada.</p>
                `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    eliminarEventoColaborador(fecha, colaboradorId, tipoEvento);
                }
            });
        }

        function eliminarEventoColaborador(fecha, colaboradorId, tipoEvento) {
            fetch('/desactivar-evento', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    colaborador_id: colaboradorId,
                    fecha: fecha,
                    tipo_evento: tipoEvento
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    limpiarCeldaEvento(fecha, colaboradorId);
                    if ($('#modalAsignarVuelo').is(':visible')) {
                        inicializarCalendarModal();
                    }
                    Swal.fire({
                        title: 'Eliminado',
                        text: 'El evento ha sido eliminado correctamente',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    });
                } else {
                    throw new Error(data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    title: 'Error',
                    text: 'No se pudo eliminar el evento',
                    icon: 'error'
                });
            });
        }

        function guardarComentariosVuelos(colaboradorId, comentarios) {
            fetch('/actualizar-comentarios-vuelos', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    colaborador_id: colaboradorId,
                    vuelos: comentarios
                })
            })
            .then(response => response.json())
            .then(data => {
                Swal.fire({
                    title: 'Éxito',
                    text: data.message,
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then(() => {
                    // Actualizar la tabla si tienes esa función
                    if (typeof actualizarTabla === 'function') {
                        actualizarTabla();
                    }
                });
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    title: 'Error',
                    text: 'Hubo un problema al guardar los comentarios.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            });
        }

        function actualizarCeldaConIcono(fecha, colaboradorId, tipoEvento, comentario) {
            const $celda = $(`tr[data-colaborador-id="${colaboradorId}"] td[data-fecha="${fecha}"].no-editable`);
            if ($celda.length) {
                if (comentario && comentario.trim() !== '') {
                    // Agregar icono si hay comentario
                    const nuevoContenido = `${tipoEvento} <i class="fas fa-info-circle comentario-icon" data-tooltip="${comentario}" style="color: #17a2b8; cursor: help; margin-left: 3px;"></i>`;
                    $celda.html(nuevoContenido);
                } else {
                    // Remover icono si no hay comentario
                    $celda.html(tipoEvento);
                }
                if (typeof $().tooltip === 'function') {
                    $celda.find('[data-tooltip]').tooltip();
                }
            }
        }

        function limpiarCeldaEvento(fecha, colaboradorId) {
            const $fila = $(`tr[data-colaborador-id="${colaboradorId}"]`);
            if ($fila.length) {
                const $celda = $fila.find(`td[data-fecha="${fecha}"]`);
                if ($celda.length) {
                    $celda.text('');
                    $celda.css('background-color', '');
                    $celda.removeClass('no-editable selected');
                    $celda.addClass('editable celda-editable');
                    // Opcional: Agregar clase temporal para animación
                    $celda.addClass('celda-limpiada');
                    setTimeout(() => {
                        $celda.removeClass('celda-limpiada');
                    }, 1000);
                }
            }
        }

        function limpiarCeldaVuelo(fecha, colaboradorId) {
            const $fila = $(`tr[data-colaborador-id="${colaboradorId}"]`);
            if ($fila.length) {
                const $celda = $fila.find(`td[data-fecha="${fecha}"]`);
                if ($celda.length) {
                    $celda.text('');
                    $celda.css('background-color', '');
                    $celda.css('white-space', '');  // Limpiar el white-space que agregamos
                    $celda.removeClass('no-editable selected');
                    $celda.addClass('editable celda-editable');
                    // Opcional: Agregar clase temporal para animación
                    $celda.addClass('celda-limpiada');
                    setTimeout(() => {
                        $celda.removeClass('celda-limpiada');
                    }, 1000);
                }
            }
        }
    </script>
@endsection