@php
            $usesKeycloakIdentity = config('services.keycloak.enabled') && config('services.keycloak.login_only');
        @endphp

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-0">
                        <div class="d-flex flex-wrap align-items-center gap-2 dashboard-table-filters admin-responsive-filter-toolbar w-100">
                                <div class="search-box dashboard-filter-control dashboard-filter-search">
                                    <input type="text" class="form-control form-control-sm" id="rolePermissionSearch" placeholder="{{ __('Search...') }}" autocomplete="off">
                                    <i class="ri-search-line search-icon"></i>
                                </div>
                                <div class="admin-filter-reset-group">
                                    <select class="form-select form-select-sm dashboard-filter-control dashboard-filter-status" id="rolePermissionStatusFilter">
                                        <option value="all">{{ __('All Status') }}</option>
                                        <option value="active">{{ __('Active') }}</option>
                                        <option value="inactive">{{ __('Inactive') }}</option>
                                    </select>
                                    <button type="button" class="btn btn-sm btn-soft-secondary btn-icon flex-shrink-0" id="rolePermissionResetFilterBtn" title="{{ __('Reset filters') }}" aria-label="{{ __('Reset filters') }}"><i class="ri-refresh-line"></i></button>
                                </div>
                                <div class="d-flex flex-wrap align-items-center gap-2 ms-auto">
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-soft-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="ri-download-2-line align-bottom me-1"></i> {{ __('Export') }}
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li><button class="dropdown-item admin-table-export" type="button" data-table-id="rolePermissionsTable" data-export-format="csv">{{ __('Export as CSV') }}</button></li>
                                        <li><button class="dropdown-item admin-table-export" type="button" data-table-id="rolePermissionsTable" data-export-format="pdf">{{ __('Export as PDF') }}</button></li>
                                        <li><button class="dropdown-item admin-table-export" type="button" data-table-id="rolePermissionsTable" data-export-format="excel">{{ __('Export as Excel') }}</button></li>
                                    </ul>
                                </div>
                                <a href="{{ app(\App\Services\KeycloakUrlService::class)->rolesAdminUrl() }}"
                                   target="_blank"
                                   rel="noopener noreferrer"
                                   class="btn btn-sm btn-primary flex-shrink-0">
                                    <i class="ri-external-link-line me-1"></i>{{ __('Manage Roles in Keycloak') }}
                                </a>
                                </div>
                        </div>
                    </div>
                    <div class="card-body pt-0">
                        @php
                            $permissionRows = $rolePermissionRows ?? [];
                            $permissionLabels = $rolePermissionLabels ?? [];
                            $roleNames = $roleDisplayNames ?? [];
                            $roleStates = $roleActiveStates ?? [];
                            $roleMeta = $rolePermissionMeta ?? [];
                            $systemRoleKeys = \App\Support\WorkflowPermission::systemRoleKeys();
                            $permissionLockedRoleKeys = \App\Support\WorkflowPermission::permissionLockedRoleKeys();
                            $permissionSubtitles = [
                                'can_request_document' => __('Create and submit new document requests.'),
                                'can_review_document' => __('Read and approve/reject a document at the assigned workflow step.'),
                                'is_organization_officer' => __('Requires an organization assignment and receives organization-routed workflow work.'),
                                'register_document_number' => __('Register registry and finished document numbers for requests.'),
                                'manage_users' => __('Manage user accounts, status, and role assignments.'),
                                'manage_organizations' => __('Create and maintain organization entries.'),
                                'manage_document_types' => __('Set document types, forms, and submitter roles.'),
                                'manage_workflow_templates' => __('Configure workflow paths and approval steps.'),
                                'manage_role_permissions' => __('Control which roles can use each admin feature.'),
                                'manage_branding' => __('Manage application branding, logos, and visual identity.'),
                                'view_audit_trails' => __('View admin, workflow, and system activity history.'),
                                'use_priority_handling' => __('Enable priority processing for urgent requests.'),
                            ];
                            $permissionSections = [
                                __('Document Access') => [
                                    'can_request_document',
                                    'can_review_document',
                                    'is_organization_officer',
                                    'register_document_number',
                                ],
                                __('Admin Management') => [
                                    'manage_users',
                                    'manage_organizations',
                                    'manage_document_types',
                                    'manage_workflow_templates',
                                    'manage_role_permissions',
                                    'manage_branding',
                                    'view_audit_trails',
                                ],
                                __('Workflow Tools') => [
                                    'use_priority_handling',
                                ],
                            ];
                        @endphp

                        @php
                            $filteredPermissionRows = $permissionRows;
                            $permissionTotal = count($permissionLabels);
                        @endphp

                        <x-dashboard-data-table
                            id="rolePermissionsTable"
                            storage-key="admin-role-permissions-columns"
                            :resizable="false"
                            :column-tools="false"
                            :columns="[
                                'role' => 260,
                                'role_type' => 140,
                                'role_permissions' => 420,
                                'role_status' => 130,
                                'role_actions' => 80,
                            ]">
                                <thead class="table-light text-uppercase">
                                    <tr>
                                        <th class="sort" data-sort="role_name">{{ __('Role') }}</th>
                                        <th>{{ __('Type') }}</th>
                                        <th>{{ __('Permissions') }}</th>
                                        <th>{{ __('Status') }}</th>
                                        <th class="text-end" data-export-ignore="true">{{ __('Actions') }}</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @forelse($filteredPermissionRows as $roleKey => $permissions)
                                        @php
                                            $isSystemRole = in_array($roleKey, $systemRoleKeys, true);
                                            $isPermissionLockedRole = in_array($roleKey, $permissionLockedRoleKeys, true);
                                            $isActiveRole = (bool) ($roleStates[$roleKey] ?? true);
                                            $roleFormId = 'roleActionForm' . md5($roleKey);
                                            $enabledPermissionKeys = collect($permissions)->filter()->keys()->values();
                                            $enabledPermissionLabels = $enabledPermissionKeys
                                                ->map(fn ($permissionKey) => __($permissionLabels[$permissionKey] ?? $permissionKey));
                                            $permissionPreview = $enabledPermissionLabels->take(3);
                                            $remainingPermissionCount = max(0, $enabledPermissionLabels->count() - $permissionPreview->count());
                                        @endphp
                                        <tr class="role-permission-row" data-status="{{ $isActiveRole ? 'active' : 'inactive' }}">
                                            <td class="role_name">
                                                <div class="fw-semibold text-dark">{{ __($roleNames[$roleKey] ?? $roleKey) }}</div>
                                                <div class="small text-muted">{{ $roleKey }}</div>
                                            </td>
                                            <td>
                                                <x-ui-badge type="plain" :label="$isSystemRole ? 'System' : 'Custom'" :class="$isSystemRole ? 'bg-info-subtle text-info' : 'bg-secondary-subtle text-secondary'" />
                                            </td>
                                            <td>
                                                <div class="d-flex flex-wrap align-items-center gap-1">
                                                    @forelse($permissionPreview as $permissionLabel)
                                                        <x-ui-badge type="plain" :label="$permissionLabel" class="bg-light text-body border" />
                                                    @empty
                                                        <span class="text-muted">—</span>
                                                    @endforelse
                                                    @if($remainingPermissionCount > 0)
                                                        <x-ui-badge type="plain" :label="'+' . $remainingPermissionCount" class="bg-primary-subtle text-primary" />
                                                    @endif
                                                </div>
                                                <div class="small text-muted mt-1">
                                                    {{ __('Permissions') }}: {{ $enabledPermissionLabels->count() }} / {{ $permissionTotal }}
                                                </div>
                                            </td>
                                            <td>
                                                <x-ui-badge type="status" :value="$isActiveRole ? 'active' : 'inactive'" :label="$isActiveRole ? 'Active' : 'Inactive'" />
                                            </td>
                                            <td class="text-end" data-export-ignore="true">
                                                <div class="dropdown d-inline-block">
                                                    <button class="btn btn-sm btn-icon btn-ghost-secondary admin-action-menu-trigger role-action-menu-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{{ __('Role actions') }}">
                                                        <i class="ri-more-2-fill"></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li>
                                                            <button
                                                                type="button"
                                                                class="dropdown-item js-edit-role-permission"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#modalEditRolePermission"
                                                                data-role="{{ $roleKey }}"
                                                                data-system="{{ $isSystemRole ? '1' : '0' }}"
                                                                data-permission-locked="{{ $isPermissionLockedRole ? '1' : '0' }}"
                                                                data-name-en="{{ $roleMeta[$roleKey]['name_en'] ?? ($roleNames[$roleKey] ?? $roleKey) }}"
                                                                data-name-kh="{{ $roleMeta[$roleKey]['name_kh'] ?? ($roleNames[$roleKey] ?? $roleKey) }}"
                                                                data-permissions='@json($enabledPermissionKeys)'
                                                            >
                                                                <i class="ri-pencil-line me-2"></i>{{ __('Edit') }}
                                                            </button>
                                                        </li>
                                                        @unless($isSystemRole)
                                                            <li><hr class="dropdown-divider"></li>
                                                            <li>
                                                                <button
                                                                    type="submit"
                                                                    form="{{ $roleFormId }}Toggle"
                                                                    class="dropdown-item"
                                                                    data-confirm="{{ $isActiveRole ? __('Make this role inactive?') : __('Make this role active?') }}"
                                                                    data-success="{{ $isActiveRole ? __('Role set to inactive successfully.') : __('Role set to active successfully.') }}"
                                                                >
                                                                    <i class="{{ $isActiveRole ? 'ri-close-circle-line' : 'ri-checkbox-circle-line' }} me-2"></i>{{ $isActiveRole ? __('Set Inactive') : __('Set Active') }}
                                                                </button>
                                                            </li>
                                                            @if($usesKeycloakIdentity)
                                                                <li>
                                                                    <a
                                                                        href="{{ app(\App\Services\KeycloakUrlService::class)->rolesAdminUrl() }}"
                                                                        target="_blank"
                                                                        rel="noopener noreferrer"
                                                                        class="dropdown-item"
                                                                    >
                                                                        <i class="ri-shield-keyhole-line me-2"></i>{{ __('Manage in Keycloak') }}
                                                                    </a>
                                                                </li>
                                                            @endif
                                                        @endunless
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted py-4">
                                                {{ __('No roles available for permission editing.') }}
                                            </td>
                                        </tr>
                                    @endforelse
                                    @if(count($filteredPermissionRows) > 0)
                                        <tr id="rolePermissionsNoResults" class="d-none">
                                            <td colspan="5" class="text-center text-muted py-4">
                                                {{ __('No roles available for permission editing.') }}
                                            </td>
                                        </tr>
                                    @endif
                                </tbody>
                        </x-dashboard-data-table>

                        <x-table-pagination
                            wrap-id="rolePermissionsPaginationWrap"
                            previous-id="rolePermissionsPaginationPrev"
                            numbers-id="rolePermissionsPageNumbers"
                            next-id="rolePermissionsPaginationNext"
                            :hidden="true"
                        />

                        @foreach($filteredPermissionRows as $roleKey => $permissions)
                            @continue(in_array($roleKey, $systemRoleKeys, true))
                            @php $roleFormId = 'roleActionForm' . md5($roleKey); @endphp
                            <form id="{{ $roleFormId }}Toggle" method="POST" action="{{ route('admin.role-permissions.roles.toggle', ['role' => $roleKey]) }}" class="d-none role-action-confirm-form">
                                @csrf
                                @method('PATCH')
                            </form>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalEditRolePermission" tabindex="-1" aria-labelledby="modalEditRolePermissionLabel" aria-hidden="true" data-update-url-template="{{ route('admin.role-permissions.roles.update', ['role' => '__ROLE__']) }}">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <form method="POST" action="" id="editRolePermissionForm" data-role-save-form="1">
                        @csrf
                        @method('PUT')
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalEditRolePermissionLabel">
                                <i class="ri-shield-user-line me-1"></i>{{ __('Edit Role') }}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('Close') }}"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">{{ __('English Name') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="name_en" id="editRoleNameEn" class="form-control" maxlength="100" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">{{ __('Khmer Name') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="name_kh" id="editRoleNameKh" class="form-control" maxlength="100" required>
                                </div>
                            </div>

                            <hr class="my-4">

                            <div class="d-flex align-items-center justify-content-between gap-2 mb-3">
                                <div>
                                    <h6 class="mb-1">{{ __('Permissions') }}</h6>
                                    <p class="text-muted mb-0">{{ __('Update what this role can do.') }}</p>
                                </div>
                            </div>

                            <div id="editRolePermissionsLockedNotice" class="alert alert-info py-2 d-none" role="status">
                                {{ __('Permissions for this role are fixed and cannot be changed.') }}
                            </div>

                            <fieldset id="editRolePermissionsFieldset">
                            @foreach($permissionSections as $sectionLabel => $sectionPermissions)
                                @php
                                    $visibleSectionPermissions = collect($sectionPermissions)
                                        ->filter(fn ($permissionKey) => array_key_exists($permissionKey, $permissionLabels))
                                        ->values();
                                @endphp
                                @continue($visibleSectionPermissions->isEmpty())

                                <div class="mb-4">
                                    <div class="fw-semibold text-muted text-uppercase small mb-2">{{ $sectionLabel }}</div>
                                    <div class="row g-3">
                                        @foreach($visibleSectionPermissions as $permissionKey)
                                            @php $permissionLabel = $permissionLabels[$permissionKey]; @endphp
                                            <div class="col-md-6">
                                                <div class="border rounded p-3 h-100">
                                                    <div class="d-flex align-items-start justify-content-between gap-3">
                                                        <div>
                                                            <div class="fw-semibold text-dark">{{ __($permissionLabel) }}</div>
                                                            <div class="small text-muted">{{ $permissionSubtitles[$permissionKey] ?? __('Configure access for this feature.') }}</div>
                                                        </div>
                                                        <div class="form-check form-switch m-0">
                                                            <input
                                                                class="form-check-input js-edit-role-permission-toggle"
                                                                type="checkbox"
                                                                name="permissions[]"
                                                                value="{{ $permissionKey }}"
                                                            >
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                            </fieldset>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-primary">
                                <i class="ri-save-line me-1"></i>{{ __('Save Changes') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>