@extends('dashboard.parent')

@section('title', __('pages.permissions'))

@section('page_name', __('pages.permissions'))

@section('css')
@endsection

@section('bread_crumb')
    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
        <!--begin::Item-->
        <li class="breadcrumb-item text-muted">
            <a href="{{ route('home') }}" class="text-muted text-hover-primary">{{ __('pages.home') }}</a>
        </li>
        <!--end::Item-->
        <!--begin::Item-->
        <li class="breadcrumb-item">
            <span class="bullet bg-gray-400 w-5px h-2px"></span>
        </li>
        <!--end::Item-->
        <!--begin::Item-->
        <li class="breadcrumb-item text-muted">{{ __('pages.users') }}</li>
        <!--end::Item-->
        <!--begin::Item-->
        <li class="breadcrumb-item">
            <span class="bullet bg-gray-400 w-5px h-2px"></span>
        </li>
        <!--end::Item-->
        <!--begin::Item-->
        <li class="breadcrumb-item text-muted">{{ __('pages.permissions') }}</li>
        <!--end::Item-->
    </ul>
@endsection

@section('actions')

@endsection

@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-xxl">
            <!--begin::Card-->
            <div class="card">
                <!--begin::Card body-->
                <div class="table-responsive card-body pt-0" id="table_content">
                    <table class="table align-middle table-row-dashed fs-6 gy-5">
                        <!--begin::Table head-->
                        <thead>
                            <!--begin::Table row-->
                            <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                                <td colspan="2" class="text-gray-800">Administrator 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 colspan="2">
                                    <input type="hidden" id="userSlug" value="{{ $userData->slug }}">

                                    <!--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="" onclick="selectAllPermission()"
                                            id="kt_roles_select_all" {{ $userHasAllPermission ? 'checked' : '' }} />
                                        <span class="form-check-label" for="kt_roles_select_all">Select
                                            all</span>
                                    </label>
                                    <!--end::Checkbox-->
                                </td>
                            </tr>
                            <!--end::Table row-->
                        </thead>
                        <!--end::Table head-->
                        <!--begin::Table body-->
                        <tbody class="text-gray-600 fw-semibold">
                            @foreach ($roles as $role)
                                @foreach ($role->permissions->groupBy('group') as $groupName => $groupPermissions)
                                    <!-- Table Row for Each Permission Group -->
                                    <tr>
                                        <!-- Role Label -->
                                        <td class="text-gray-800">
                                            {{ $role->name }}
                                        </td>
                                        <!-- Permission Group Label -->
                                        <td class="text-gray-800">
                                            {{ ucfirst($groupName) }}
                                        </td>
                                        <!-- Permissions Checkboxes -->
                                        <td>
                                            <div class="d-flex">
                                                <!-- Display permissions dynamically -->
                                                @foreach ($role->permissions as $permission)
                                                    <label
                                                        class="form-check form-check-sm form-check-custom form-check-solid me-5">
                                                        <input class="form-check-input" type="checkbox"
                                                            onclick=" updatePermission('{{ $permission->id }}')"
                                                            name="permissions[{{ $role->id }}][{{ $permission->id }}]"
                                                            value="{{ $permission->name }}"
                                                            {{ $userData->hasPermissionTo($permission->name) ? 'checked' : '' }} />
                                                        <span class="form-check-label">{{ $permission->name }}</span>
                                                    </label>
                                                @endforeach
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @endforeach
                        </tbody>
                        <!--end::Table body-->
                    </table>
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Card-->
        </div>
        <!--end::Content container-->
    </div>
@endsection

@section('js')
    <script src="{{ asset('assets/js/custom/apps/user-management/roles/view/view.js') }}"></script>
    <script src="{{ asset('assets/js/custom/apps/user-management/roles/view/update-role.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
    <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
    <script>
        buttonSideBar()

        function buttonSideBar() {
            const button = document.getElementById('user');
            button.classList.add('here', 'show');
        }

        function updatePermission(permissionId) {
            axios.post('/dashboard/user/permission', {
                    slug: document.getElementById("userSlug").value, // جلب slug من عنصر مخفي
                    permission_id: permissionId
                })
                .then(function(response) {
                    toastr.success(response.data.message);
                })
                .catch(function(error) {
                    toastr.error(error.response?.data?.message || "حدث خطأ أثناء تحديث الصلاحيات");
                });
        }

        function selectAllPermission() {
            const selectAllCheckbox = document.getElementById("kt_roles_select_all");
            const permissionCheckboxes = document.querySelectorAll(
                '.form-check-input[type="checkbox"]:not(#kt_roles_select_all)'
            );

            // تحديث جميع الصلاحيات عند تحديد "تحديد الكل"
            selectAllCheckbox.addEventListener("change", function() {
                let isChecked = selectAllCheckbox.checked;

                permissionCheckboxes.forEach(function(checkbox) {
                    checkbox.checked = isChecked;
                });

                axios.post('/dashboard/user/permissions/update-all', {
                        slug: document.getElementById("userSlug").value,
                        assign_all: isChecked
                    })
                    .then(function(response) {
                        toastr.success(response.data.message);
                    })
                    .catch(function(error) {
                        toastr.error(error.response?.data?.message ||
                            "حدث خطأ أثناء تحديث جميع الصلاحيات");
                    });
            });

            // تحديث الصلاحيات الفردية عند تغيير أي Checkbox
            permissionCheckboxes.forEach(function(checkbox) {
                checkbox.addEventListener("change", function() {
                    updatePermission(this.value);
                });
            });
        };
    </script>
@endsection