@if($activeAdminTab === 'role-permissions')
    <script>
        (function initializeRolePermissionsTab() {
            var editRoleModal = document.getElementById('modalEditRolePermission');
            if (editRoleModal) {
                editRoleModal.addEventListener('show.bs.modal', function (event) {
                    var trigger = event.relatedTarget;
                    if (!trigger) {
                        return;
                    }

                    var role = trigger.getAttribute('data-role') || '';
                    var urlTemplate = editRoleModal.getAttribute('data-update-url-template') || '';
                    var form = document.getElementById('editRolePermissionForm');
                    var nameEn = document.getElementById('editRoleNameEn');
                    var nameKh = document.getElementById('editRoleNameKh');
                    var isPermissionLockedRole = trigger.getAttribute('data-permission-locked') === '1';
                    var permissionFieldset = document.getElementById('editRolePermissionsFieldset');
                    var lockedNotice = document.getElementById('editRolePermissionsLockedNotice');
                    var permissions = [];

                    try {
                        permissions = JSON.parse(trigger.getAttribute('data-permissions') || '[]');
                    } catch (error) {
                        permissions = [];
                    }

                    if (form && urlTemplate && role) {
                        form.action = urlTemplate.replace('__ROLE__', encodeURIComponent(role));
                    }
                    if (nameEn) {
                        nameEn.value = trigger.getAttribute('data-name-en') || '';
                    }
                    if (nameKh) {
                        nameKh.value = trigger.getAttribute('data-name-kh') || '';
                    }
                    if (permissionFieldset) {
                        permissionFieldset.disabled = isPermissionLockedRole;
                    }
                    if (lockedNotice) {
                        lockedNotice.classList.toggle('d-none', !isPermissionLockedRole);
                    }

                    editRoleModal.querySelectorAll('.js-edit-role-permission-toggle').forEach(function (input) {
                        input.checked = permissions.indexOf(input.value) !== -1;
                        input.disabled = isPermissionLockedRole;
                    });
                });
            }

            if (typeof Swal === 'undefined') {
                return;
            }

            var rolePermissionsForm = document.getElementById('rolePermissionsForm');
            var permissionToggles = rolePermissionsForm
                ? Array.prototype.slice.call(rolePermissionsForm.querySelectorAll('input[type="checkbox"][name^="role_permissions["]'))
                : [];

            var rolePermissionRows = Array.prototype.slice.call(document.querySelectorAll('#rolePermissionsTable .role-permission-row'));
            var rolePermissionSectionRows = Array.prototype.slice.call(document.querySelectorAll('#rolePermissionsTable .role-permission-section-row'));
            var rolePermissionSearch = document.getElementById('rolePermissionSearch');
            var rolePermissionStatusFilter = document.getElementById('rolePermissionStatusFilter');
            var rolePermissionResetFilterBtn = document.getElementById('rolePermissionResetFilterBtn');
            var rolePermissionsNoResults = document.getElementById('rolePermissionsNoResults');
            var rolePermissionsPaginationWrap = document.getElementById('rolePermissionsPaginationWrap');
            var rolePermissionsPaginationPrev = document.getElementById('rolePermissionsPaginationPrev');
            var rolePermissionsPaginationNext = document.getElementById('rolePermissionsPaginationNext');
            var rolePermissionsPageNumbers = document.getElementById('rolePermissionsPageNumbers');
            var rolePermissionsPage = 1;
            var rolePermissionsPerPage = 10;
            var preservedRolePermissionState = window.consumeAdminTabUiState('role-permissions');
            if (preservedRolePermissionState) {
                var preservedRolePermissionValues = preservedRolePermissionState.values || {};
                if (rolePermissionSearch && Object.prototype.hasOwnProperty.call(preservedRolePermissionValues, 'rolePermissionSearch')) {
                    rolePermissionSearch.value = preservedRolePermissionValues.rolePermissionSearch;
                }
                if (rolePermissionStatusFilter && Object.prototype.hasOwnProperty.call(preservedRolePermissionValues, 'rolePermissionStatusFilter')) {
                    rolePermissionStatusFilter.value = preservedRolePermissionValues.rolePermissionStatusFilter;
                }
                rolePermissionsPage = Math.max(1, Number(preservedRolePermissionState.page) || 1);
            }

            function renderRolePermissionPageButtons(totalPages) {
                window.DocuFlowPagination.render(rolePermissionsPageNumbers, rolePermissionsPage, totalPages);
            }

            function applyRolePermissionPagination() {
                var selectedStatus = rolePermissionStatusFilter ? rolePermissionStatusFilter.value : 'all';
                var searchTerm = rolePermissionSearch ? rolePermissionSearch.value.trim().toLocaleLowerCase() : '';
                var filteredRows = rolePermissionRows.filter(function (row) {
                    var matchesStatus = selectedStatus === 'all' || row.dataset.status === selectedStatus;
                    var roleCell = row.querySelector('.role_name');
                    var searchableRole = roleCell ? roleCell.textContent.toLocaleLowerCase() : '';

                    return matchesStatus && (searchTerm === '' || searchableRole.indexOf(searchTerm) !== -1);
                });
                var totalPages = Math.max(1, Math.ceil(filteredRows.length / rolePermissionsPerPage));
                rolePermissionsPage = Math.min(Math.max(1, rolePermissionsPage), totalPages);
                var start = (rolePermissionsPage - 1) * rolePermissionsPerPage;
                var visibleRows = filteredRows.slice(start, start + rolePermissionsPerPage);
                var visibleSections = {};

                rolePermissionRows.forEach(function (row) {
                    var visible = visibleRows.indexOf(row) !== -1;
                    row.style.display = visible ? '' : 'none';
                    if (visible) {
                        visibleSections[row.dataset.section || ''] = true;
                    }
                });

                rolePermissionSectionRows.forEach(function (row) {
                    row.style.display = visibleSections[row.dataset.section || ''] ? '' : 'none';
                });

                if (rolePermissionsNoResults) {
                    rolePermissionsNoResults.classList.toggle('d-none', filteredRows.length !== 0);
                }

                if (rolePermissionsPaginationWrap) {
                    rolePermissionsPaginationWrap.style.display = filteredRows.length > rolePermissionsPerPage ? 'flex' : 'none';
                }
                if (rolePermissionsPaginationPrev) {
                    rolePermissionsPaginationPrev.classList.toggle('disabled', rolePermissionsPage <= 1);
                }
                if (rolePermissionsPaginationNext) {
                    rolePermissionsPaginationNext.classList.toggle('disabled', rolePermissionsPage >= totalPages);
                }
                renderRolePermissionPageButtons(totalPages);
            }

            if (rolePermissionSearch) {
                rolePermissionSearch.addEventListener('input', function () {
                    rolePermissionsPage = 1;
                    applyRolePermissionPagination();
                });
            }
            if (rolePermissionStatusFilter) {
                rolePermissionStatusFilter.addEventListener('change', function () {
                    rolePermissionsPage = 1;
                    applyRolePermissionPagination();
                });
            }
            if (rolePermissionResetFilterBtn) {
                rolePermissionResetFilterBtn.addEventListener('click', function () {
                    if (rolePermissionSearch) rolePermissionSearch.value = '';
                    if (rolePermissionStatusFilter) rolePermissionStatusFilter.value = 'all';
                    rolePermissionsPage = 1;
                    applyRolePermissionPagination();
                });
            }

            if (rolePermissionsPaginationPrev) {
                rolePermissionsPaginationPrev.addEventListener('click', function (event) {
                    event.preventDefault();
                    if (!this.classList.contains('disabled')) {
                        rolePermissionsPage--;
                        applyRolePermissionPagination();
                    }
                });
            }
            if (rolePermissionsPaginationNext) {
                rolePermissionsPaginationNext.addEventListener('click', function (event) {
                    event.preventDefault();
                    if (!this.classList.contains('disabled')) {
                        rolePermissionsPage++;
                        applyRolePermissionPagination();
                    }
                });
            }
            if (rolePermissionsPageNumbers) {
                rolePermissionsPageNumbers.addEventListener('click', function (event) {
                    var target = event.target.closest('[data-page]');
                    if (!target) return;
                    rolePermissionsPage = Number(target.dataset.page || 1);
                    applyRolePermissionPagination();
                });
            }

            function reorderRolePermissionRowsBySection() {
                var rolePermissionsTable = document.getElementById('rolePermissionsTable');
                var tbody = rolePermissionsTable ? rolePermissionsTable.querySelector('tbody') : null;
                if (!tbody) {
                    return;
                }

                if (rolePermissionSectionRows.length === 0) {
                    rolePermissionRows.forEach(function (row) { tbody.appendChild(row); });
                    return;
                }

                rolePermissionSectionRows.forEach(function (sectionRow) {
                    var sectionKey = sectionRow.dataset.section || '';
                    tbody.appendChild(sectionRow);
                    rolePermissionRows
                        .filter(function (row) { return (row.dataset.section || '') === sectionKey; })
                        .forEach(function (row) { tbody.appendChild(row); });
                });
            }

            document.addEventListener('dashboard-data-table:sort', function (event) {
                if (!event.detail || !event.detail.table || event.detail.table.id !== 'rolePermissionsTable') {
                    return;
                }

                if (Number(event.detail.columnIndex || 0) !== 0) {
                    return;
                }

                event.preventDefault();
                event.detail.handled = true;
                rolePermissionRows = sortAdminDashboardRows(rolePermissionRows, 0, event.detail.order);
                reorderRolePermissionRowsBySection();
                rolePermissionsPage = 1;
                applyRolePermissionPagination();
            });

            applyRolePermissionPagination();

            document.querySelectorAll('.role-action-confirm-form').forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    var submitter = event.submitter || document.querySelector('button[form="' + form.id + '"]');
                    var message = submitter ? (submitter.getAttribute('data-confirm') || '') : '';
                    var successMessage = submitter ? (submitter.getAttribute('data-success') || '') : '';
                    if (message === '') {
                        return;
                    }

                    event.preventDefault();
                    Swal.fire({
                        title: '{{ __('Confirm Action') }}',
                        text: message,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '{{ __('Continue') }}',
                        cancelButtonText: '{{ __('Cancel') }}',
                        customClass: {
                            confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                            cancelButton: 'btn btn-light w-xs mt-2'
                        },
                        buttonsStyling: false
                    }).then(function (result) {
                        if (result.value) {
                            window.submitAdminActionWithoutReload(form, 'role-permissions', successMessage || '{{ __('Role Deleted') }}');
                        }
                    });
                });
            });

            function buildSnapshot() {
                return permissionToggles.map(function (input) {
                    return (input.name || '') + '|' + input.value + '|' + (input.checked ? '1' : '0');
                }).join('||');
            }

            var initialSnapshot = buildSnapshot();
            var allowNavigation = false;
            var saveInProgress = false;

            function hasUnsavedChanges() {
                return buildSnapshot() !== initialSnapshot;
            }

            function getFirstValidationError(payload) {
                if (!payload || typeof payload !== 'object') return '';
                if (payload.errors && typeof payload.errors === 'object') {
                    var keys = Object.keys(payload.errors);
                    if (keys.length > 0 && Array.isArray(payload.errors[keys[0]]) && payload.errors[keys[0]].length > 0) {
                        return payload.errors[keys[0]][0];
                    }
                }
                return payload.message || '';
            }

            function submitRolePermissionFormWithAlert(formEl) {
                if (!formEl || saveInProgress) {
                    return;
                }

                saveInProgress = true;
                allowNavigation = true;

                var submitBtn = formEl.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.disabled = true;
                }

                fetch(formEl.action, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    body: new FormData(formEl)
                })
                .then(function (response) {
                    return response.json().catch(function () {
                        return {};
                    }).then(function (payload) {
                        if (!response.ok) {
                            throw new Error(getFirstValidationError(payload) || '{{ __('Unable to save role permissions.') }}');
                        }
                        return payload;
                    });
                })
                .then(function (payload) {
                    initialSnapshot = buildSnapshot();
                    allowNavigation = false;
                    return Swal.fire({
                        title: '{{ __('Saved') }}',
                        text: payload.message || '{{ __('Role permissions updated successfully.') }}',
                        icon: 'success',
                        confirmButtonText: '{{ __('OK') }}',
                        customClass: {
                            confirmButton: 'btn btn-primary w-xs mt-2'
                        },
                        buttonsStyling: false
                    });
                })
                .catch(function (error) {
                    allowNavigation = false;
                    Swal.fire({
                        title: '{{ __('Save Failed') }}',
                        text: error.message || '{{ __('Please try again.') }}',
                        icon: 'error',
                        confirmButtonText: '{{ __('OK') }}',
                        customClass: {
                            confirmButton: 'btn btn-primary w-xs mt-2'
                        },
                        buttonsStyling: false
                    });
                })
                .finally(function () {
                    saveInProgress = false;
                    if (submitBtn) {
                        submitBtn.disabled = false;
                    }
                });
            }

            function submitRoleSaveFormWithAlert(formEl) {
                if (!formEl || saveInProgress) {
                    return;
                }

                saveInProgress = true;
                allowNavigation = true;

                var submitBtn = formEl.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.disabled = true;
                }

                fetch(formEl.action, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    body: new FormData(formEl)
                })
                .then(function (response) {
                    return response.json().catch(function () {
                        return {};
                    }).then(function (payload) {
                        if (!response.ok) {
                            throw new Error(getFirstValidationError(payload) || '{{ __('Unable to save role.') }}');
                        }
                        return payload;
                    });
                })
                .then(function (payload) {
                    allowNavigation = true;
                    return Swal.fire({
                        title: '{{ __('Saved') }}',
                        text: payload.message || '{{ __('Role updated successfully.') }}',
                        icon: 'success',
                        confirmButtonText: '{{ __('OK') }}',
                        customClass: {
                            confirmButton: 'btn btn-primary w-xs mt-2'
                        },
                        buttonsStyling: false
                    }).then(function () {
                        window.refreshAdminTabContent('role-permissions', @json(route('role.dashboard', ['admin_tab' => 'role-permissions'])));
                    });
                })
                .catch(function (error) {
                    allowNavigation = false;
                    Swal.fire({
                        title: '{{ __('Save Failed') }}',
                        text: error.message || '{{ __('Please try again.') }}',
                        icon: 'error',
                        confirmButtonText: '{{ __('OK') }}',
                        customClass: {
                            confirmButton: 'btn btn-primary w-xs mt-2'
                        },
                        buttonsStyling: false
                    });
                })
                .finally(function () {
                    saveInProgress = false;
                    if (submitBtn) {
                        submitBtn.disabled = false;
                    }
                });
            }

            document.addEventListener('submit', function (event) {
                var target = event.target;
                if (!(target instanceof HTMLFormElement)) {
                    return;
                }

                if ((target.id || '') === 'rolePermissionsForm') {
                    event.preventDefault();
                    submitRolePermissionFormWithAlert(target);
                }

                if (target.getAttribute('data-role-save-form') === '1') {
                    event.preventDefault();
                    submitRoleSaveFormWithAlert(target);
                }
            }, true);

            document.addEventListener('click', function (event) {
                if (allowNavigation || saveInProgress || !hasUnsavedChanges()) {
                    return;
                }

                var anchor = event.target instanceof Element
                    ? event.target.closest('a[href]')
                    : null;

                if (!anchor) {
                    return;
                }

                var href = anchor.getAttribute('href') || '';
                if (href === '' || href.charAt(0) === '#') {
                    return;
                }

                var isNewTab = anchor.target === '_blank' || event.ctrlKey || event.metaKey || event.shiftKey || event.button === 1;
                if (isNewTab) {
                    return;
                }

                event.preventDefault();

                Swal.fire({
                    title: '{{ __('Unsaved Changes') }}',
                    text: '{{ __('You changed role permissions. Save before leaving this tab?') }}',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '{{ __('Leave Without Saving') }}',
                    cancelButtonText: '{{ __('Stay') }}',
                    customClass: {
                        confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                        cancelButton: 'btn btn-light w-xs mt-2'
                    },
                    buttonsStyling: false
                }).then(function (result) {
                    if (result.value) {
                        allowNavigation = true;
                        window.navigateDashboardContent(anchor.href);
                    }
                });
            }, true);

            window.addEventListener('beforeunload', function (event) {
                if (allowNavigation || saveInProgress || !hasUnsavedChanges()) {
                    return;
                }

                event.preventDefault();
                event.returnValue = '';
            });
        })();
    </script>
    @endif