{{ Form::open(
	[
	'id'	=>	'apply_permission_form',
	'method'=> 'POST',
	'url' =>  route('permissions.store')]) 
}}
<div class="box-body">
	<table class="table" id="entities_grid">
		<thead>
			<tr>
				<th>Entity</th>
			</tr>
		</thead>
	</table>
</div>
{{ Form::close() }}
{{-- </div> --}}


<script id="details-template" type="text/x-handlebars-template">
	{{-- <div class="label label-primary">Permissions</div> --}}
	<div class="details-template-table">
		{{-- <div class="table-responsive"> --}}
		<table class="table table-bordered table-hover details-table" id="permission-@{{id}}">
			<thead>
				<tr>
					<th>Roles</th>
					<th class="text-center">View</th>
					<th class="text-center">Add</th>
					<th class="text-center">Edit</th>
					<th class="text-center">Delete</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
		{{-- </div> --}}
	</div>
</script>
@section('custom-scripts')
<script src="{{ laracore_assets('dist/js/handlebars.js') }}"></script>
<script type="text/javascript">
	var entities_grid = "";
	$(document).ready(function(e){

		entities_grid = $('#entities_grid').DataTable({
			"serverSide": true,
			"aLengthMenu": [[10, 20, 30, 40, 50], [10, 20, 30, 40, 50]],
			"ordering": false,
			"pageLength": "{{ LaraCore::setting('default_pagination') }}",
			"language": { "emptyTable": "{{ LaraCore::setting('no_records') }}" },
			"scrollY": "auto",
			"scroller":  false,
			"bInfo": false,
			ajax: {
				url: '{{route("permissions.list")}}',
				type: 'POST',
			},
			columns: [
			// {data: 'id',       		name: 'id',      className:'client-td', orderable:false, searchable :false},
			{data: 'entity_name', name: 'entity_name', className:'client-td'},
			],
		});
		
	});

	var template = Handlebars.compile($("#details-template").html());

	$('#entities_grid').on('click', 'td:first-child', function () 
	{
		
		var tr = $(this).closest('tr');

		var row = entities_grid.row(tr);
		var tableId = 'permission-'+row.data().id;

		if (row.child.isShown()) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
    } else {
      // Open this row
      row.child(template(row.data())).show();
      initTable(tableId, row.data());
      tr.addClass('shown');
      tr.next().addClass('child_datatable');
      tr.next().find('td').addClass('no-padding');
    }
  });

	function initTable(tableId, data) {
		$('#' + tableId).DataTable({
			serverSide: true,
			"paging": false,
			"bFilter": false,
			"bInfo": false,
			"ordering": false,
			"scrollY": "auto",
			"scroller":  false,
			ajax: {
				url: data.details_url,
				type: 'POST',
			},
			drawCallback: function() {
				initIcheck();
			},
			columns: [
			{data: 'name', 		name: 'name'},
			{data: 'view', 		name: 'view',		className:'text-center'},
			{data: 'add', 		name: 'add', 		className:'text-center'},
			{data: 'edit', 		name: 'edit', 	className:'text-center'},
			{data: 'delete', 	name: 'delete', className:'text-center'},
			],
		})
	}

	function initEntityTable(){
		
	}

	$(document).on('shown.bs.modal', '#permissions_modal', function(){
    //initEntityTable();
    entities_grid.draw();

  })
</script>

{{-- <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="/vendor/datatables/buttons.server-side.js"></script> --}}
{{-- {!! $dataTable->scripts() !!} --}}
@append