@extends('layouts.app')

@section('title', 'Tripulantes de Cabina')

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

@section('content')
    <div class="card mt-2">
        <div class="card-header d-flex justify-content-between">
            <h4>Lista de Colaboradores - Tripulantes de Cabina</h4>
            <span class="hidden" id="opcion-valor" data-opcion="{{ $opcion }}"></span>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="tripulante" class="table table-striped table-bordered">
                    <thead class="table-dark">
                        <tr>
                            <th>Nombre</th>
                            <th>Ap. Paterno</th>
                            <th>Ap. Materno</th>
                            <th>Cargo</th>
                            <th>N° DGAC</th>
                            <th>Registrar</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        var opcionValor = $('#opcion-valor').data('opcion');
        $(document).ready(function(){
            $('#tripulante').DataTable({
                responsive: true,
                autoWidth: false,
                processing: true,
                serverSide: true,
                ajax: {
                    url: URLs+'/tripulantes',
                    data: function (d) {
                        d.opcion = opcionValor;
                    }
                },
                "columns": [
                    { "data": "nombre" },
                    { "data": "ap_paterno" },
                    { "data": "ap_materno" },
                    { "data": "app_cargo.nombre" }, // Ajusta según los nombres de tus atributos
                    { "data": "numero_dgac" },
                    { "data": "action", "orderable": false, "searchable": false,
                        render: function(data, type, row) {
                            return data; // Devuelve el HTML del botón generado en el servidor
                        }
                     } // Ajusta según los nombres de tus atributos
                ],
                "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
            $(document).on('draw.dt', function() {
                var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
                var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl)
                });
            });
        });
    </script>
@endsection