@extends('layouts.header')
@section('content')
<!--  BEGIN CONTENT AREA  -->
	<br>
	<div class="page-header">
		
		<div class="breadcrumb-four">
		<ol class="breadcrumb">
			<ul class="breadcrumb">
				<li><a href="{{url('dashboard')}}" title="Go to Home Page!"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></a></li>
				<li >
					<a href="{{url('Admin-Panel')}}"  title="Administration">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-unlock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>
						Admin Panel
					</a>
				</li>
			</ul>
		</ol>
	</div>
	</div><br>
	<div class="row">
		<div class="col-lg-12 col-md-12 layout-spacing">
			<div class="widget-content widget-content-area" height="800">
				<div class="alert alert-info" style="text-align: left">
					<p>when the Role is selected and Clicked on configure Based on the Role Access all the Menu will be added for the respective roles. 
					<br>So the Users who is associated with the Role will Get the Menu Configured.</p>
				</div>
				<div class="row">
					<div class="col-md-4">
						<label>Role <font color="red">*</font></label>
						<select class="form-control" name="RoleId" id="RoleId">
							<option value="">--select Role--</option>
							@foreach($RollsArray as $RoleId=>$RoleName)
								<option value="{{$RoleId}}">{{$RoleName}}</option>
							@endforeach
						</select>
					</div>
					<div class="col-md-4">
						<br><br>
						<button class="btn btn-primary  mb-2 mr-2 btn-rounded" id="ConfigureButton" onclick="ConfiureMenubyRole()"> 
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
							&nbsp;&nbsp;Configure &nbsp; / &nbsp; RESET
						</button>
					</div>
				</div><br>
			</div>
		</div>
	</div>

	</div>
	
	<script>
	ConfiureMenubyRole=()=>
	{
		var RoleId=document.getElementById('RoleId').value;
		if(RoleId=='')
		{
			 Snackbar.show({
				text: 'Please Select Role',
				pos: 'top-right',
				 actionTextColor: '#e2a03f',
				 backgroundColor: '#e7515a'
			});
			return false;
		}
		var formData = {
			RoleId: RoleId,
		};
		$.ajax({
			type:"post",
			url: "{{url('ConfiureMenubyRole')}}",
			data: formData,
			beforeSend:function() {
				document.getElementById('ConfigureButton').disabled=true;
			},
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			//dataType: 'json',
			success:function(result)
			{
				document.getElementById('ConfigureButton').disabled=false;
				alert(result);
			},
			complete: function() {
			},
			error:function(response)
			{
				alert("error:"+response);
			}
		});
	}
	</script>
	
	<!--  END CONTENT AREA  -->
@endsection