@extends('panel.layouts.app')

@section('content')
<div class="content-wrapper">
	<section class="content">
		<div class="row">
			<div class="col-md-12">
				<div class="box box-default">
					<div class="box-header with-border">
						<h3 class="title" >Permission</h3>
					</div>
					<div class="box-body">
						<table class="table" id="permission_grid">
							<thead>
								<tr>
									<th>Entity</th>
								</tr>
							</thead>
						</table>
					</div>
					<div class="box-footer">
					</div>
				</div>
			</div>
		</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">Add</th>
							<th class="text-center">Edit</th>
							<th class="text-center">Delete</th>
							<th class="text-center">View</th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			{{-- </div> --}}
			</div>
		</script>
	</section>
</div>

@endsection

@section('custom-scripts')
<script src="{{ laracore_assets('dist/js/handlebars.js') }}"></script>
<script type="text/javascript">
	$(document).ready(function(e){
		permission_grid = $('#permission_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') }}" },
			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());


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

		var row = permission_grid.row(tr);
		var tableId = 'permission-'+row.data().id;
		$('#permission_grid tr')removeClass('shown');

		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,
			"bLengthChange" : false,
			"scrollY": "auto",
			"scroller":  false,
			ajax: {
				url: data.details_url,
				type: 'POST',
			},
			drawCallback: function() {
				initIcheck();
			},
			columns: [
			{data: 'name', 		name: 'name'},
			{data: 'add', 		name: 'add', 		className:'text-center'},
			{data: 'edit', 		name: 'edit', 	className:'text-center'},
			{data: 'delete', 	name: 'delete', className:'text-center'},
			{data: 'view', 		name: 'view',		className:'text-center'},
			],
		})
	}
</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() !!} --}}
@endsection