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

@section('content')
    <div class="content">
        <div class="row">
          <div class="col">
            @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.sectors.create') }}" class="btn btn-primary">Create new sector</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-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>
                </select>
              </div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="card ">
              <div class="card-header">
                <h2>Sector List</h2>
              </div>
              <div class="card-body" id="dynamic_data">
                @include('backend.sector.row')
              </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', '#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/sectors",
          data: data,
          type: "get",
          datatype: "html",
          success:function(data)
           {
            $('#dynamic_data').html(data);
           }
        });
      }
      // get filter request values
      function getRequestData(){
        return {
          keyword : $('#keyword').val(),
          limits : $('#limits').val(),
        }
       }
  </script>
@endpush