@inject('estatusCliente', 'App\Http\Controllers\ReporteUsuarioController')
<div class="table-responsive">
  <table class="table align-items-center table-flush">
    <thead class="thead-light">
      <tr>
        <th scope="col">Sección</th>
        <th scope="col">Opción</th>
        <th scope="col">Referencia</th>
        <th scope="col">Fecha movimiento</th>
        <th scope="col">Usuario</th>
      </tr>
    </thead>
    @if (count($movimientos) > 0)
    <tbody id="load">
      @foreach($movimientos as $row)
      <tr>
        <th scope="row">
          <span class="mb-0 text-sm">{{ $row->seccion }}</span>
        </th>
        <td>
          <span class="mb-0 text-sm">{{ $row->opcion }}</span>
        </td>
        <td>
          <span class="mb-0 text-sm">{{ $row->referencia }}</span>
        </td>
        <td>
          <span class="mb-0 text-sm">{{ $row->fecha_movto }}</span>
        </td>
        <td>
          <span class="mb-0 text-sm">{{ $row->name . " " . $row->surname }} </span>
        </td>
      </tr>
      @endforeach
    </tbody>
    @endif
  </table>
  @include('ajax.paginacion')
</div>
<script>
  function ejecutarPeticionAjaxBuscar(page) {
    seccion = $('#seccion_filtro').val();
    fecha_inicio = $('#fecha_inicio_filtro').val();
    fecha_termino = $('#fecha_termino_filtro').val();

    let formData = new FormData();
    formData.append('seccion_filtro', seccion);
    formData.append('fecha_inicio_filtro', fecha_inicio);
    formData.append('fecha_termino_filtro', fecha_termino);
    formData.append('page', page);
    $.ajax({
      url: "reporte-movimientos/buscar",
      data: formData,
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      method: "POST",
      processData: false,
      contentType: false,
      success: function(data) {
        $('#table_data').html(data);
        /*        console.log(data); */
      }
    });
  }
</script>