@extends('layouts.index', ['subHeader' => 'Nuevo Viajero'])

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

@section('content')
    <div class="d-flex justify-content-end">
        <div class="btn-group" role="group" aria-label="">
            <a href="{{ route('viajeros.uploadView') }}" type="button" class="btn btn-enviar btn-lg btn-block">
                <i class="bi bi-arrow-left-circle-fill"></i> Subir Excel
            </a>
        </div>
        <div class="btn-group" role="group" aria-label="">
            <a href="{{ route('viajeros.index') }}" type="button" class="btn btn-enviar btn-lg btn-block">
                <i class="bi bi-arrow-left-circle-fill"></i> Atrás
            </a>
        </div>
    </div>
    <br><br>
    <div class="container-fluid shadow-s p-4">
        @if ($errors->any())
            <div class="col-md-12">
                <div class="alert alert-danger">
                    <strong>{{ $errors->first() }}</strong>
                </div>
            </div>
        @endif
        <form class="row g-3" action="{{ route('viajeros.store') }}" method="POST">
            @csrf
            <h1 class="fs-3 fw-bolder">Nuevo registro de Viajero</h1>

            <!-- Datos básicos del viajero -->
            <div class="visually-hidden">
                <input type="text" name="tipo_recurso" id="tipo_recurso" value="Viajero" disabled>
            </div>

            @hasanyrole('admin|Super Admin')
                <span class="fs-5">Aprobación de registro</span>

                <div class="mt-2 d-flex flex-wrap">
                    <div class="d-flex flex-wrap">
                        <div class="form-check m-2">
                            <input class="form-check-input" type="radio" name="aprobacion" id="aprobacion1" value="1"
                                checked>
                            <div>
                                <img src="{{ asset('img/exitoso.png') }}" width="15px" alt="">
                                <label class="fs-6" for="aprobacion1">
                                    Aprobado
                                </label>
                            </div>
                        </div>
                        <div class="form-check m-2">
                            <input class="form-check-input" type="radio" name="aprobacion" id="aprobacion2" value="0">
                            <div>
                                <img src="{{ asset('img/error.png') }}" width="15px" alt="">
                                <label class="fs-6" for="aprobacion2">
                                    Rechazado
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                @error('aprobacion')
                    <div class="text-danger">@lang($message)</div>
                @enderror
                <hr>
            @endhasanyrole

            <div class="col-md-4">
                <label for="entidad_id" class="form-label fw-bolder">Entidad</label>
                <select name="entidad_id" id="entidad_id"
                    class="form-select form-select-lg fromcss" data-control="select2"
                    data-placeholder="Seleccione la entidad..." required>
                    <option></option>
                    @foreach ($entidades as $entidad)
                        <option value="{{ $entidad->id }}">{{ $entidad->nombre }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-4">
                <label for="pais_entidad_id" class="form-label fw-bolder">País de la Entidad</label>
                <select name="pais_entidad_id" id="pais_entidad_id"
                    class="form-select form-select-lg fromcss" data-control="select2"
                    data-placeholder="Seleccione el país de la entidad..." required>
                    <option></option>
                    @foreach ($paises as $pais)
                        <option value="{{ $pais->id }}">{{ $pais->nombre }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-4">
                <label for="nombre" class="form-label fw-bolder">Nombre</label>
                <input type="text" class="form-control fromcss form-control-lg" name="nombre" id="nombre"
                    value="{{ old('nombre') }}" placeholder="Ingrese el nombre..." required>
                @error('nombre')
                    <div class="text-danger">@lang($message)</div>
                @enderror
            </div>

            <div class="col-md-4">
                <label for="apellido" class="form-label fw-bolder">Apellido</label>
                <input type="text" class="form-control fromcss form-control-lg" name="apellido"
                    id="apellido" value="{{ old('apellido') }}" placeholder="Ingrese el apellido...">
                @error('apellido')
                    <div class="text-danger">@lang($message)</div>
                @enderror
            </div>

            <div class="col-md-4">
                <label for="email" class="form-label fw-bolder">Email</label>
                <input type="text" class="form-control fromcss form-control-lg" name="email" id="email"
                    value="{{ old('email') }}" placeholder="Ingrese el email..." required>
                @error('email')
                    <div class="text-danger">@lang($message)</div>
                @enderror
            </div>

            <div class="col-md-4">
                <label for="numero_contacto" class="form-label fw-bolder">Número de Contacto</label>
                <input type="phone" class="form-control fromcss form-control-lg" name="numero_contacto" id="numero_contacto"
                    value="{{ old('numero_contacto') }}" placeholder="Ingrese el número de contacto...">
                @error('numero_contacto')
                    <div class="text-danger">@lang($message)</div>
                @enderror
            </div>

            <div class="col-md-4">
                <label for="pnr" class="form-label fw-bolder">PNR</label>
                <input type="text" class="form-control fromcss form-control-lg" name="pnr" id="pnr"
                    value="{{ old('pnr') }}" placeholder="Ingrese el PNR...">
                @error('pnr')
                    <div class="text-danger">@lang($message)</div>
                @enderror
            </div>

            <div class="col-md-4">
                <label for="tipo_viaje" class="form-label fw-bolder">Tipo de Viaje</label>
                <select name="tipo_viaje" id="tipo_viaje"
                    class="form-select form-select-lg fromcss" data-control="select2"
                    data-placeholder="Seleccione el tipo de viaje..." required>
                    <option></option>
                    @foreach (\App\Models\Viajero::TIPOS_VIAJE as $id => $nombre)
                        <option value="{{ $id }}">{{ $nombre }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-4">
                <label for="pais_salida_id" class="form-label fw-bolder">País de salida</label>
                <select name="pais_salida_id" id="pais_salida_id"
                    class="form-select form-select-lg fromcss" data-control="select2"
                    data-placeholder="Seleccione el país de salida..." required>
                    <option></option>
                    @foreach ($paises as $pais)
                        <option value="{{ $pais->id }}">{{ $pais->nombre }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-4">
                <label for="duracion_estadia" class="form-label fw-bolder">Duracion Estadia</label>
                <input type="number" class="form-control fromcss form-control-lg" name="duracion_estadia" id="duracion_estadia"
                    value="{{ old('duracion_estadia') }}" placeholder="Ingrese la duracion de la estadia...">
                @error('duracion_estadia')
                    <div class="text-danger">@lang($message)</div>
                @enderror
            </div>

            <div class="col-md-4">
                <label for="riesgo_viaje_id" class="form-label fw-bolder">Riesgo máx de Viaje</label>
                <select name="riesgo_viaje_id" id="riesgo_viaje_id"
                    class="form-select form-select-lg fromcss" data-control="select2"
                    data-placeholder="Seleccione el riesgo máx de viaje..." required>
                    <option></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>

            <div class="col-md-4">
                <label for="estado_flujo_validacion" class="form-label fw-bolder">Estado de validación</label>
                <select name="estado_flujo_validacion" id="estado_flujo_validacion"
                    class="form-select form-select-lg fromcss" data-control="select2"
                    data-placeholder="Seleccione el estado de validación..." required>
                    <option></option>
                    @foreach (\App\Models\Viajero::ESTADO_VALIDACION as $id => $nombre)
                        <option value="{{ $id }}">{{ $nombre }}</option>
                    @endforeach
                </select>
            </div>


            <!-- Sección para agregar itinerarios -->
            <div id="itinerarios_container">
            </div>

            <div class="col-12 d-flex justify-content-end mt-5">
                <div class="flex-row g-4 w-100 justify-content-end">
                    <a href="{{ route('viajeros.index') }}" class="btn btn-lg mb-3 btn-cancelar">Cancelar</a>
                    <button class="btn btn-lg mb-3 btn-enviar" type="submit">Guardar</button>
                    <button type="button" class="btn btn-lg mb-3 btn-primary" id="btn-add-itinerario">Agregar Itinerario</button>
                </div>
            </div>
        </form>
    </div>

    <script>
        // Pasar los datos necesarios a JavaScript desde Blade
        const PAISES = @json($paises);
        const PROVEEDORES = @json($proveedores);


        $(document).ready(function() {
            var itinIndex = 1; // Iniciar en 1 ya que 0 es el itinerario predeterminado

            $('#btn-add-itinerario').click(function() {
                var container = $('#itinerarios_container');
                var index = itinIndex++;

                var template = `
                    <div class="itinerario card mb-3" id="itinerario_${index}">
                        <div class="registros-head-card">
                            <button type="button" class="btn btn-link text-left w-100 btn-toggle-collapse title-head-registro" data-index="${index}">
                                Itinerario ${index} <i class="bi bi-caret-down-fill"></i>
                            </button>
                            <button type="button" class="btn btn-danger btn-remove-itinerario float-right me-2"><i class="fs-1 bi bi-trash"></i></button>
                        </div>
                        <div id="collapse_${index}" class="collapse show">
                            <div class="card-body">
                                <div class="row g-3">
                                    <!-- Campos de itinerario -->
                                    <div class="col-md-4">
                                        <label for="itinerario_${index}_itinerario" class="form-label fw-bolder">Itinerario</label>
                                        <input type="text" class="form-control fromcss form-control-lg" name="itinerario[${index}][itinerario]" id="itinerario_${index}_itinerario" placeholder="Ingrese el itinerario...">
                                    </div>

                                    <div class="col-md-4">
                                        <label for="itinerario_${index}_pais_destino_id" class="form-label fw-bolder">País Destino</label>
                                        <select name="itinerario[${index}][pais_destino_id]" id="itinerario_${index}_pais_destino_id" class="form-select form-select-lg fromcss" data-control="select2" data-placeholder="Seleccione el país destino..." required>
                                            <option></option>
                                            ${PAISES.map(pais => `<option value="${pais.id}">${pais.nombre}</option>`).join('')}
                                        </select>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="itinerario_${index}_fecha_inicio" class="form-label fw-bolder">Fecha de Inicio</label>
                                        <input type="date" class="form-control fromcss form-control-lg" name="itinerario[${index}][fecha_inicio]" id="itinerario_${index}_fecha_inicio" required>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="itinerario_${index}_fecha_fin" class="form-label fw-bolder">Fecha de Fin</label>
                                        <input type="date" class="form-control fromcss form-control-lg" name="itinerario[${index}][fecha_fin]" id="itinerario_${index}_fecha_fin" required>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="itinerario_${index}_hora_inicio" class="form-label fw-bolder">Hora de Inicio</label>
                                        <input type="time" class="form-control fromcss form-control-lg" name="itinerario[${index}][hora_inicio]" id="itinerario_${index}_hora_inicio" placeholder="Ingrese la hora de inicio..." required>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="itinerario_${index}_hora_fin" class="form-label fw-bolder">Hora de Fin</label>
                                        <input type="time" class="form-control fromcss form-control-lg" name="itinerario[${index}][hora_fin]" id="itinerario_${index}_hora_fin" placeholder="Ingrese la hora de fin..." required>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="itinerario_${index}_servicio" class="form-label fw-bolder">Servicio</label>
                                        <select name="itinerario[${index}][servicio]" id="itinerario_${index}_servicio" class="form-select form-select-lg fromcss" data-control="select2" data-placeholder="Ingrese el servicio..." required>
                                            <option></option>
                                            @foreach (\App\Models\Viajero::SERVICIOS as $id => $nombre)
                                                <option value="{{ $id }}">{{ $nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="itinerario_${index}_alojamiento" class="form-label fw-bolder">Alojamiento</label>
                                        <input type="text" class="form-control fromcss form-control-lg" name="itinerario[${index}][alojamiento]" id="itinerario_${index}_alojamiento" placeholder="Ingrese el alojamiento...">
                                    </div>

                                    <div class="col-md-4">
                                        <label for="itinerario_${index}_numero_vuelo" class="form-label fw-bolder">Número de Vuelo</label>
                                        <input type="text" class="form-control fromcss form-control-lg" name="itinerario[${index}][numero_vuelo]" id="itinerario_${index}_numero_vuelo" placeholder="Ingrese el número de vuelo...">
                                    </div>

                                    <div class="col-md-4">
                                        <label for="itinerario_${index}_proveedor_id" class="form-label fw-bolder">Proveedor</label>
                                        <select name="itinerario[${index}][proveedor_id]" id="itinerario_${index}_proveedor_id" class="form-select form-select-lg fromcss" data-control="select2" data-placeholder="Seleccione el proveedor..." required>
                                            <option></option>
                                            ${PROVEEDORES.map(proveedor => `<option value="${proveedor.id}">${proveedor.nombre}</option>`).join('')}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `;

                container.append(template);

                // Inicializar Select2 para los nuevos elementos agregados
                $(`#itinerario_${index}_pais_destino_id`).select2({
                    placeholder: 'Seleccione el país destino...'
                });
                $(`#itinerario_${index}_proveedor_id`).select2({
                    placeholder: 'Seleccione el proveedor...'
                });
                $(`#itinerario_${index}_servicio`).select2({
                    placeholder: 'Seleccione el servicio...'
                });
            });

            $(document).on('click', '.btn-remove-itinerario', function() {
                $(this).closest('.itinerario').remove();
                updateItinerarioIndexes();
            });

            $(document).on('click', '.btn-toggle-collapse', function() {
                var index = $(this).data('index');
                $('#collapse_' + index).toggle();
            });

            // Función para actualizar los índices de los itinerarios
            function updateItinerarioIndexes() {
                $('#itinerarios_container .itinerario').each(function(index, element) {
                    var newIndex = index; // Ajustar el índice
                    $(element).attr('id', `itinerario_${newIndex}`);
                    $(element).find('button.btn-toggle-collapse').attr('data-index', newIndex).html(
                        `Itinerario ${newIndex + 1} <i class="bi bi-caret-down-fill"></i>`
                    );
                    $(element).find('.collapse').attr('id', `collapse_${newIndex}`);

                    // Actualizar los nombres e IDs de los campos select
                    $(element).find('select[name^="itinerario["]').each(function() {
                        var fieldName = $(this).attr('name').replace(/\[\d+\]/, `[${newIndex}]`);
                        var fieldId = $(this).attr('id').replace(/_\d+_/, `_${newIndex}_`);
                        $(this).attr('name', fieldName).attr('id', fieldId);
                    });

                    // Actualizar los nombres e IDs de los campos input
                    $(element).find('input[name^="itinerario["]').each(function() {
                        var fieldName = $(this).attr('name').replace(/\[\d+\]/, `[${newIndex}]`);
                        var fieldId = $(this).attr('id').replace(/_\d+_/, `_${newIndex}_`);
                        $(this).attr('name', fieldName).attr('id', fieldId);
                    });
                });
            }

        });
    </script>
@endsection