@extends('layouts.app')

@section('title', 'Crear Rutas')

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

    <p>Bienvenido a esta vista para Crear registro de Rutas</p>
    <div class="card">
        <div class="card-body">
            <form action="{{ route('rutas_vuelo.store') }}" method="POST" id="form_crea_ruta">
                @csrf
                <div class="row">
                    <div class="col-12 col-md-2 mb-2">
                        <div class="form-group">
                            <label for="vuelo_id">Número de Vuelo:</label>
                            <select name="vuelo_id" id="vuelo_id" class="form-select" required>
                                @foreach($vuelos as $vuelo)
                                    <option value="{{ $vuelo->id }}">{{ $vuelo->numero_vuelo }}</option>
                                @endforeach
                            </select>
                            @error('vuelo_id')
                                    <small class="text-danger">
                                        {{ $message }}
                                    </small>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-3 mb-2">
                        <div class="form-group">
                            <label for="destino_partida_id">Destino Partida:</label>
                            <select name="destino_partida_id" id="destino_partida_id" class="form-select" required>
                                @foreach($destinos as $destino)
                                    <option value="{{ $destino->id }}">{{ $destino->abreviatura_destino }}</option>
                                @endforeach
                            </select>
                            @error('destino_partida_id')
                                    <small class="text-danger">
                                        {{ $message }}
                                    </small>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-2 mb-2">
                        <div class="form-group">
                            <label for="hora_salida">Hora Salida:</label>
                            <input type="time" id="hora_salida" name="hora_salida" class="form-control" required>
                            @error('hora_salida')
                                    <small class="text-danger">
                                        {{ $message }}
                                    </small>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-3 mb-2">
                        <div class="form-group">
                            <label for="destino_llegada_id">Destino Llegada:</label>
                            <select name="destino_llegada_id" id="destino_llegada_id" class="form-select" required>
                                @foreach($destinos as $destino)
                                    <option value="{{ $destino->id }}">{{ $destino->abreviatura_destino }}</option>
                                @endforeach
                            </select>
                            @error('destino_llegada_id')
                                    <small class="text-danger">
                                        {{ $message }}
                                    </small>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-2 mb-2">
                        <div class="form-group">
                            <label for="hora_llegada">Hora Llegada:</label>
                            <input type="time" id="hora_llegada" name="hora_llegada" class="form-control" required>
                            @error('hora_llegada')
                                    <small class="text-danger">
                                        {{ $message }}
                                    </small>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-12 col-md-2 mb-2">
                        <div class="form-group">
                            <label for="duracion_vuelo">Duración de Vuelo:</label>
                            <input type="time" id="duracion_vuelo" name="duracion_vuelo" class="form-control" required>
                            @error('duracion_vuelo')
                                    <small class="text-danger">
                                        {{ $message }}
                                    </small>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-2 mb-2">
                        <div class="form-group">
                            <label for="duracion_plataforma">Duración en Plataforma:</label>
                            <input type="time" id="duracion_plataforma" name="duracion_plataforma" class="form-control" required>
                            @error('duracion_plataforma')
                                    <small class="text-danger">
                                        {{ $message }}
                                    </small>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-2 mb-2">
                        <div class="form-group">
                            <label for="orden">Orden:</label>
                            <input type="number" id="orden" name="orden" class="form-control" required>
                            @error('orden')
                                    <small class="text-danger">
                                        {{ $message }}
                                    </small>
                            @enderror
                        </div>
                    </div>
                </div>
                <div id="destinos_container">
                </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">Crear Ruta</button>
                            <a href="{{ route('rutas_vuelo.index') }}" 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_destino"><i class="fa-solid fa-plus"></i></button>
                            <button type="button" class="btn btn-danger w-50 w-md-auto" id="eliminar_destino"><i class="fa-solid fa-minus"></i></button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('form_crea_ruta');
            const destinosContainer = document.getElementById('destinos_container');
            const agregarDestinoBtn = document.getElementById('agregar_destino');
            const eliminarDestinoBtn = document.getElementById('eliminar_destino');
            let destinoCount = 0;

            form.addEventListener('submit', function(e) {
                e.preventDefault();
                const formData = new FormData(form);

                fetch(form.action, {
                    method: form.method,
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-Token': document.querySelector('input[name="_token"]').value
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            title: '¡Éxito!',
                            text: data.success,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = URLs+'/rutas_vuelo';
                            }
                        });
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
            });

            agregarDestinoBtn.addEventListener('click', function() {
                destinoCount++;
                const destinoHTML = `
                    <div class="row" id="destino_${destinoCount}">
                        <div class="col-12 col-md-3 mb-2">
                            <div class="form-group">
                                <label for="destinos[${destinoCount}][destino_partida_id]">Destino Partida:</label>
                                <select name="destinos[${destinoCount}][destino_partida_id]" class="form-select" required>
                                    @foreach($destinos as $destino)
                                        <option value="{{ $destino->id }}">{{ $destino->abreviatura_destino }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-md-2 mb-2">
                            <div class="form-group">
                                <label for="destinos[${destinoCount}][hora_salida]">Hora Salida:</label>
                                <input type="time" name="destinos[${destinoCount}][hora_salida]" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-12 col-md-3 mb-2">
                            <div class="form-group">
                                <label for="destinos[${destinoCount}][destino_llegada_id]">Destino Llegada:</label>
                                <select name="destinos[${destinoCount}][destino_llegada_id]" class="form-select" required>
                                    @foreach($destinos as $destino)
                                        <option value="{{ $destino->id }}">{{ $destino->abreviatura_destino }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-md-2 mb-2">
                            <div class="form-group">
                                <label for="destinos[${destinoCount}][hora_llegada]">Hora Llegada:</label>
                                <input type="time" name="destinos[${destinoCount}][hora_llegada]" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-12 col-md-2 mb-2">
                            <div class="form-group">
                                <label for="destinos[${destinoCount}][duracion_vuelo]">Duración de Vuelo:</label>
                                <input type="time" name="destinos[${destinoCount}][duracion_vuelo]" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-12 col-md-2 mb-2">
                            <div class="form-group">
                                <label for="destinos[${destinoCount}][duracion_plataforma]">Duración en Plataforma:</label>
                                <input type="time" name="destinos[${destinoCount}][duracion_plataforma]" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-12 col-md-2 mb-2">
                            <div class="form-group">
                                <label for="destinos[${destinoCount}][orden]">Orden:</label>
                                <input type="number" name="destinos[${destinoCount}][orden]" class="form-control" required>
                            </div>
                        </div>
                    </div>
                `;
                destinosContainer.insertAdjacentHTML('beforeend', destinoHTML);
            });

            eliminarDestinoBtn.addEventListener('click', function() {
                if (destinoCount > 0) {
                    document.getElementById(`destino_${destinoCount}`).remove();
                    destinoCount--;
                }
            });
        });

    </script>
@endsection