@extends('layouts.app')

@section('title', 'Registrar en Vuelos')

@section('content')
    @if(session('info'))
        <div class="alert alert-success">
            <strong>{{session('info')}}</strong>
        </div>
    @endif

    <p>Bienvenido a esta vista para registrar Pilotos y Copilotos del Boeing en Vuelos</p>
    <div class="card">
        <div class="card-body">
            <form action="{{ route('colaboradoresB.asignarVuelos') }}" method="POST" id="crear_registro">
                @csrf
                <div class="row">
                        <input type="hidden" class="form-control" value="{{ old('nombre', $colaborador->id ?? '') }}" style="background-color: rgba(220, 214, 239, 0.719);" name="colaborador_id">
                    <div class="col-12 col-md-3 mb-3">
                        <label for="nombre">Nombres:</label>
                        <input class="form-control" type="text" value="{{ old('nombre', $colaborador->nombre ?? '') }}" style="background-color: rgba(220, 214, 239, 0.719);" id="nombre" readonly>
                    </div>
                    <div class="col-12 col-md-3 mb-3">
                        <label for="ap_paterno">Apellido Paterno:</label>
                        <input class="form-control" type="text"  value="{{ old('paterno', $colaborador->ap_paterno ?? '') }}" style="background-color: rgba(220, 214, 239, 0.719);" id="ap_paterno" readonly>
                    </div>
                    <div class="col-12 col-md-2 mb-3">
                        <label for="ap_materno">Apellido Materno:</label>
                        <input class="form-control" type="text"  value="{{ old('materno', $colaborador->ap_materno ?? '') }}" style="background-color: rgba(220, 214, 239, 0.719);" id="ap_materno" readonly>
                    </div>
                    <div class="col-12 col-md-2 mb-3">
                        <label for="numero_dgac">N° DGAC</label>
                        <input class="form-control" type="text" value="{{ old('numero_dgac', $colaborador->numero_dgac ?? '') }}" style="background-color: rgba(220, 214, 239, 0.719);" id="numero_dgac" readonly>
                    </div>
                    <div class="col-12 col-md-2 mb-3">
                        <label for="cargo_vuelo">Cargo en Vuelo:</label>
                        <input class="form-control" type="text" value="{{ old('cargo_vuelo', $colaborador->appcargo->cargo_vuelo ?? '') }}" style="background-color: rgba(220, 214, 239, 0.719);" id="cargo_vuelo" readonly>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-12 col-md-3 mb-3">
                        <label for="vuelos-id">Seleccionar Vuelo:</label>
                        <select class="form-select vuelo-select" aria-label="Default select example" name="vuelos[0][vuelo_id]" id="vuelos-id">
                            <option value="">Seleccione:</option>
                            @foreach($vuelos as $vuelo)
                                <option value="{{ $vuelo->id }}">{{ $vuelo->numero_vuelo }}</option>
                            @endforeach
                        </select>
                        @error('vuelo_id')
                                <small class="text-danger">
                                    {{ $message }}
                                </small>
                        @enderror
                    </div>
                    <div class="col-md-2" id="rutas">
                    </div>
                    <div class="col-12 col-md-3 mb-3">
                        <label for="fechaVuelo">Fecha vuelo:</label>
                        <input class="form-control" type="text" id="fechaVuelo" name="fecha_vuelo" readonly>
                    </div>
                    <div class="mt-2" id="vuelos_container">
                    </div>
                    <div class="col-12 col-md-3 mb-3" id="calendar" style="display: none;"></div>
                </div>
                <div class="col-12">
                    <div class="d-flex flex-column flex-md-row justify-content-md-end align-items-stretch gap-2">
                        <div class="d-flex flex-column flex-md-row gap-2" style="flex-shrink: 0;">
                            <button type="submit" class="btn btn-primary flex-fill">Registrar</button>
                            <a href="{{ route('pilotosB.index', ['opcion' => 'asignarVuelo']) }}" class="btn btn-warning flex-fill">Cancelar</a>
                        </div>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-success w-50 w-md-auto" id="agregar_vuelo"><i class="fa-solid fa-plus"></i></button>
                            <button type="button" class="btn btn-danger w-50 w-md-auto" id="eliminar_vuelo"><i class="fa-solid fa-minus"></i></button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('js')
    <script>
        // Codigo para mostrar el calendario al seleccionar un vuelo
        $(document).ready(function() {
            $('#vuelos-id').off('change').on('change',function() {
                var vueloId = $(this).val();
                mostrarRuta(vueloId, 'rutas');

                if (vueloId !== '') {
                    iniciarCalendario();
                    $('#calendar').show();
                } else {
                    $('#calendar').hide();
                    $('#fechaVuelo').val('');
                }
            });
        });
    </script>

    <script>
        let vuelos_seleccionados = {};

        $(document).ready(function() {
            let vueloPrincipal = $('#vuelos-id');
            if (vueloPrincipal.val()) {
                vuelos_seleccionados['principal'] = {
                    id: vueloPrincipal.val(),
                    numeroVuelo: vueloPrincipal.find('option:selected').text()
                };
            }
        });

        // Función para cargar la ruta del vuelo segun el select dinamico de cada fila
        $(document).on('change', '#vuelos-id, .vuelo-select', function() {
            let vueloId = $(this).val();
            let numeroVuelo = $(this).find('option:selected').text();
            let isMainSelect = $(this).attr('id') === 'vuelos-id';
            let row_index = isMainSelect ? 'principal' : $(this).attr('id').split('-').pop();
            let rutaInput = isMainSelect ? $('#rutas') : $(this).closest('.vuelo_row').find('.ruta-input');

            delete vuelos_seleccionados[row_index];

            if (vueloId) {
                vuelos_seleccionados[row_index] = {
                    id: vueloId,
                    numeroVuelo: numeroVuelo
                };
                $.ajax({
                    url: URLs+`/obtener-rutas/${vueloId}`,
                    method: 'GET',
                    success: function(response) {
                        rutaInput.html('');
                        if (response.length > 0) {
                            response.forEach(function(ruta) {
                                let rutaHtml = `<label>Tramos:</label><input type="text" class="form-control" value="${ruta.destino_partida} - ${ruta.destino_llegada}" readonly>`;
                                rutaInput.append(rutaHtml);
                            });
                        } else {
                            rutaInput.html('<label>Tramos:</label><input type="text" class="form-control" value="Sin rutas disponibles." readonly/>');
                        }
                    },
                    error: function(xhr, status, error) {
                        alert('Error al cargar la ruta del vuelo.');
                    }
                });
            } else {
                rutaInput.html('');
            }
        });

        // Codigo para la creacion de eventos en el calendario
        function iniciarCalendario() {
            if ($('#calendar').hasClass('fc')) {
                $('#calendar').fullCalendar('destroy');
            }
            var vueloId = $('#vuelos-id').val();
            $.ajax({
                url: URLs+'/fechas-disponibles/' + vueloId,
                success: function(data) {
                    $('#calendar').fullCalendar({
                        // Puedes añadir opciones básicas aquí si lo deseas
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'mes'
                        },
                        // Por defecto, el calendario se mostrará en el mes actual
                        defaultView: 'month',
                        // Puedes cambiar el idioma si lo necesitas, por ejemplo:
                        locale: 'es',
                        selectable: true,
                        selectHelper: true,
                        events: @json($eventos),
                        select: function(start, end) {
                            var fecha = start.format('YYYY-MM-DD');
                            // Aquí puedes agregar la lógica para manejar la selección del día
                            if (!data.includes(fecha)) {
                                // La fecha seleccionada no está disponible, deshacer selección
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Día no seleccionable',
                                    text: 'El día seleccionado no está habilitado para este vuelo.'
                                });
                                $('#calendar').fullCalendar('unselect');
                            } else {
                                seleccionarDia(fecha);
                            }
                        },
                        dayRender: function(date, cell) {
                            var fecha = date.format('YYYY-MM-DD');
                            if (!data.includes(fecha)) {
                                // Si el día no está disponible, marcarlo con fondo gris
                                $(cell).css({
                                    backgroundColor: '#ececec',
                                    color: '#aaa',
                                    cursor: 'not-allowed'
                                });
                            }
                        },
                        eventRender: function(event, element) {
                            element.attr('data-toggle', 'tooltip');
                            element.attr('title', event.title);
                            var tooltip = $('<div class="event-tooltip"></div>').css({
                                position: 'absolute',
                                zIndex: 10001,
                                backgroundColor: 'rgba(0,0,0,0.8)',
                                color: '#fff',
                                borderRadius: '3px',
                                padding: '5px 10px',
                                fontSize: '12px',
                                maxWidth: '200px',
                                wordWrap: 'break-word'
                            });
                            element.tooltip({
                                container: 'body', // Asegura que el tooltip se renderice dentro del body
                                placement: 'top',  // Coloca el tooltip encima del evento
                                trigger: 'hover'   // Muestra el tooltip al pasar el mouse
                            });
                        }
                    });
                }
            });
        };

        // Función para manejar la selección de días en el calendario
        function seleccionarDia(fecha) {
            var fechaFormateada = dayjs(fecha).format('DD-MM-YYYY');

            var eventos_existentes = $('#calendar').fullCalendar('clientEvents', function(event) {
                var eventDate = dayjs(event.start).format('DD-MM-YYYY');
                return eventDate === fechaFormateada;
            });

            var eventos_bloqueantes = eventos_existentes.filter(evento => !esVuelo(evento) && !esCPAT(evento) && !esReservado(evento));
            var vuelos_programados = eventos_existentes.filter(esVuelo);
            var tiene_reservado = eventos_existentes.some(esReservado);


            if (eventos_bloqueantes.length > 0) {
                mostrarDetallesEvento(eventos_bloqueantes[0]);
            } else {
                var mensaje = '';
                if (eventos_existentes.some(esCPAT)) {
                        mensaje += 'Nota: Este día tiene un evento CPAT, pero se puede programar el vuelo.';
                    }

                if (tiene_reservado) {
                    mensaje += 'Nota: Este día está Reservado, se puede programar el vuelo.';
                }

                if (vuelos_programados.length > 0) {
                    mensaje += `Vuelos ya programados para el día ${fechaFormateada}:\n`;
                    vuelos_programados.forEach((vuelo, index) => {
                        mensaje += `${index + 1}. ${vuelo.title}\n`;
                    });
                    mensaje += '\n';
                }

                if (Object.keys(vuelos_seleccionados).length > 0) {
                    var titulo = 'Programar Vuelo(s)';
                    mensaje += `¿Desea programar ${Object.keys(vuelos_seleccionados).length} vuelo(s) adicional(es) para el día ${fechaFormateada}?`;
                    Swal.fire({
                        icon: 'question',
                        title: titulo,
                        html: mensaje.replace(/\n/g, '<br'),
                        confirmButtonText: 'Sí',
                        showCancelButton: true,
                        cancelButtonText: 'No'
                    }).then((result) => {
                        if (result.isConfirmed){
                            agregarVuelos(fechaFormateada, Object.values(vuelos_seleccionados));
                            $('#fechaVuelo').val(fechaFormateada);
                        }
                    });
                } else {
                    Swal.fire({
                        icon: 'info',
                        title: 'Información',
                        html: mensaje + 'No hay nuevos vuelos seleccionados para programar. Por favor, seleccione un vuelo en el formulario si desea programar uno adicional.',
                    });
                }
            }
        }

        // Funcion para diferenciar los eventos en el calendario
        function esVuelo(evento) {
            return evento.vueloId !== undefined;
        }

        // Función para diferenciar los eventos CPAT en el calendario
        function esCPAT(evento) {
            return evento.title === 'CPAT';
        }

        // Función para diferenciar los días Reservado en el calendario
        function esReservado(evento) {
            return evento.title === 'R';
        }
        // Función para mostrar un mensaje en caso de que un día tenga un evento programado
        function mostrarDetallesEvento(evento) {
            let tipo_evento = evento.title;
            let mensaje = `Este día tiene ${tipo_evento} programado.`;
            Swal.fire({
                title: 'Día Ocupado',
                text: mensaje,
                icon: 'info',
                confirmButtonText: 'Entendido',
                confirmButtonColor: '#3085d6'
            });
        }

        // Función para marcar un día como programado
        function agregarVuelos(fecha, vuelos) {
            vuelos.forEach(vuelo => {
                $('#calendar').fullCalendar('renderEvent', {
                    title: vuelo.numeroVuelo,
                    start: dayjs(fecha, 'DD-MM-YYYY').toDate(),
                    allDay: true,
                    color: '#A9AE47',
                    vueloId: vuelo.id
                }, true);
            });
            let mensaje = vuelos.length === 1 ? `El vuelo ${vuelos[0].numeroVuelo} ha sido programado para el día ${fecha}.` : `Se han programado ${vuelos.length} vuelos para el día ${fecha}.`;

            mostrarConfirmacion('Vuelo(s) programado(s)', mensaje);
            vuelos_seleccionados = {};
        }

        // Función para mostrar un mensaje con confirmación al confirmar acciones
        function mostrarConfirmacion(titulo, mensaje) {
            Swal.fire({
                icon: 'success',
                title: titulo,
                text: mensaje,
                confirmButtonText: 'OK'
            }).then((result) => {
                if (result.isConfirmed) {
                }
            });
        }

        // Función para mostrar la ruta según el id del vuelo seleccionado
        function mostrarRuta(vueloId, rutasContainerId) {
            let $rutasDiv = $(`#${rutasContainerId}`);
            if ($rutasDiv.length === 0) {
                return;
            }

            $rutasDiv.empty();

            if (vueloId !== '') {
                $rutasDiv.append('<p>Cargando rutas...</p>');
                $.ajax({
                    url: URLs+'/obtener-rutas/' + vueloId,
                    type: 'GET',
                    success: function(data) {
                        $rutasDiv.empty();
                        let $label = $('<label>')
                            .attr('for', 'tramos-input-' + rutasContainerId)
                            .text('Tramos:');
                        $rutasDiv.append($label).append('<br>');
                        let $tramosInput = $('<input>')
                            .attr('type', 'text')
                            .attr('id', 'tramos-input-' + rutasContainerId)
                            .attr('name', 'tramos[]')
                            .attr('readonly', 'readonly')
                            .addClass('form-control')
                            .css('margin-top', '0');
                        let tramosTexto = data.map(function(ruta) {
                            return ruta.destino_partida + ' - ' + ruta.destino_llegada;
                        }).join(' | ');
                        $tramosInput.val(tramosTexto);
                        $rutasDiv.append($tramosInput);
                    },
                    error: function(xhr, status, error) {
                        $rutasDiv.html('<p class="text-danger">Error al cargar las rutas</p>');
                    }
                });
            } else {
                $rutasDiv.html('<p>No se ha seleccionado ningún vuelo</p>');
            }
        }

        // Función para agregar o eliminar nueva fila dinamicamente
        $(document).ready(function() {
            let vueloIndex = 1; // Para manejar los índices dinámicos

            // Funcion para agregar una nueva fila y agregar nuevo vuelo
            $('#agregar_vuelo').on('click', function() {
                let newSelect =
                `<div class="row vuelo_row">
                    <div class="col-12 col-md-3 mb-3">
                        <label for="vuelos-id-${vueloIndex}">Seleccionar Vuelo:</label>
                        <select class="form-select vuelo-select" aria-label="Default select example" name="vuelos[${vueloIndex}][vuelo_id]" id="vuelos-id-${vueloIndex}">
                            <option value="">Seleccione:</option>
                            @foreach($vuelos as $vuelo)
                                <option value="{{ $vuelo->id }}">{{ $vuelo->numero_vuelo }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mt-2 ruta-input" id="ruta-${vueloIndex}">
                    </div>
                </div>
                `;
                $('#vuelos_container').append(newSelect);
                vueloIndex++;
            });

            // Función para eliminar la última fila y eliminar el último vuelo
            $('#eliminar_vuelo').on('click', function() {
                $('#vuelos_container .vuelo_row:last-child').remove();
                if (vueloIndex > 1) {
                    vueloIndex--;
                }
            });
        });
    </script>

    <script>
        //Codigo para la creacion de registros
        document.getElementById('crear_registro').addEventListener('submit', function(event) {
            event.preventDefault();  // Evita que el formulario se envíe normalmente

            let formData = new FormData(this);
            let newFormData = new FormData();
            let vuelos_validos = [];

            // Copiar todos los campos excepto 'vuelos'
            for (let [key, value] of formData.entries()) {
                if (!key.startsWith('vuelos')) {
                    newFormData.append(key, value);
                }
            }

            // Procesar los vuelos, solo incluyendo los que tienen un ID válido
            let fecha_vuelo = formData.get('fecha_vuelo');
            for (let i = 0; i < 100; i++) {  // Asumimos un máximo de 100 vuelos
                let vueloId = formData.get(`vuelos[${i}][vuelo_id]`);
                if (vueloId && vueloId !== "") {
                    vuelos_validos.push({
                        vuelo_id: vueloId,
                        fecha_vuelo: fecha_vuelo
                    });
                }
            }

            // Agregar los vuelos válidos al newFormData
            vuelos_validos.forEach((vuelo, index) => {
                newFormData.append(`vuelos[${index}][vuelo_id]`, vuelo.vuelo_id);
                newFormData.append(`vuelos[${index}][fecha_vuelo]`, vuelo.fecha_vuelo);
            });

            // Validación
            let fecha = newFormData.get('fecha_vuelo');
            if (!fecha) {
                Swal.fire({
                    title: 'Error',
                    text: 'Por favor, selecciona una fecha de vuelo.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
                return;
            }

            let vuelosSeleccionados = false;
            for (let [key, value] of newFormData.entries()) {
                if (key.includes('[vuelo_id]') && value !== "") {
                    vuelosSeleccionados = true;
                    break;
                }
            }

            if (!vuelosSeleccionados) {
                Swal.fire({
                    title: 'Error',
                    text: 'Por favor, selecciona al menos un vuelo.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
                return;
            }
            // Realiza una solicitud AJAX para guardar el registro
            fetch(this.action, {
                method : 'POST',
                body   : newFormData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept'      : 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                let icon, title;
                switch(data.status) {
                    case 'success':
                        icon = 'success';
                        title = 'Éxito';
                        break;
                    case 'info':
                        icon = 'info';
                        title = 'Información';
                        break;
                    case 'warning':
                        icon = 'warning';
                        title = 'Advertencia';
                        break;
                    case 'error':
                        icon = 'error';
                        title = 'Error';
                        break;
                    default:
                        icon = 'question';
                        title = 'Resultado';
                }

                let htmlContent = `<p>${data.message}</p>`;
                if (data.details) {
                    htmlContent += '<ul>';
                    for (let key in data.details) {
                        htmlContent += `<li>${data.details[key]}</li>`;
                    }
                    htmlContent += '</ul>';
                }
                // Muestra la alerta de SweetAlert
                Swal.fire({
                    title            : title,
                    html             : htmlContent,
                    icon             : icon,
                    confirmButtonText: 'OK'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Redirige al usuario a la vista index
                        if (data.status === 'success') {
                            window.location.href = URLs + '/tripulacion_vuelo?fecha_vuelo=' + data.fecha_vuelo;
                        } else if (data.code === 'RESET_SELECTION') {
                            // Reiniciar la selección
                            reiniciarSeleccion();
                        }
                    }
                });
            })
            .catch(error => {
                Swal.fire({
                    title            : 'Error',
                    text             : 'Hubo un problema al procesar tu solicitud. Por favor, inténtalo de nuevo.',
                    icon             : 'error',
                    confirmButtonText: 'OK'
                });
            });
        });

        function reiniciarSeleccion() {
            // Limpiar los campos de selección
            document.getElementById('fechaVuelo').value = '';
            document.getElementById('vuelos-id').value = '';
            const rutasDiv = document.getElementById('rutas'); // Ajusta este ID al que uses para tu div de rutas
            if (rutasDiv) {
                rutasDiv.innerHTML = '';
            }
            const vuelosDiv = document.getElementById('vuelos_container'); // Ajusta este ID al que uses para tu div de vuelos
            if (vuelosDiv) {
                vuelosDiv.innerHTML = '';
            }
            const calendarioDiv = document.getElementById('calendar'); // Ajusta este ID al que uses para tu div de calendario
            if (calendarioDiv) {
                calendarioDiv.style.display = 'none';
            }

            // Enfocar el primer campo de selección
            document.getElementById('vuelos-id').focus();
        }
    </script>
@endsection