@extends('layouts.app')

@section('title', 'Mi Programación')

@section('css')
    <style>
        #tablaVuelos thead {
            background-color: #343a40;
            color: white;
        }
    </style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="mb-0">Mis Vuelos Programados</h2>
            <p class="text-muted">Consulta tu historial y programación de vuelos</p>
        </div>
    </div>

    {{-- Card de Filtros --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="fas fa-filter me-2"></i>Filtros de Búsqueda</h5>
                </div>
                <div class="card-body mt-2">
                    <form id="filtrosForm">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="fecha_inicio" class="form-label">Fecha Inicio</label>
                                <input type="date" class="form-control" id="fecha_inicio" name="fecha_inicio">
                            </div>
                            <div class="col-md-4">
                                <label for="fecha_fin" class="form-label">Fecha Fin</label>
                                <input type="date" class="form-control" id="fecha_fin" name="fecha_fin">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label d-none d-md-block">&nbsp;</label>
                                <div class="d-grid d-md-flex gap-2">
                                    <button type="button" id="btnFiltrar" class="btn btn-primary">
                                        <i class="fas fa-search me-1"></i>Buscar
                                    </button>
                                    <button type="button" id="btnLimpiar" class="btn btn-secondary">
                                        <i class="fas fa-eraser me-1"></i>Limpiar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Card de Tabla de Vuelos --}}
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="fas fa-plane me-2"></i>Mis Vuelos</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive mt-2">
                        <table id="tablaVuelos" class="table table-hover table-bordered text-center">
                            <thead class="table-dark">
                                <tr>
                                    <th>Fecha</th>
                                    <th>Vuelo</th>
                                    <th>Ruta</th>
                                    <th>Hora Salida</th>
                                    <th>Hora Llegada</th>
                                    <th>Estado</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- Los datos se cargarán con DataTables --}}
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-3">
                        <button type="button" id="btnExportarPDF" class="btn btn-danger">
                            <i class="fas fa-file-pdf me-1"></i>Exportar a PDF
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            let table = $('#tablaVuelos').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('mis-vuelos.data') }}",
                    type: 'GET'
                },
                columns: [
                    { data: 'fecha', name: 'fecha' },
                    { data: 'vuelo', name: 'vuelo' },
                    { data: 'ruta', name: 'ruta' },
                    { data: 'hora_salida', name: 'hora_salida' },
                    { data: 'hora_llegada', name: 'hora_llegada' },
                    {
                        data: 'estado_vuelo',
                        render: function(data, type, row) {
                            if (!data) {
                                return '<span class="badge bg-secondary"><i class="fas fa-question-circle me-1"></i>Sin Estado</span>';
                            }
                            let badgeClass = 'bg-secondary'; // Por defecto
                            let icon = 'fa-info-circle';
                            if (data === 'Cancelado') {
                                badgeClass = 'bg-danger';
                                icon ='fa-solid fa-plane-circle-xmark'
                            } else if (data === 'Programado') {
                                badgeClass = 'bg-success';
                                icon ='fa-solid fa-plane-circle-check'
                            } else if (data === 'Concluido' || data.includes('desembarque')) {
                                badgeClass = 'bg-warning';
                                icon ='fa-solid fa-plane-circle-exclamation'
                            } else if (data.includes('Vuelo') || data.includes('Despego')) {
                                badgeClass = 'bg-info';
                                icon ='fa-solid fa-plane-departure'
                            }
                            return '<span class="badge ' + badgeClass + '"><i class="fas ' + icon + ' me-1"></i>' + data + '</span>';
                        }
                    }
                ],
                language: {
                    processing: "Cargando registros, por favor espere...",
                    loadingRecords: "Cargando registros, por favor espere...",
                    lengthMenu: "Mostrar _MENU_ registros por página",
                    zeroRecords: "Nada encontrado - disculpa",
                    info: "Mostrando _START_ a _END_ de _TOTAL_ registros",
                    infoEmpty:      "Mostrando 0 registros",
                    emptyTable: "No se encuentran registros",
                    infoFiltered: "(filtrado de _MAX_ registros totales)",
                    search: "Buscar:",
                    paginate: {
                        'next': "Siguiente",
                        'previous': "Anterior"
                    }
                }
            });
        });
    </script>
@endsection