<?php
  $page_title = 'Lista de usuarios';
  require_once('../../includes/load.php');
?>
<?php
// Checkin What level user has permission to view this page
 page_require_level(5);
//pull out all user form database
 $all_users = find_all_user();
?>
<?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 Usuarios <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 Ubicacion</p>
          <div class="input-group mb-3">             
            <input placeholder="Ubicacion" id="ubicacion" name="ubicacion" 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="padding-right: 10px;">UBICACIONES</th>
                            <th style="padding-right: 10px;">LATITUD</th>
                            <th style="padding-right: 20px;">LONGITUD</th>
                            <th style="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": [[12, 25, 50, -1], [12, 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": 12,
          "order": [[4, "ASC"]],
         "aoColumns": [
                { mData:'UBI_LLEGADA'},
                { mData:'latitud'}, 
                { mData:'longitud'}, 
                { 
                   "render": function (data, type, full, row) {
                            return '<center><a style="margin-right: 3pt" href="edit_ubicacion.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_ubicacion.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
                },    
                           
        ]


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