@extends('Layouts.Application')

@section('MainContent')

<div class="col-md-12">
	<div class="card mb-4">
		<div class="card-body">
			<form class="form-horizontal" method="POST" action="{{ route('LoggedIn.Role.updateMenuByRole') }}">
				{{ csrf_field() }}
				<input type="hidden" name="role_id" value="{{ $roleId }}">

				
				<div class="panel-header">
					<h4 class="panel-title">Permission Setting:</h4>
				</div>
				<label style="border:1px solid #ddd; padding:5px; margin-top: 10px; background-color: #efefef">
					<input id="checkoruncheck" type="checkbox" checked="checked">
					<strong style="user-select: none;">Check/Uncheck All</strong>
				</label>

				@foreach ($MenuArray as $elements)
					<div class="row" style="margin-bottom: 30px;">
						@foreach ($elements as $key=>$elements)
							<div class="col-md-3">
								<div class="menus">
									<label>
										<input name="{{ str_replace(' ', '_', $key) }}" class="parent_{{ str_replace(' ', '_', $key) }}" type="checkbox" value="{{ array_search($key, $parentMenus) }}" onChange="permission_select_deselect_child(this)" {{ empty($checkPermissions) ? 'checked' : '' }} {{ in_array(array_search($key, $parentMenus), $checkPermissions) ? 'checked' : '' }}>
										<strong style="user-select: none;">{{ $key }} </strong>
									</label>
								</div>
								<div class="action-wraper">
									@foreach ($elements as $key2 => $element)
										<div class="actions" style="margin-left:20px;">
											<label style="user-select: none;">
												<input name="{{ $key2 }}" class="{{ str_replace(' ', '_', $key) }}" type="checkbox" value="{{ $key2 }}" onChange="permission_select_parent('{{ str_replace(' ', '_', $key) }}')"  {{ empty($checkPermissions) ? 'checked' : '' }} {{ in_array($key2, $checkPermissions) ? 'checked' : '' }}> {{ mystudy_case(\Illuminate\Support\Str::snake($element)) }}
											</label>
										</div>
									@endforeach
								</div>
							</div>
						@endforeach
					</div>
				@endforeach

				<div class="row">
					<div class="col-md-12">
						<button type="submit" class="btn btn-primary">
							Update Menu Role
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<script>
	function permission_select_deselect_child(selector) {
		var check;
		if ($(selector).is(':checked') === false) {
			check = false;
		} else {
			check = true;
		}
		if ($(selector).parent().parent().hasClass('menus') === true) {
			var action_ul = $(selector).parent().parent().next('div.action-wraper');
			$.each(action_ul.children('.actions'), function(ind, val) {
				var cur_check_box = $(val).children().children('input');
				$(cur_check_box).prop('checked', check);
			});
		}
	}

	function permission_select_parent(selector) {
		var check = $('.' + selector).is(':checked');
		$('.parent_' + selector).prop('checked', check);
	}
	$(document).ready(function(e){
		$("#checkoruncheck").change(function () {
			$("input:checkbox").not('#checkboxCustom3').prop('checked', $(this).prop("checked"));
		});
	});
</script>

@endsection