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

@section('content')
<link href="{{ asset('assets/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/css/style.bundle.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .border {
            border: 2px solid #000000;
        }

        .fil {
            display: flex;
            flex-wrap: wrap;
            background-color: #f8f9fa;
            border-radius: 10px;
            border: 2px solid #e3e0fa;
            padding: 1em;
        }

        .fil2 {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            border-radius: 10px;
            padding: 1em;
        }

        .itinerario-number {
            border: 2px solid #e3e0fa;
            border-radius: 10px;
            padding: 0.7rem;
            padding-left: 4rem;
            width: 1rem;
            text-align: center;
        }

        .itinerario-container {
            display: flex;
            text-align: center;
        }

        .delete-button {
            position: absolute;
            right: 0rem;
            bottom: -3rem;
            background: linear-gradient(360deg, #7a00e6, #8912ff, #a35bff) !important;
            border-radius: 10px !important;
            box-shadow: 0px 5px 15px rgba(61, 88, 141, 0.25) !important;
            color: white !important;
        }
    </style>
    <div class="">
        <div class=" d-flex justify-content-end">
            <div class="btn-group" role="group" aria-label="">
                <a href="{{ route('viajeros.index') }}" type="button" class="btn btn-back btn-lg ">
                    <i class="bi bi-arrow-left-circle-fill"></i> Atrás
                </a>
            </div>
        </div>
        <br>
    </div>
    <br>
    <div class="container-fluid shadow-s p-4">
        <form class="row g-3" action={{ route('viajeros.editBack', ['id' => $viajero->id]) }} method="post">
            @csrf
            @foreach ($itinerarios as $itiner)
                <input type="hidden" name="idItinerarios[]" value="{{ $itiner->id }}">
            @endforeach
            <input type="hidden" name="idViajeros" value="{{ $viajero->id }}">

            <h1 class="fs-3x fw-bolder">Editar registro de Viajero</h1>

            <!-- aprobacion de registro -->
            @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" value="1" id="aprobacion"
                                {{ $viajero->aprobacion === 1 ? 'checked' : '' }}>
                            <div>
                                <img src="{{ asset('img/exitoso.png') }}" width="15px" alt="">
                                <label class="fs-6" for="flexRadioDefault1">
                                    Aprobado
                                </label>
                            </div>
                        </div>
                        <div class="form-check m-2">
                            <input class="form-check-input" type="radio" name="aprobacion" value="0" id="aprobacion"
                                {{ $viajero->aprobacion === 0 ? 'checked' : '' }}>
                            <div>
                                <img src="{{ asset('img/error.png') }}" width="15px" alt="">
                                <label class="fs-6" for="flexRadioDefault1">
                                    Rechazado
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <br>
            @endhasanyrole

            <!-- fin aprobacion de registro -->
            <div class="col-md-4">
                <label for="tipo_recurso" class="form-label fw-bolder">Tipo de Recurso</label>
                <select name="tipo_recurso" id="tipo_recurso" class="form-select form-select-lg fromcss"
                    data-control="select2" data-placeholder="Selecciona un tipo de recurso..." required>
                    <option value="">Selecciona un tipo de recurso...</option>
                    <option selected value="Viajero">Viajero</option>
                </select>
            </div>
            <div class="col-md-4">
                <label for="entidad_id" class="form-label fw-bolder">Entidades</label>
                <select name="entidad_id" id="entidad_id" class="form-select form-select-lg fromcss" data-control="select2"
                    data-placeholder="Selecciona una entidad..." required>
                    <option value="">Selecciona una entidad...</option>
                    <option selected value={{ $viajero->entidad_id }}>{{ $viajero->entidad->nombre }}</option>
                    @foreach ($entidades as $entidad)
                        <option value={{ $entidad->id }}>{{ $entidad->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label for="pais_id" class="form-label fw-bolder">Nacionalidad</label>
                <select name="pais_id" id="pais_id" class="form-select form-select-lg fromcss" data-control="select2"
                    data-placeholder="Selecciona su país..." required>
                    <option value="">Selecciona su país...</option>
                    <option selected value={{ $viajero->pais_id }}>{{ $viajero->pais->nombre }}</option>
                    @foreach ($paises as $pais)
                        @if ($pais->id !== $viajero->paises_id)
                            <option value={{ $pais->id }}>{{ $pais->nombre }}</option>
                        @endif
                    @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={{ $viajero->nombre }} required>
            </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="{{ $viajero->apellido }}" required>
            </div>
            <div class="col-md-4">
                <label for="email" class="form-label fw-bolder">Correo Electronico</label>
                <input type="email" class="form-control fromcss form-control-lg" name="email" id="email"
                    value={{ $viajero->email }} required>
            </div>
            <div class="col-md-4">
                <label for="numero_contacto" class="form-label fw-bolder">Numero de Contacto</label>
                <input type="number" class="form-control fromcss form-control-lg" name="numero_contacto"
                    id="numero_contacto" value={{ $viajero->numero_contacto }} required>
            </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={{ $viajero->pnr }} required>
            </div>
            <div class="col-md-4">
                <label for="tipo_viaje" class="form-label fw-bolder">Tipo Viaje</label>
                <select name="tipo_viaje" id="tipo_viaje" class="form-select form-select-lg fromcss"
                    data-control="select2" data-placeholder="Selecciona un tipo viaje..." required>
                    <option value="">Selecciona c...</option>
                    <option selected value={{ $viajero->tipo_viaje }}>{{ $viajero->tipo_viaje }}</option>
                    <option value="Domestico">Domestico</option>
                </select>
            </div>
            <!-- País de salida -->
            <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"
                    data-control="select2" data-placeholder="Seleccione País de salida..." required>
                    <option></option>
                    @foreach ($paises as $pais)
                        <option value="{{ $pais->id }}"
                            {{ $viajero->pais_salida_id == $pais->id ? 'selected' : '' }}>
                            {{ $pais->nombre }}
                        </option>
                    @endforeach
                </select>
                @error('pais_salida_id')
                    <div class="text-danger" style="color: red;">{{ $message }}</div>
                @enderror
            </div>

            <!-- Ciudad de salida -->
            <div class="col-md-4">
                <label for="ciudad_salida_id" class="form-label fw-bolder">Ciudad de salida</label>
                <select name="ciudad_salida_id" id="ciudad_salida_id" class="form-control form-control-lg"
                    data-control="select2" data-placeholder="Seleccione Ciudad de salida..." required>
                    <option value="">Seleccione Ciudad de salida...</option>
                    @if ($viajero->pais_salida_id)
                        @foreach ($ciudades as $ciudad)
                            @if ($ciudad->id_pais == $viajero->pais_salida_id)
                                <option value="{{ $ciudad->id }}"
                                    {{ $viajero->ciudad_salida_id == $ciudad->id ? 'selected' : '' }}>
                                    {{ $ciudad->nombre }}
                                </option>
                            @endif
                        @endforeach
                    @endif
                </select>
                @error('ciudad_salida_id')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>

            <!-- País de destino -->
            <div class="col-md-4">
                <label for="pais_destino_id" class="form-label fw-bolder">País de destino</label>
                <select name="pais_destino_id" id="pais_destino_id" class="form-select form-select-lg fromcss"
                    data-control="select2" data-placeholder="Selecciona país de destino..." required>
                    <option value="">Selecciona país de destino...</option>
                    <option value="{{ $viajero->pais_destino->id }}" selected>{{ $viajero->pais_destino->nombre }}
                    </option>
                    @foreach ($paises as $pais)
                        @if ($pais->id !== $viajero->pais_destino->id)
                            <option value="{{ $pais->id }}">{{ $pais->nombre }}</option>
                        @endif
                    @endforeach
                </select>
            </div>

            <!-- Ciudad de destino -->
            <div class="col-md-4">
                <label for="ciudad_destino_id" class="form-label fw-bolder">Ciudad de destino</label>
                <select name="ciudad_destino_id" id="ciudad_destino_id" class="form-control form-control-lg"
                    data-control="select2" data-placeholder="Seleccione Ciudad de destino..." required>
                    <option value="">Seleccione Ciudad de destino...</option>
                    @if ($viajero->pais_destino_id)
                        @foreach ($ciudades as $ciudad)
                            @if ($ciudad->id_pais == $viajero->pais_destino_id)
                                <option value="{{ $ciudad->id }}"
                                    {{ $viajero->ciudad_destino_id == $ciudad->id ? 'selected' : '' }}>
                                    {{ $ciudad->nombre }}
                                </option>
                            @endif
                        @endforeach
                    @endif
                </select>
                @error('ciudad_destino_id')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-4" id="contentArea">
                <label for="inputEmail4" class="form-label fw-bolder">Duracion de Estadia</label>
                <input type="number" class="form-control fromcss form-control-lg" name="duracion_estadia"
                    id="duracion_estadia" value={{ $viajero->duracion_estadia }} required>
            </div>
            <div class="col-md-4">
                <label for="" class="form-label fw-bolder">Estado del flujo de Validacion</label>
                <select name="estado_flujo_validacion" id="estado_flujo_validacion"
                    class="form-select form-select-lg fromcss" data-control="select2"
                    data-placeholder="Selecciona un estado..." required>
                    <option selected value={{ $viajero->estado_flujo_validacion }}>
                        {{ $viajero->estado_flujo_validacion }}</option>
                    <option value="Aprobado">Aprobado</option>
                    <option value="Rechazado">Rechazado</option>
                </select>
            </div>
            <div class="col-md-4">
                <label for="inputEmail4" class="form-label fw-bolder">Riesgo de Viaje</label>
                <input type="number" class="form-control fromcss form-control-lg" name="riesgo_viaje_id"
                    id="riesgo_viaje_id" value={{ $viajero->riesgo_viaje_id }} required>
            </div>
            <div class="border"></div>
            @php
                $index = 0;
            @endphp

            {{-- Inicio de Itinerario de viajero --}}
            <p style="color: black;">Itinerario</p>
            @foreach ($viajero->itinerario as $itinerario_viajeros)
                <div class="fil">
                    <div class="col-md-6 itinerario-container">
                        <label class="form-label fw-bolder itinerario-number" id="numeroItinerario">1.</label>
                        <input type="text" class="form-control fromcss form-control-lg" name="itinerario[]"
                            id="itinerario" value="{{ $itinerario_viajeros->itinerario }}" oninput="validateInput(this)"
                            required>
                    </div>
                    <div class="col-md-2">
                        <input type="text" class="form-control fromcss form-control-lg" name="servicio[]"
                            id="servicio" value={{ $itinerario_viajeros->servicio }} oninput="validateInput(this)"
                            required>
                    </div>
                    <div class="col-md-2">
                        <input type="text" class="form-control fromcss form-control-lg" name="numero_vuelo[]"
                            id="numero_vuelo" value={{ $itinerario_viajeros->numero_vuelo }}
                            oninput="validateNvuelo(this)" required>
                    </div>
                    <div class="col-md-2">
                        <select name="proveedor_id[]" id="proveedor_id" class="form-select form-select-lg fromcss"
                            data-control="select2" data-placeholder="Selecciona una opcion">
                            <option selected value={{ $itinerario_viajeros->proveedor_id }}>
                                {{ $itinerario_viajeros->proveedor->nombre }}</option>
                            @foreach ($proveedores as $proveedor)
                                <option value={{ $proveedor->id }}>{{ $proveedor->nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <input type="date" class="form-control fromcss form-control-lg" name="fecha_inicio[]"
                            id="fecha_inicio_{{ $index }}" value={{ $itinerario_viajeros->fecha_inicio }}
                            onchange="validateDates('fecha_inicio_{{ $index }}', 'fecha_fin_{{ $index }}')"
                            required>
                    </div>
                    <div class="col-md-3">
                        <input type="date" class="form-control fromcss form-control-lg" name="fecha_fin[]"
                            id="fecha_fin_{{ $index }}" value={{ $itinerario_viajeros->fecha_fin }}
                            onchange="validateDates('fecha_inicio_{{ $index }}', 'fecha_fin_{{ $index }}')"
                            required>
                    </div>
                    <div class="col-md-3">
                        <select name="hora_inicio[]" id="hora_inicio" class="form-select form-select-lg fromcss">
                            <option selected value={{ $itinerario_viajeros->hora_inicio }}>
                                {{ $itinerario_viajeros->hora_inicio }}</option>
                            <option value="01:00">01:00</option>
                            <option value="02:00">02:00</option>
                            <option value="03:00">03:00</option>
                            <option value="04:00">04:00</option>
                            <option value="05:00">05:00</option>
                            <option value="06:00">06:00</option>
                            <option value="07:00">07:00</option>
                            <option value="08:00">08:00</option>
                            <option value="09:00">09:00</option>
                            <option value="10:00">10:00</option>
                            <option value="11:00">11:00</option>
                            <option value="12:00">12:00</option>
                            <option value="13:00">13:00</option>
                            <option value="14:00">14:00</option>
                            <option value="15:00">15:00</option>
                            <option value="16:00">16:00</option>
                            <option value="17:00">17:00</option>
                            <option value="18:00">18:00</option>
                            <option value="19:00">19:00</option>
                            <option value="20:00">20:00</option>
                            <option value="21:00">21:00</option>
                            <option value="22:00">22:00</option>
                            <option value="23:00">23:00</option>
                            <option value="24:00">24:00</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select name="hora_fin[]" id="hora_fin" class="form-select form-select-lg fromcss">
                            <option selected value={{ $itinerario_viajeros->hora_fin }}>
                                {{ $itinerario_viajeros->hora_fin }}</option>
                            <option value="01:00">01:00</option>
                            <option value="02:00">02:00</option>
                            <option value="03:00">03:00</option>
                            <option value="04:00">04:00</option>
                            <option value="05:00">05:00</option>
                            <option value="06:00">06:00</option>
                            <option value="07:00">07:00</option>
                            <option value="08:00">08:00</option>
                            <option value="09:00">09:00</option>
                            <option value="10:00">10:00</option>
                            <option value="11:00">11:00</option>
                            <option value="12:00">12:00</option>
                            <option value="13:00">13:00</option>
                            <option value="14:00">14:00</option>
                            <option value="15:00">15:00</option>
                            <option value="16:00">16:00</option>
                            <option value="17:00">17:00</option>
                            <option value="18:00">18:00</option>
                            <option value="19:00">19:00</option>
                            <option value="20:00">20:00</option>
                            <option value="21:00">21:00</option>
                            <option value="22:00">22:00</option>
                            <option value="23:00">23:00</option>
                            <option value="24:00">24:00</option>
                        </select>
                    </div>
                    <br>
                    <div id="latDiv"></div>
                </div>
                @php
                    $index++;
                @endphp
            @endforeach
            {{-- Final Itinerario Viajeros --}}
            <br>
            <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>
                </div>
            </div>
        </form>
    </div>
    <script>
        function validateInput(input) {
            var value = input.value;
            var cleanValue = value.replace(/[0-9]/g, '');
            input.value = cleanValue;
        }

        function validateNvuelo(input) {
            var value = input.value;
            var cleanValue = value.replace(/[^A-Z0-9]/g, '');
        }

        function validateDates(idInicio, idFin) {
            var fechaInicio = new Date(document.getElementById(idInicio).value);
            var fechaFin = new Date(document.getElementById(idFin).value);

            if (fechaInicio > fechaFin) {
                alert('La Fecha Fin no puedes ser Anterior a la fecha de Inicio');
                document.getElementById(idFin).value = document.getElementById(idInicio).value;
            }
        }
    </script>

@endsection