@php
    $roles = \App\Enums\WorkspaceUserRole::cases();
    $groups = collect(\App\Enums\PermissionEnum::cases())->groupBy(fn ($permission) => $permission->group());
@endphp

<details class="mt-8 rounded-lg border border-[var(--panel-border)] bg-[var(--panel-surface)] [box-shadow:var(--panel-card-shadow)]">
    <summary class="cursor-pointer select-none px-4 py-3 text-sm font-bold text-[var(--panel-text)]">
        راهنما: دسترسی هر نقش در پنل
    </summary>

    <div class="border-t border-[var(--panel-border)] px-4 py-4">
        <p class="mb-4 text-xs leading-6 text-[var(--panel-muted)]">
            این جدول نشان می‌دهد هر نقش در فضای کاری به چه بخش‌هایی دسترسی دارد. نقش «مالک» همیشه به همه‌چیز دسترسی کامل دارد.
        </p>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-[var(--panel-border)] text-xs">
                <thead>
                    <tr>
                        <th class="px-3 py-2 text-start font-semibold text-[var(--panel-muted)]">دسترسی</th>
                        @foreach ($roles as $role)
                            <th class="whitespace-nowrap px-3 py-2 text-center font-semibold text-[var(--panel-muted)]">{{ $role->label() }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody class="divide-y divide-[var(--panel-border)]">
                    @foreach ($groups as $groupLabel => $permissions)
                        <tr class="bg-[var(--panel-surface-muted)]">
                            <td colspan="{{ count($roles) + 1 }}" class="px-3 py-1.5 text-[11px] font-bold text-[var(--panel-text)]">
                                {{ $groupLabel }}
                            </td>
                        </tr>
                        @foreach ($permissions as $permission)
                            <tr>
                                <td class="px-3 py-2 text-[var(--panel-text)]">{{ $permission->label() }}</td>
                                @foreach ($roles as $role)
                                    <td class="px-3 py-2 text-center">
                                        @if (\App\Support\Authorization\RolePermissions::roleHas($role, $permission))
                                            <span class="text-emerald-600">✓</span>
                                        @else
                                            <span class="text-[var(--panel-muted-soft)]">—</span>
                                        @endif
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</details>