@extends('layouts.app')

@section('title', 'Asignar Curso')

@section('css')
    <style>
        @media (max-width: 768px) {
            .form-select {
                font-size: 14px !important;
                max-width: 100% !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }

            /* Forzar que el dropdown no se desborde */
            .form-select option {
                max-width: 100%;
                word-wrap: break-word;
                font-size: 13px;
                padding: 8px 10px;
            }

            /* Contenedor del select */
            .form-group {
                overflow: hidden;
            }

            /* Para navegadores webkit (Chrome, Safari) */
            select {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }
    </style>
@endsection

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

    <p>Bienvenido a esta vista para registrar Tripulantes y Jefes de Cabina en sus cursos</p>
    <div class="card">
        <div class="card-body">
            <form action="{{ route('cursos_tripulante.store') }}" 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-3 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-3 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>
                <hr>
                <div class="row">
                    <div class="col-12 col-md-3 mb-3">
                        <div class="form-group">
                            <label for="course_id">Curso</label>
                            <select name="cursos[0][course_id]" id="course_id" class="form-select">
                                <option value="">Seleccione un Curso</option>
                                @foreach($cursos_no_inscritos as $curso)
                                    <option value="{{ $curso->id }}" data-validity="{{ $curso->validity }}">{{ $curso->name }}</option>
                                @endforeach
                            </select>
                            @error('course_id')
                                    <small class="text-danger">
                                        {{ $message }}
                                    </small>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-3 mb-3">
                        <label for="fecha_realizado">Fecha Realizado:</label>
                        <input type="date" name="cursos[0][fecha_realizado]" class="form-control" id="fecha_realizado">
                    </div>
                    <div class="col-12 col-md-3 mb-3">
                        <label for="fecha_vencimiento">Fecha Vencimiento:</label>
                        <input type="date" name="cursos[0][fecha_vencimiento]" class="form-control" id="fecha_vencimiento">
                        <div class="form-check mt-2">
                            <input class="form-check-input" type="checkbox" id="indefinido_check" onchange="toggleFechaVencimiento(this)">
                            <label class="form-check-label" for="indefinido_check">
                                INDEFINIDO
                            </label>
                        </div>
                    </div>
                    <div id="cursos_container">
                    </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('tripulantes.index', ['opcion' => 'asignarCursos']) }}" 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_curso"><i class="fa-solid fa-plus"></i></button>
                            <button type="button" class="btn btn-danger w-50 w-md-auto" id="eliminar_curso"><i class="fa-solid fa-minus"></i></button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('js')
    <script>
        // Extraer todos los cursos disponibles del select inicial
        let cursosDisponibles = [];
        let selectInicial = document.querySelector('select[name="cursos[0][course_id]"]');
        selectInicial.addEventListener('change', actualizarOpcionesSelects);
        selectInicial.addEventListener('focus', actualizarOpcionesSelects);
        if (selectInicial) {
            // Recorrer todas las opciones del select inicial (excepto la primera que es "Seleccione un Curso")
            for (let i = 1; i < selectInicial.options.length; i++) {
                let option = selectInicial.options[i];
                cursosDisponibles.push({
                    value: option.value,
                    text: option.textContent,
                    validity: option.getAttribute('data-validity')
                });
            }
        }

        // Función para actualizar las opciones de todos los selects
        function actualizarOpcionesSelects() {
            // Obtener todos los selects de cursos (inicial y dinámicos)
            let todosLosSelects = document.querySelectorAll('select[name*="course_id"]');

            // Obtener todos los valores actualmente seleccionados
            let cursosSeleccionados = [];
            todosLosSelects.forEach(select => {
                if (select.value && select.value !== '') {
                    cursosSeleccionados.push(select.value);
                }
            });

            // Actualizar cada select
            todosLosSelects.forEach(select => {
                let valorActual = select.value; // Guardar el valor actual del select

                // Limpiar todas las opciones excepto la primera
                select.innerHTML = '<option value="">Seleccione un Curso</option>';

                // Agregar opciones disponibles
                cursosDisponibles.forEach(curso => {
                    // Solo agregar si no está seleccionado en otro select, O si es el valor actual de este select
                    if (!cursosSeleccionados.includes(curso.value) || curso.value === valorActual) {
                        let option = document.createElement('option');
                        option.value = curso.value;
                        option.textContent = curso.text;
                        option.setAttribute('data-validity', curso.validity);
                        select.appendChild(option);
                    }
                });

                // Restaurar el valor seleccionado
                select.value = valorActual;
            });
        }

        document.querySelector('select[name="cursos[0][course_id]"]').addEventListener('change', function() {
            actualizarOpcionesSelects();
        });

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

            // Realiza una solicitud AJAX para guardar el registro
            fetch(this.action, {
                method: 'POST',
                body: new FormData(this)
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    let mensajeHTML = `<div class="text-left">`;
                    if (data.cantidad === 1) {
                        mensajeHTML += `<p>Se ha registrado exitosamente el curso:</p>`;
                    } else {
                        mensajeHTML += `<p>Se han registrado exitosamente ${data.cantidad} cursos:</p>`;
                    }
                    mensajeHTML += `<ul class="list-group mt-2">`;
                    data.cursos.forEach(curso => {
                        mensajeHTML += `<li class="list-group-item bg-light">${curso}</li>`;
                    });
                    mensajeHTML += `</ul>`;
                    mensajeHTML += `<p class="mt-3">Para el colaborador: <strong>${data.colaborador}</strong></p>`;
                    mensajeHTML += `</div>`;

                    Swal.fire({
                        title: '¡Registro Exitoso!',
                        html: mensajeHTML,
                        icon: 'success',
                        confirmButtonText: 'Aceptar',
                        confirmButtonColor: '#3085d6',
                        width: '600px',
                        background: '#f8f9fa'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = URLs+'/cursos_tripulante';
                        }
                    });
                } else {
                    Swal.fire({
                        title: 'Error',
                        text: data.message,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    title: 'Error',
                    text: 'Ocurrió un error al procesar la solicitud',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            });
        });

        // Contador para generar identificadores únicos
        let contador = 0;

        // Manejador de evento para el botón "+" de agregar curso
        document.getElementById('agregar_curso').addEventListener('click', function() {
            // Incrementar el contador
            contador++;

            // Crear nueva fila para el curso
            let nuevaFila = document.createElement('div');
            nuevaFila.classList.add('row');

            // Contenido HTML de la nueva fila
            nuevaFila.innerHTML = `
                <div class="col-12 col-md-3 mb-3">
                    <div class="form-group">
                        <label for="course_id_${contador}">Curso</label>
                        <select name="cursos[${contador}][course_id]" id="course_id_${contador}" class="form-select">
                            <option value="">Seleccione un Curso</option>
                            @foreach($cursos_no_inscritos as $curso)
                                <option value="{{ $curso->id }}" data-validity="{{ $curso->validity }}">{{ $curso->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-12 col-md-3 mb-3">
                    <label for="fecha_realizado_${contador}">Fecha Programado:</label>
                    <input type="date" name="cursos[${contador}][fecha_realizado]" class="form-control fecha_realizado" id="fecha_realizado_${contador}">
                </div>
                <div class="col-12 col-md-3 mb-3">
                    <label for="fecha_vencimiento_${contador}">Fecha Vencimiento:</label>
                    <input type="date" name="cursos[${contador}][fecha_vencimiento]" class="form-control fecha_vencimiento" id="fecha_vencimiento_${contador}">
                </div>
            `;

            // Agregar nueva fila al contenedor
            document.getElementById('cursos_container').appendChild(nuevaFila);

            // Añadir event listeners a los campos de fecha en la nueva fila
            let fechaRealizadoInput = nuevaFila.querySelector(`#fecha_realizado_${contador}`);
            let fechaVencimientoInput = nuevaFila.querySelector(`#fecha_vencimiento_${contador}`);
            let courseSelect = nuevaFila.querySelector(`#course_id_${contador}`);
            courseSelect.addEventListener('change', actualizarOpcionesSelects);
            courseSelect.addEventListener('focus', actualizarOpcionesSelects);

            fechaRealizadoInput.addEventListener('change', function() {
                var selectedCourse = courseSelect.options[courseSelect.selectedIndex];
                var validityMonths = parseInt(selectedCourse.getAttribute('data-validity'));

                if (!isNaN(validityMonths)) {
                    var fechaRealizado = new Date(fechaRealizadoInput.value);
                    var fechaVencimiento = new Date(fechaRealizado);

                    fechaVencimiento.setMonth(fechaVencimiento.getMonth() + validityMonths);

                    var dia = fechaVencimiento.getDate();
                    var mes = fechaVencimiento.getMonth() + 1;
                    var año = fechaVencimiento.getFullYear();
                    var fechaFormateada = año + '-' + (mes < 10 ? '0' : '') + mes + '-' + (dia < 10 ? '0' : '') + dia;

                    fechaVencimientoInput.value = fechaFormateada;
                }
            });
        });

        // Manejador de evento para el botón "-" de eliminar último curso
        document.getElementById('eliminar_curso').addEventListener('click', function() {
            let cursosContainer = document.getElementById('cursos_container');
            // Obtener la última fila de cursos agregada
            let ultimaFila = cursosContainer.lastElementChild;
            // Si hay al menos una fila agregada
            if (ultimaFila) {
                // Eliminar la última fila de cursos
                cursosContainer.removeChild(ultimaFila);
                actualizarOpcionesSelects();
                // Decrementar el contador
                contador--;
            }
        });

        // Codigo para calcular las fechas de realizado con la fecha de vencimiento
        document.getElementById('fecha_realizado').addEventListener('change', function() {
            var courseSelect = document.getElementById('course_id');
            var selectedCourse = courseSelect.options[courseSelect.selectedIndex];
            var validityMonths = parseInt(selectedCourse.getAttribute('data-validity'));

            if (!isNaN(validityMonths)) {
                var fechaRealizado = new Date(document.getElementById('fecha_realizado').value);
                var fechaVencimiento = new Date(fechaRealizado);

                fechaVencimiento.setMonth(fechaVencimiento.getMonth() + validityMonths);

                var dia = fechaVencimiento.getDate();
                var mes = fechaVencimiento.getMonth() + 1;
                var año = fechaVencimiento.getFullYear();
                var fechaFormateada = año + '-' + (mes < 10 ? '0' : '') + mes + '-' + (dia < 10 ? '0' : '') + dia;

                document.getElementById('fecha_vencimiento').value = fechaFormateada;
            }
        });

        // También puedes activar el cálculo al cambiar el curso seleccionado, si es necesario
        document.getElementById('course_id').addEventListener('change', function() {
            if (document.getElementById('fecha_realizado').value) {
                document.getElementById('fecha_realizado').dispatchEvent(new Event('change'));
            }
        });

        function toggleFechaVencimiento(checkbox) {
            var fechaInput = document.getElementById('fecha_vencimiento');
            if (checkbox.checked) {
                fechaInput.disabled = true;
                fechaInput.value = '';
                // Agregar un campo oculto para enviar "INDEFINIDO"
                var hiddenField = document.createElement('input');
                hiddenField.type = 'hidden';
                hiddenField.name = 'cursos[0][es_indefinido]';
                hiddenField.value = '1';
                hiddenField.id = 'es_indefinido';
                checkbox.parentNode.appendChild(hiddenField);
            } else {
                fechaInput.disabled = false;
                // Eliminar el campo oculto si existe
                var hiddenField = document.getElementById('es_indefinido');
                if (hiddenField) {
                    hiddenField.parentNode.removeChild(hiddenField);
                }
            }
        }
    </script>
@endsection