@extends('layouts.index', ['subHeader' => 'Editar Recomendaciones Viajeros (SSF)'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('recomendaciones_viajeros.index') }}" class="text-decoration-none text-dark"> / Recomendaciones Viajeros</a>
    <span> / Editar registro</span>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            // Referencias a los elementos del DOM
            const fechaVueloHidden = $('#fecha_vuelo');
            const fechaInicioInput = $('#fecha_vuelo_inicio');
            const fechaFinInput = $('#fecha_vuelo_fin');
            const rangoCheckbox = $('#rango_fechas');
            const fechaFinContainer = $('#fecha_vuelo_fin_container');

            /**
             * Función para convertir una fecha de formato 'dd/mm/YYYY' a 'YYYY-mm-dd'.
             * @param {string} fechaString - La fecha en formato 'dd/mm/YYYY'.
             * @returns {string} La fecha en formato 'YYYY-mm-dd' o una cadena vacía si es inválida.
             */
            function convertirFormatoA_YYYYMMDD(fechaString) {
                if (!fechaString || !fechaString.includes('/')) {
                    return ''; // Devuelve vacío si la fecha es nula o no tiene el formato esperado
                }
                const partes = fechaString.split('/');
                if (partes.length !== 3) {
                    return ''; // Formato inválido
                }
                const [dia, mes, anio] = partes;
                // Aseguramos que día y mes tengan 2 dígitos con padStart
                return `${anio}-${mes.padStart(2, '0')}-${dia.padStart(2, '0')}`;
            }

            /**
             * Función para convertir una fecha de formato 'YYYY-mm-dd' a 'dd/mm/YYYY'.
             * @param {string} fechaString - La fecha en formato 'YYYY-mm-dd'.
             * @returns {string} La fecha en formato 'dd/mm/YYYY' o una cadena vacía si es inválida.
             */
            function convertirFormatoA_DDMMYYYY(fechaString) {
                if (!fechaString || !fechaString.includes('-')) {
                    return '';
                }
                const partes = fechaString.split('-');
                 if (partes.length !== 3) {
                    return '';
                }
                const [anio, mes, dia] = partes;
                return `${dia}/${mes}/${anio}`;
            }


            // --- LÓGICA PRINCIPAL DE INICIALIZACIÓN ---

            // 1. Obtener el valor original del campo oculto.
            const fechaVueloValue = fechaVueloHidden.val();

            // 2. Determinar si es un rango y establecer los valores iniciales.
            if (fechaVueloValue && fechaVueloValue.includes(' AL ')) {
                // Es un RANGO
                const [fechaInicio, fechaFin] = fechaVueloValue.split(' AL ');
                
                // Convertir formato y asignar valor
                fechaInicioInput.val(convertirFormatoA_YYYYMMDD(fechaInicio));
                fechaFinInput.val(convertirFormatoA_YYYYMMDD(fechaFin));
                
                // Configurar la UI para el rango
                rangoCheckbox.prop('checked', true);
                fechaFinContainer.removeClass('d-none');
                fechaFinInput.prop('required', true);
            } else if (fechaVueloValue) {
                // Es una FECHA ÚNICA
                fechaInicioInput.val(convertirFormatoA_YYYYMMDD(fechaVueloValue));
            }

            /**
             * Función para actualizar el campo oculto con el formato correcto 'dd/mm/YYYY'.
             */
            function actualizarFechaVuelo() {
                const fechaInicioVal = fechaInicioInput.val(); // Formato YYYY-mm-dd
                const fechaFinVal = fechaFinInput.val();     // Formato YYYY-mm-dd

                if (rangoCheckbox.is(':checked') && fechaInicioVal && fechaFinVal) {
                    // Si es rango, convertir ambas fechas y unirlas
                    const fechaInicioFormateada = convertirFormatoA_DDMMYYYY(fechaInicioVal);
                    const fechaFinFormateada = convertirFormatoA_DDMMYYYY(fechaFinVal);
                    fechaVueloHidden.val(`${fechaInicioFormateada} AL ${fechaFinFormateada}`);
                } else if (fechaInicioVal) {
                    // Si es fecha única, solo convertir la de inicio
                    fechaVueloHidden.val(convertirFormatoA_DDMMYYYY(fechaInicioVal));
                } else {
                    // Si no hay fecha, dejar el campo oculto vacío
                    fechaVueloHidden.val('');
                }
                 console.log('Campo oculto actualizado:', fechaVueloHidden.val()); // Para depuración
            }
            
            // --- MANEJADORES DE EVENTOS ---

            // Evento para mostrar/ocultar el campo de fecha de fin
            rangoCheckbox.on('change', function() {
                if ($(this).is(':checked')) {
                    fechaFinContainer.removeClass('d-none');
                    fechaFinInput.prop('required', true);
                } else {
                    fechaFinContainer.addClass('d-none');
                    fechaFinInput.prop('required', false);
                    fechaFinInput.val(''); // Limpiar el valor cuando se desactiva el rango
                }
                actualizarFechaVuelo(); // Actualizar el campo oculto
            });

            // Actualizar el campo oculto cada vez que cambia una fecha
            fechaInicioInput.on('change', actualizarFechaVuelo);
            fechaFinInput.on('change', actualizarFechaVuelo);

            // Validación al enviar el formulario
            $('#registroForm').on('submit', function(e) {
                // Asegurarse de que el campo oculto tenga el valor más reciente
                actualizarFechaVuelo();
                
                if (rangoCheckbox.is(':checked') && !fechaFinInput.val()) {
                    e.preventDefault();
                    alert('Por favor, complete la fecha final del rango.');
                    fechaFinInput.focus();
                }
            });
        });
    </script>
