@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>
				<li>
				<a href="{{url('List-Roles')}}" title="List-Users">
					<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-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
					List Roles
				</a>
				</li>
				<li>
				<a href="{{url('List-Users')}}" title="List-Users">
					<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-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
					List Users
				</a>
				</li>
				<li class="active">
				<a href="{{url('Create-Roles')}}" class="active" title="Create-Roles">
					<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-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
					Create Roles
				</a>
				</li>
			</ul>
		</ol>
	</div>
</div>
<br>
		<div class="row">
			<div class="col-lg-12 col-md-12 layout-spacing">
				<div>
					<!--  class="statbox widget box box-shadow"
					<div class="widget-header">
						<div class="row">
							<div class="col-xl-12 col-md-12 col-sm-12 col-12">
								<h4>Create Role</h4>
							</div>          
						</div>
					</div> -->
					<div class="widget-content widget-content-area">
						<form action="{{url('/Store-Roles')}}" method="POST" >
							@csrf
							<div class="row">
								<div class="col-xs-12 col-sm-12 col-md-12">
									<div class="form-group">
										<strong>Role Name : <font color="red">*</font></strong>
										<input type="text" name="RoleName" id="RoleName" class="form-control" placeholder="RoleName" onchange="CheckRoleExists()" required>
										<div id="DisplayRoleError" style="display:none;"><font color="red"><small><i>Role is Already Exists</i></small></font></div>
									</div>
								</div>
								<div class="col-xs-12 col-sm-12 col-md-12">
									<div class="form-group">
										<strong>Description:</strong>
										<textarea class="form-control" style="height:50px" name="Description"
											placeholder="Description" id="Description"></textarea>
									</div>
								</div>
								<div class="col-xs-12 col-sm-12 col-md-12 text-center">
									<button type="submit" class="btn btn-primary" id="RoleSubmitBtn">Submit</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
        <!--  END CONTENT AREA  -->
<script>
	CheckRoleExists=()=>
	{
		var RoleName=document.getElementById('RoleName').value;
		 var formData = {
			RoleName : RoleName,
		};
		$.ajax({
			type:"post",
			url: "{{url('CheckRoleExists')}}",
			data: formData,
			beforeSend:function() {
			},
			success:function(result)
			{
				if(result==1)
				{
					document.getElementById('DisplayRoleError').style.display="block"; 
					$('#RoleSubmitBtn').prop("disabled", true); 
				}
				else
				{
					document.getElementById('DisplayRoleError').style.display="none"; 
					$('#RoleSubmitBtn').prop("disabled", false); 
				}
			},
			complete: function() {
			},
			error:function(response)
			{
				alert("error:"+response);
			}
		});
	}
</script>
@endsection