@extends('layouts.app')

@section('title', 'Dashboard')

@section('css')
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        #tabla-vuelos thead th, #tabla-vuelos tbody td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: center;
        }

        #tabla-vuelos thead th:first-child, #tabla-vuelos tbody td:first-child {
            position: sticky;
            left: 0;
            background-color: #f8f8f8; /* Cambia según el diseño */
            z-index: 20; /* Asegúrate de que esté por encima de otras celdas */
        }

        #tabla-vuelos tbody td:first-child {
            z-index: 15; /* Debe tener menor prioridad que el encabezado */
        }

        #contenedor-tabla td[data-hora] {
            min-width: 82px;  /* Basado en el ancho real observado */
            width: 82px;
            box-sizing: border-box;
        }

        .vuelo-flotante {
            z-index: 10; /* Para asegurarse de que esté sobre la tabla */
            cursor: pointer;
            text-align: center;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
            border: none;
        }

        .vuelo-flotante:hover {
            transform: scale(1.05);
            z-index: 12;  /* Por encima de todo al hacer hover */
        }

        #vuelos-tbody tr{
            height: 60px !important;
        }

        .estado-programado {
            background-color: #B4C852 !important;
            color: #131212 !important;
        }
        .estado-avion-en-toma {
            background-color: #8D2B8F !important;
            color: #FFFFFF !important;
        }
        .estado-inicio-embarque {
            background-color: #9EC3FF !important;
        }
        .estado-fin-embarque {
            background-color: #1E73FF !important;
            color: #FFFFFF !important;
        }
        .estado-cierre-de-puertas {
            background-color: #BD5D00 !important;
            color: #FFFFFF !important;
        }
        .estado-pushback {
            background-color: #FFA72C !important;
        }
        .estado-taxeo {
            background-color: #AF9000 !important;
            color: #FFFFFF !important;
        }
        .estado-despego {
            background: linear-gradient(170deg, #DDE6BB 50%, #B4D26D 50% ); /* Gradiente en diagonal */
            font-weight: bold;
        }
        .estado-en-ruta {
            background: linear-gradient(180deg, #DDE6BB 50%, #B4D26D 50% );
            font-weight: bold;
        }
        .estado-aterrizo {
            background: linear-gradient(190deg, #DDE6BB 50%, #B4D26D 50% ); /* Gradiente en diagonal */
            font-weight: bold;
        }
        .estado-apertura-de-puertas {
            background-color: #87E931 !important;
        }
        .estado-fin-desembarque {
            background-color: #1BAB15 !important;
            color: #FFFFFF !important;
        }
        .estado-cancelado {
            background-color: #df192d !important;
            color: #FFFFFF !important;
        }
        .estado-no-disponible {
            background-color: #D3D3D3; /* Gris */
        }

        .my-swal-container {
            z-index: 10000 !important; /* Un valor muy alto para asegurar que esté por encima de todo */
        }

        /* Para el fondo oscuro */
        .swal2-backdrop-show {
            z-index: 9999 !important;
        }
        .transition {
            transition: transform 0.3s ease;
        }

        #chartdivVuelos {
            width: 100%;
            height: 500px;
        }

        #chartdivPasajeros {
            width: 100%;
            height: 500px;
        }
        .badge-operacion-afectada {
            position: absolute;
            top: 5px;
            left: 5px;
            background-color: #dc3545;
            color: white;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
            z-index: 15;
            animation: pulse-warning 1s infinite;
        }
        @keyframes pulse-warning {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.1);
                opacity: 0.8;
            }
        }
    </style>
@endsection

