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

@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.books.import-form') }}" class="btn btn-primary"><i class="nc-icon nc-cloud-upload-94"></i> Upload</a>
            <a href="{{ route('admin.books.create') }}" class="btn btn-primary">Create New Book</a>
            </div>
          </div>

          <div class="col-md-12">
            <div class="row">
              <div class="form-group col-md-6">                
                <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_sector_id" name="filter_sector_id">
                  <option value=""> Sector </option>
                  @foreach ($sectors as $sector)
                      <option value="{{ $sector->id }}" >{{ $sector->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="form-group col-md-2">
                <select class="form-control" id="filter_type" name="filter_type">
                  <option value=""> Book Type </option>
                  @foreach ($types as $key => $type_name)
                      <option value="{{ $key }}" >{{ $type_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>Books 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>Title</th>
                    <th>File</th>
                    <th>Sector</th>
                    <th style="width: 100px">Type</th>
                    <th>Published By</th>
                    <th width="160">Actions</th>
                  </thead>
                  <tbody>
                    <tr id='loader' style='display: none; height: 50px;'>
                      <td colspan="8"> <div class="text-center">Processing...</div></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
    </div>
@endsection

@push('scripts')
  <script>
    $(function(){
      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_type, #filter_sector_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/books",
          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(),
          type : $('#filter_type').val(),
          sector_id : $('#filter_sector_id').val(),
          limits : $('#limits').val(),
        }
       }
  </script>
@endpush