@extends('layouts.app')

@section('title', 'Rol Boeing 737')

@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 */
            }
        }
    </style>
@endsection

@section('content')
    <div class="card mt-2 p-3">
        <div class="row">
            <div class="col-md-6">
                @can('rol_programacionB737.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-6 d-flex align-items-end">
                @can('rol_programacionB737.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 d-none">
                    <thead>
                        <tr>
                            <th rowspan="2" style="background-color: #092b54; color: white; text-align: center; vertical-align: middle;" class="sticky">Cargo</th>
                            <th rowspan="2" style="background-color: #092b54; color: white; text-align: center; vertical-align: middle;" class="segundo-sticky">Tripulantes de Vuelo B737</th>
                        </tr>
                        <tr>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($colaboradoresB737 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->ap_paterno }} {{ $colaborador->ap_materno }}, {{ $colaborador->nombre }}</td>
                                @foreach ($diasDelMes as $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 }}" class="celda-editable">
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="mt-2">
                @can('rol_programa_B737.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_B737.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_B737.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_jefe_roles 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-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 - actualizar la 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();
            agregarDiasAlEncabezado();
            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('#tabla-rol tbody tr');
        }

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

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

        // Codigo para mostrar los encabezados correctos de acuerdo al mes seleccionado
        function agregarDiasAlEncabezado() {
            const mesSeleccionado = document.getElementById('mes').value;
            const [anio, mes] = mesSeleccionado.split('-');
            const primerDia = new Date(anio, mes - 1, 1);
            const ultimoDia = new Date(anio, mes, 0);
            const diasEnMes = ultimoDia.getDate();

            const diasSemana = ['D', 'L', 'M', 'X', 'J', 'V', 'S'];

            const encabezado = document.querySelector('#tabla-rol thead');
            const filaIniciales = encabezado.rows[0];
            const filaDias = encabezado.rows[1];

            // Limpiar filas existentes
            while (filaIniciales.cells.length > 2) {
                filaIniciales.deleteCell(-1);
            }
            while (filaDias.cells.length > 0) {
                filaDias.deleteCell(-1);
            }

            // Agregar iniciales de los días y números
            for (let i = 0; i < diasEnMes; i++) {
                const diaActual = new Date(anio, mes - 1, i + 1);
                const diaSemana = diaActual.getDay();
                const esFinDeSemana = diaSemana === 0 || diaSemana === 6; // 0 es domingo, 6 es sábado

                // Iniciales de los días
                const thInicial = document.createElement('th');
                thInicial.textContent = diasSemana[diaSemana];
                thInicial.style.backgroundColor = '#092b54';
                thInicial.style.color = esFinDeSemana ? 'red' : 'white';
                filaIniciales.appendChild(thInicial);

                // Números de los días
                const thNumero = document.createElement('th');
                thNumero.textContent = i + 1;
                thNumero.style.backgroundColor = '#092b54';
                thNumero.style.color = esFinDeSemana ? 'red' : 'white';
                filaDias.appendChild(thNumero);
            }

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

            if (titulo_mes) {
                titulo_mes.textContent = `ROL - ${nombre_mes.toUpperCase()} ${anio}`;
            }

            // Ajustar las filas del cuerpo
            const filasCuerpo = document.querySelectorAll('#tabla-rol tbody tr');
            filasCuerpo.forEach(fila => {
                // Eliminar las celdas sobrantes si existen
                while (fila.cells.length > diasEnMes + 2) {
                    fila.deleteCell(-1);
                }
                // Agregar celdas faltantes si es necesario
                for (let i = fila.cells.length; i < diasEnMes + 2; i++) {
                    const td = document.createElement('td');
                    td.style.width = '100px';
                    td.style.textAlign = 'center';
                    td.style.border = '1px solid rgba(0, 0, 0, 0.1)';
                    td.contentEditable = 'true';
                    td.className = 'celda-editable';
                    fila.appendChild(td);
                }
            });
        }
    </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?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 = [];

            // Codigo para seleccion de celdas
            $('table').on('mousedown', '.celda-editable', function(e) {
                const $celda = $(this);
                const cellText = $(this).text().trim().toUpperCase();
                const isVacOrCum = cellText === 'VAC' || cellText === 'CUM';
                const isEditable = !$celda.hasClass('no-editable') || isVacOrCum;
                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; // No permitir la selección de celdas con eventos cargados
                }

                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 editable = !$(this).hasClass('no-editable') || vacOcum;

                        // 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) {
                            $('#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');
                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
                };

                if (eventoId) {
                    selectedCells.forEach(function(cell) {
                        $(cell).data('evento-id', eventoId); // Asigna el ID del evento a la celda
                        $(cell).text(evento_texto); // Opcional: muestra el texto del evento en la celda
                        $(cell).css('backgroundColor', color_map[eventoId] || '#FFFFFF'); // Cambia el color de fondo según el evento
                        $(cell).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();
                event.stopPropagation();
                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')
                        },
                        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'
                            });
                        },
                        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'
                            });
                        }
                    });
                }
            });
        });
    </script>

    <!-- Codigo para cargar los eventos de la BD -->
    <script>
        @auth
            var GuardarTabla       = @json(auth()->user()->can('rol_programa_B737.guardar'));
            var retornoInstruccion = @json(auth()->user()->can('rol_programa_B737.retorno-instruccion'));
            var ExportarTabla      = @json(auth()->user()->can('rol_programa_B737.exportar'));
        @else
            var GuardarTabla       = false;
            var retornoInstruccion = false;
            var ExportarTabla      = false;
        @endauth
        const color_map = {
            '1': '#FFC000',  // Color para el Evento 1
            'CLA': '#FFC000', // Color para el Evento
            '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
        };
        const color_map_vuelos_B737 = {
            '2225': '#CCCC00',
            '2226': '#CCCC00',
            '2233': '#E7FA76',
            '2234': '#E7FA76',
            '3111': '#818C40',
            '3112': '#818C40',
            '3115': '#A1AE2A',
            '3116': '#A1AE2A',
            '3121': '#FABF8F',
            '3122': '#FABF8F',
            '3131': '#CCCC00',
            '3132': '#CCCC00',
            '3143': '#00B050',
            '3144': '#00B050',
            '3147': '#A1AE2A',
            '3148': '#A1AE2A',
            '3233': '#00B050',
            '3234': '#00B050',
            '3243': '#31869B',
            '3244': '#31869B',
        };
        let cargo_id_B737 = @json($cargoIdsB737);

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

            // Limpiar tabla antes de cargar nuevos datos
            limpiarTabla(filas_contenido);

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

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

            // Ejecutar ambas promesas en paralelo y procesar los resultados cuando ambas terminen
            Promise.all([promesaEventos, promesaEstado])
                .then(([eventos, estadoEvento]) => {
                    // Procesar resultados
                    configurarInterfazSegunEstado(estadoEvento, eventos.length, tipoEquipo);
                    actualizarTablaConEventos(filas_contenido, eventos, estadoEvento.estado);

                    // Aplicar funciones auxiliares tras cargar datos
                    habilitarCeldasEditables(estadoEvento.estado);
                    habilitarCeldasVacCum(estadoEvento.estado);
                    corregirPropiedadesCeldas(estadoEvento.estado);
                })
                .catch(error => {
                    console.error('Error al cargar eventos o estado:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error al cargar datos',
                        text: 'Ocurrió un error al cargar la información. Por favor, intente nuevamente.',
                        confirmButtonText: 'Entendido'
                    });
                });
        }

        function limpiarTabla(filas_contenido) {
            filas_contenido.forEach(fila => {
                const celdasVacCum = [];
                fila.querySelectorAll('td.celda-editable').forEach(celda => {
                    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
                        });
                    }

                    celda.textContent = ''; // Limpiar contenido de texto
                    celda.style.backgroundColor = '';
                    celda.classList.remove('no-editable', 'selected');
                    celda.setAttribute('contenteditable', 'false');
                });

                // Limpiar celdas no seleccionables
                fila.querySelectorAll('td.no-select').forEach(celda => {
                    celda.textContent = '';
                });

                // Restaurar las celdas VAC y CUM
                celdasVacCum.forEach(item => {
                    item.celda.textContent = item.contenido;
                    item.celda.style.backgroundColor = item.color;
                    // Asegurar que sean editables
                    item.celda.classList.remove('no-editable');
                    item.celda.setAttribute('contenteditable', 'true');
                    item.celda.style.pointerEvents = 'auto';
                });
            });
        }

        function configurarInterfazSegunEstado(estadoEvento, cantidadEventos, tipoEquipo) {
            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)').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)').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)').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') {
                    Swal.fire({
                        icon: 'success',
                        title: 'Registros disponibles',
                        text: `Los registros del Boeing ${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+3)');

                celdas.forEach((celda, index) => {
                    const dia = index + 1;
                    const eventosDelDia = eventos.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) => {
                            if (arreglo[indice - 1] && actual.startsWith(arreglo[indice - 1].slice(0, -2))) {
                                // Si comparten el mismo prefijo, mostrar solo los últimos dos dígitos
                                acumulador[acumulador.length - 1] += `/${actual.slice(-1)}`;
                            } else {
                                // Si no comparten prefijo, agregar el número completo
                                acumulador.push(actual);
                            }
                            return acumulador;
                        }, []).join(', ');

                        celda.textContent = eventoTexto;

                        // Aplicar estilos a la celda
                        const colores = eventosDelDia.map(evento => {
                            if (evento.tipo === 'vuelo') {
                                // Buscar en color_map_vuelos_B737 para vuelos
                                return color_map_vuelos_B737[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;

                        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';
                        if (celda.textContent.trim() === '' && !celda.classList.contains('no-select')) {
                            celda.classList.remove('no-editable');
                            celda.setAttribute('contenteditable', 'true');
                        } else if (esVacOCum) {
                            // Celdas con VAC o CUM también editables
                            celda.classList.remove('no-editable');
                            celda.setAttribute('contenteditable', 'true');
                        } else {
                            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') {
                        // Habilitar celdas VAC/CUM
                        celda.style.pointerEvents = 'auto';
                        celda.style.cursor = 'pointer';
                        celda.classList.remove('no-editable');
                        celda.classList.add('celda-editable');
                    }
                });
            }
        }

        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 === '';

                // Para el resto de celdas, habilitar pointer-events
                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;
                }

                // Clasificar y ajustar propiedades según contenido
                if (estado === 'enviado_roles'){
                    if (esVacOCum || estaVacia) {
                        // Celdas VAC/CUM: deben ser 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 = 'none';
                        celda.style.cursor = 'not-allowed';
                    }
                }
            });

            // 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';

                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) {
            if (!hexColor || hexColor === '') return false;

            // 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;
        }

        function obtenerTipoEquipoDeVista() {
            const urlActual = window.location.pathname;
            // Comprobar las rutas específicas
            if (urlActual.includes('mostrar-rol-colaboradoresB')) {
                return 'B737';
            } else if (urlActual.includes('mostrar-rol-colaboradoresQ')) {
                return 'Q400';
            } else if (urlActual.includes('mostrar-rol-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() {
            // Usando el botón de cierre como ejemplo
            $(".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")  {
                celdaSeleccionada = $(this); // Almacenar la referencia a la celda seleccionada
                // Resaltar la celda seleccionada
                $('td.celda-editable').removeClass('selected'); // Quitar la clase 'selected' de otras celdas
                celdaSeleccionada.addClass('selected');
                } else {
                    console.log("Celda no editable seleccionada. Ignorando click");
                }
            });

            $(".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'
                } else {
                    // Mostrar un mensaje o realizar otra acción si no hay celda seleccionada
                    console.log("No hay celda seleccionada para limpiar");
                    return;
                }
                $("#modal-eventos").modal('hide');
            });

            $('#devolverAInstrucciones').click(function() {
                const tipoEquipo = obtenerTipoEquipoDeVista();
                Swal.fire({
                    title: '¿Devolver a Instrucción?',
                    text: `Los registros del Boeing ${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 Boeing ${tipoEquipo} han sido devueltos a Instrucción.`, 'success')
                                .then(() => {
                                    cargarEventosDelMes();
                                });
                            },
                            error: function() {
                                Swal.fire('Error', 'No se pudo devolver los registros.', 'error');
                            }
                        });
                    }
                });
            });
        });
        $(document).ready(function() {
            setTimeout(corregirPropiedadesCeldas, 500);
        });
    </script>
@endsection