@extends('layouts.app', ['activePage' => 'bitacora_usuarios', 'menuParent' => 'configuracion', 'titlePage' => __('Configuración / Bitacora de usuarios')])

@section('content')
<div class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-md-4">
                <h4 class="card-title">Bitácora de usuarios</h4>
              </div>
            </div>
            <div class="row ">
              <div class="col-md-3 isnt-filled" style="margin-top: 3px;">
                <div class="input-group input-group-static">
                  <label>Rango de fechas:</label>
                  <input type="text" class="form-control daterange" id="fechas" placeholder="10-01-2022 - 10-01-2022" />
                </div>
              </div>
              <div class="col-md-3">
                <div class="input-group input-group-static">
                  <label>Usuario:</label>
                  <select id="usuario" class="form-control">
                    <option value="0">Todos</option>
                    @foreach($data['users'] as $cl)
                    <option value="{{$cl->id}}">({{$cl->name}}) {{$cl->username}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="col-3 ">
                <button class="btn btn-primary " onclick="loadGrid();">Buscar</button>
              </div>
            </div>
            <div class="row mt-2">
              <table class="table table-bordered table-hover" width="100%" style="width:100%" id="tableBitacora">
                <thead>
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">ID</th>
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">Usuario</th>
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">Menú</th>
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">Ruta</th>
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">IP</th>
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">Acción</th>
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">Registro</th>
                  <th class="text-white  text-xxs font-weight-bolder opacity-7">Fecha</th>
                </thead>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .text-wrap {
    white-space: normal;
  }

  .width-td {
    width: 300px;
  }
</style>
@endsection

@push('js')
<script>
  $(document).ready(function() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    var date = new Date()
    $('.daterange').daterangepicker({
      startDate: moment().subtract(1, 'months'),
      endDate: moment().startOf('hour').add(32, 'hour'),
      locale: {
        format: 'DD-MM-YYYY',
        applyLabel: "Aplicar",
        cancelLabel: "Cancelar",
      }
    });


    loadGrid();
  });



  function loadGrid() {
    $('#tableBitacora').dataTable().fnDestroy();
    $('#tableBitacora td').css('white-space', 'initial');
    $('#tableBitacora').DataTable({
      lengthMenu: [10, 15, 20, 50, 100],
      dom: 'Bfrtip',
      processing: true,
      responsive: true,
      scrollX: true,
      scrollY: '50vh',
      scrollCollapse: true,

      ajax: {
        url: "{{url('config/bitacora-usuarios/get_seguimiento')}}",
        type: "POST",
        data: {
          fechas: $('#fechas').val(),
          usuario: $('#usuario option:selected').val(),
        }
      },
      columns: [{
          data: "id"
        },
        {
          data: "usuario"
        },
        {
          data: "menu"
        },
        {
          data: "url"
        },
        {
          data: "IP"
        },
        {
          data: "accion"
        },
        {
          data: "mov_accion"
        },
        {
          data: "created_at"
        },

      ],
      columnDefs: [{
        render: function(data, type, full, meta) {
          return "<div class='text-wrap width-td'>" + data + "</div>";
        },
        targets: [3]
      }],
      order: [
        [0, "desc"]
      ],
      buttons: [{
          extend: 'copyHtml5',
          text: '<i class="fa fa-files-o"></i>',
          titleAttr: 'Copiar'
        },
        {
          extend: 'excelHtml5',
          text: '<i class="fa fa-file-excel-o"></i>',
          titleAttr: 'Excel'
        },
        {
          extend: 'csvHtml5',
          text: '<i class="fa fa-file-text-o"></i>',
          titleAttr: 'CSV'
        },
        {
          extend: 'pdfHtml5',
          text: '<i class="fa fa-file-pdf-o"></i>',
          titleAttr: 'PDF'
        }

      ],
    });

  }
</script>
@endpush