@extends('layouts.app')

@section('title', 'Seguimiento de Vuelos')

@section('css')
    <style>
        /* Aplica estilos a las opciones deshabilitadas */
        select.form-select option:disabled {
            background-color: #f0f0f0; /* Fondo gris claro */
            color: #a0a0a0; /* Texto gris oscuro */
        }
    </style>
@endsection

@section('content')
    <div class="card mt-2">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="mb-0">Editar Vuelo</h5>
            <h6>Vuelo SRU{{ $vuelo->numero_vuelo }} | {{ $vuelo->rutas->first()->destinoPartida->abreviatura_destino}} -> {{ $vuelo->rutas->first()->destinoLlegada->abreviatura_destino }}</h6>
        </div>
        <div class="card-body">
            <div class="container">
                <form action="" id="vueloEstadoForm" data-vuelo-id="{{ $vuelo->id }}"  data-ruta-id="{{ $ruta_vuelo->id }}">
                    @csrf
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label class="form-label">Estado de cumplimiento</label>
                            <select class="form-select" name="estado_cumplimiento_id" id="estado_cumplimiento">
                                <option value="">Seleccione estado de cumplimiento</option>
                                @foreach($estados_cumplimiento as $estado)
                                    <option value="{{ $estado->id }}"
                                        {{ ($vuelo_estado_cumplimiento && $vuelo_estado_cumplimiento->estado_cumplimiento_id == $estado->id) ? 'selected' : '' }}>
                                        {{ $estado->nombre }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Estado de seguimiento</label>
                            <select class="form-select" name="estado_seguimiento_id" required>
                                <option value="">Seleccione estado de seguimiento</option>
                                @foreach($estados_seguimiento as $estado)
                                    <option value="{{ $estado->id }}"
                                        {{ $vuelo_estados->estado_seguimiento_id == $estado->id ? 'selected' : '' }}
                                        {{ $estado->id != $siguiente_estado->id && $estado->id != $vuelo_estados->estado_seguimiento_id ? 'disabled' : '' }}>
                                        {{ $estado->nombre }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Hora programada</label>
                                <input type="time" class="form-control" name="hora_programada" step="1" value="{{ $vuelo->rutas->first()->hora_salida ?? '' }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Hora programada llegada</label>
                                <input type="time" class="form-control" name="hora_programada_llegada" step="1" value="{{ $vuelo->rutas->first()->hora_llegada ?? '' }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Hora avión en toma</label>
                                <input type="time" class="form-control" name="hora_avion_toma" step="1" value="{{ $estados_registrado_seguimiento['avion_toma'] }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Hora inicio embarque</label>
                                <input type="time" class="form-control" name="hora_inicio_embarque" step="1" value="{{ $estados_registrado_seguimiento['inicio_embarque'] }}">
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Hora fin embarque</label>
                                <input type="time" class="form-control" name="hora_fin_embarque" step="1" value="{{ $estados_registrado_seguimiento['fin_embarque'] }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Hora cierre puertas</label>
                                <input type="time" class="form-control" name="hora_cierre_puertas" step="1" value="{{ $estados_registrado_seguimiento['cierre_puertas'] }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Hora pushback</label>
                                <input type="time" class="form-control" name="hora_pushback" step="1" value="{{ $estados_registrado_seguimiento['push'] }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Hora taxeo</label>
                                <input type="time" class="form-control" name="hora_taxeo" step="1" value="{{ $estados_registrado_seguimiento['taxeo'] }}">
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Hora despegue</label>
                                <input type="time" class="form-control" name="hora_despegue" step="1" value="{{ $estados_registrado_seguimiento['despego'] }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Hora aterrizaje</label>
                                <input type="time" class="form-control" name="hora_aterrizaje" step="1" value="{{ $estados_registrado_seguimiento['aterrizo'] }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Hora apertura puertas</label>
                                <input type="time" class="form-control" name="hora_apertura_puertas" step="1" value="{{ $estados_registrado_seguimiento['apertura_puerta'] }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Hora fin desembarque</label>
                                <input type="time" class="form-control" name="hora_fin_desembarque" step="1" value="{{ $estados_registrado_seguimiento['fin_desembarque'] }}">
                            </div>
                        </div>
                    </div>

                    <div  class="mt-2 d-flex flex-column flex-md-row">
                        <button type="submit" class="btn btn-primary mb-2 mb-md-0 me-md-2 sm">Guardar</button>
                        <a href="{{ route('control_vuelos.index') }}" class="btn btn-warning mb-2 mb-md-0 me-md-2 sm">Regresar</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const form = document.getElementById('vueloEstadoForm');
            const vueloId = form.dataset.vueloId;
            const rutaId = form.dataset.rutaId;
            const estado_hora_map = {
                2: 'hora_avion_toma',
                3: 'hora_inicio_embarque',
                4: 'hora_fin_embarque',
                5: 'hora_cierre_puertas',
                6: 'hora_pushback',
                7: 'hora_taxeo',
                8: 'hora_despegue',
                9: 'hora_aterrizaje',
                10: 'hora_apertura_puertas',
                11: 'hora_fin_desembarque'
            };
            const ultimo_estado = 11;
            const handleFormSubmit = async (e) => {
                e.preventDefault();
                try {
                    const estadoSeguimientoId = document.querySelector('select[name="estado_seguimiento_id"]').value;
                    const campoHora = estado_hora_map[estadoSeguimientoId];
                    const horaEstado = document.querySelector(`input[name="${campoHora}"]`)?.value;

                    // Validaciones
                    if (!estadoSeguimientoId) throw new Error('Debe seleccionar un estado de seguimiento');
                    if (!horaEstado?.trim()) throw new Error('Debe ingresar la hora para el estado seleccionado');

                    const data = {
                        ...Object.fromEntries(new FormData(form)),
                        estado_seguimiento_id: estadoSeguimientoId,
                        hora_estado: horaEstado,
                        ruta_vuelo_id: rutaId,
                    };

                    // Realizar petición
                    const response = await fetch(`${URLs}/vuelos/${vueloId}/update-estado`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify(data)
                    });

                    const responseData = await response.json();
                    if (!response.ok) throw new Error(responseData.message || 'Error al actualizar el estado');

                    // Actualizar UI
                    document.getElementById(campoHora)?.setAttribute('disabled', true);
                    if (estadoSeguimientoId < ultimo_estado) {
                        document.getElementById(estado_hora_map[estadoSeguimientoId + 1])?.removeAttribute('disabled');
                    }

                    await Swal.fire({
                        title: 'Éxito',
                        text: responseData.message || 'Estado del vuelo actualizado correctamente',
                        icon: 'success',
                        confirmButtonText: 'Aceptar'
                    });
                } catch (error) {
                    console.error('Error:', error);
                    await Swal.fire({
                        title: 'Error',
                        text: error.message || 'Hubo un problema al actualizar el estado del vuelo',
                        icon: 'error',
                        confirmButtonText: 'Aceptar'
                    });
                }
            };
            // Nuevo manejador para Sala/PEA
            const btnGuardarSalaPea = document.getElementById('btnGuardarSalaPea');
            if (btnGuardarSalaPea) {
                btnGuardarSalaPea.addEventListener('click', async () => {
                    try {
                        const sala = document.querySelector('input[name="sala"]')?.value;
                        const pea = document.querySelector('input[name="pea"]')?.value;
                        // Validar que al menos uno de los campos tenga valor
                        if (!sala && !pea) {
                            throw new Error('Debe ingresar al menos un valor para Sala o PEA');
                        }
                        const data = {
                            sala: sala,
                            pea: pea,
                            ruta_vuelo_id: rutaId
                        };
                        // Realizar petición a un endpoint específico para sala/pea
                        const response = await fetch(`${URLs}/vuelos/${vueloId}/update-sala-pea`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                'Accept': 'application/json'
                            },
                            body: JSON.stringify(data)
                        });
                        const responseData = await response.json();
                        if (!response.ok) throw new Error(responseData.message || 'Error al actualizar Sala/PEA');
                        const controlVuelosUrl = document.querySelector('a[href*="control_vuelos"]').getAttribute('href');
                        await Swal.fire({
                            title: 'Éxito',
                            text: responseData.message || 'Sala/PEA actualizado correctamente',
                            icon: 'success',
                            confirmButtonText: 'Aceptar'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                // Redirigir a la vista de control de vuelos
                                window.location.href = controlVuelosUrl; // Ajusta esta URL según tu ruta
                            }
                        });
                    } catch (error) {
                        console.error('Error:', error);
                        await Swal.fire({
                            title: 'Error',
                            text: error.message || 'Hubo un problema al actualizar Sala/PEA',
                            icon: 'error',
                            confirmButtonText: 'Aceptar'
                        });
                    }
                });
            }
            form.addEventListener('submit', handleFormSubmit);
        });

        // Bloque para deshabilitar estados de cumplimiento que no pueden ser seleccionables
        document.addEventListener("DOMContentLoaded", function () {
            let selectCumplimiento = document.getElementById("estado_cumplimiento");
            // Obtener el estado actual seleccionado
            let estadoActual = selectCumplimiento.value;
            // Deshabilitar todas las opciones excepto la seleccionada
            Array.from(selectCumplimiento.options).forEach(option => {
                if (option.value !== estadoActual) {
                    option.disabled = true;
                }
            });
        });

        //Bloque para registrar motivo de retrasos
        $(document).ready(function() {
            // Obtener los datos del formulario
            var vueloId = $('#vueloEstadoForm').data('vuelo-id');
            var rutaId = $('#vueloEstadoForm').data('ruta-id');

            var retrasoActualId = {{ isset($retraso_actual) ? $retraso_actual->id : 'null' }};

            // Manejar el registro de motivo de retraso
            $('#registrar_retraso').on('click', function() {
                // Validar campos
                var motivoRetraso = $('#estado_retraso_id').val();
                if (!motivoRetraso) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Campos requeridos',
                        text: 'Por favor seleccione un motivo de retraso',
                        confirmButtonText: 'Entendido'
                    });
                    return;
                }

                // Preparar datos
                var datos = {
                    vuelo_id: vueloId,
                    ruta_vuelo_id: rutaId,
                    estado_retraso_id: motivoRetraso,
                    observacion: $('#observacion').val(),
                    fecha_vuelo: '{{ $vuelo_estados->fecha_vuelo }}',
                    _token: '{{ csrf_token() }}'
                };

                // Determinar si es actualización o creación
                if (retrasoActualId !== null){
                    $.ajax({
                        url:  URLs + '/vuelo-motivo-retraso/' + retrasoActualId,
                        type: 'POST',
                        data: datos,
                        success: handleResponse,
                        error: handleError
                    })
                } else {
                    $.ajax({
                        url: URLs+'/vuelo-motivo-retraso',
                        type: 'POST',
                        data: datos,
                        success: handleResponse,
                        error: handleError
                    })
                }

                function handleResponse(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: '¡Éxito!',
                            text: response.message,
                            confirmButtonText: 'Aceptar'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                location.reload();
                            }
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message,
                            confirmButtonText: 'Aceptar'
                        });
                    }
                }

                function handleError(xhr) {
                    var errores = xhr.responseJSON.errors;
                    var mensajeError = '';
                    for (var campo in errores) {
                        mensajeError += errores[campo][0] + '<br>';
                    }

                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        html: mensajeError || 'No se pudo procesar la solicitud',
                        confirmButtonText: 'Aceptar'
                    });
                }
            });
        });
    </script>
@endsection