@extends('layouts.app', [
    'class' => '',
    'elementActive' => 'users'
])

@section('content')
    <div class="content">      
        <div class="row">
          <div class="col-md-12">
            @if($message = Session::get('success'))
              <div class="alert alert-success">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{$message}}</strong>
              </div>
            @endif
            <div class="pull-right">
            <a href="{{ route('admin.users.create') }}" class="btn btn-primary">Create New User</a>
            </div>
          </div>

          <div class="col-md-12">
            <div class="row">
              <div class="form-group col-md-5">                
                <input type="text" placeholder="Search..." name="keyword" id="keyword" class="form-control">
              </div>
              <div class="form-group col-md-3">
                <select class="form-control" id="filter_role_id">
                  <option value=""> Choose Role </option>
                  @foreach ($roles as $role)
                      <option value="{{ $role->id }}" >{{ $role->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="form-group col-md-1">
                <select class="form-control" id="limits" name="limits">
                    <option value="10" > 10 </option>
                    <option value="20" > 20 </option>
                    <option value="50" > 50 </option>
                    <option value="100" > 100 </option>
                    <option value="500" > 500 </option>
                </select>
              </div>
            </div>
          </div>

          <div class="col-md-12">
            <div class="card ">
              <div class="card-header">
                <h2>User List</h2>
              </div>
              <div class="card-body" id="dynamic_data">
                <table class="table table-striped table-bordered table-responsive-md">
                  <thead class="text-primary">
                    <th>No#</th>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>NRC</th>
                    <th>Approve Status</th>
                    <th>Created At</th>
                    <th width="160">Actions</th>
                  </thead>
                  <tbody>
                    <tr id="loader" style="display: none; height: 50px;">
                      <td colspan="10"> <div class="text-center">Processing...</div></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
    </div>
@endsection

@push('scripts')
  <script>
    $(function(){
      
      // on load
      fetch_records();

      $(document).on('click', '.pagination a', function(event){
        event.preventDefault(); 
        let page = $(this).attr('href').split('page=')[1];
        fetch_records(page);
       });
      // Search by keyword
      $('#keyword').keyup(function(){
        fetch_records();
      });

      $(document).on('change', '#filter_role_id, #limits', function(){
        fetch_records();
      });

    });

    // fetch data
    function fetch_records(page = ""){
      let data = getRequestData();
      data.page = page;
      $.ajax({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url:"/en/admin/users",
        data: data,
        type: "get",
        datatype: "html",
        beforeSend: function(){
          $("#loader").show();
        },
        success:function(data)
         {
          $('#dynamic_data').html(data);
          $("#loader").hide();
         },
         complete:function(data){
          // Hide image container
         }
      });
    }
    // get filter request values
    function getRequestData(){
      return {
        keyword : $('#keyword').val(),
        filter_role_id : $('#filter_role_id').val(),
        limits : $('#limits').val(),
      }
     }
  </script>
@endpush