@extends('layouts.app')
@section('title', \App\CPU\translate('Create Role'))
@push('css_or_js')
    <!-- Custom styles for this page -->
    <link href="{{asset('public/assets/back-end')}}/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
@endpush

@section('content')
<div id="kt_app_content" class="app-content flex-column-fluid">
	<!--begin::Content container-->
	<div id="kt_app_content_container" class="app-container container-xxxl">
		<!--begin::Card-->
		<div class="card">
			<div class="card-body pt-0">

				<!-- Page Title -->
				<div class="mb-3">
					<h2 class="h1 mb-0 text-capitalize d-flex align-items-center gap-2">
						<img src="{{asset('/public/assets/back-end/img/add-new-seller.png')}}" alt="">
						{{\App\CPU\translate('Employee_Role_Setup')}}
					</h2>
				</div>
				<!-- End Page Title -->

                <form id="submit-create-role" method="post" action="{{route('admin.custom-role.store')}}">

                            @csrf
                            <div class="form-group row align-items-center">
                                <div class="col-md-6">
                                        <label for="name" class="title-color">{{\App\CPU\translate('role_name')}}</label>
                                        <input type="text" name="name" class="form-control" id="name"
                                            aria-describedby="emailHelp"
                                            placeholder="{{\App\CPU\translate('Ex')}} : {{\App\CPU\translate('Store')}}" required>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-check mt-4">
                                        <input type="checkbox" name="is_tamer_team" class="form-check-input" id="is_tamer_team">
                                        <label class="form-check-label title-color" for="is_tamer_team">{{\App\CPU\translate('is_tamer_team')}}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex gap-4 flex-wrap">
                                <label for="name" class="title-color font-weight-bold mb-0">{{\App\CPU\translate('module_permission')}} </label>
                                <div class="form-group d-flex gap-2">
                                    <input type="checkbox" id="select_all">
                                    <label class="title-color mb-0" for="select_all">{{\App\CPU\translate('Select_All')}}</label>
                                </div>
                            </div>
							<hr>
                            <div class="row">
                                @foreach ( $permissions as $permission )
                                <div class="col-sm-6 col-lg-3">
                                    <div class="form-group d-flex gap-2">
                                        <input type="checkbox" name="modules[]" value="{{$permission}}" class="module-permission" id="{{$permission}}">
                                        <label class="title-color mb-0" style="{{Session::get('direction') === "rtl" ? 'margin-right: 1.25rem;' : ''}};"
                                        for="{{ $permission }}">{{\App\CPU\translate( $permission )}}</label>
                                    </div>
                                </div>
                                @endforeach
                            </div>

                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary">{{\App\CPU\translate('Submit')}}</button>
                            </div>
                        </form>
			</div>
		</div>

		<!--begin::Card-->
		<div class="card">
			<div class="card-body pt-0">
				<!--begin::Table-->
				<div id="kt_customers_table_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">

							<div class="row mt-3">
								<div class="col-md-12">
									<div class="card">
										<div class="px-3 py-4">
											<div class="row justify-content-between align-items-center flex-grow-1">
												<div class="col-md-4 col-lg-6 mb-2 mb-sm-0">
													<h5 class="d-flex align-items-center gap-2">
														{{\App\CPU\translate('Employee_Roles')}}
														<span class="badge badge-soft-dark radius-50 fz-12 ml-1">{{ count($rl) }}</span>
													</h5>
												</div>
												<div class="col-md-8 col-lg-6 d-flex flex-wrap flex-sm-nowrap justify-content-sm-end gap-3">
													<!-- Search -->
													<form action="{{url()->current()}}?search={{$search}}" method="GET">
														<div class="d-flex align-items-center position-relative my-1">
															<!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
															<span class="svg-icon svg-icon-1 position-absolute ms-6">
																<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
																	<rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor"></rect>
																	<path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="currentColor"></path>
																</svg>
															</span>
															<!--end::Svg Icon-->
															<input type="text" data-kt-customer-table-filter="search" class="form-control form-control-solid w-250px ps-15" name="search" placeholder="Search Roles">
														</div>
													</form>
													<!-- End Search -->
													<div class="">
														<a class="dropdown-item" href="{{route('admin.custom-role.export')}}">
															<!--begin::Export-->
															<button type="button" class="btn btn-light-primary me-3" >
															<!--begin::Svg Icon | path: icons/duotune/arrows/arr078.svg-->
															<span class="svg-icon svg-icon-2">
																<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
																	<rect opacity="0.3" x="12.75" y="4.25" width="12" height="2" rx="1" transform="rotate(90 12.75 4.25)" fill="currentColor" />
																	<path d="M12.0573 6.11875L13.5203 7.87435C13.9121 8.34457 14.6232 8.37683 15.056 7.94401C15.4457 7.5543 15.4641 6.92836 15.0979 6.51643L12.4974 3.59084C12.0996 3.14332 11.4004 3.14332 11.0026 3.59084L8.40206 6.51643C8.0359 6.92836 8.0543 7.5543 8.44401 7.94401C8.87683 8.37683 9.58785 8.34458 9.9797 7.87435L11.4427 6.11875C11.6026 5.92684 11.8974 5.92684 12.0573 6.11875Z" fill="currentColor" />
																	<path opacity="0.3" d="M18.75 8.25H17.75C17.1977 8.25 16.75 8.69772 16.75 9.25C16.75 9.80228 17.1977 10.25 17.75 10.25C18.3023 10.25 18.75 10.6977 18.75 11.25V18.25C18.75 18.8023 18.3023 19.25 17.75 19.25H5.75C5.19772 19.25 4.75 18.8023 4.75 18.25V11.25C4.75 10.6977 5.19771 10.25 5.75 10.25C6.30229 10.25 6.75 9.80228 6.75 9.25C6.75 8.69772 6.30229 8.25 5.75 8.25H4.75C3.64543 8.25 2.75 9.14543 2.75 10.25V19.25C2.75 20.3546 3.64543 21.25 4.75 21.25H18.75C19.8546 21.25 20.75 20.3546 20.75 19.25V10.25C20.75 9.14543 19.8546 8.25 18.75 8.25Z" fill="currentColor" />
																</svg>
															</span>
															<!--end::Svg Icon-->Export</button>
														</a>
													</div>
												</div>
											</div>
										</div>
										<div class="pb-3">
											<div class="table-responsive">
												<table class="table table-hover table-borderless table-thead-bordered table-align-middle card-table" cellspacing="0">
													<thead class="thead-light thead-50 text-capitalize table-nowrap">
														<tr>
															<th>{{\App\CPU\translate('SL')}}</th>
															<th>{{\App\CPU\translate('role_name')}}</th>
															<th>{{\App\CPU\translate('modules')}}</th>
															<th>{{\App\CPU\translate('created_at')}}</th>
															<th>{{\App\CPU\translate('status')}}</th>
															<th class="text-center">{{\App\CPU\translate('action')}}</th>
														</tr>
													</thead>
													<tbody>
													@foreach($rl as $k=>$r)
														<tr>
															<td>{{$k+1}}</td>
															<td>{{$r['name']}}</td>
															<td class="text-capitalize">
																@if($r['module_access']!=null)
																	@foreach((array)json_decode($r['module_access']) as $m)
																		@if($m == 'report')
																			{{\App\CPU\translate('Reports_&_Analytics')}} <br>
																		@elseif($m == 'user_section')
																			{{\App\CPU\translate('User_Management')}} <br>
																		@elseif($m == 'support_section')
																			{{\App\CPU\translate('Help_&_Support_Section')}} <br>
																		@else
																			{{\App\CPU\translate(str_replace('_',' ',$m))}} <br>
																		@endif
																	@endforeach
																@endif
															</td>
															<td>{{date('d-M-y',strtotime($r['created_at']))}}</td>
															<td>
																<label class="switcher">
																	<input type="checkbox" class="switcher_input employee-role-status"
																			id="{{$r['id']}}" {{$r['status'] == 1?'checked':''}}>
																	<span class="switcher_control"></span>
																</label>
															</td>
															<td>
																<div class="d-flex gap-2 justify-content-center">
																	<a href="{{route('admin.custom-role.update',[$r['id']])}}"
																		class="btn btn-outline--primary btn-sm square-btn"
																		title="{{\App\CPU\translate('Edit') }}">
																		<span class="svg-icon svg-icon-3">
																						<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
																							<path d="M17.5 11H6.5C4 11 2 9 2 6.5C2 4 4 2 6.5 2H17.5C20 2 22 4 22 6.5C22 9 20 11 17.5 11ZM15 6.5C15 7.9 16.1 9 17.5 9C18.9 9 20 7.9 20 6.5C20 5.1 18.9 4 17.5 4C16.1 4 15 5.1 15 6.5Z" fill="currentColor"></path>
																							<path opacity="0.3" d="M17.5 22H6.5C4 22 2 20 2 17.5C2 15 4 13 6.5 13H17.5C20 13 22 15 22 17.5C22 20 20 22 17.5 22ZM4 17.5C4 18.9 5.1 20 6.5 20C7.9 20 9 18.9 9 17.5C9 16.1 7.9 15 6.5 15C5.1 15 4 16.1 4 17.5Z" fill="currentColor"></path>
																						</svg>
																		</span>
																	</a>
																	<a href="#"
																		class="btn btn-sm delete"
																		title="{{\App\CPU\translate('Delete') }}" id="{{$r['id']}}">
																		<span class="svg-icon svg-icon-3">
																						<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
																							<path d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z" fill="currentColor"></path>
																							<path opacity="0.5" d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z" fill="currentColor"></path>
																							<path opacity="0.5" d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z" fill="currentColor"></path>
																						</svg>
																		</span>
																	</a>
																</div>
															</td>
														</tr>
													@endforeach
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</div>


				</div>
			</div>
		</div>
	</div>
