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

@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>
@endsection

@section('js')
    <script>
        // Pasar los datos necesarios a JavaScript desde Blade
        const PAISES = @json($paises);
        const PROVEEDORES = @json($proveedores);
        const SERVICIOS = @json(\App\Models\Viajero::SERVICIOS);

        $('#tabla_viajeros').DataTable({
            dom: `<'row d-flex align-items-center justify-content-between'
                        <'col-lg-8 d-flex align-items-center'f>
                        <'col-lg-4 d-flex align-items-center justify-content-end'B>>
                    <'table-responsive'tr>
                    <'row'<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i><'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>>`,
        });

        function getNombrePais(id) {
            const pais = PAISES.find(p => p.id === id);
            return pais ? pais.nombre : 'N/A';
        }

        function getNombreProveedor(id) {
            const proveedor = PROVEEDORES.find(p => p.id === id);
            return proveedor ? proveedor.nombre : 'N/A';
        }

        function getNombreServicio(id) {
            return SERVICIOS[id] || 'N/A';
        }

        $(document).on('click', '.btn-toggle-details', function() {
            var viajeroId = $(this).data('id');

            $.ajax({
                url: `/viajeros/${viajeroId}`,
                method: 'GET',
                success: function(response) {
                    var detailsHtml = '';

                    response.itinerarios.forEach(function(itinerario, index) {
                        detailsHtml += `
                            <div class="card mb-3">
                                <div class="card-header" style="align-content: center !important;color: #7a00e6;">
                                    <strong>Itinerario ${index + 1}</strong>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <strong>Itinerario:</strong> ${itinerario.itinerario}
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Pais Destino:</strong> ${getNombrePais(itinerario.pais_destino_id)}
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Fecha Inicio:</strong> ${itinerario.fecha_inicio}
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Fecha Fin:</strong> ${itinerario.fecha_fin}
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Hora Inicio:</strong> ${itinerario.hora_inicio}
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Hora Fin:</strong> ${itinerario.hora_fin}
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Servicio:</strong> ${getNombreServicio(itinerario.servicio)}
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Alojamiento:</strong> ${itinerario.alojamiento ? itinerario.alojamiento : "N/A"}
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Número Vuelo:</strong> ${itinerario.numero_vuelo}
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Proveedor:</strong> ${getNombreProveedor(itinerario.proveedor_id)}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                    });

                    $('#viajeroDetails').html(detailsHtml);
                    $('#viajeroModal').modal('show');
                },
                error: function(error) {
                    console.log(error);
                }
            });
        });
    </script>
@endsection

@section('content')
    <div class="row">
        <div class="d-flex w-100 voltearv" style="flex-direction: row-reverse;">
            <div class="w-s">
                <div class="btn-group mb-2" role="group" aria-label="">
                    <a href="{{ route('viajeros.createView') }}" type="button"
                        class="btn btn-enviar btn-lg btn-block">
                        <i class="bi bi-file-earmark-plus"></i> Nuevo registro
                    </a>
                </div>
            </div>
        </div>
    </div>
    <br>

    <div class="contanier">
        <div class="shadow-s p-4">
            <div class="table-responsive">
                <table id="tabla_viajeros" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th scope="col" class="grayt">Nombre</th>
                            <th scope="col" class="grayt">Apellido</th>
                            <th scope="col" class="grayt">Email</th>
                            <th scope="col" class="grayt">Número de Contacto</th>
                            <th scope="col" class="grayt">PNR</th>
                            <th scope="col" class="grayt">Tipo de Viaje</th>
                            <th scope="col" class="grayt">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (!$viajeros->isEmpty())
                            @foreach ($viajeros as $viajero)
                                <tr>
                                    <td>{{ $viajero->nombre }}</td>
                                    <td>{{ $viajero->apellido }}</td>
                                    <td>{{ $viajero->email }}</td>
                                    <td>{{ $viajero->numero_contacto }}</td>
                                    <td>{{ $viajero->pnr }}</td>
                                    <td>{{ isset($viajero->tipo_viaje) ? App\Models\Viajero::TIPOS_VIAJE[$viajero->tipo_viaje] : 'N/A' }}</td>
                                    <td>
                                        <a href="{{ route('viajeros.editView', ['id' => $viajero->id]) }}"
                                            class="btn btn-outline-p"><i class="bi bi-pencil-square"></i></a>
                                        <button type="button" class="btn btn-outline-p btn-toggle-details" data-id="{{ $viajero->id }}">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="7" style="text-align: center">"No hay Registros para mostrar"</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="viajeroModal" tabindex="-1" aria-labelledby="viajeroModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viajeroModalLabel">Detalles del Viajero</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Contenido del modal -->
                    <div id="viajeroDetails"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
@endsection