@extends('callcenter.layout.default')

@section('content')

<div class="m-grid__item m-grid__item--fluid m-wrapper">
	<!-- BEGIN: Subheader -->
	<div class="m-subheader ">
		<div class="d-flex align-items-center">
			<div class="mr-auto">
				<h3 class="m-subheader__title ">
					Add New Role
				</h3>
			</div>
		</div>
	</div>
	<!-- END: Subheader -->
	<div class="m-content">
		<!--Begin::Section-->
		<div class="row">
			<div class="col-lg-12">
				<div class="m-portlet">
					@if (session()->has('error'))
					<div class="m-alert m-alert--icon alert alert-danger" role="alert">
						<div class="m-alert__icon">
							<i class="la la-warning"></i>
						</div>
						<div class="m-alert__text">
							{!! session()->get('error') !!}
						</div>
						<div class="m-alert__close">
							<button type="button" class="close" data-close="alert" aria-label="Close"></button>
						</div>
					</div>
					@endif
					<div class="m-portlet__body">
						<ul class="nav nav-tabs" role="tablist">
							<li class="nav-item">
								<a class="nav-link active show" data-toggle="tab" href="#tab-1">
									<strong>Basic Details</strong>
								</a>
							</li>
						</ul>
						<div class="tab-content">
							<div class="tab-pane active" id="tab-1" role="tabpanel">
								<form method="post" action="{{ route('post_role') }}">
									<input type="hidden" name="_token" value="{{ Session::token() }}">
									<div class="m-form__section m-form__section--first">
										<div class="row">
											<div class="col-sm-6">
												<div class="form-group m-form__group">
													<label for="example_input_first_name">Title</label>
													<input type="text" class="form-control m-input" name="role_name" placeholder="Enter Title" required>
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group m-form__group">
													<label for="example_input_last_name">Status</label>
													<select name="status" class="form-control m-input m-input--square">
														<option value="1">Active</option>
														<option value="0">InActive</option>
													</select>
												</div>
											</div>
										</div>
									</div>
									<div>
										<button type="submit" id="submit-btn" class="btn btn-primary">Next</button>
									</div>
								</form>
							</div>
							<div class="tab-pane" id="tab-2" role="tabpanel">
								<div class="table-responsive">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--End::Section-->
	</div>
</div>
@endsection
@section('js')

<script type="text/javascript">
	function check_password_valid() {

		var password = $("#password").val();
		var confirmPassword = $("#cpassword").val();

		if (password != confirmPassword) {
			alert("Passwords do not match.");
			$('#submit-btn').attr('disabled', true);
			return false;
		} else {
			$('#submit-btn').removeAttr('disabled');
			return true;
		}
	}
</script>
@endsection