@extends('layouts.app')

@section('title', 'Control de Bitacoras')

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

@section('content')
    <div class="card mt-2">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="mb-0">Control de vuelos de Bitacoras</h5>
        </div>
        <div class="card-body">
            <div class="container">
                <div class="row justify-content-end mb-3">
                    <div class="col-lg-2 d-flex align-items-center">
                        <input class="form-control" type="date" name="fecha_vuelo" id="fecha_vuelo" value="{{ date('Y-m-d') }}"/>
                    </div>
                    <div class="col-lg-4 d-flex align-items-center">
                        <button type="button" id="buscar_fecha" class="btn btn-primary">Buscar por fecha</button>
                    </div>
                </div>
                <div id="alert-container" class="mt-3"></div>
                <div class="card mb-3 mt-2">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered"  id="control">
                            <thead class="table-dark">
                                <tr>
                                    <th>Vuelos</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            function showAlert(message, type = 'danger') {
                const alertHtml = `
                    <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                        ${message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                `;
                $('#alert-container').html(alertHtml);
            }

            const table = $('#control').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: false,
                ajax: {
                    url: URLs+'/control_bitacoras',
                    data: function(d) {
                        d.fecha = $('#fecha_vuelo').val();
                    },
                    error: function(xhr) {
                        showAlert('No hay vuelos programados para esta fecha');
                    }
                },
                columns: [
                    { "data": "vuelo_info", name: "vuelo_info" },
                    { "data": "action", "orderable": false, "searchable": false }, // Opcional: columna de acciones
                ],
                language: {
                    "lengthMenu": "Mostrar _MENU_ registros por página",
                    "zeroRecords": "Nada encontrado - disculpa",
                    "info": "Mostrando la página _PAGE_ de _PAGES_",
                    "infoEmpty": "No se encuentran registros",
                    "infoFiltered": "(filtrado de _MAX_ registros totales)",
                    "search": "Buscar:",
                    "paginate": {
                        'next': "Siguiente",
                        'previous': "Anterior"
                    }
                }
            });

            // Inicializar tooltips de Bootstrap
            table.on('draw', function() {
                var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
                var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl)
                });

                // Verificar si hay datos
                if (table.data().count() === 0) {
                    showAlert('No hay vuelos programados para esta fecha');
                } else {
                    $('#alert-container').empty();
                }
            });

            // Evento para el botón de búsqueda
            $('#buscar_fecha').click(function() {
                $('#alert-container').empty(); // Limpiar alertas anteriores
                table.ajax.reload();
            });
        });
    </script>
@endsection