@endsection

@section('content')
    <div class="d-flex justify-content-end gap-3 flex-wrap">
        {{-- Botón para volver a la vista de índice --}}
        <div class="btn-group">
            <a href="{{ route('recomendaciones_viajeros.index') }}" class="btn btn-enviar btn-lg">
                <i class="bi bi-arrow-left-circle-fill"></i> Atrás
            </a>
        </div>
    </div>

    <br>

    <div class="container-fluid shadow-s p-4">
        {{-- Bloque para mostrar errores de validación --}}
        @if ($errors->any())
            <div class="alert alert-danger"><strong>{{ $errors->first() }}</strong></div>
        @endif

        <form class="row g-3" id="registroForm" action="{{ route('recomendaciones_viajeros.update', $registro->id) }}" method="POST">
            @csrf
            @method('PUT')
            <h1 class="fs-3 fw-bolder">Editar Registro de Recomendaciones Viajeros (SSF)</h1>

            <!-- MES -->
            <div class="col-md-4">
                <label for="mes" class="form-label fw-bolder">Mes</label>
                <select name="mes" id="mes" class="form-select fromcss form-select-lg" data-control="select2" required>
                    <option value="">Seleccione un mes...</option>
                    @foreach (\App\Models\EstudioSeguridad::NOMBRE_MESES as $key => $mes)
                        <option value="{{ $mes }}" {{ old('mes', $registro->mes) == $mes ? 'selected' : '' }}>{{ $mes }}</option>
                    @endforeach
                </select>
            </div>

            <!-- FECHA -->
            <div class="col-md-4">
                <label for="fecha" class="form-label fw-bolder">Fecha</label>
                <input type="date" name="fecha" id="fecha" class="form-control form-control-lg" value="{{ old('fecha', $registro->fecha) }}" required>
            </div>

            <!-- NOMBRE COMPLETO -->
            <div class="col-md-4">
                <label for="nombre_completo" class="form-label fw-bolder">Nombre Completo</label>
                <input type="text" name="nombre_completo" id="nombre_completo" class="form-control form-control-lg" placeholder="Nombre Completo" value="{{ old('nombre_completo', $registro->nombre_completo) }}" required>
            </div>

            <!-- NÚMERO -->
            <div class="col-md-4">
                <label for="numero" class="form-label fw-bolder">Número de Recomendación</label>
                <input type="number" name="numero" id="numero" class="form-control form-control-lg" placeholder="Ej: 12345" value="{{ old('numero', $registro->numero) }}" required>
            </div>

            <!-- ITINERARIO -->
            <div class="col-md-4">
                <label for="itinerario" class="form-label fw-bolder">Itinerario</label>
                <input type="text" name="itinerario" id="itinerario" class="form-control form-control-lg" placeholder="País Origen - País Destino" value="{{ old('itinerario', $registro->itinerario) }}" required>
            </div>

            <!-- Campo oculto para fecha_vuelo -->
            <input type="hidden" name="fecha_vuelo" id="fecha_vuelo" value="{{ $registro->fecha_vuelo }}">

            <!-- FECHA DE VUELO -->
            <div class="col-md-4">
                <label for="fecha_vuelo_inicio" class="form-label fw-bolder">Fecha de Vuelo</label>
                <input type="date" name="fecha_vuelo_inicio" id="fecha_vuelo_inicio" class="form-control form-control-lg" required>
            </div>
            
            <div class="col-md-4 align-content-center">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="rango_fechas" name="rango_fechas">
                    <label class="form-check-label fw-bolder" for="rango_fechas">
                        ¿Desea agregar un Rango a la Fecha de Vuelo?
                    </label>
                </div>
            </div>
            
            <div class="col-md-4 d-none" id="fecha_vuelo_fin_container">
                <label for="fecha_vuelo_fin" class="form-label fw-bolder">Fecha Fin</label>
                <input type="date" name="fecha_vuelo_fin" id="fecha_vuelo_fin" class="form-control form-control-lg">
            </div>

            <!-- BOTONES DE ACCIÓN -->
            <div class="col-12 d-flex justify-content-end mt-4">
                <a href="{{ route('recomendaciones_viajeros.index') }}" class="btn btn-lg btn-cancelar mx-2">Cancelar</a>
                <button type="submit" class="btn btn-lg btn-enviar">Actualizar</button>
            </div>
        </form>
    </div>
@endsection