@extends('layouts.app')

@section('title', 'Pilotos y Copilotos B737')

@section('css')
    <style>
        #pilotos-table thead {
            background-color: #343a40; /* Color oscuro del tema Bootstrap */
            color: white;
        }
        .instructor-row {
            background-color: #dceff9 !important;
        }
        #copilotos-table thead {
            background-color: #B32630; /* Color oscuro del tema Bootstrap */
            color: white;
        }
    </style>
@endsection

@section('content')
    <div class="container">
        <h4>Pilotos y Copilotos del Equipo B737</h4>
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Pilotos B737</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered" id="pilotos-table">
                        <thead>
                            <tr>
                                <th>PILOTOS</th>
                                <th>LICENCIA N°</th>
                                <th>FECHA DE INGRESO</th>
                                <th>Total Horas de Vuelo</th>
                                <th>Total Horas en Equipo</th>
                                <th>Categoría para programación</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h5 class="card-title">Copilotos B737</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered" id="copilotos-table">
                        <thead>
                            <tr>
                                <th>COPILOTOS</th>
                                <th>LICENCIA N°</th>
                                <th>FECHA DE INGRESO</th>
                                <th>Total Horas de Vuelo</th>
                                <th>Total Horas en Equipo</th>
                                <th>Categoría para programación</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(function() {
            $('#pilotos-table').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: URLs+'/horas-vuelo-B737/pilotosB',
                columns: [
                    { data: 'nombre_completo', name: 'nombre_completo'},
                    { data: 'numero_dgac', name: 'numero_dgac' },
                    { data: 'fecha_ingreso', name: 'fecha_ingreso' },
                    { data: 'total_horas', name: 'total_horas', orderable: false },
                    { data: 'horas_equipo', name: 'horas_equipo', orderable: false },
                    { data: 'categoria', name: 'categoria' },
                    { data: 'accion', name: 'accion', orderable: false }
                ],
                lengthMenu: [ [5, 10, 20, -1], [5, 10, 20, "All"] ],
                initComplete: function(settings, json) {
                    $('#pilotos-table thead').addClass('table-dark');
                },
                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"
                    }
                },
                "rowCallback": function(row, data, index) {
                    if(data.cargo_vuelo === 'CP - INST') {
                        $(row).addClass('instructor-row');
                    }
                }
            });

            $('#copilotos-table').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: URLs+'/horas-vuelo-B737/copilotosB',
                columns: [
                    { data: 'nombre_completo', name: 'nombre_completo' },
                    { data: 'numero_dgac', name: 'numero_dgac' },
                    { data: 'fecha_ingreso', name: 'fecha_ingreso' },
                    { data: 'total_horas', name: 'total_horas' },
                    { data: 'horas_equipo', name: 'horas_equipo' },
                    { data: 'categoria', name: 'categoria' },
                    { data: 'accion', name: 'accion', orderable: false },
                ],
                lengthMenu: [ [5, 10, 20, -1], [5, 10, 20, "All"] ],
                initComplete: function(settings, json) {
                    $('#copilotos-table thead').addClass('table-dark');
                },
                "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"
                    }
                }
            });
        });
        $(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