@extends('layouts.admin')
@section('title') Roles & Permissions @endsection
@section('style')
<style>
	.iconpicker-popover.popover.fade.in.bottom{
		opacity: 1 !important;
	}
	.select2-selection.select2-selection--multiple{
		height: 150px !important;
	}
	.select2-selection--multiple .select2-selection__rendered{
		height: 150px !important;
		overflow-y: auto !important;
	}
</style>
@endsection
@section('content')
{{-- <div class="row justify-content-end"> --}}
<div class="row justify-content-start">
	<div class="col-md-4">
		{{-- <a class="btn-one mb-3" href="{{ route('admin.manage-roles') }}"><i class="fa-regular fa-plus"></i> Manage Roles</a> --}}
		<a class="btn-one mb-3 float-start" href="{{ route('admin.manage-roles') }}"><i class="fa-regular fa-arrow-left"></i>Back</a>
	</div>
</div>
<div class="row">
	<div class="col-md-12 mb-5">
		<div class="bg-white card-box border-20">
			<h4><i class="fa-regular fa-plus"></i>Add New Role</h4><hr>
			<form method="post" action="{{ route('admin.insert-role') }}">
				@csrf
				<div class="row">
					<div class="col-md-12 mt-5 mb-5">
						<div class="form-group">
							<label>Role:</label>
							<input class="form-control" value="{{ old('role') }}"  name="role" required>
						</div>
					</div>
					<div class="col-md-12 mt-5 mb-5">
						<div class="form-group">
							<label>Permissions:</label>
							<select name="permissions[]" id="permissions" class="select2" multiple>
			         			<option value=" " disabled> {{ __('contents.select') }}</option>
			         			<option value="Manage Users" >Manage Users</option>
								<option value="Manage Subscriptions" >Manage Subscriptions</option>
								<option value="Manage Plans">Manage Plans</option>
								<option value="Manage Rentals">Manage Rentals</option>
								<option value="Manage Other Rentals" >Manage Other Rentals</option>
								<option value="Manage Aminities" >Manage Aminities</option>
								<option value="Manage Property Types" >Manage Proeprty Types</option>
								<option value="Manage Rental Type" >Manage Rental Type</option>
								<option value="Manage Contract Types" >Manage Contract Types</option>
								<option value="Manage Downloads">Manage Downloads</option>
								<option value="Manage Affiliates" >Manage Affiliates</option>
								<option value="Manage Settings" >Manage Settings</option>
								<option value="Manage Localization" >Manage Localization</option>
								<option value="Manage Roles & Permissions" >Manage Roles & Permissions</option>
								{{-- <option value="Manage Pages" >Manage Pages</option> --}}
								<option value="Manage Payments" >Manage Payments</option>
								<option value="Manage Provinces" >Manage Provinces</option>
								<option value="Manage Districts" >Manage Districts</option>
								<option value="Manage Communes" >Manage Communes</option>
								<option value="Manage Villages" >Manage Villages</option>
								<option value="Manage Testimonials" >Manage Testimonials</option>
								<option value="Manage Admins" >Manage Admins</option>
							</select>
						</div>
					</div>
					<div class="col-md-12">
						<div class="form-group">
							<label>&nbsp;</label>
							<div class="d-grid">
								<button type="submit" class="btn btn-two btn-block"><i class="fa-regular fa-plus text-white"></i> Add Role</button>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
@endsection
@section('script')
<script type="text/javascript">
	$('.select2').select2({
        width: '100%',
        allowClear: false,
        placeholder: "{{ __('contents.select') }}"
    });
</script>
@endsection