@extends('layouts.app')

@section('title', 'Itinerarios')

@section('css')
    <style>
        .card-header {
            padding: 0.5rem 1rem;
        }
    </style>
@endsection

@section('content')
    <div class="card">
        <div class="card-header">
            <div class="row mt-2">
                <div class="col-12 col-md-4 order-0 mb-2 mb-md-0">
                    <h5 class="mb-0">Lista de Itinerarios</h5>
                </div>
                <div class="col-12 col-md-4 order-2 order-md-2 mb-2 mb-md-0">
                    <select id="numero_cola" class="form-select form-select-sm w-100">
                        <option value="">Seleccionar una aeronave</option>
                        @foreach($aeronaves as $aeronave)
                            <option value="{{ $aeronave->numero_cola }}" {{ $numero_cola == $aeronave->numero_cola ? 'selected' : '' }}>
                                {{ $aeronave->numero_cola }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-md-4 order-1 order-md-3 text-md-end mb-2 mb-md-0">
                    @can('rutas_vuelo.create')
                        <a href="{{ route('rutas_vuelo.create') }}" class="btn btn-success btn-sm w-100">Nuevo Registro</a>
                    @endcan
                </div>
            </div>
        </div>
        <div class="card-body">
            @if($numero_cola)
                <div id="itinearios">
                    @forelse($vuelos as $vuelo)
                        <div class="card mb-3">
                            <div class="card-header">
                                Vuelo Número: <span style="color: darkred; font-weight: bold;"> {{ $vuelo->numero_vuelo }} </span>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-hover table-bordered">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>Destino Partida</th>
                                            <th>Hora Partida</th>
                                            <th>Destino Llegada</th>
                                            <th>Hora Llegada</th>
                                            <th>Duración Vuelo</th>
                                            <th>Duración Plataforma</th>
                                            <th>Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($vuelo->rutas as $ruta)
                                            <tr>
                                                <td>{{ $ruta->destinoPartida->abreviatura_destino }}</td>
                                                <td>{{ date('H:i', strtotime($ruta->hora_salida)) }}</td>
                                                <td>{{ $ruta->destinoLlegada->abreviatura_destino }}</td>
                                                <td>{{ date('H:i', strtotime($ruta->hora_llegada)) }}</td>
                                                <td>{{ date('H:i', strtotime($ruta->duracion_vuelo)) }}</td>
                                                <td>{{ date('H:i', strtotime($ruta->duracion_plataforma)) }}</td>
                                                <td>
                                                    @can('rutas_vuelo.edit')
                                                        <a href="{{ route('rutas_vuelo.edit', $ruta->id) }}" class="btn btn-warning btn-sm"><i class="fa-solid fa-pen-clip"></i></a>
                                                    @endcan
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @empty
                        <p>No hay itinerarios disponibles para esta aeronave.</p>
                    @endforelse
                </div>
            @endif
        </div>
    </div>
@endsection

@section('js')
    <script>
        document.getElementById('numero_cola').addEventListener('change', function() {
            const numeroCola = this.value;
            var url = new URL(window.location.href);
            if (numeroCola) {
                url.searchParams.set('numero_cola', numeroCola);
            } else {
                url.searchParams.delete('numero_cola');
            }
            window.location.href = url.toString();
        });
    </script>
@endsection