@extends('layouts.app')
@section('titlePage', 'Manage Role')
@push('style')
<link href="{{ url('/') }}/css/hummingbird-treeview.css" rel="stylesheet" type="text/css">
<style>
	.checkbox-center{
		text-align: center;
	}
	#treeview li{
		list-style: none;
	}
</style>
@endpush
@section('content')
<div class="page-wrapper">
	<!-- [ breadcrumb ] start -->
	<div class="page-header">
		<div class="page-block">
			<div class="row align-items-center">
				<div class="col-md-12">
					<div class="page-header-title">
						<h5>Create</h5>
					</div>
					<ul class="breadcrumb">
						<li class="breadcrumb-item"><a href=""><i class="feather icon-home"></i></a></li>
						<li class="breadcrumb-item"><a href="#!">Create New Role&Permission</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- [ breadcrumb ] end -->
	<!-- [ Main Content ] start -->
	<div class="row">
		<div class="col-sm-12">
			<div class="card">
				<div class="card-header">
					<h5>Create New Role</h5>
					<a class="btn btn-secondary" data-bs-target="#rolestaff" data-bs-toggle="modal" href="javascript:void(0)">Help Desk</a>
				</div>
				<div class="card-body">
                    @include('common.alert')
					<!-- <form method="POST" action="{{ _route('client.store-rolepermission') }}"> -->
					{!!Form::open(array('class'=>'form-horizontal','id'=>'user_form'));!!}
						@csrf
						<div class="row">
							<div class="col-md-6">
								<div class="form-group">
									<h5 >Select Role</h5>
									<select class="form-control" name="role" id="role" >
									<option value="">-- Select Role --</option>
									@foreach ($list['roles_data'] as $role)
										<option value="{{$role->id}}">{{$role->name}}</option>
									@endforeach
									</select>
									
								</div>
							</div>
							<div class="col-md-6"></div>
							
							<div class="col-md-6" id="permission_div">
								<fieldset class="floral form-group" >
									<ul id="treeview">
										@foreach ($list['permissions_list'] as $permission)
										<li>
											<i class="fa fa-plus"></i>
											@if($permission->is_parent_module)
												<label><input id="xnode-{{ $permission->id }}" data-id="custom-{{ $permission->id }}" type="checkbox" value="{{ $permission->index_key }}" name="{{ $permission->index_key }}" />
												{{ $permission->module }}</label>
												@if(count($permission->sub_modules)>0)
													<ul style="display: none;">
														@foreach ($permission->sub_modules as $sub_module)
														<li>
															<label>
															<input  id="xnode-{{ $permission->id }}-{{ $sub_module->index_key }}" value="{{ $sub_module->index_key }}" name="{{ $sub_module->index_key }}" type="checkbox" />
															{{ $sub_module->module }} </label>        
														</li>
														@endforeach
													</ul>
												@endif
											@endif
										</li>
										@endforeach
									</ul>
								</fieldset>
							</div>
						</div>
							
							<div class="col-md-12">												
								<button type="submit" id="btnSubmit" value="submit" data-loading-text="<i class='fa fa-spinner fa-spin '></i> @lang('messages.Processing...')" class="btn btn-primary">Save</button>
							<button type="button" id="btnCancel" value="" class="btn btn-danger" onclick="window.location='{{ _route('client.listPermission') }}'">Cancel</button>
							
							</div>
						</div>
					</form>
				<div class="modal fade" id="rolestaff" tabindex="-1" aria-hidden="true">
					<div class="modal-dialog modal-dialog-centered">
						<div class="modal-content">
							<div class="modal-header">
								<h4>Add Staff</h4><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							</div>
							<div style="position: relative; padding-top: 56.25%;"><iframe src="https://iframe.mediadelivery.net/embed/102326/808cc631-0c77-4815-b11e-d1bf15fc374a?autoplay=true&muted=true" loading="lazy" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe></div>
						</div>
					</div>
				</div>
				</div>
			</div>
		</div>
	</div>
	<!-- [ Main Content ] end -->
</div>
@endsection
@push('script')
<script src="{{ asset('js/hummingbird-treeview.js') }}"></script>
<script>
        
        $(document).ready(function () {
			$('#user_form').submit(function (e) {
                e.preventDefault();
                var permissions=[];
                $('#permission_div input:checked').each(function () {
                    permissions.push(this.value);
				});
                $('#loader-wrapper').removeClass('loader');
                $("#btnSubmit").attr("disabled", true);
                $('#btnCancel').attr("disabled", true);
                var token, url, data;
                token = $('meta[name="csrf-token"]').attr('content');
				url = "{{ _route('client.store-rolepermission') }}";
				data = new FormData(this);
				data.append('permissions', permissions);
                $.ajax({
                    url: url,
                    headers: {'X-CSRF-TOKEN': token},
                    data: data,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    datatype: 'json',
                    success: function (resp) {

                        $('#loader-wrapper').addClass('loader');
                        $("#btnSubmit").attr("disabled", false);
						$('#btnCancel').attr("disabled", false);
						alert("Roles and permissions has been created successfuly");
						var loc = '{{ url('test/rolepermissions/index')}}';
						$(location).attr('href', loc);
                      
                    },
                    error: function (err) {
                        $("#btnSubmit").attr("disabled", false);
                        $('#btnCancel').attr("disabled", false);
                        ('#btnSubmit').button('reset');
                    }
                });
            })
        });
$("#treeview").hummingbird();
</script>

@endpush