@extends('layouts.app')

@section('title', 'Control Vencimiento')

@section('css')
    <style>
        .text-purple {
            color: #6f42c1 !important;
        }
        .header-colaborador {
            background-color: #0000FF !important;
            color: white !important;
            text-align: center;
            vertical-align: middle;
            font-size: 9px !important;
        }
        .header-cursos {
            background-color: #AEAAAA !important;
            text-align: center;
            vertical-align: middle;
            font-size: 9px !important;
        }

        .header-charla {
            background-color: #00B0F0 !important;
            text-align: center;
            vertical-align: middle;
            font-size: 9px !important;
        }

        /* Encabezado de prácticas (verde) */
        .header-practica {
            background-color: #A9D08E !important;
            text-align: center;
            vertical-align: middle;
            font-size: 9px !important;
        }
        div.dt-search input[type="search"] {
            width: 350px !important;
            border: 2px solid #e74c3c !important;
            border-radius: 6px !important;
            padding: 6px 10px !important;
            font-size: 12px !important;
        }

        /* (Opcional) estilo para la etiqueta del texto "BUSCAR PILOTO" */
        div.dt-search label {
            color: #b10000;
            font-weight: bold;
            margin-right: 6px;
        }

        @media (max-width: 768px) {
            div.dt-search input[type="search"] {
                width: 100% !important;
                max-width: 220px !important;
                font-size: 13px !important;
                padding: 4px 8px !important;
            }

            div.dt-search {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>
@endsection

@section('content')
    <div class="card mt-2">
        <div class="card-header d-flex justify-content-between">
            <h4>Control Vencimiento - Cursos Despacho</h4>
        </div>
        <div class="card-body">
            <table id="cursos_registro" class="table table-striped table-bordered" style="font-size: 10px;">
                <thead>
                    <tr>
                        <th class="header-colaborador">Apellidos y Nombres</th>
                        <th class="header-colaborador">N° DGAC</th>
                        <th class="header-colaborador">VÍNCULO LABORAL DGAC</th>
                        <th class="header-colaborador">VENCIMIENTO DE LICENCIA</th>
                        <th class="header-cursos">VERIFICACIÓN  COMPETENCIA DGAC B737</th>
                        <th class="header-cursos">VERIFICACIÓN  COMPETENCIA DGAC Q400</th>
                        <th class="header-cursos">ENTRENAMIENTO EN VUELO B737</th>
                        <th class="header-cursos">ENTRENAMIENTO EN VUELO Q400</th>
                        <th class="header-charla">SPIDERTRACK FOREFLIGHT</th>
                        <th class="header-practica">CURSO EN TIERRA B737</th>
                        <th class="header-practica">CURSO EN TIERRA Q400</th>
                        <th class="header-colaborador">MMPP</th>
                        <th class="header-colaborador">AVSEC</th>
                        <th class="header-colaborador">FFHH DRM</th>
                        <th class="header-colaborador">SMS</th>
                        <th class="header-colaborador">RNAV/RVSM RNP CFIT-ALAR</th>
                        <th class="header-colaborador">SST PPUSP</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <!-- Modal para Editar Fecha de Vencimiento -->
    <div class="modal fade" id="modalEditarFechaVencimiento" tabindex="-1" aria-labelledby="modalEditarFechaLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalEditarFechaLabel">Actualizar Fecha de Vencimiento</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formEditarFechaVencimiento">
                        <input type="hidden" id="cursoId" name="cursoId">
                        <div class="form-group">
                            <label for="fechaVencimiento">Nueva Fecha de Vencimiento</label>
                            <input type="date" class="form-control" id="fechaVencimiento" name="fechaVencimiento" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Actualizar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function(){
            var table = $('#cursos_registro').DataTable({
                responsive: false,
                autoWidth: false,
                processing: true,
                serverSide: true,
                scrollX: true,
                fixedColumns: {
                    left: 1      // Esto fijará la primera columna
                },
                ajax: URLs+'/cursos_registro',
                "columns": [
                    { data: 'nombre_completo', name: 'nombre_completo' },
                    { data: 'numero_dgac', name: 'numero_dgac' },
                    { data: 'curso_41', name: 'curso_41', "orderable": false, "searchable": false  },
                    { data: 'curso_47', name: 'curso_47', "orderable": false, "searchable": false  },
                    { data: 'curso_1', name: 'curso_1', "orderable": false, "searchable": false  },
                    { data: 'curso_2', name: 'curso_2', "orderable": false, "searchable": false  },
                    { data: 'curso_3', name: 'curso_3', "orderable": false, "searchable": false  },
                    { data: 'curso_4', name: 'curso_4', "orderable": false, "searchable": false  },
                    { data: 'curso_5', name: 'curso_5', "orderable": false, "searchable": false  },
                    { data: 'curso_6', name: 'curso_6', "orderable": false, "searchable": false  },
                    { data: 'curso_7', name: 'curso_7', "orderable": false, "searchable": false  },
                    { data: 'curso_8', name: 'curso_8', "orderable": false, "searchable": false  },
                    { data: 'curso_9', name: 'curso_9', "orderable": false, "searchable": false  },
                    { data: 'curso_10', name: 'curso_10', "orderable": false, "searchable": false  },
                    { data: 'curso_11', name: 'curso_11', "orderable": false, "searchable": false  },
                    { data: 'curso_12', name: 'curso_12', "orderable": false, "searchable": false  },
                    { data: 'curso_13', name: 'curso_13', "orderable": false, "searchable": false  },
                ],
                "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>
    <script>
        $(document).on('click', '.editar-fecha-vencimiento', function() {
            var registroId = $(this).data('id');
            var fechaVencimiento = $(this).data('fecha_vencimiento');
            // Llena los campos del formulario en el modal
            $('#modalEditarFechaVencimiento #cursoId').val(registroId);
            $('#modalEditarFechaVencimiento #fechaVencimiento').val(fechaVencimiento);
            // Muestra el modal
            $('#modalEditarFechaVencimiento').modal('show');
        });

        $('#formEditarFechaVencimiento').on('submit', function(e) {
            e.preventDefault();
            var registroId = $('#cursoId').val();
            var fechaVencimiento = $('#fechaVencimiento').val();
            $.ajax({
                type: 'POST',
                url:`${URLs}/cursos_registro/${registroId}/update-fecha`,
                data: {
                    _token: "{{ csrf_token() }}",
                    fecha_vencimiento: fechaVencimiento,
                },
                success: function(response) {
                    $('#modalEditarFechaVencimiento').modal('hide');
                    setTimeout(function() {
                        Swal.fire({
                            title: '¡Actualizado!',
                            text: 'La fecha de vencimiento se ha actualizado correctamente.',
                            icon: 'success',
                            timer: 2000,
                            timerProgressBar: true,
                            showConfirmButton: false
                        });
                        // Actualizar dinámicamente la celda sin recargar la página
                        actualizarCeldaFecha(registroId, fechaVencimiento);
                    }, 500);
                },
                error: function(error) {
                    console.log(error);
                    Swal.fire({
                        title: 'Error',
                        text: 'Hubo un problema al actualizar la fecha.',
                        icon: 'error',
                        confirmButtonText: 'Ok'
                    });
                }
            });
        });

        // Función para actualizar la celda dinámicamente
        function actualizarCeldaFecha(registroId, nuevaFecha) {
            // Buscar el div con el data-registro-id
            var $divCelda = $(`div[data-registro-id="${registroId}"]`);
            if ($divCelda.length > 0) {
                // Formatear la fecha de YYYY-MM-DD a DD-MM-YYYY
                var fechaFormateada = nuevaFecha.split('-').reverse().join('-');
                // Calcular los días faltantes
                var hoy = new Date();
                var vencimiento = new Date(nuevaFecha);
                var diferenciaTiempo = vencimiento - hoy;
                var diasFaltantes = Math.ceil(diferenciaTiempo / (1000 * 60 * 60 * 24));
                // Determinar la clase del badge según los días
                var badgeClass = diasFaltantes >= 31 ? 'bg-success' : (diasFaltantes >= 1 ? 'bg-warning' : 'bg-danger');
                // Actualizar el contenido del div
                var nuevoHtml = `
                    <span style='white-space: nowrap;'>${fechaFormateada}</span>
                    <span class='badge ${badgeClass}'>${diasFaltantes} días</span>
                `;
                // Si hay botón, lo mantenemos (solo actualizamos fecha y badge)
                var $boton = $divCelda.find('.editar-fecha-vencimiento');
                if (diasFaltantes <= 30) {
                    var $boton = $divCelda.find('.editar-fecha-vencimiento');
                    if ($boton.length > 0) {
                        // Actualizar el data-fecha_vencimiento del botón
                        $boton.attr('data-fecha_vencimiento', nuevaFecha);
                        nuevoHtml += $boton.prop('outerHTML');
                    }
                }
                $divCelda.html(nuevoHtml);
            }
        }
    </script>
@endsection