@extends('layouts.index', ['subHeader' => 'Nuevo 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> / Nuevo registro</span>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            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 actualizar el campo oculto
            function actualizarFechaVuelo() {
                if (rangoCheckbox.is(':checked') && fechaFinInput.val()) {
                    fechaVueloHidden.val(`${fechaInicioInput.val()} AL ${fechaFinInput.val()}`);
                } else {
                    fechaVueloHidden.val(fechaInicioInput.val());
                }
            }

            // Mostrar/ocultar campo de fecha 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('');
                }
                actualizarFechaVuelo();
            });

            // Actualizar campo oculto al cambiar fechas
            fechaInicioInput.on('change', actualizarFechaVuelo);
            fechaFinInput.on('change', actualizarFechaVuelo);

            // Validación adicional al enviar el formulario
            $('#registroForm').on('submit', function(e) {
                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 subir un archivo Excel, como en el ejemplo --}}
        <div class="btn-group">
            <a href="{{ route('recomendaciones_viajeros.uploadView') }}" class="btn btn-enviar btn-lg">
                <i class="bi bi-file-earmark-spreadsheet"></i> Subir Excel
            </a>
        </div>
        {{-- 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.store') }}" method="POST">
            @csrf
            <h1 class="fs-3 fw-bolder">Nuevo 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') == $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') }}" 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') }}" 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') }}" 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') }}" required>
            </div>

            <!-- Campo oculto para fecha_vuelo -->
            <input type="hidden" name="fecha_vuelo" id="fecha_vuelo" value="{{ old('fecha_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" value="{{ old('fecha_vuelo_inicio') }}" 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" value="{{ old('fecha_vuelo_fin') }}">
            </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">Guardar</button>
            </div>
        </form>
    </div>
@endsection