@php
    $route = explode('.', Route::currentRouteName());
@endphp

<!--begin::Modal - New Target-->
<div class="modal fade" id="kt_modal_user_roles" tabindex="-1" aria-hidden="true">
	<!--begin::Modal dialog-->
	<div class="modal-dialog modal-dialog-centered modal-fullscreen">
		<!--begin::Modal content-->
		<div class="modal-content rounded">
			<!--begin::Modal header-->
			<div class="modal-header pb-0 border-0 justify-content-end">
				<!--begin::Close-->
				<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">{!! getIcon('cross', 'fs-1') !!}</div>
				<!--end::Close-->
			</div>
			<!--begin::Modal header-->
			<!--begin::Modal body-->
			<div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">
				<!--begin:Form-->
				<form id="form_{{$route[0].'_'.$route[1]}}" class="form_{{$route[0].'_'.$route[1]}}" method="POST" action="{{ route($route[0].'.'.$route[1].'.store') }}">
                    @csrf
					<!--begin::Heading-->
					<div class="mb-13 text-center">
						<!--begin::Title-->
						<h1 class="mb-3 text-capitalize" id="title_form">{{ str_replace('-',' ',$route[0].' '.$route[1]) }}</h1>
						<!--end::Title-->
					</div>
					<!--end::Heading-->
                    <!--begin::Input group-->
                    <div class="d-flex flex-column mb-8 fv-row">
                        <!--begin::Label-->
                        <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                            <span class="required">Name</span>
                            <span class="ms-1" data-bs-toggle="tooltip" title="Specify a target name for future usage and reference"></span>
                        </label>
                        <!--end::Label-->
                        <input type="hidden" id="user_roles_id" name="id" />
                        <input type="text" id="user_roles_name" maxlength="50" class="form-control form-control-solid" placeholder="Enter Role Name" name="name" />
                    </div>
                    <!--end::Input group-->

                    <!--end::Input group-->
                    <div class="fv-row">
                        <!--begin::Label-->
                        <label class="fs-5 fw-bolder form-label mb-2">Role Permissions</label>
                        <!--end::Label-->
                        <!--begin::Table wrapper-->
                        <div class="table-responsive">
                            <!--begin::Table-->
                            <table class="table align-middle table-row-dashed fs-6 gy-5">
                                <!--begin::Table body-->
                                <tbody class="text-gray-600 fw-bold">
                                <!--begin::Table row-->
                                <tr>
                                    <td class="text-gray-800">Administrator/Superuser Access
                                        <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Allows a full access to the system"></i></td>
                                    <td>
                                        <!--begin::Checkbox-->
                                        <label class="form-check form-check-sm form-check-custom form-check-solid me-9">
                                            <input class="form-check-input" type="checkbox" value="" id="kt_roles_select_all" />
                                            <span class="form-check-label" for="kt_roles_select_all">Select all</span>
                                        </label>
                                        <!--end::Checkbox-->
                                    </td>
                                </tr>
                                <!--end::Table row-->
                                @foreach($permissiongroups as $group)
                                    <!--begin::Table row-->
                                    <tr>
                                        <!--begin::Label-->
                                        <td class="text-gray-800">{{ $group->name }}</td>
                                        <!--end::Label-->
                                        <!--begin::Input group-->
                                        <td>
                                            <!--begin::Wrapper-->
                                            <div class="d-flex">
                                                @foreach($group->getpermissionsByGroupId($group->id) as $permission)
                                                    <!--begin::Checkbox-->
                                                    <label class="form-check form-check-sm form-check-custom form-check-solid me-5 me-lg-20">
                                                        <input class="form-check-input" id="permission_{{ $permission->id }}" type="checkbox" value="{{ $permission->id }}" name="permissions[]" />
                                                        @php
                                                            $permission_name = explode('.',$permission->name);
                                                        @endphp
                                                        <span class="form-check-label text-capitalize">{{ $permission_name[1] }}</span>
                                                    </label>
                                                    <!--end::Checkbox-->
                                                @endforeach
                                            </div>
                                            <!--end::Wrapper-->
                                        </td>
                                        <!--end::Input group-->
                                    </tr>
                                    <!--end::Table row-->
                                @endforeach
                                </tbody>
                                <!--end::Table body-->
                            </table>
                            <!--end::Table-->
                        </div>
                        <!--end::Table wrapper-->
                    </div>
                    <!--end::Permissions-->

					<!--begin::Actions-->
					<div class="text-center">
						<button type="reset" data-bs-dismiss="modal" class="btn btn-light me-3">Cancel</button>
						<button type="submit" class="btn btn-primary">Submit</button>
					</div>
					<!--end::Actions-->
				</form>
				<!--end:Form-->
			</div>
			<!--end::Modal body-->
		</div>
		<!--end::Modal content-->
	</div>
	<!--end::Modal dialog-->
</div>
<!--end::Modal - New Target-->

@push('customscript')
    <script>
        "use strict";

        // Class definition
        var Roles = function () {
            // Shared variables
            const form = document.getElementById('form_{{$route[0].'_'.$route[1]}}');

            // Select all handler
            const handleSelectAll = () => {
                // Define variables
                const selectAll = form.querySelector('#kt_roles_select_all');
                const allCheckboxes = form.querySelectorAll('[type="checkbox"]');

                // Handle check state
                selectAll.addEventListener('change', e => {

                    // Apply check state to all checkboxes
                    allCheckboxes.forEach(c => {
                        c.checked = e.target.checked;
                    });
                });
            }

            return {
                // Public functions
                init: function () {
                    handleSelectAll();
                }
            };
        }();

        // On document ready
        KTUtil.onDOMContentLoaded(function () {
            Roles.init();
        });
    </script>
@endpush