@extends('layouts.app')

@section('title', 'Rol de Instrucciones Q400')

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

        .table-container {
            overflow-x: auto;
            max-width: 100%;
        }
        /*codigo para la tabla */
        .table {
            border-collapse: collapse;
            width: 100%;
        }

        .table th, .table td {
            border: 1px solid #ddd;
            text-align: center;
            padding: 8px;
        }

        /* Fijar la primera columna */
        .table th:first-child, .table td:first-child {
            position: sticky;
            left: 0;
            background-color: #fff; /* Color de fondo sólido */
            z-index: 3; /* Asegura que esté sobre otros elementos */
        }
        .table thead tr:last-child th {
            position: sticky;
            left: 40px; /* Ajusta este valor según el ancho de la primera columna */
            background-color: #fff; /* Color de fondo sólido */
            z-index: 0; /* Asegura que esté detrás de la primera columna */
        }
        .no-editable {
            user-select: none;
            pointer-events: none; /* Desactiva eventos de clic, ideal para contenido no editable */
            background-color: #f3f3f3; /* Un color de fondo para indicar no editabilidad */
        }

        td.modificado {
            outline: 2px solid #f81900;
        }
        /* 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;
        }
    </style>
@endsection

@section('content')
    <div class="card mt-2 p-3">
        <div class="row">
            <div class="col-md-6">
                @can('rol_instruccionesQ400.select')
                    <label for="mes">Seleccionar mes: <span class="text-danger">*</span></label>
                    <input type="month" id="mes" class="form-control mt-2">
                @endcan
            </div>
            <div class="col-md-6 d-flex align-items-end">
                @can('rol_instruccionesQ400.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">
            <h4 id="titulo"></h4>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="tabla-rol" class="table" style="display: none">
                    <thead>
                        <tr>
                            <th rowspan="2" style="background-color: #4F81BD; color: white;">Tripulantes de Vuelo DASH-8 Q400</th>
                        </tr>
                        <tr>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($colaboradoresQ400 as $index => $colaborador)
                            <tr data-colaborador-id="{{ $colaborador->id }}" data-estado-colaborador="{{ $colaborador->estado }}" @if($colaborador->fecha_inactivacion)
                                data-fecha-inactivacion="{{ $colaborador->fecha_inactivacion }}"
                            @endif >
                                <td>{{ $colaborador->ap_paterno }} {{ $colaborador->ap_materno }}, {{ $colaborador->nombre }}</td>
                                @foreach ($diasDelMes as $dia)
                                    <td style="width: 100px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.1);" contenteditable="true"  data-dia="{{ $dia }}" class="celda-editable">
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="mt-2">
                @can('rol_instruccionesQ400.guardar')
                    <button class="btn btn-primary sm mt-2" id="guardarTabla" style="display: none">Guardar</button>
                @endcan
            </div>
            <div class="mt-2">
                @can('rol_instruccionesQ400.enviar-roles')
                    <button class="btn btn-warning sm mt-2" id="enviarARoles" style="display: none">Enviar a Roles</button>
                @endcan
            </div>
            <div class="mt-2">
                @can('rol_instruccionesQ400.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">Detalles del Evento</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <label for="evento-id">Evento:</label>
                <select id="evento-id" name="evento_id" class="form-select">
                    <option value="">Seleccione evento: </option>
                    @foreach($eventos as $evento)
                        <option value="{{ $evento->id }}" data-nombre="{{ $evento->nombre }}">{{ $evento->nombre }} - {{ $evento->descripcion }}</option>
                    @endforeach
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-eliminar">Eliminar</button>
                <button type="button" class="btn btn-warning limpiar">Limpiar</button>
                <button type="button" class="btn btn-primary close" data-dismiss="modal">Cerrar</button>
            </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <!-- Codigo para mostrar el boton una vez seleccionado el mes -->
    <script>
        const inputMes = document.getElementById('mes');
        const btnMostrar = document.getElementById('btnMostrar');

        inputMes.addEventListener('change', function() {
            if (this.value) {
                btnMostrar.style.display = 'block';
            }
        });
    </script>
    <!-- Codigo para mostrar la table una vez seleccionado el mes -->
    <script>
        function mostrarTabla() {
            const tablaRol = document.getElementById('tabla-rol');
            const guardarTabla = document.getElementById('guardarTabla');
            const exportarExcel = document.getElementById('exportarExcel');
            if (tablaRol) tablaRol.style.display = 'table';
            if (guardarTabla) guardarTabla.style.display = 'block';
            if (exportarExcel) exportarExcel.style.display = 'block';
        }
    </script>

    <!-- Codigo para actualizar tabla y los encabezados-->
    <script>
        function actualizarTabla() {
            mostrarTabla();
            cargarEventosDelMes()
            const mesSeleccionado = document.getElementById('mes').value;
            const [anio, mes] = mesSeleccionado.split('-');
            const ultimoDia = new Date(anio, mes, 0).getDate();
            const filas_contenido = document.querySelectorAll('table tbody tr');

            resetearCeldas(filas_contenido);
            actualizarEncabezados(anio, mes, ultimoDia);
            actualizarCeldas(filas_contenido, ultimoDia);
            filtrarColaboradoresInactivos();
        }

        function actualizarEncabezados(anio, mes, ultimoDia) {
            const primeraFilaEncabezado = document.querySelector('.table thead tr:first-child');
            const segundaFilaEncabezado = document.querySelector('.table thead tr:last-child');
            primeraFilaEncabezado.querySelectorAll('th:not(:first-child)').forEach(celda => celda.remove());
            segundaFilaEncabezado.querySelectorAll('th').forEach(celda => celda.remove());

            for (let dia = 1; dia <= ultimoDia; dia++) {
                const fecha = new Date(anio, mes - 1, dia);
                const nombreDiaCorto = fecha.toLocaleDateString('es-ES', { weekday: 'short' })[0];

                const thInicialDia = document.createElement('th');
                thInicialDia.textContent = nombreDiaCorto;
                primeraFilaEncabezado.appendChild(thInicialDia);

                const thNumeroDia = document.createElement('th');
                thNumeroDia.textContent = dia;
                thNumeroDia.style.backgroundColor = "#D6EBFF";
                segundaFilaEncabezado.appendChild(thNumeroDia);
            }

            const tituloMes = document.getElementById('titulo');
            const nombreMes = new Date(anio, mes - 1, 1).toLocaleString('es-ES', { month: 'long' });

            if (tituloMes) {
                tituloMes.textContent = `ROL INSTRUCCIÓN OPERACIONES - ${nombreMes.toUpperCase()} ${anio}`;
            }
        }

        function actualizarCeldas(filas_contenido, ultimoDia) {
            filas_contenido.forEach(fila => {
                const colaboradorId = fila.dataset.colaboradorId;
                ajustarCeldas(fila, ultimoDia, colaboradorId);
            });
        }

        // Función para abrir el modal
        function abrirModal(celda) {
            $('.celda-editable').removeClass('active');
            $(celda).addClass('active');
            // Mostrar u ocultar el botón eliminar según corresponda
                if ($(celda).text().trim() !== '') {
                    $('.btn-eliminar').show();
                } else {
                    $('.btn-eliminar').hide();
                }
            $('#modal-eventos').modal('show');
        }

        function ajustarCeldas(fila, ultimoDia, colaboradorId) {
            const celdas = fila.querySelectorAll('td:not(:first-child)');
            celdas.forEach((celda, index) => {
                if (index + 1 > ultimoDia) {
                    fila.removeChild(celda);
                } else {
                    celda.classList.add('celda-editable');
                    celda.dataset.dia = index + 1;
                    celda.dataset.colaboradorId = colaboradorId;
                    celda.onclick = () => abrirModal(celda);
                }
            });

            // Agregar nuevas celdas si faltan
            for (let i = celdas.length; i < ultimoDia; i++) {
                const nuevaCelda = document.createElement('td');
                configurarCelda(nuevaCelda, i + 1, colaboradorId);
                fila.appendChild(nuevaCelda);
            }
        }

        function configurarCelda(celda, dia, colaboradorId) {
            celda.setAttribute("contenteditable", "true");
            celda.classList.add("celda-editable");
            celda.dataset.dia = dia;
            celda.dataset.colaboradorId = colaboradorId;
            celda.onclick = () => abrirModal(celda);
        }

        function resetearCeldas(filas_contenido) {
            filas_contenido.forEach(fila => {
                const celdas = fila.querySelectorAll('td:not(:first-child)');
                celdas.forEach(celda => {
                    celda.textContent = "";  // Limpiar el contenido de texto
                    celda.style.backgroundColor = "";  // Restablecer el fondo
                    celda.removeAttribute('data-dia');  // Eliminar atributo de día
                    celda.removeAttribute('data-colaborador-id');  // Eliminar atributo de colaborador
                    celda.classList.remove('celda-editable', 'active');  // Limpiar clases
                    celda.style.cursor = "";
                });
            });
        }

        function filtrarColaboradoresInactivos() {
            const mesSeleccionado = document.getElementById('mes').value;
            if (!mesSeleccionado) return;
            const [anioSeleccionado, mesNumero] = mesSeleccionado.split('-');
            const filas = document.querySelectorAll('table tbody tr');

            filas.forEach(fila => {
                const colaboradorId = fila.dataset.colaboradorId;
                const estadoColaborador = parseInt(fila.dataset.estadoColaborador || '1'); // Por defecto activo
                const fechaInactivacion = fila.dataset.fechaInactivacion || null;

                // Si el colaborador está inactivo
                if (estadoColaborador === 0 && fechaInactivacion) {
                    const fechaInactParts = fechaInactivacion.split(' ')[0].split('-');
                    const anioInactivacion = parseInt(fechaInactParts[0]);
                    const mesInactivacion = parseInt(fechaInactParts[1]);
                    const mostrar =
                        parseInt(anioSeleccionado) < anioInactivacion ||
                        (parseInt(anioSeleccionado) === anioInactivacion &&
                        parseInt(mesNumero) <= mesInactivacion);
                    // Aplicar visibilidad
                    fila.style.display = mostrar ? '' : 'none';
                }
            });
        }
    </script>

    <!-- Codigo para exportar a Excel -->
    <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-eventosQ?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 = {
                '1': '#FFC000',  // Color para el Evento 1
                'CLA': '#FFC000',
                '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
            };

            // Función para verificar si una celda es seleccionable
            function isCellSelectable(cell) {
                return !$(cell).hasClass('no-editable') &&
                    !$(cell).text().includes('CLA') &&
                    $(cell).attr('contenteditable') === 'true';
            }

            // Iniciar selección múltiple al hacer clic en una celda editable
            $('table').on('mousedown', 'td:not(:first-child)', function(e) {
                if (!isCellSelectable(this)) return;

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

                // Limpiar eventos anteriores
                $(document).off('mouseup.cellSelection').off('mouseleave.cellSelection');
                $('.celda-editable').off('mouseenter.cellSelection');

                // Extender la selección al mover el mouse sobre otras celdas
                $('td:not(:first-child)').on('mouseenter.cellSelection', function() {
                    if (isSelecting && isCellSelectable(this)) {
                        if (!selectedCells.includes(this)) {
                            selectedCells.push(this);
                            $(this).addClass('selected');
                        }
                    }
                });

                // Detener la selección cuando el usuario suelta el botón del mouse
                $(document).on('mouseup.cellSelection mouseleave.cellSelection', function() {
                    if (isSelecting && selectedCells.length > 0) {
                        isSelecting = false;
                        $('#modal-eventos').modal('show');
                    }
                    $('td:not(:first-child)').off('mouseenter.cellSelection');
                });
            });

            // 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) {
                        if (isCellSelectable(cell)) {
                            const $cell = $(cell);
                            const eventoIdAnterior = $cell.data('evento-id');
                            const celdaVacia = !$cell.text().trim();

                            // Solo marcar como cambiado si realmente cambió
                            $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
                                .addClass('modificado'); // Marcar como modificado
                            if (celdaVacia) {
                                $cell.removeData('pivot-id');
                            }
                        }
                    });
                }

                $('#modal-eventos').modal('hide'); // Ocultar el modal
                selectedCells = []; // Resetear el array de celdas seleccionadas
                document.getElementById('evento-id').value = ""; // Resetear a un valor por defecto del select
            });

            // Enviar datos a la base de datos
            $('#guardarTabla').click(function(event) {
                event.preventDefault();
                event.stopPropagation();
                let datosEventos = [];

                $('td.modificado').each(function() {
                    const celda = $(this);
                    const contenido = celda.text().trim();

                    if (contenido !== '') {
                        const dia = (celda.index()).toString().padStart(2, '0');
                        const [anio, mes] = $('#mes').val().split('-');
                        const colaboradorId = celda.closest('tr').data('colaborador-id');

                        // Verificar si estamos actualizando o creando
                        const eventoId = celda.data('evento-id');
                        const pivotId = celda.data('pivot-id');

                        // Solo agregar si tenemos un evento_id (sea actualización o creación nueva)
                        if (eventoId) {
                            let eventoData = {
                                colaborador_id: colaboradorId,
                                evento_id: parseInt(eventoId),
                                fecha: `${anio}-${mes}-${dia}`
                            };

                            if (pivotId) {
                                eventoData.id = parseInt(pivotId);
                            }

                            datosEventos.push(eventoData);
                        }
                    }
                });

                if (datosEventos.length > 0) {
                    Swal.fire({
                        title: '¿Estás seguro?',
                        text: 'Se guardarán los eventos seleccionados',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Sí, guardar',
                        cancelButtonText: 'Cancelar'
                    }).then((result) => {
                        if(result.isConfirmed){
                            $.ajax({
                                url: URLs+'/guardar-eventos-colaborador',
                                type: 'POST',
                                contentType: 'application/json',
                                data: JSON.stringify({eventos: datosEventos}),
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                success: 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'
                                    }).then(() => {
                                        $('td.modificado').removeClass('modificado');
                                        // Recargar los eventos para mostrar los cambios
                                        cargarEventosDelMes();
                                    });
                                },
                                error: 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 nuevos para guardar.',
                        confirmButtonText: 'Aceptar'
                    });
                }
            });

            //Cuando se seleccione un evento y se actualice
            $('#confirmarEvento').click(function() {
                const eventoId = $('#evento-id').val();
                const eventoNombre = $('#evento-id option:selected').data('nombre');

                if (eventoId && window.celdaActual) {
                    // Antes de actualizar, verificar si realmente cambió
                    const eventoIdAnterior = window.celdaActual.data('evento-id');

                    if (eventoId != eventoIdAnterior) {
                        // Actualizar datos y apariencia de la celda
                        window.celdaActual.text(eventoNombre);
                        window.celdaActual.data('evento-id', eventoId);

                        // Marcar como modificado para enviar solo los cambios
                        window.celdaActual.addClass('modificado');
                    }

                    // Cerrar el modal
                    $('#modal-eventos').modal('hide');
                }
            });
        });
    </script>

    <!-- Codigo para cargar los eventos de la BD -->
    <script>
        @auth
            var GuardarTabla  = @json(auth()->user()->can('rol_instruccionesQ400.guardar'));
            var EnviarRoles   = @json(auth()->user()->can('rol_instruccionesQ400.enviar-roles'));
            var ExportarTabla = @json(auth()->user()->can('rol_instruccionesQ400.exportar'));
        @else
            var GuardarTabla  = false;
            var EnviarRoles   = false;
            var ExportarTabla = false;
        @endauth

        function cargarEventosDelMes() {
            const mesSeleccionado = document.getElementById('mes').value;
            const [anio, mes] = mesSeleccionado.split('-');
            const color_map = {
                    '1': '#FFC000',  // Color para el Evento 1
                    'CLA': '#FFC000',
                    '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);
            $.ajax({
                url: URLs+'/obtener-eventos',
                type: 'GET',
                data: { mes: mes, anio: anio, cargo_ids: cargo_id_Q400, tipo: 'ambos' },
                success: function(response) {
                    const botonGuardar = document.getElementById('guardarTabla');
                    const botonExportar = document.getElementById('exportarExcel');
                    const botonEnviarRoles = document.getElementById('enviarARoles');
                    const filas_contenido = document.querySelectorAll('table tbody tr');
                    // Si la respuesta está vacía (no hay eventos para el mes seleccionado)
                    if (GuardarTabla) {
                        // Mostrar el botón "Guardar"
                        if (botonGuardar) botonGuardar.style.display = 'block';
                        if (EnviarRoles && botonEnviarRoles) botonEnviarRoles.style.display = 'block';
                        if (ExportarTabla && botonExportar) botonExportar.style.display = response.length === 0 ? 'none' : 'block';
                        filas_contenido.forEach(fila => {
                            fila.querySelectorAll('td:not(:first-child)').forEach(celda => {
                                celda.classList.remove('no-editable');
                                celda.setAttribute('contenteditable', 'true');
                            });
                        });
                    } else {
                        // Ocultar el botón "Guardar"
                        if (botonGuardar) botonGuardar.style.display = 'none';
                        if (EnviarRoles && botonEnviarRoles) botonEnviarRoles.style.display = 'none';
                        if (ExportarTabla && botonExportar) botonExportar.style.display = 'block';

                        filas_contenido.forEach(fila => {
                            fila.querySelectorAll('td:not(:first-child)').forEach(celda => {
                                celda.classList.add('no-editable');
                                celda.setAttribute('contenteditable', 'false');
                            });
                        });
                    }

                    filas_contenido.forEach(fila => {
                        const colaboradorId = fila.dataset.colaboradorId;
                        const celdas = fila.querySelectorAll('td:not(:first-child)');

                        celdas.forEach((celda, index) => {
                            const dia = index + 1;
                            const eventosDelDia = response.filter(evento => {
                                return (
                                    evento.colaborador_id === parseInt(colaboradorId) &&
                                    evento.fecha.split('-')[2] === dia.toString().padStart(2, '0')
                                );
                            });

                            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 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];
                                    }
                                });

                                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;

                                // Verificar si es un evento CLA o normal
                                if (eventosDelDia[0].tipo === 'CLA') {
                                    // Para los CLA, quizás sea mejor no permitir edición por ahora
                                    celda.classList.add('no-editable');
                                    celda.setAttribute('contenteditable', 'false');
                                    // No asignamos data-evento-id ni data-pivot-id para CLA
                                } else {
                                    // Agregar el ID del evento y el ID del pivot para poder actualizarlo
                                    celda.dataset.eventoId = eventosDelDia[0].evento_id;
                                    celda.dataset.pivotId = eventosDelDia[0].pivot_id; // Necesitamos asegurarnos que este dato viene del backend

                                    // Celdas vacías son editables para usuarios con permiso respectivo de guardar
                                    if (GuardarTabla) {
                                        celda.classList.remove('no-editable');
                                        celda.setAttribute('contenteditable', 'true');
                                    } else {
                                        celda.classList.add('no-editable');
                                        celda.setAttribute('contenteditable', 'false');
                                    }
                                }
                            } else {
                                celda.textContent = '';
                                celda.style.backgroundColor = '';

                                // Celdas vacías son editables para usuarios con el permiso respectivo de guardar
                                if (GuardarTabla) {
                                    celda.classList.remove('no-editable');
                                    celda.setAttribute('contenteditable', 'true');

                                    // Importante: asegurar que no tienen data-evento-id ni data-pivot-id
                                    celda.removeAttribute('data-evento-id');
                                    celda.removeAttribute('data-pivot-id');
                                } else {
                                    celda.classList.add('no-editable');
                                    celda.setAttribute('contenteditable', 'false');
                                }
                            }

                            function esColorOscuro(hexColor) {
                                // Convertir color hexadecimal a RGB
                                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);

                                // Calcular luminancia relativa (según WCAG)
                                const luminancia = 0.2126 * (r / 255) + 0.7152 * (g / 255) + 0.0722 * (b / 255);

                                // Si la luminancia es menor a 0.5, el color es oscuro
                                return luminancia < 0.5;
                            }
                        });
                    });
                    verificarEstadoEventos();
                },
                error: function() {
                    console.error('Error al cargar los eventos');
                }
            });
        }

        function verificarEstadoEventos() {
            const mesSeleccionado = document.getElementById('mes').value;
            const [anio, mes] = mesSeleccionado.split('-');
            const tipoEquipo = obtenerTipoEquipoDeVista();
            $.get(URLs+'/obtener-estado-eventos', {
                mes: mes,
                anio: anio,
                tipoEquipo: tipoEquipo
            })
            .done(function(response) {
                if (response.estado === 'enviado_roles') {
                    // Bloquear todas las celdas editables
                    $('td[contenteditable="true"]').each(function() {
                        $(this).attr('contenteditable', 'false');
                        $(this).addClass('no-editable');
                        $(this).css({
                            'background-color': $(this).css('background-color') ? $(this).css('background-color') : '#f0f0f0',
                            'opacity': '0.8',
                            'cursor': 'not-allowed'
                        });
                    });

                    // Ocultar botones de edición
                    $('#guardarTabla').hide();
                    $('#enviarARoles').hide();
                    $('#exportarExcel').hide();

                    // Mostrar mensaje informativo
                    if (GuardarTabla) {
                        Swal.fire({
                            icon: 'info',
                            title: 'Registros bloqueados',
                            text: `Los registros de Dash ${tipoEquipo} para este mes han sido enviados a Roles y no pueden ser editados.`,
                            timer: 3000,
                            showConfirmButton: false
                        });
                    }
                }
            });
        }

        function obtenerTipoEquipoDeVista() {
            const urlActual = window.location.pathname;

            if (urlActual.includes('mostrar-colaboradoresB')) {
                return 'B737';
            } else if (urlActual.includes('mostrar-colaboradoresQ')) {
                return 'Q400';
            } else if (urlActual.includes('mostrar-colaboradoresT')) {
                return 'Tripulantes';
            }

            console.warn('No se pudo determinar el tipo de equipo desde la URL:', urlActual);
            return 'Q400';
        }
    </script>

    <!-- Codigo para funcionamiento y cierre del modal -->
    <script>
        $(document).ready(function() {
            // Usando el botón de cierre como ejemplo
            $(".close").click(function() {
                $("#modal-eventos").modal('hide');
            });

            let celdaSeleccionada; // Variable para almacenar la referencia a la celda seleccionada
            // Evento de clic para seleccionar una celda
            $('td.celda-editable').click(function() {
                celdaSeleccionada = $(this); // Almacenar la referencia a la celda seleccionada
            });

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

            // Función para manejar la eliminación
            $(".btn-eliminar").click(function() {
                if (celdaSeleccionada && celdaSeleccionada.length > 0) {
                    // Obtener datos necesarios
                    const pivotId = celdaSeleccionada.data('pivot-id');

                    if (pivotId) {
                        $("#modal-eventos").modal('hide');
                        Swal.fire({
                            title: '¿Estás seguro?',
                            text: "¿Deseas eliminar este evento?",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Sí, eliminar',
                            cancelButtonText: 'Cancelar'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                $.ajax({
                                    url: URLs+'/colaboradorQ-evento/eliminar',
                                    type: 'POST',
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    },
                                    data: {
                                        id: pivotId
                                    },
                                    success: function(response) {
                                        // Limpiar la celda visualmente
                                        celdaSeleccionada.text("");
                                        celdaSeleccionada.css("background-color", "");

                                        // Limpiar los atributos de datos
                                        celdaSeleccionada.removeData('evento-id');
                                        celdaSeleccionada.removeData('pivot-id');

                                        celdaSeleccionada.removeClass('active selected');
                                        celdaSeleccionada.removeAttr('style');
                                        celdaSeleccionada.attr('style', 'width: 100px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.1);');

                                        // Mostrar mensaje de éxito
                                        Swal.fire(
                                            '¡Eliminado!',
                                            'El evento ha sido eliminado correctamente.',
                                            'success'
                                        );
                                        celdaSeleccionada = null;
                                    },
                                    error: function(error) {
                                        Swal.fire(
                                            'Error',
                                            'No se pudo eliminar el evento: ' + (error.responseJSON?.message || 'Error en el servidor'),
                                            'error'
                                        );
                                        console.error(error);
                                    }
                                });
                            }
                        });
                    } else {
                        $("#modal-eventos").modal('hide');
                        Swal.fire(
                            'Error',
                            'No se pudo identificar el evento a eliminar.',
                            'error'
                        );
                    }
                }
            });

            $('#enviarARoles').click(function() {
                const tipoEquipo = obtenerTipoEquipoDeVista();
                Swal.fire({
                    title: '¿Estás seguro?',
                    text: `Los registros de Dash ${tipoEquipo} se enviarán a Roles y quedarán bloqueados para edición.`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Sí, enviar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const mesSeleccionado = document.getElementById('mes').value;
                        const [anio, mes] = $('#mes').val().split('-');

                        $.ajax({
                            url: URLs+'/enviar-a-roles',
                            type: 'POST',
                            data: { mes: mes, anio: anio, tipoEquipo: tipoEquipo },
                            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                            success: function(response) {
                                Swal.fire('Enviado', `Los registros de Dash ${tipoEquipo} han sido enviados a Roles.`, 'success')
                                    .then(() => {
                                        cargarEventosDelMes();
                                    });
                            }
                        });
                    }
                });
            });
        });
    </script>

    <script>
        console.log('JavaScript cargado correctamente');
        document.addEventListener('DOMContentLoaded', function() {
            @foreach($colaboradoresQ400 as $colaborador)
                const fila{{ $colaborador->id }} = document.querySelector('tr[data-colaborador-id="{{ $colaborador->id }}"]');
                if (fila{{ $colaborador->id }}) {
                    fila{{ $colaborador->id }}.dataset.estadoColaborador = '{{ $colaborador->estado }}';
                    @if($colaborador->fecha_inactivacion)
                        fila{{ $colaborador->id }}.dataset.fechaInactivacion = '{{ $colaborador->fecha_inactivacion }}';
                    @endif
                }
            @endforeach
        });
    </script>
@endsection