@extends('loader')
@extends('layouts.app')
@extends('layouts.master')
<style>
#packageList thead tr {
  cursor: pointer;
  outline: none;
}
#packageList thead tr th::after { 
  content: '▼';
  font-size: 12px;
  margin-left: 5px;
}
#packageList #no-sort::after { 
  content: '';
}
</style>
@section('content')
<div class="main-panel dashboard"> 
    <div class="content-wrapper">

    <div class="row" id="tableBody"></div>

    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

    var page=1; // initial page in the list
    var sortorder = "DESC";
    var sortcolumn = "updated_at";
    var tab = "";

$(document).ready(function(){

    fetchPackagesToAssign();

     // event for catching click on pagination links
     $(document).on('click', '.pagination a', function(event){

      event.preventDefault(); 
      page = $(this).attr('href').split('page=')[1];
      fetchPackagesToAssign(page,sortcolumn,sortorder);

    });
    // event for catching click on pagination links ends

});

// ajax function to fetch group data
function fetchPackagesToAssign(page=1,field="package_name",sort="DESC"){
        
        sortcolumn = field;
        sortorder = sort;
        showorhideloader();
        var group_id = ;

        $.ajax({
            url:"{{url('/getPackageToAssign')}}",
            data:{'page':page,'field_to_sort':field,'sort':sort,'id':group_id},
            success:function(data) 
            {
               if(data == ""){
                window.location = "{{url('/login')}}";
               }
                $('#tableBody').html(data);
                showorhideloader('hide');
            },error: function (responseData, textStatus, errorThrown) {
                console.log(responseData+" "+textStatus+" "+errorThrown);
            },
        });
        
    }
    // ajax function to fetch group data ends

  function sortorderchange(field,sort){
    if(sort == "ASC"){
      sort = "DESC";
    }
    else{
      sort = "ASC";
    }
    fetchPackagesToAssign(page,field,sort);
  }

</script>
@endsection