$(document).ready(function() {
    var table = $('#mytable').DataTable({
        responsive: true,
        deferRender: true,
        columnDefs: [{
            "defaultContent": "-",
            "targets": "_all"
        }],
        "dom": 'tp',
        "autoWidth": false,
        "bProcessing": true,
        "aLengthMenu": [[6, 10, 25, 50, -1], [6, 10, 25, 50, "All"]],
        "language": {
            "lengthMenu": "Mostrar _MENU_ registros por página",
            "info": "Mostrando página _PAGE_ de _PAGES_",
            "infoEmpty": "No hay registros disponibles",
            "infoFiltered": "(filtrada de _MAX_ registros)",
            "search": "Buscar Total:",
            "zeroRecords": "No se encontraron registros coincidentes",
            "paginate": {
                "next": "Siguiente",
                "previous": "Anterior"
            },
        },
        "iDisplayLength": 12,
        "order": [[0, "DESC"]],
        "columns": [
            { "data": "FECH_REG"},
            { "data": "ID_VEHICULO" },
            { "data": "ID_USER" },
            { "data": "MOTIVO_TRASLADO" },
            { "data": "AREA" },
            { "data": "DETALLE_CARGA" },
            { "data": "UBI_INICIO" },
            { "data": "UBI_LLEGADA" },
            { "data": "KM_INICIAL" },
            { "data": "KM_FINAL" },
            { "data": "KM_PROMEDIO" },
            { "data": "KM_TOTAL" },
        ]
    });

    $('#buscar').click(function() {
        var FechaFin = $('#FechaFin').val();
        var FechaInicio = $('#FechaInicio').val();
        var Placa = $('#Placa').val();
        var selectPlaca = $('#selectPlaca').val();

        $.ajax({
            url: 'data/data.php',
            type: 'post',
            data: {
                FechaInicio: FechaInicio,
                FechaFin: FechaFin,
                Placa:Placa,
                selectPlaca:selectPlaca
            },
            dataType: 'json',
            success: function(data) {
                // Llena la tabla DataTable con los datos obtenidos
                table.clear().rows.add(data.aaData).draw();

               var tbody = $('#mytable tbody');
            
	            // Si no hay registros, muestra el mensaje correspondiente
	            if (data.aaData.length === 0) {
	                tbody.html('<tr><td colspan="12"><center>No se encontraron registros coincidentes</center></td></tr>');
	            } else {
	                tbody.html(table.rows().nodes().to$().addClass('show'));
	            }
	            
	            tbody.show();
	            }
        });
    });
});


//Esconder y mostrar un input
//Y limpiar los date

// Obtener referencias a los elementos select e input
var select = document.getElementById('selectPlaca');
var input = document.getElementById('divPlaca');
var fechaInicio = document.getElementById('FechaInicio');
var fechaFin = document.getElementById('FechaFin');
var placa = document.getElementById('Placa');
var excelDiv = document.getElementById('excelDiv');

// Agregar un evento de cambio al select
select.addEventListener('change', function() {
    // Obtener el valor seleccionado del select
    var selectedValue = select.value;
    
    // Mostrar u ocultar el input según la opción seleccionada
    if (selectedValue === '1') {
        input.style.display = 'block'; // Mostrar input
        fechaInicio.value = '';
        fechaFin.value = '';
        placa.selectedIndex = 0;
        excelDiv.style.display = 'none'; // Mostrar el botón adicional
    } else {
        input.style.display = 'none';  // Ocultar input
        fechaInicio.value = '';
        fechaFin.value = '';
        placa.selectedIndex = 0;
        excelDiv.style.display = 'none'; // Mostrar el botón adicional
    }
});

//Mostrar el boton de excel cuando precione buscar
// Obtener referencias a los botones
var buscar = document.getElementById('buscar');
var excelDiv = document.getElementById('excelDiv');

// Agregar evento al botón "Mostrar Botón Adicional"
buscar.addEventListener('click', function() {
    excelDiv.style.display = 'block'; // Mostrar el botón adicional
});

//para al presionar enter no haga el submit
$(document).ready(function() {
  $('form').on('keydown', function(event) {
    if (event.key === 'Enter') {
      event.preventDefault();
      return false;
    }
  });
});

//para cuando presionas el boton depende cual se presione se hara submit en los reportes
var form = document.getElementById('form');
form.addEventListener('submit', function(event) {
    var url;

    if (event.submitter.name === 'excel') {
        url = 'data/data_reporte.php';
    } else if (event.submitter.name === 'indicador') {
        url = 'data/data_indicador.php';
    } else {
        // Acción por defecto o manejar otros casos si es necesario
        console.log('No se ha seleccionado un reporte.');
        return;
    }

    form.action = url;
});