@extends('layouts.app')

@section('title', 'Tripulación')

@section('content')
    <div class="card mt-2">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h4 class="mb-0">Lista de Tripulación en Vuelos</h4>
            <div class="d-flex align-items-center">
                <h5 class="mb-0 me-2">Fecha: </h5>
                <input type="date" class="form-control" id="fecha_vuelo" name="fecha_vuelo" >
            </div>
        </div>
        <div class="card-body">
            <div class="container" id="tripulacion">
                @if(isset($message))
                    <div class="alert alert-danger" role="alert"> {{ $message }}</div>
                @else
                    @foreach($vuelos_info as $vuelo)
                        <div class="card mb-3">
                            <div class="card-header">
                                Vuelo Número: <span style="color: darkred; font-weight: bold;"> {{ $vuelo['vuelo']->numero_vuelo }} </span>
                                @if($vuelo['vuelo_cancelado']) {{-- NUEVO --}}
                                    <span class="badge rounded-pill bg-danger">CANCELADO</span>
                                @endif
                                <span class="badge rounded-pill {{ $vuelo['estado'] === 'Completo' ? 'bg-success' : 'bg-warning' }}">
                                    {{ $vuelo['estado'] }}
                                </span>
                                @if($tripulacion_actual_id && $tripulacion_actual_id == $vuelo['vuelo']->id)
                                    <span class="badge rounded-pill bg-danger">Tripulación Actualizada</span>
                                @endif
                            </div>
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>Nombre y Apellido</th>
                                            <th>Cargo</th>
                                            <th>Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($vuelo['vuelo']->colaboradores as $colaborador)
                                            <tr>
                                                <td>{{ $colaborador->ap_paterno }} {{ $colaborador->ap_materno }} {{ $colaborador->nombre }}</td>
                                                <td>{{ $colaborador->appcargo->cargo_vuelo }}</td>
                                                <td>
                                                    @can('tripulacion_vuelo.edit_colaborador')
                                                        <a href="{{ route('tripulacion_vuelo.edit_colaborador', ['vuelo' => $vuelo['vuelo']->id, 'colaborador' => $colaborador->id, 'fecha_vuelo' => $fecha_seleccionada]) }}"
                                                        class="btn btn-warning btn-sm {{ $vuelo['vuelo_cancelado'] ? 'disabled' : '' }}" data-bs-toggle="tooltip" data-bs-placement="top"
                                                        title="{{ $vuelo['vuelo_cancelado'] ? 'Vuelo cancelado' : 'Cambio personal' }}"
                                                        {{ $vuelo['vuelo_cancelado'] ? 'aria-disabled="true"' : '' }}>
                                                            <i class="fa-solid fa-pen-clip"></i>
                                                        </a>
                                                    @endcan
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        document.getElementById('fecha_vuelo').addEventListener('change', function() {
            let fecha = this.value;
            let fecha_seleccionada = fecha;
            fetch(`${URLs}/tripulacion_vuelo?fecha_vuelo=${fecha}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                let tripulacion_container = document.getElementById('tripulacion');
                tripulacion_container.innerHTML = ''; // Limpiar contenido anterior

                if (data.mensaje) {
                    let mensaje = document.createElement('div');
                    mensaje.classList.add('alert', 'alert-danger');
                    mensaje.textContent = data.mensaje;
                    tripulacion_container.appendChild(mensaje);
                } else {
                    data.forEach(vuelo_info => {
                        let vuelo = vuelo_info.vuelo;
                        let card = document.createElement('div');
                        card.classList.add('card', 'mb-3');

                        card.innerHTML = `
                            <div class="card-header">
                                Vuelo Número: <span style="color: darkred; font-weight: bold;">${vuelo.numero_vuelo}</span>
                                ${vuelo_info.vuelo_cancelado ? '<span class="badge rounded-pill bg-danger">CANCELADO</span>' : ''}
                                <span class="badge rounded-pill ${vuelo_info.estado === 'Completo' ? 'bg-success' : 'bg-warning'}">
                                    ${vuelo_info.estado}
                                </span>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>Nombre y Apellido</th>
                                            <th>Cargo</th>
                                            <th>Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        ${vuelo_info.colaboradores.map(colaborador => `
                                            <tr>
                                                <td>${colaborador.ap_paterno} ${colaborador.ap_materno} ${colaborador.nombre}</td>
                                                <td>${colaborador.cargo_vuelo}</td>
                                                <td>
                                                    <a href="${URLs}/tripulacion_vuelo/${vuelo.id}/${colaborador.id}/edit?fecha_vuelo=${fecha_seleccionada}"
                                                    class="btn btn-warning btn-sm ${vuelo_info.vuelo_cancelado ? 'disabled' : ''}" data-bs-toggle="tooltip" data-bs-placement="top"
                                                    title="${vuelo_info.vuelo_cancelado ? 'Vuelo cancelado' : 'Cambio personal'}" ${vuelo_info.vuelo_cancelado ? 'aria-disabled="true"' : ''}><i class="fa-solid fa-pen-clip"></i></a>
                                                </td>
                                            </tr>
                                        `).join('')}
                                    </tbody>
                                </table>
                            </div>
                        `;
                        tripulacion_container.appendChild(card);
                    });
                }
            })
            .catch(error => {
                console.error('Error:', error)
            });
        });

        document.addEventListener('click', function(e) {
            if(e.target && e.target.classList.contains('btn-warning')) {
                e.preventDefault();
                let url = e.target.getAttribute('href');

                fetch(url)
                    .then(response => response.text())
                    .then(html => {
                        let parser = new DOMParser();
                        let doc = parser.parseFromString(html, 'text/html');
                        let content = doc.querySelector('.container').innerHTML;

                        document.getElementById('tripulacion').innerHTML = content;
                    })
                    .catch(error => console.error('Error:', error));
            }
        });

        // Inicializar tooltips de Bootstrap fuera de un datatable, es para table normal
        $(document).ready(function() {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });
    </script>
@endsection