</div>


@endsection

@push('script')
    <!-- Page level plugins -->
    <script src="{{asset('assets')}}/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="{{asset('assets')}}/plugins/datatables/dataTables.bootstrap4.min.js"></script>
    <!-- Page level custom scripts -->
    <script>
        $(document).ready(function () {
            $('#dataTable').DataTable();
        });

        $(document).on('click', '.delete', function () {
            var id = $(this).attr("id");
            Swal.fire({
                title: '{{ \App\CPU\translate('Are_you_sure_delete_this_role')}}?',
                text: "{{ \App\CPU\translate('You_will_not_be_able_to_revert_this')}}!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '{{ \App\CPU\translate('Yes')}}, {{ \App\CPU\translate('delete_it')}}!',
                cancelButtonText: "{{ \App\CPU\translate('cancel')}}",
                reverseButtons: true
            }).then((result) => {
                if (result.value) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: "{{route('admin.custom-role.delete')}}",
                        method: 'POST',
                        data: {id: id},
                        success: function () {
                            toastr.success('{{ \App\CPU\translate('Role_deleted_successfully')}}');
                            location.reload();
                        }
                    });
                }
            })
        });
    </script>
    <script>

        $('#submit-create-role').on('submit',function(e){

            var fields = $("input[name='modules[]']").serializeArray();
            if (fields.length === 0)
            {
                toastr.warning('{{ \App\CPU\translate('select_minimum_one_selection_box') }}', {
                            CloseButton: true,
                            ProgressBar: true
                        });
                return false;
            }else{
                $('#submit-create-role').submit();
            }
        });
    </script>
    <script>
        $(document).on('change', '.employee-role-status', function () {
            var id = $(this).attr("id");
            if ($(this).prop("checked") == true) {
                var status = 1;
            } else if ($(this).prop("checked") == false) {
                var status = 0;
            }
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{route('admin.custom-role.employee-role-status')}}",
                method: 'POST',
                data: {
                    id: id,
                    status: status
                },
                success: function (data) {
                    if(data.success == true) {
                        toastr.success('{{\App\CPU\translate('Status updated successfully')}}');
                    }
                }
            });
        });
    </script>

    <script>
        $("#select_all").on('change', function (){
            if($("#select_all").is(":checked") === true){
                console.log($("#select_all").is(":checked"));
                $(".module-permission").prop("checked", true);
            }else{
                $(".module-permission").removeAttr("checked");
            }
        });
    </script>
@endpush