@extends('layouts.app')

@section('title', 'Block Copilotos Q400')

@section('css')
    <style>
        /* Estilos para el encabezado de la tabla principal */
        .dt-scroll-head table thead th,
        .dt-scroll-head table thead th .dt-column-title {
            background-color: #99c2eb !important;
            color: rgb(34, 29, 29) !important;
        }

        /* Ajuste para el texto dentro de los encabezados */
        .dt-scroll-head table thead th span {
            color: rgb(34, 29, 29) !important;
        }
    </style>
@endsection

@section('content')
    <div class="container">
        <h4>HORAS BLOCK RECORD Y REMANENTE TRIPULACION DE VUELOS - STAR PERU Q400: {{ $anio_actual }}</h4>

        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Copilotos Dash8 400</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>HORAS TOTALES HASTA AÑO {{ $anio_actual - 1 }}</th>
                                @foreach($meses as $mes)
                                    <th>{{ $mes }}</th>
                                @endforeach
                                <th>SUMA DE HORAS</th>
                                <th>HORAS ACUMULADAS AL {{ $anio_actual }}</th>
                                <th>REMANENTE DE HORAS</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(function() {
            $('#copilotos-table').DataTable({
                processing: true,
                serverSide: true,
                responsive: false,
                scrollX: true,     // Habilita el scroll horizontal
                scrollCollapse: true,
                ajax: '{{ route('horas.copilotosQ.mensuales') }}',
                columns: [
                    { data: 'nombre_completo', name: 'nombre_completo'},
                    { data: 'numero_dgac', name: 'numero_dgac' },
                    { data: 'horas_anio_anterior', name: 'horas_anio_anterior', orderable: false,
                        render: function(data) {
                            return data || '00:00';  // Muestra '00:00' si no hay datos
                        }
                    },
                    @foreach($meses as $mes)
                        { data: 'horas_mensuales.{{ $mes }}', name: 'horas_mensuales.{{ $mes }}', orderable: false,
                            render: function(data) {
                                return data || '00:00';  // Muestra '00:00' si no hay datos
                            }
                        },
                    @endforeach
                    { data: 'horas_mensuales.total_horas', name: 'horas_mensuales.total_horas', orderable: false,
                        render: function(data) {
                                return data || '00:00';  // Muestra '00:00' si no hay datos
                            }
                    },
                    { data: 'horas_acumuladas', name: 'horas_acumuladas', orderable: false },
                    { data: 'remanente_horas', name: 'remanente_horas', orderable: false }
                ],
                fixedColumns: {
                    left: 1  // Fija la primera columna
                },
                lengthMenu: [ [5, 10, 20, -1], [5, 10, 20, "All"] ],
                drawCallback: function(settings) {
                    $('.dt-scroll-head').css({
                        'background-color': '#99c2eb'
                    });
                    $('.dt-scroll-head table thead th, .dt-scroll-head table thead th .dt-column-title').css({
                        'background-color': '#99c2eb',
                        'color': 'rgb(34, 29, 29)'
                    });
                },
                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"
                    }
                }
            });
        });
    </script>
@endsection