<?php
$page_title = 'LISTADO DE VEHICULO';
require_once('../../includes/load.php');
// Checkin What level user has permission to view this page
page_require_level(3);
?>
<?php include_once('../../layouts/header.php'); ?>
 <div class="col-md-12">
   <?php echo display_msg($msg); ?>
 </div>
<div class="col-md-16">
  <div class="container pt-1 mt-1 animated fadeIn" >
    <div class="row pt-4">
      <div class="col-12 mb-3">
        <p class="h1 text-center text-primary font-weight-bold"> Listado de Vehiculos <i class="fas fa-user-alt"></i></p>
      </div>
    </div> 
    <div class="row">
        <div class="col-12 col-lg-6"> 
          <p class="text-primary mb-1">Buscar Placa</p>
          <div class="input-group mb-3">             
            <input placeholder="Buscar" id="placa" name="placa" type="text" class="form-control" maxlength="8">
               
          </div>
        </div>       
    </div>
    <div class="col-12">          
                <div class="panel-body">
                <table class="table table-striped"  id="mytable">
                    <thead>
                        <tr>
                            <th style="text-align: center; padding-right: 10px;">NOMBRE</th>
                            <th style="text-align: center; padding-right: 20px;">MODELO</th>
                            <th style="text-align: center; padding-right: 20px;">PLACA</th>
                            <th style="text-align: center; padding-right: 10px;">AÑO</th>
                            <th style="text-align: center; padding-right: 10px;">N° MOTOR</th>
                            <th style="text-align: center; padding-right: 10px;">MTTO PREVENTIVO KM</th>
                            <th style="text-align: center; padding-right: 10px;">MES PROPIO KM</th>
                            <th style="text-align: center; padding-right: 10px;">RENDIMIENTO COMBUSTIBLE</th>
                            <th style="text-align: center; padding-right: 10px;">CODIGO ACTIVO</th>
                            <th style="text-align: center; padding-right: 10px;">OPCIONES</th>
                        </tr>
                    </thead>
                </table>
            </div>
    </div>
  </div>
</div>
<?php include_once('../../layouts/footer.php'); ?>
<script>
$( 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 pagina",
            "info": "Mostrando pagina _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"
            },  
         },
         "sAjaxSource": "data/data.php",
          "bPaginate":true,
          "iDisplayLength": 6,
          "order": [[9, "ASC"]],
         "aoColumns": [
                { mData:'NOMB_VEHIC'},
                { mData:'MODELO_VEHIC'}, 
                { mData:'PLACA'},
                { mData:'anio'},
                { mData:'num_motor'},
                { mData:'mtto_prevkm'},  
                { mData:'mes_propiokm'},
                { mData:'rend_combkm'},
                { mData:'COD_ACTIVO'},
                { 
                   "render": function (data, type, full, row) {
                            return '<center><a style="margin-right: 3pt" href="edit_vehiculo.php?id='+ full.id +'" class="btn btn-xs btn-primary confirmEditar"  title="Editar"><span class="glyphicon glyphicon-pencil"></span> Editar </a>         <a style="margin-right: 3pt" href="delete_vehiculo.php?id='+ full.id +'" class="btn btn-xs btn-primary confirmEliminar" title="Ver"><span class="glyphicon glyphicon-eye-open"></span> Eliminar </a></center>'; 
                                                    
                   }

                },
                {
                    "visible": false, // Hace que la columna "id" no sea visible
                    "data": "id" // Indica que la columna "id" debe ser utilizada para el ordenamiento
                },    
                           
        ]


}); 
$('#placa, #usuario').on('keyup change clear', function () {
        table
            .column(2)
            .search($('#placa').val())
            .draw();
    });
});
</script>