@section('content')
    <div class="container">
        @can('dashboard.principal.tablavuelos')
            <div class="card shadow">
                <div class="card-header header-corporate-red">
                    <div class="d-flex flex-column flex-xl-row justify-content-between align-items-start align-items-xl-center gap-3">
                        <div class="d-flex align-items-center gap-2">
                            <img src="{{ asset('assets/img/icons/misc/airplane.png') }}" alt="Avión" class="airplane-animated">
                            <h5 class="mb-0">Vuelos en tiempo real</h5>
                        </div>
                        <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center gap-2">
                            <label for="fecha" class="me-2 mb-0">Cambiar fecha:</label>
                            <input type="date" id="fecha" name="fecha" class="form-control w-100 w-sm-auto" value="{{ $fecha_seleccionada }}">
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col text-left">
                            <h3 class="fw-bold"></h3>
                        </div>
                        <div class="col-auto">
                            <button class="btn btn-dark mt-2">Hoy</button>
                        </div>
                    </div>
                    <div class="container mt-4">
                        <div class="table-responsive" id="contenedor-tabla" style="position: relative; overflow-x: auto;">
                            <table class="table table-bordered text-center" id="tabla-vuelos">
                                <thead>
                                    <tr>
                                        <th class="bg-light">Aeronaves</th>
                                    </tr>
                                </thead>
                                <tbody id="vuelos-tbody">
                                    @foreach ($aeronaves as $aeronave)
                                        <tr data-numero-cola="{{ $aeronave->numero_cola }}">
                                            <td class="fw-bold">{{ $aeronave->numero_cola }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card de Leyenda de Estados -->
            <div class="card shadow mt-3">
                <div class="card-header d-flex justify-content-between align-items-center" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#leyendaCollapse" aria-expanded="true">
                    <h6 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>Leyenda de Estados de Vuelo
                    </h6>
                    <i class="fas fa-chevron-right transition" id="iconoLeyenda"></i>
                </div>
                <div class="collapse" id="leyendaCollapse">
                    <div class="card-body">
                        <div class="row g-3">
                            <!-- Fila 1: Estados Pre-vuelo -->
                            <div class="col-12">
                                <small class="text-muted fw-semibold">PRE-VUELO</small>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="d-flex align-items-center">
                                    <span class="estado-programado me-2 rounded d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; display: inline-block;">
                                        <i class="fas fa-calendar-check" style="font-size: 16px;"></i>
                                    </span>
                                    <span class="small">Programado</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="d-flex align-items-center">
                                    <span class="estado-avion-en-toma me-2 rounded d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; display: inline-block;">
                                        <i class="fa-solid fa-plane-up" style="font-size: 16px;"></i>
                                    </span>
                                    <span class="small">Avión en Toma</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="d-flex align-items-center">
                                    <span class="estado-inicio-embarque me-2 rounded rounded d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; display: inline-block;">
                                        <i class="fas fa-sign-in-alt" style="font-size: 16px;"></i>
                                    </span>
                                    <span class="small">Inicio Embarque</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="d-flex align-items-center">
                                    <span class="estado-fin-embarque me-2 rounded d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; display: inline-block;">
                                        <i class="fas fa-user-check" style="font-size: 16px;"></i>
                                    </span>
                                    <span class="small">Fin Embarque</span>
                                </div>
                            </div>

                            <!-- Separador -->
                            <div class="col-12"><hr class="my-2"></div>

                            <!-- Fila 2: Estados Despegue -->
                            <div class="col-12">
                                <small class="text-muted fw-semibold">DESPEGUE</small>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="d-flex align-items-center">
                                    <span class="estado-cierre-de-puertas me-2 rounded d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; display: inline-block;">
                                        <i class="fas fa-door-closed" style="font-size: 16px;"></i>
                                    </span>
                                    <span class="small">Cierre de Puertas</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="d-flex align-items-center">
                                    <span class="estado-pushback me-2 rounded d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; display: inline-block;">
                                        <i class="fas fa-undo" style="font-size: 16px;"></i>
                                    </span>
                                    <span class="small">Pushback</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="d-flex align-items-center">
                                    <span class="estado-taxeo me-2 rounded d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; display: inline-block;">
                                        <i class="fas fa-arrow-right" style="font-size: 16px;"></i>
                                    </span>
                                    <span class="small">Taxeo</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="d-flex align-items-center">
                                    <span class="estado-despego me-2 rounded d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; display: inline-block;">
                                        <i class="fas fa-plane-departure" style="font-size: 16px;"></i>
                                    </span>
                                    <span class="small">Despegó</span>
                                </div>
                            </div>

                            <!-- Separador -->
                            <div class="col-12"><hr class="my-2"></div>

                            <!-- Fila 3: Estados En Vuelo y Aterrizaje -->
                            <div class="col-12">
                                <small class="text-muted fw-semibold">VUELO Y ATERRIZAJE</small>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="d-flex align-items-center">
                                    <span class="estado-en-ruta me-2 rounded d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; display: inline-block;">
                                        <i class="fas fa-plane" style="font-size: 16px;"></i>
                                    </span>
                                    <span class="small">En Ruta</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="d-flex align-items-center">
                                    <span class="estado-aterrizo me-2 rounded d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; display: inline-block;">
                                        <i class="fas fa-plane-arrival" style="font-size: 16px;"></i>
                                    </span>
                                    <span class="small">Aterrizó</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="d-flex align-items-center">
                                    <span class="estado-apertura-de-puertas me-2 rounded d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; display: inline-block;">
                                        <i class="fas fa-door-open" style="font-size: 16px;"></i>
                                    </span>
                                    <span class="small">Apertura Puertas</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="d-flex align-items-center">
                                    <span class="estado-fin-desembarque me-2 rounded d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; display: inline-block;">
                                        <i class="fas fa-sign-out-alt" style="font-size: 16px;"></i>
                                    </span>
                                    <span class="small">Fin Desembarque</span>
                                </div>
                            </div>

                            <!-- Separador -->
                            <div class="col-12"><hr class="my-2"></div>

                            <!-- Fila 4: Estados Especiales -->
                            <div class="col-12">
                                <small class="text-muted fw-semibold">ESTADOS ESPECIALES</small>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="d-flex align-items-center">
                                    <span class="estado-cancelado me-2 rounded d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; display: inline-block;">
                                        <i class="fas fa-times-circle" style="font-size: 16px;"></i>
                                    </span>
                                    <span class="small">Cancelado</span>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="d-flex align-items-center">
                                    <span class="estado-no-disponible me-2 rounded d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; display: inline-block;">
                                        <i class="fas fa-ban" style="font-size: 16px;"></i>
                                    </span>
                                    <span class="small">No Disponible</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endcan
    </div>
    @can('dashboard.principal.indicadores')
        <div class="container mt-2">
            <div class="card shadow">
                <div class="card-header d-flex justify-content-between align-items-center" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#indicadoresCollapse" aria-expanded="true">
                    <h6 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>Indicadores
                    </h6>
                    <i class="fas fa-chevron-right transition" id="iconoIndicador"></i>
                </div>
                <div class="collapse" id="indicadoresCollapse">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-md-6">
                                <div id="chartdivVuelos"></div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div id="chartdivPasajeros"></div>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover table-bordered text-center" id="tabla-estadisticas">
                                <thead class="table table-dark">
                                    <th>Vuelos</th>
                                    <th>Regulares</th>
                                    <th>Charters</th>
                                    <th>Total</th>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Programados</td>
                                        <td id="regulares">0</td>
                                        <td id="charters">0</td>
                                        <td id="total">0</td>
                                    </tr>
                                    <tr>
                                        <td>Ejecutados</td>
                                        <td id="ejecutados-regulares">0</td>
                                        <td id="ejecutados-charters">0</td>
                                        <td id="ejecutados-total">0</td>
                                    </tr>
                                    <tr>
                                        <td>Cancelados</td>
                                        <td id="cancelados-regulares">0</td>
                                        <td id="cancelados-charters">0</td>
                                        <td id="cancelados-total">0</td>
                                    </tr>
                                    <tr>
                                        <td>Pasajeros Pre-Tráfico</td>
                                        <td id="pre-regulares-totales">0 | 0 | 0</td>
                                        <td id="pre-charters-totales">0 | 0 | 0</td>
                                        <td id="pre-global-totales">0 | 0 | 0</td>
                                    </tr>
                                    <tr>
                                        <td>Pasajeros Embarcados</td>
                                        <td id="regulares-totales">0 | 0 | 0</td>
                                        <td id="charters-totales">0 | 0 | 0</td>
                                        <td id="global-totales">0 | 0 | 0</td>
                                    </tr>
                                    <tr>
                                        <td>Equipajes</td>
                                        <td id="equipajes-regulares"> 0 | 0 Kg</td>
                                        <td id="equipajes-charters"> 0 | 0 Kg</td>
                                        <td id="equipajes-total"> 0 | 0 Kg</td>
                                    </tr>
                                    <tr>
                                        <td>Carga</td>
                                        <td id="carga-regulares"> 0 | 0 Kg</td>
                                        <td id="carga-charters"> 0 | 0 Kg</td>
                                        <td id="carga-total"> 0 | 0 Kg</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endcan

    <!-- Modal DATOS DEL VUELO -->
    <div class="modal fade" id="modalVuelo" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-center w-100">ESTADO DEL VUELO</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm btn-estado" data-bs-toggle="tooltip" title="Ver estado del vuelo"><i class="fa-solid fa-list"></i></button>
                    <button type="button" id="btnSalaPea" class="btn btn-primary btn-sm"  data-bs-toggle="tooltip" data-bs-placement="top" title="Completar datos antes de registrar"><i class="fa-solid fa-clipboard-list"></i></button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal REGISTRO Sala/PEA -->
    <div class="modal fade" id="modalRegistroSalaPea" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Registrar SALA/PEA</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formSalaPea">
                    <!-- Tus inputs aquí -->
                    <input type="hidden" id="vuelo_id" name="vuelo_id">
                    <input type="hidden" id="ruta_vuelo_id" name="ruta_vuelo_id">
                    <input type="hidden" id="fecha_vuelo" name="fecha_vuelo">

                    <div class="mb-3">
                        <label for="sala" class="form-label">Sala</label>
                        <input type="text" class="form-control" id="sala" name="sala">
                    </div>
                    <div class="mb-3">
                        <label for="pea" class="form-label">PEA</label>
                        <input type="number" class="form-control" id="pea" name="pea">
                    </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="btnGuardarSalaPea">Guardar</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')

    <script>
        function setupCollapseIcon(collapseId, iconId) {
            const collapseElement = document.getElementById(collapseId);
            const iconElement = document.getElementById(iconId);
            // Solo configurar si ambos elementos existen
            if (collapseElement && iconElement) {
                collapseElement.addEventListener('show.bs.collapse', function () {
                    iconElement.style.transform = 'rotate(90deg)';
                });
                collapseElement.addEventListener('hide.bs.collapse', function () {
                    iconElement.style.transform = 'rotate(0deg)';
                });
            }
        }
        setupCollapseIcon('leyendaCollapse', 'iconoLeyenda');
        setupCollapseIcon('indicadoresCollapse', 'iconoIndicador');
        const contenedor = document.getElementById('contenedor-tabla');
        if (contenedor && contenedor.style.position !== 'relative') {
            contenedor.style.position = 'relative';
        }
        const tabla = document.getElementById('tabla-vuelos');
        if (tabla) {
            generarColumnasPorHora();
        }
        //Evento para cambiar fecha
        const fechaInput = document.getElementById('fecha');
        if (fechaInput) {
            fechaInput.addEventListener('change', function () {
                const fecha = this.value;
                cargarVuelos(fecha);
            });
        }
        function cargarVuelos(fecha) {
            const tooltipsAnteriores = document.querySelectorAll('[data-bs-toggle="tooltip"]');
            tooltipsAnteriores.forEach(el => {
                const tooltip = bootstrap.Tooltip.getInstance(el);
                if (tooltip) tooltip.dispose();
            });
            fetch(`${URLs}/dashboard/vuelos-diarios?fecha=${fecha}`)
                .then(response => response.json())
                .then(data => {
                    // Limpiar los vuelos flotantes previamente creados
                    document.querySelectorAll('.vuelo-flotante').forEach(el => el.remove());
                    const contenedor = document.getElementById('contenedor-tabla');
                    if (!contenedor) {
                        return;
                    }
                    const primeraColumna = document.querySelector('td:first-child').offsetWidth;
                    if (!primeraColumna) {
                        return;
                    }
                    // Obtener el ancho de una celda de hora como referencia
                    const celdaHora = document.querySelector('td[data-hora="00:00"]');
                    const anchoHora = celdaHora ? celdaHora.offsetWidth : 100;
                    // Insertar cada vuelo como un botón flotante
                    data.vuelos.forEach(vuelo => {
                        const fila = document.querySelector(`tr[data-numero-cola="${vuelo.numero_cola}"]`);
                        if (fila) {
                            // Crear el elemento del vuelo
                            const vueloElemento = document.createElement('button');
                            vueloElemento.classList.add('vuelo-flotante');
                            const tooltipContent = `
                                <div class="text-start">
                                    <strong>Tiempos del vuelo:</strong><br>
                                    <small>
                                        <i class="fas fa-undo text-warning"></i> Pushback: ${vuelo.hora_pushback || 'Pendiente'}<br>
                                        <i class="fas fa-arrow-right text-info"></i> Taxeo: ${vuelo.hora_taxeo || 'Pendiente'}<br>
                                        <i class="fas fa-plane-departure text-success"></i> Despegue: ${vuelo.hora_despegue || 'Pendiente'}<br>
                                        <i class="fas fa-plane-arrival text-danger"></i> Aterrizaje: ${vuelo.hora_aterrizaje || 'Pendiente'}
                                    </small>
                                </div>
                            `;
                            vueloElemento.setAttribute('data-bs-toggle', 'tooltip');
                            vueloElemento.setAttribute('data-bs-html', 'true');
                            vueloElemento.setAttribute('data-bs-placement', 'top');
                            vueloElemento.setAttribute('title', tooltipContent);
                            const estadoClase = obtenerClaseEstado(vuelo.estado_seguimiento);
                            vueloElemento.classList.add(estadoClase);
                            if (vuelo.estado_cumplimiento === 'Cancelado') {
                                vueloElemento.classList.add('estado-cancelado');
                            }
                            if (vuelo.es_operacion_afectada) {
                                vueloElemento.classList.add('operacion-afectada');
                            }
                            vueloElemento.innerHTML = `
                                <span class="ruta-vuelo">${vuelo.origen}-${vuelo.destino}</span>
                                <span class="numero-vuelo">SRU ${vuelo.numero_vuelo}</span>
                                ${vuelo.es_operacion_afectada ? '<span class="badge-operacion-afectada"><i class="fas fa-exclamation-triangle"></i></span>' : ''}
                            `;
                            const [horasSalida, minutosSalida] = vuelo.hora_salida.split(':').map(Number);
                            const [horasLlegada, minutosLlegada] = vuelo.hora_llegada.split(':').map(Number);
                            let duracionMinutos = (horasLlegada * 60 + minutosLlegada) - (horasSalida * 60 + minutosSalida);
                            // Si la llegada es al día siguiente (hora_llegada < hora_salida)
                            if (duracionMinutos < 0) {
                                duracionMinutos += 24 * 60; // Sumar 24 horas
                            }
                            const anchoVuelo = Math.round((duracionMinutos / 60) * anchoHora);
                            vueloElemento.style.position = 'absolute';
                            vueloElemento.style.width = `${Math.max(anchoVuelo, 100)}px`; // mínimo 100px
                            vueloElemento.style.height = '45px'; // altura fija
                            vueloElemento.style.padding = '5px 8px';
                            vueloElemento.style.borderRadius = '5px';
                            vueloElemento.style.fontSize = '10px';
                            vueloElemento.style.overflow = 'hidden'; // ocultar texto que se desborde
                            vueloElemento.style.cursor = 'pointer';
                            vueloElemento.style.zIndex = '10';

                            // Calcular la posición según la hora_salida
                            const tiempoEnHoras = horasSalida + (minutosSalida / 60);
                            const offsetX = Math.round(tiempoEnHoras * anchoHora) + primeraColumna;

                            // Posicionar el vuelo en la fila correspondiente
                            const filaRect = fila.getBoundingClientRect();
                            const contenedorRect = contenedor.getBoundingClientRect();
                            vueloElemento.style.left = `${offsetX}px`;
                            vueloElemento.style.top = `${filaRect.top - contenedorRect.top}px`;

                            // Evento para abrir el modal
                            vueloElemento.addEventListener('click', () => {
                                if (!vuelo || !vuelo.id) {
                                    console.error('No hay datos del vuelo disponibles');
                                    return;
                                }
                                // Aquí llamas al modal y pasas los datos del vuelo si es necesario
                                mostrarModal(`${URLs}/vuelos-estado/${vuelo.id}/${vuelo.ruta_vuelo_id}?fecha_vuelo=${vuelo.fecha_vuelo}`);
                            });

                            // Añadir al contenedor
                            contenedor.appendChild(vueloElemento);
                        }
                    });
                    // Inicializar todos los tooltips de Bootstrap
                    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
                    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

                    // Función para mapear estados a clases CSS
                    function obtenerClaseEstado(estado) {
                        const mapeoClases = {
                            'Programado'         : 'estado-programado',
                            'Avión en toma'      : 'estado-avion-en-toma',
                            'Inicio Embarque'    : 'estado-inicio-embarque',
                            'Fin Embarque'       : 'estado-fin-embarque',
                            'Cierre de puertas'  : 'estado-cierre-de-puertas',
                            'Pushback'           : 'estado-pushback',
                            'Taxeo'              : 'estado-taxeo',
                            'Despego'            : 'estado-despego',
                            'En ruta'            : 'estado-en-ruta',
                            'Aterrizo'           : 'estado-aterrizo',
                            'Apertura de puertas': 'estado-apertura-de-puertas',
                            'Fin desembarque'    : 'estado-fin-desembarque'
                        };
                        return mapeoClases[estado] || 'estado-no-disponible';
                    }

                    // Actualizar la tabla con las estadísticas -- Conteo total de vuelos del dia
                    const { regular, charter, total } = data.estadisticas;
                        document.getElementById('regulares').textContent = data.estadisticas.regular;
                        document.getElementById('charters').textContent  = data.estadisticas.charter;
                        document.getElementById('total').textContent     = data.estadisticas.total;

                    // Conteo total de los vuelos ejecutados
                    const { ejecutados } = data.estadisticas;
                        document.getElementById('ejecutados-regulares').textContent = ejecutados.regulares;
                        document.getElementById('ejecutados-charters').textContent  = ejecutados.charters;
                        document.getElementById('ejecutados-total').textContent     = ejecutados.total;

                    // Conteo total de los vuelos cancelados
                    const { cancelados } = data.estadisticas;
                        document.getElementById('cancelados-regulares').textContent = cancelados.regulares;
                        document.getElementById('cancelados-charters').textContent  = cancelados.charters;
                        document.getElementById('cancelados-total').textContent     = cancelados.total;

                    // Conteo total de pasajeros embarcados
                    const estadisticas = data.estadisticas;
                    const pasajeros           = estadisticas.pasajeros_embarcados;
                    const pasajeros_regulares = pasajeros.regular;
                    const pasajeros_charters  = pasajeros.charter;
                    const pasajeros_global    = pasajeros.global;
                        document.getElementById('regulares-totales').innerHTML = `
                        <i class="fa-solid fa-person text-primary"></i> ${pasajeros_regulares.adultos} |
                        <i class="fa-solid fa-child text-info"></i> ${pasajeros_regulares.ninos} |
                        <i class="fa-solid fa-baby text-warning"></i> ${pasajeros_regulares.infantes}`;
                        document.getElementById('charters-totales').innerHTML = `
                        <i class="fa-solid fa-person text-primary"></i> ${pasajeros_charters.adultos} |
                        <i class="fa-solid fa-child text-info"></i> ${pasajeros_charters.ninos} |
                        <i class="fa-solid fa-baby text-warning"></i> ${pasajeros_charters.infantes}`;
                        document.getElementById('global-totales').innerHTML = `
                        <i class="fa-solid fa-person text-primary"></i> ${pasajeros_global.adultos} |
                        <i class="fa-solid fa-child text-info"></i> ${pasajeros_global.ninos} |
                        <i class="fa-solid fa-baby text-warning"></i> ${pasajeros_global.infantes}`;

                    // Conteo total de pasajeros prembarcados
                    const pasajeros_prembarcados = estadisticas.pasajeros_pre_embarcados;
                    const prembarcados_regulares = pasajeros_prembarcados.regular;
                    const prembarcados_charters  = pasajeros_prembarcados.charter;
                    const prembarcados_global    = pasajeros_prembarcados.global;
                        document.getElementById('pre-regulares-totales').innerHTML = `
                        <i class="fa-solid fa-person text-primary"></i> ${prembarcados_regulares.adultos} |
                        <i class="fa-solid fa-child text-info"></i> ${prembarcados_regulares.ninos} |
                        <i class="fa-solid fa-baby text-warning"></i> ${prembarcados_regulares.infantes}`;
                        document.getElementById('pre-charters-totales').innerHTML = `
                        <i class="fa-solid fa-person text-primary"></i> ${prembarcados_charters.adultos} |
                        <i class="fa-solid fa-child text-info"></i> ${prembarcados_charters.ninos} |
                        <i class="fa-solid fa-baby text-warning"></i> ${prembarcados_charters.infantes}`;
                        document.getElementById('pre-global-totales').innerHTML = `
                        <i class="fa-solid fa-person text-primary"></i> ${prembarcados_global.adultos} |
                        <i class="fa-solid fa-child text-info"></i> ${prembarcados_global.ninos} |
                        <i class="fa-solid fa-baby text-warning"></i> ${prembarcados_global.infantes}`;
                    // Procesar equipajes y carga
                    const equipajes_carga     = estadisticas.equipajes_carga;
                    const equipajes_regulares = equipajes_carga.regular;
                    const equipajes_charters  = equipajes_carga.charter;
                    const equipajes_global    = equipajes_carga.global;
                    // Actualizar equipajes
                    document.getElementById('equipajes-regulares').innerHTML = `
                        <i class="fa fa-suitcase text-success"></i> ${equipajes_regulares.cant_equipaje} |
                        <i class="fa fa-weight-hanging text-secondary"></i> ${equipajes_regulares.kilos_equipaje} Kg
                    `;
                    document.getElementById('equipajes-charters').innerHTML = `
                        <i class="fa fa-suitcase text-success"></i> ${equipajes_charters.cant_equipaje} |
                        <i class="fa fa-weight-hanging text-secondary"></i> ${equipajes_charters.kilos_equipaje} Kg
                    `;
                    document.getElementById('equipajes-total').innerHTML = `
                        <i class="fa fa-suitcase text-success"></i> ${equipajes_global.cant_equipaje} |
                        <i class="fa fa-weight-hanging text-secondary"></i> ${equipajes_global.kilos_equipaje} Kg
                    `;
                    // Actualizar carga
                    document.getElementById('carga-regulares').innerHTML = `
                        <i class="fa fa-boxes text-danger"></i> ${equipajes_regulares.cant_carga} |
                        <i class="fa fa-weight-hanging text-secondary"></i> ${equipajes_regulares.kilos_carga} Kg
                    `;
                    document.getElementById('carga-charters').innerHTML = `
                        <i class="fa fa-boxes text-danger"></i> ${equipajes_charters.cant_carga} |
                        <i class="fa fa-weight-hanging text-secondary"></i> ${equipajes_charters.kilos_carga} Kg
                    `;
                    document.getElementById('carga-total').innerHTML = `
                        <i class="fa fa-boxes text-danger"></i> ${equipajes_global.cant_carga} |
                        <i class="fa fa-weight-hanging text-secondary"></i> ${equipajes_global.kilos_carga} Kg
                    `;
                // Definir colores por estado
                var colorSet = {
                    "En Proceso": "#B4C852",   // Verde
                    "Ejecutado" : "#1BAB15",   // Verde oscuro
                    "Afectado"  : "#ffc107",   // Amarillo/naranja=Falta definir
                    "Cancelado" : "#df192d"    // Rojo
                };

                // Aplicar colores a la serie externa (regulares)
                window.series1.slices.template.adapters.add("fill", function(fill, target) {
                    var dataItem = target.dataItem;
                    if (dataItem) {
                        var estado = dataItem.get("category");
                        return am5.color(colorSet[estado]);
                    }
                    return fill;
                });

                // Aplicar colores a la serie interna (charters)
                window.series0.slices.template.adapters.add("fill", function(fill, target) {
                    var dataItem = target.dataItem;
                    if (dataItem) {
                        var estado = dataItem.get("category");
                        return am5.color(colorSet[estado]);
                    }
                    return fill;
                });
                window.series0.data.setAll(data.chart_data);
                window.series1.data.setAll(data.chart_data);
                window.xAxisPasajeros.data.setAll(data.chart_data_pasajeros);
                window.chartPasajeros.series.each(function(series) {
                    series.data.setAll(data.chart_data_pasajeros);
                });
                })
                .catch(error => {
                    console.error('Error al cargar los vuelos:', error);
                });
        }

        function generarColumnasPorHora() {
            const tabla = document.getElementById('tabla-vuelos');
            if (!tabla) {
                return;
            }
            const thead = tabla.querySelector('thead tr');
            const tbody = tabla.querySelector('tbody');

            // Generar encabezados dinámicos para las horas (de 00:00 a 23:00)
            for (let hora = 0; hora < 24; hora++) {
                const th = document.createElement('th');
                th.textContent = `${hora.toString().padStart(2, '0')}:00`;
                thead.appendChild(th);

                // Agregar celdas vacías a cada fila
                tbody.querySelectorAll('tr').forEach(row => {
                    const td = document.createElement('td');
                    td.dataset.hora = `${hora.toString().padStart(2, '0')}:00`; // Hora como atributo
                    td.style.width = '100px';
                    row.appendChild(td);
                });
            }
        }

        function actualizarLineaHora() {
            const ahora            = new Date();
            const horaActual       = ahora.getHours();
            const minutosActuales  = ahora.getMinutes();
            const segundosActuales = ahora.getSeconds();

            const contenedor = document.getElementById('contenedor-tabla');
            if (!contenedor) {
                return;
            }

            const celdas = document.querySelectorAll('td[data-hora="00:00"]');
            if (!celdas.length) {
                return;
            }
            const anchoHora = celdas[0].offsetWidth;
            const primeraColumna = document.querySelector('td:first-child').offsetWidth;
            const horasDecimal = horaActual + (minutosActuales / 60) + (segundosActuales / 3600);
            const offsetX = Math.round(horasDecimal * anchoHora) + primeraColumna;

            let linea = document.getElementById('linea-hora-actual');
            if (!linea) {
                linea = document.createElement('div');
                linea.id = 'linea-hora-actual';
                linea.style.position = 'absolute';
                linea.style.width = '2px';
                linea.style.backgroundColor = 'red';
                linea.style.height = '100%';
                linea.style.top = '0';
                linea.style.zIndex = '5';
                contenedor.appendChild(linea);
            }
            // Actualizar posición de la línea roja
            linea.style.left = `${offsetX}px`;
        }

        // Actualiza la línea roja cada minuto
        document.addEventListener('DOMContentLoaded', () => {
            actualizarLineaHora();
            setInterval(actualizarLineaHora, 1000);
        });
        window.addEventListener('resize', actualizarLineaHora);

        function mostrarModal(url) {
            // Limpia el contenido anterior del modal
            document.querySelector('#modal-body').innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Cargando...</span></div></div>';
            $('#modalVuelo').modal('show');

            // Realizar la solicitud AJAX
            fetch(url, {
                headers: {
                        'X-Requested-With': 'XMLHttpRequest' // Indica que es una solicitud AJAX
                        }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Error al cargar los datos del vuelo.');
                    }
                    return response.json();
                })
                .then(data => {
                    // Llena el modal con los datos del vuelo
                    document.querySelector('#modal-body').innerHTML = `
                        <div class="container-fluid">
                            <!-- Información ESTADO VUELO -->
                            <div class="row mb-2">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <table class="table table-striped table-bordered text-center" id="tabla-estado">
                                                <tbody>
                                                    <tr>
                                                        <td>${data.estado|| 'N/A'}</td>
                                                        <td>${data.estado_cumplimiento || 'N/A'}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Información ITINERARIO -->
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <h6 class="card-subtitle mb-2 text-center">ITINERARIO</h6>
                                            <table class="table table-striped table-bordered text-center" id="tabla-itinerario">
                                                <thead class="table-dark">
                                                    <tr>
                                                        <th>Fecha</th>
                                                        <th>Avión</th>
                                                        <th>Vuelo</th>
                                                        <th>Ruta</th>
                                                        <th>Salida</th>
                                                        <th>Llegada</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>${data.fecha_vuelo || 'N/A'}</td>
                                                        <td>${data.aeronave || 'N/A'}</td>
                                                        <td>SRU${data.numero_vuelo}</td>
                                                        <td>${data.origen} - ${data.destino}</td>
                                                        <td>${data.hora_salida}</td>
                                                        <td>${data.hora_llegada}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Información TIEMPO REAL -->
                            <div class="row mb-2">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <h6 class="card-subtitle mb-2 text-center">REAL</h6>
                                            <table class="table table-striped table-bordered text-center">
                                                <tbody>
                                                    <tr>
                                                        <th colspan="2">Avión en Toma</th>
                                                        <th colspan="2">Inicio embarque</th>
                                                        <th colspan="2">Fin embarque</th>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="2" id="avion-en-toma"></td>
                                                        <td colspan="2" id="inicio-embarque"></td>
                                                        <td colspan="2" id="fin-embarque"></td>
                                                    </tr>
                                                    <tr>
                                                        <th colspan="2">Cierre de Puerta</th>
                                                        <th colspan="2">Pushback</th>
                                                        <th colspan="2">Taxeo</th>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="2" id="cierre-puerta"></td>
                                                        <td colspan="2" id="pushback"></td>
                                                        <td colspan="2" id="taxeo"></td>
                                                    </tr>
                                                    <tr>
                                                        <th colspan="2">Despegue</th>
                                                        <th colspan="2">Duración del vuelo</th>
                                                        <th colspan="2">Estimado Llegada</th>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="2" id="despego"></td>
                                                        <td colspan="2">${data.duracion_vuelo || '--:--'}</td>
                                                        <td colspan="2">${data.hora_estimada_llegada || '--:--'}</td>
                                                    </tr>
                                                    <tr>
                                                        <th colspan="2">Aterrizaje</th>
                                                        <th colspan="2">Abrió puertas</th>
                                                        <th colspan="2">Fin desembarque</th>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="2" id="aterrizo"></td>
                                                        <td colspan="2" id="apertura-puerta"></td>
                                                        <td colspan="2" id="fin-desembarque"></td>
                                                    </tr>
                                                    <tr>
                                                        <th>Pre - Tráfico</th>
                                                        <th>Embarcados</th>
                                                        <th>Sala</th>
                                                        <th>PEA</th>
                                                        <th>Equipaje (Cant. | Kg)</th>
                                                        <th>Carga (Bultos | Kg)</th>
                                                    </tr>
                                                    <tr>
                                                        <td>${data.datos_adicionales.pasajeros_preembarque.adultos} | ${data.datos_adicionales.pasajeros_preembarque.ninos} | ${data.datos_adicionales.pasajeros_preembarque.infantes}</td>
                                                        <td>${data.datos_adicionales.pasajeros_embarcados.adultos} | ${data.datos_adicionales.pasajeros_embarcados.ninos} | ${data.datos_adicionales.pasajeros_embarcados.infantes}</td>
                                                        <td>${data.datos_adicionales.sala_pea.sala}</td>
                                                        <td>${data.datos_adicionales.sala_pea.pea}</td>
                                                        <td>${data.datos_adicionales.equipaje.cantidad} | ${data.datos_adicionales.equipaje.kilos}</td>
                                                        <td>${data.datos_adicionales.carga.cantidad} | ${data.datos_adicionales.carga.kilos}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Información TRIPULACION -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-header d-flex justify-content-between align-items-center">
                                            <h5 class="mb-0">TRIPULACION</h5>
                                            <button class="btn btn-link text-decoration-none p-0 expand-icon" data-bs-toggle="collapse" data-bs-target="#collapseColaboradores" aria-expanded="true" aria-controls="collapseColaboradores">
                                                <i class="fa-solid fa-chevron-down"></i>
                                            </button>
                                        </div>
                                        <div id="collapseColaboradores" class="collapse show">
                                            <div class="card-body">
                                                <table class="table table-striped table-bordered" id="tabla-tripulacion">
                                                    <tbody id="tabla-tripulacion-body">
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                    // Configura el botón de Estado en el footer del modal
                    const footerButtons = document.querySelector('#modalVuelo .modal-footer');
                    // Crea la URL para el botón de estado
                    let estadoUrl = `${URLs}/vuelos-estado/${data.vuelo_id}`;
                    if (data.ruta_vuelo_id) {
                        estadoUrl += `/${data.ruta_vuelo_id}`;
                    }
                    if (data.fecha_vuelo_original) {
                        estadoUrl += `?fecha_vuelo=${data.fecha_vuelo_original}`;
                    }

                    let btnEstado = footerButtons.querySelector('.btn-estado');
                    // Asigna el evento click al botón
                    btnEstado.onclick = function() {
                        window.location.href = estadoUrl;
                    };
                    if (Array.isArray(data.colaboradores)) {
                        const tbody = document.getElementById('tabla-tripulacion-body');
                        tbody.innerHTML = ''; // Limpia el contenido anterior
                        data.colaboradores.forEach(colaborador => {
                            const tr = document.createElement('tr');
                            tr.innerHTML = `
                                <td>${colaborador.nombre || 'N/A'}</td>
                                <td class="text-center">${colaborador.cargo || 'N/A'}</td>
                            `;
                            tbody.appendChild(tr);
                        });
                    } else {
                        console.error('No se encontraron colaboradores en los datos.');
                    }
                    if (data.estados_seguimiento) {
                        renderEstadosSeguimiento(data.estados_seguimiento);
                    }

                    //Configurar el botón SALA/PEA
                    const btnSalaPea = document.getElementById('btnSalaPea');
                    const btnWrapper = btnSalaPea.parentNode;
                    // Función para actualizar el tooltip dinámicamente
                    function actualizarTooltip(elemento, mensaje) {
                        var tooltipInstance = bootstrap.Tooltip.getInstance(elemento);
                        if (tooltipInstance) {
                            tooltipInstance.dispose(); // Destruir tooltip previo
                        }
                        elemento.setAttribute("title", mensaje);
                        elemento.setAttribute("data-bs-original-title", mensaje); // Necesario para Bootstrap 5
                        new bootstrap.Tooltip(elemento); // Crear nuevo tooltip
                    }

                    if (data.existe === true) {
                        btnSalaPea.disabled = true;
                        // Remover tooltips previos
                        const tooltipSpan = btnWrapper.querySelector('.tooltip-wrapper');
                        if (tooltipSpan) {
                            tooltipSpan.remove();
                        }
                        // Crear un contenedor `span` para el tooltip
                        const tooltipContainer = document.createElement('span');
                        tooltipContainer.classList.add('tooltip-wrapper');
                        tooltipContainer.setAttribute("data-bs-toggle", "tooltip");
                        tooltipContainer.setAttribute("title", "PEA ya registrado");
                        // Insertar el botón dentro del contenedor `span`
                        btnSalaPea.parentNode.replaceChild(tooltipContainer, btnSalaPea);
                        tooltipContainer.appendChild(btnSalaPea);
                        // Inicializar el tooltip
                        new bootstrap.Tooltip(tooltipContainer);
                    } else {
                        btnSalaPea.disabled = false;
                        // Eliminar wrapper del tooltip si existía
                        const tooltipSpan = btnWrapper.querySelector('.tooltip-wrapper');
                        if (tooltipSpan) {
                            btnWrapper.replaceChild(btnSalaPea, tooltipSpan);
                        }
                        const fechaVuelo = data.fecha_vuelo_original || new Date().toISOString().split('T')[0];
                        btnSalaPea.onclick = function(e) {
                            // Prevenir el comportamiento predeterminado (importante)
                            e.preventDefault();

                            // Obtener los datos necesarios para el formulario
                            const vuelo_id = data.vuelo_id;
                            const ruta_vuelo_id = data.ruta_vuelo_id;
                            const fechaVuelo = data.fecha_vuelo_original || new Date().toISOString().split('T')[0];

                            // Cargar los datos en el modal
                            document.getElementById('vuelo_id').value = vuelo_id;
                            document.getElementById('ruta_vuelo_id').value = ruta_vuelo_id;
                            document.getElementById('fecha_vuelo').value = fechaVuelo;

                            // Mostrar el modal
                            $('#modalRegistroSalaPea').modal('show');

                            return false;
                        };
                    }
                })
                .catch(error => {
                    document.querySelector('#modal-body').innerHTML = `<p>Error: ${error.message}</p>`;
                });

            function renderEstadosSeguimiento(estados_seguimiento) {
                // Actualizar las celdas del modal con los datos recibidos
                document.getElementById('avion-en-toma').textContent = estados_seguimiento.avion_toma || 'N/A';
                document.getElementById('inicio-embarque').textContent = estados_seguimiento.inicio_embarque || 'N/A';
                document.getElementById('fin-embarque').textContent = estados_seguimiento.fin_embarque || 'N/A';
                document.getElementById('cierre-puerta').textContent = estados_seguimiento.cierre_puertas || 'N/A';
                document.getElementById('pushback').textContent = estados_seguimiento.push || 'N/A';
                document.getElementById('taxeo').textContent = estados_seguimiento.taxeo || 'N/A';
                document.getElementById('despego').textContent = estados_seguimiento.despego || 'N/A';


                document.getElementById('aterrizo').textContent = estados_seguimiento.aterrizo || 'N/A';
                document.getElementById('apertura-puerta').textContent = estados_seguimiento.apertura_puerta || 'N/A';
                document.getElementById('fin-desembarque').textContent = estados_seguimiento.fin_desembarque || 'N/A';
            }
        }

        // Evento para arrastrar y soltar el modal de vuelo
        $(function() {
            $('#modalVuelo .modal-header').css('cursor', 'pointer');
            $('#modalVuelo .modal-content').draggable({
                handle: ".modal-header" // Solo mueve el modal arrastrando desde el encabezado
            });
        });

        // Evento para expandir y colapsar el card de la tripulación
        document.addEventListener('click', function(e) {
            if (e.target.matches('.expand-icon, .expand-icon *')) {
                const icon = e.target.closest('.expand-icon').querySelector('i');
                icon.classList.toggle('fa-chevron-down');
                icon.classList.toggle('fa-chevron-up');
            }
        });

        // Evento para guardar los datos de la sala/PEA
        document.getElementById('btnGuardarSalaPea').addEventListener('click', function() {
            const vuelo_id = document.getElementById('vuelo_id').value;
            const ruta_vuelo_id = document.getElementById('ruta_vuelo_id').value;
            const sala = document.getElementById('sala').value;
            const pea = document.getElementById('pea').value;
            const fecha_vuelo = document.getElementById('fecha_vuelo').value;

            $.ajax({
                url: `${URLs}/sala-pea/${vuelo_id}/${ruta_vuelo_id}`,
                type: 'POST',
                data: {
                    sala: sala,
                    pea: pea,
                    fecha_vuelo: fecha_vuelo,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                dataType: 'json',
                success: function(data) {
                    // Cerrar el modal primero
                    $('.modal').modal('hide');

                    // Pequeño retraso para asegurar que el modal se cierre antes de mostrar el SweetAlert
                    setTimeout(function() {
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: '¡Éxito!',
                                text: data.message || 'Registro guardado con éxito',
                                confirmButtonColor: '#3085d6',
                                backdrop: true,
                                customClass: {
                                    container: 'my-swal-container'
                                }
                            });
                            // Actualizar UI
                            let btnSalaPea = document.getElementById('btnSalaPea');
                            // Eliminar anteriores `tooltip-wrapper` si existen
                            let existingTooltip = bootstrap.Tooltip.getInstance(btnSalaPea);
                            if (existingTooltip) {
                                existingTooltip.dispose();
                            }
                            // Deshabilitar botón
                            btnSalaPea.disabled = true;
                            btnSalaPea.setAttribute("data-bs-original-title", "PEA ya registrado");
                            btnSalaPea.setAttribute("title", "PEA ya registrado");
                            new bootstrap.Tooltip(btnSalaPea);
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: data.message || 'Error al guardar el registro',
                                confirmButtonColor: '#d33',
                                backdrop: true,
                                customClass: {
                                    container: 'my-swal-container'
                                }
                            });
                        }
                    }, 300); // 300ms de retraso
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);

                    // Cerrar el modal primero
                    $('#modalRegistroSalaPea').modal('hide');

                    setTimeout(function() {
                        // Intentar obtener el mensaje de error del servidor
                        let errorMessage = 'Error en la comunicación con el servidor';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: errorMessage,
                            confirmButtonColor: '#d33',
                            backdrop: true,
                            customClass: {
                                container: 'my-swal-container'
                            }
                        });
                    }, 300);
                }
            });
        });

        // Evento para mostrar tooltips en los botones
        document.addEventListener("DOMContentLoaded", function () {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });

        // Funcion para cargar vuelos automaticamente al iniciar la pagina
        document.addEventListener('DOMContentLoaded', function() {
            const hoy = new Date();
            const fechaHoy = hoy.getFullYear() + '-' +
                            String(hoy.getMonth() + 1).padStart(2, '0') + '-' +
                            String(hoy.getDate()).padStart(2, '0');
            const inputFecha = document.getElementById('fecha');
            if (inputFecha) {
                inputFecha.value = fechaHoy;
            }
            // Cargar vuelos de hoy automáticamente
            cargarVuelos(fechaHoy);
        });

        // Funcionalidad para el botón "Hoy"
        const botonHoy = document.querySelector('.btn-dark');
        if (botonHoy) {
            botonHoy.addEventListener('click', function() {
                const hoy = new Date();
                const fechaHoy = hoy.getFullYear() + '-' +
                                String(hoy.getMonth() + 1).padStart(2, '0') + '-' +
                                String(hoy.getDate()).padStart(2, '0');
                const inputFecha = document.getElementById('fecha');
                if (inputFecha) {
                    inputFecha.value = fechaHoy;
                }
                cargarVuelos(fechaHoy);
            });
        }
    </script>
    <script src="{{ asset('assets/js/index.js') }}"></script>
    <script src="{{ asset('assets/js/percent.js') }}"></script>
    <script src="{{ asset('assets/js/xy.js') }}"></script>
    <script src="{{ asset('assets/js/Animated.js') }}"></script>
    <!-- Chart code -->
    <script>
        // Grafico de Doble Donas
        am5.ready(function() {
            // Create root element
            const chartContainer = document.getElementById('chartdivVuelos');
            if (chartContainer){
                var root = am5.Root.new("chartdivVuelos");
                root._logo.dispose();
                // Set themes
                root.setThemes([
                am5themes_Animated.new(root)
                ]);
                // Create chart
                var chart = root.container.children.push(am5percent.PieChart.new(root, {
                    layout: root.verticalLayout,
                    innerRadius: am5.percent(40)
                }));
                var title = chart.children.unshift(am5.Label.new(root, {
                    text: "Estados de Vuelos",
                    fontSize: 18,
                    fontWeight: "500",
                    textAlign: "center",
                    x: am5.percent(50),
                    centerX: am5.percent(50),
                    paddingTop: 0,
                    paddingBottom: 10
                }));
                // Create series
                window.series0 = chart.series.push(am5percent.PieSeries.new(root, {
                    valueField: "charters",
                    categoryField: "estado",
                    alignLabels: false
                }));
                var bgColor = root.interfaceColors.get("background");
                series0.ticks.template.setAll({ forceHidden: true });
                series0.labels.template.setAll({ forceHidden: true });
                series0.slices.template.setAll({
                    stroke: bgColor,
                    strokeWidth: 2,
                    tooltipText:
                        "{category}: {valuePercentTotal.formatNumber('0.00')}% ({value} charters)"
                });
                series0.slices.template.states.create("hover", { scale: 0.95 });
                window.series1 = chart.series.push(am5percent.PieSeries.new(root, {
                    valueField: "regulares",
                    categoryField: "estado",
                    alignLabels: true
                }));
                series1.labels.template.setAll({ forceHidden: true });
                series1.ticks.template.setAll({ forceHidden: true });
                series1.slices.template.setAll({
                    stroke: bgColor,
                    strokeWidth: 2,
                    tooltipText:
                        "{category}: {valuePercentTotal.formatNumber('0.00')}% ({value} regulares)"
                });
                // Play initial series animation
                series0.appear(1000, 100);
                series1.appear(1000, 100);
            }
        });

        // Grafico de Barras
        am5.ready(function() {
            const chartContainer = document.getElementById('chartdivPasajeros');
            if (chartContainer){
                var root2 = am5.Root.new("chartdivPasajeros"); // ← Diferente ID
                root2.setThemes([
                    am5themes_Animated.new(root2)
                ]);
                root2._logo.dispose();
                // Create chart
                window.chartPasajeros = root2.container.children.push(am5xy.XYChart.new(root2, {
                    panX: false,
                    panY: false,
                    paddingLeft: 0,
                    wheelX: "panX",
                    wheelY: "zoomX",
                    layout: root2.verticalLayout
                }));
                var titlePasajeros = window.chartPasajeros.children.unshift(am5.Label.new(root2, {
                    text: "Pasajeros por Categoría",
                    fontSize: 18,
                    fontWeight: "500",
                    textAlign: "center",
                    x: am5.percent(50),
                    centerX: am5.percent(50),
                    paddingTop: 0,
                    paddingBottom: 10
                }));
                // Add legend
                var legend = window.chartPasajeros.children.push(
                    am5.Legend.new(root2, {
                        centerX: am5.p50,
                        x: am5.p50
                    })
                );
                // Create axes
                var xRenderer = am5xy.AxisRendererX.new(root2, {
                    cellStartLocation: 0.1,
                    cellEndLocation: 0.9,
                    minorGridEnabled: true
                })
                window.xAxisPasajeros = window.chartPasajeros.xAxes.push(am5xy.CategoryAxis.new(root2, {
                    categoryField: "tipo",
                    renderer: xRenderer,
                    tooltip: am5.Tooltip.new(root2, {})
                }));
                xRenderer.grid.template.setAll({
                    location: 1
                })
                window.yAxisPasajeros = window.chartPasajeros.yAxes.push(am5xy.ValueAxis.new(root2, {
                    renderer: am5xy.AxisRendererY.new(root2, {
                        strokeOpacity: 0.1
                    })
                }));
                // Add series
                function makeSeries(name, fieldName) {
                    var series = window.chartPasajeros.series.push(am5xy.ColumnSeries.new(root2, {
                        name: name,
                        xAxis: xAxisPasajeros,
                        yAxis: yAxisPasajeros,
                        valueYField: fieldName,
                        categoryXField: "tipo"
                    }));
                    series.columns.template.setAll({
                        tooltipText: "{name}, {categoryX}:{valueY}",
                        width: am5.percent(90),
                        tooltipY: 0,
                        strokeOpacity: 0
                    });
                    // Make stuff animate on load
                    series.appear();
                    series.bullets.push(function () {
                        return am5.Bullet.new(root2, {
                            locationY: 0,
                            sprite: am5.Label.new(root2, {
                                text: "{valueY}",
                                fill: root2.interfaceColors.get("alternativeText"),
                                centerY: 0,
                                centerX: am5.p50,
                                populateText: true
                            })
                        });
                    });
                    legend.data.push(series);
                }
                makeSeries("Adultos", "adultos");
                makeSeries("Niños", "ninos");
                makeSeries("Infantes", "infantes");
                // Make stuff animate on load
                window.chartPasajeros.appear(1000, 100);
            }
        });
    </script>
@endsection