@extends($layout)
@section('header_scripts')
<link href="{{CSS}}ajax-datatables.css" rel="stylesheet">
@stop
@section('content')


<div id="page-wrapper">
			<div class="container-fluid">
				<!-- Page Heading -->
				<div class="row">
					<div class="col-lg-12">
						<ol class="breadcrumb">
							<li><a href="{{PREFIX}}"><i class="mdi mdi-home"></i></a> </li>
							<li><a href="{{URL_FEE_REPORTS}}">{{getPhrase('fee_dashboard')}}</a></li>
							<li>{{ $title }}</li>
						</ol>
					</div>
				</div>
								
				<!-- /.row -->
				<div class="panel panel-custom">
					<div class="panel-heading">
						
						<div class="pull-right messages-buttons">
							 
							<a href="{{URL_FEE_CATEGORIES_ADD}}" class="btn  btn-primary button" >{{ getPhrase('create')}}</a>
							 
						</div>
						<h1>{{ $title }}</h1>
					</div>
					<div class="panel-body packages">
						<div> 
						<table class="table table-striped table-bordered datatable" cellspacing="0" width="100%">
							<thead>
								<tr>
									
									@if(checkRole('owner'))
									<th>{{ getPhrase('branch')}}</th>
									@endif
									<th>{{ getPhrase('academic_year')}}</th>
									<th>{{ getPhrase('name')}}</th>
									<th>{{ getPhrase('installments')}}</th>
									<th>{{ getPhrase('scholars_installment_amount')}}</th>
									<th>{{ getPhrase('scholars_other_amount')}}</th>
									<th>{{ getPhrase('boarders_installment_amount')}}</th>
									<th>{{ getPhrase('boarders_other_amount')}}</th>
									<th>{{ getPhrase('status')}}</th>
									<th>{{ getPhrase('action')}}</th>								  
								</tr>
							</thead>
							<tfoot>
							 	<tr>
							 		
								 	@if(checkRole('owner'))	
								 	<td></td>
								 	@endif 
								 	<td class=" "></td>	
									<td></td> 								
									<td class="non_searchable"></td> 								
									<td class="non_searchable"></td> 
									<td class="non_searchable"></td> 
									<td class="non_searchable"></td> 
									<td class="non_searchable"></td> 
									<td class="non_searchable"></td>
									<td class="non_searchable"></td>
								</tr>
							 </tfoot> 
						</table>
						</div>
					</div>
				</div>
			</div>
			<!-- /.container-fluid -->
		</div>
@endsection
 

@section('footer_scripts')
 	<script src="{{JS}}bootstrap-toggle.min.js"></script>
 	<script src="{{JS}}jquery.dataTables.min.js"></script>
	<script src="{{JS}}dataTables.bootstrap.min.js"></script>
	<!-- <script src="/js/scripts/datatables.js"></script> -->
  <script>
  var tableObj;
    $(document).ready(function(){
   		 tableObj = $('.datatable').DataTable({
	            processing: true,
	            serverSide: true,
	            cache: true,
	            ajax: '{{ route('feecategories.dataTable') }}',
	           initComplete: function () {
                this.api().columns().every(function () {
                    var column = this;
                    var input = document.createElement("input");
                    $(input).appendTo($(column.footer()).empty())
                    .on('change', function () {
                        column.search($(this).val(), false, false, true).draw();
                    });
                });
            }
	    });
    });
  </script>

<script>
	function deleteRecord(slug) {
	swal({
		  title: "Are you sure?",
		  text: "You will not be able to recover this record!",
		  type: "warning",
		  showCancelButton: true,
		  confirmButtonClass: "btn-danger",
		  confirmButtonText: "Yes, delete it!",
		  cancelButtonText: "No, cancel pls!",
		  closeOnConfirm: false,
		  closeOnCancel: false
		},
		function(isConfirm) {
		  if (isConfirm) {
		  	  var token = '{{ csrf_token()}}';
		  	route = '{{URL_FEE_CATEGORIES_DELETE}}'+slug;  
		    $.ajax({
		        url:route,
		        type: 'post',
		        data: {_method: 'delete', _token :token},
		        success:function(msg){
		        	tableObj.ajax.reload();
		        	swal("Deleted!", "Your record has been deleted. ", "success");
		        }
		    });

		  } else {
		    swal("Cancelled", "Your record is safe :)", "error");
		  }
	});
	}
</script> 

@stop