@extends("LaravelVueAdmin.layouts.app")

@section("contentheader_title", "Users")
@section("contentheader_description", "users listing")
@section("section", "Users")
@section("sub_section", "Listing")
@section("htmlheader_title", "Users Listing")

@section("headerElems")

@endsection

@section("main-content")

@if (count($errors) > 0)
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif


<!-- Ajax sourced data -->
<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title text-center">@yield("sub_section")</h5>
			<div class="heading-elements">
				<ul class="icons-list">
					<li><a data-action="reload"></a></li>
					<li><a data-action="collapse"></a></li>
				</ul>
			</div>
		</div>

		@hasSection('description')
		<div class="panel-body">
			@yield('description')
		</div>
		@endif

		<table id="example1" class="table datatable-ajax">
			<thead>
				<tr>
@foreach( $listing_cols as $col )
					<th>{{ $module->fields[$col]['label'] or ucfirst($col) }}</th>
@endforeach
@if($show_actions)
					<th>Actions</th>
@endif
				</tr>
			</thead>
		</table>
	</div>
		<!-- /ajax sourced data -->

@endsection

@push('styles')
<link rel="stylesheet" type="text/css" href="{{ asset('LaravelVueAdmin/assets/plugins/datatables/datatables.min.css') }}"/>
@endpush

@push('scripts')
<script src="{{ asset('LaravelVueAdmin/assets/plugins/datatables/datatables.min.js') }}"></script>
<script>
$(function () {
	$("#example1").DataTable({
		processing: true,
        serverSide: true,
        ajax: "{{ url(config('LaravelVueAdmin.adminRoute') . '/user_dt_ajax') }}",
		language: {
			lengthMenu: "_MENU_",
			search: "_INPUT_",
			searchPlaceholder: "Search",
			processing: "Memproses data..."
		},
		lengthMenu: [[50, 100, 150, -1], [50, 100, 150, "Semua"]],
		iDisplayLength: 50,
		@if($show_actions)
		columnDefs: [ { orderable: false, targets: [-1] }],
		@endif
	});
	$.fn.dataTable.ext.errMode = 'none';
	$('#example1').on('error.dt', function(e, settings, techNote, message) {
		(function($) {
			$('body').pgNotification({
				style: 'circle',
				message: 'Mohon <a class="alert-danger" onclick="window.location.reload(true);"><u><i class="fa fa-refresh"></i>Reload halaman</u></a>',
				position: "top-right",
				type: "danger",
				showClose: false,
				timeout: 0,
				title: 'PROSES DIHENTIKAN',
				thumbnail: '<i class="fa fa-exclamation-circle fa-4x"></i>'
			}).show();
		})(window.jQuery);
	});
	$("#user-add-form").validate({
		
	});
});
</script>
@endpush