@php($totalPermissions = collect($permissions)->flatten()->count())
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
    <div class="sm:col-span-2">
        <x-input name="name" label="Role Name" :value="old('name', $isEdit ? $role->name : '')" required :readonly="$isEdit && $role->name === 'Super Admin'" placeholder="e.g. Editor, Moderator" class="form-icon-role" />
    </div>
</div>

<div class="mt-6">
    <x-form-subsection-header title="Permissions" description="Choose the actions users with this role can perform." icon="security">
        <x-slot:actions>
        @if(!$isEdit || $role->name !== 'Super Admin')
            <div class="flex items-center gap-4">
                <div class="hidden items-center gap-2 sm:flex">
                    <div class="h-1.5 w-24 overflow-hidden rounded-full bg-surface-100">
                        <div class="h-full rounded-full bg-primary-500 transition-all duration-300"
                             :style="`width: ${Math.round((selected.length / {{ $totalPermissions }}) * 100)}%`"></div>
                    </div>
                    <span class="whitespace-nowrap text-xs font-semibold tabular-nums text-surface-500" x-text="selected.length + ' / {{ $totalPermissions }}'"></span>
                </div>
                <label class="group relative flex cursor-pointer items-center gap-2 rounded-lg border border-surface-200 bg-surface-50 py-2 pl-2.5 pr-3 has-[:checked]:border-primary-300 has-[:checked]:bg-primary-50">
                    <input type="checkbox" class="peer sr-only" @change="toggleAll($event.target.checked)" :checked="allSelected" />
                    <span class="flex h-4 w-4 shrink-0 items-center justify-center rounded border border-surface-300 bg-white transition-colors peer-checked:border-primary-500 peer-checked:bg-primary-500">
                        <svg class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    </span>
                    <span class="text-xs font-semibold text-surface-700">Select all</span>
                </label>
            </div>
        @endif
        </x-slot:actions>
    </x-form-subsection-header>

    @if($isEdit && $role->name === 'Super Admin')
        
        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
            @foreach($permissions as $module => $perms)
                <div class="flex items-center gap-3 rounded-xl border border-surface-200 bg-surface-50/60 p-3.5">
                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600">
                        @include('admin.roles.partials.module-icon', ['module' => $module])
                    </div>
                    <div class="min-w-0">
                        <p class="truncate text-sm font-semibold text-surface-800">{{ ucfirst($module) }}</p>
                        <p class="text-xs font-medium text-emerald-600">Full access &middot; {{ count($perms) }} of {{ count($perms) }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
            @foreach($permissions as $module => $perms)
                <div class="overflow-hidden rounded-2xl border border-surface-200 bg-white shadow-soft transition-shadow duration-200 hover:shadow-soft-lg">
                    <div class="flex items-center justify-between gap-3 border-b border-surface-100 bg-gradient-to-r from-surface-50/90 to-white px-4 py-3.5">
                        <div class="flex min-w-0 items-center gap-2.5">
                            <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-primary-600 ring-1 ring-primary-100/70">
                                @include('admin.roles.partials.module-icon', ['module' => $module])
                            </div>
                            <span class="truncate text-sm font-bold text-surface-900">{{ ucfirst($module) }}</span>
                            <span class="shrink-0 rounded-full bg-surface-100 px-2 py-0.5 text-[11px] font-bold tabular-nums text-surface-500"
                                  x-text="moduleSelectedCount('{{ $module }}') + '/' + moduleTotal('{{ $module }}')"></span>
                        </div>
                        <label class="group relative flex shrink-0 cursor-pointer items-center" title="Toggle all {{ $module }} permissions">
                            <input type="checkbox" class="peer sr-only" @change="toggleModule('{{ $module }}', $event.target.checked)" :checked="moduleAllSelected('{{ $module }}')" aria-label="Toggle {{ $module }} permissions" />
                            <span class="flex h-5 w-5 items-center justify-center rounded-md border border-surface-300 bg-white transition-colors peer-checked:border-primary-500 peer-checked:bg-primary-500 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30">
                                <svg class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                            </span>
                        </label>
                    </div>
                    @php($managePermission = collect($perms)->first(fn ($p) => $p->name === "manage-{$module}"))
                    @php($actionPermissions = collect($perms)->reject(fn ($p) => $p->name === "manage-{$module}"))

                    @if($managePermission)
                        <label class="group relative flex cursor-pointer items-start gap-2.5 border-b border-surface-100 bg-surface-50/50 p-3 text-sm text-surface-700 transition-colors hover:bg-surface-50 has-[:checked]:bg-primary-50/60 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-primary-500/30">
                            <input type="checkbox" name="permissions[]" value="{{ $managePermission->name }}" data-module="{{ $module }}" x-model="selected" class="peer sr-only" />
                            <span class="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-md border border-surface-300 bg-white transition-colors peer-checked:border-primary-500 peer-checked:bg-primary-500">
                                <svg class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                            </span>
                            <span class="min-w-0">
                                <span class="block font-semibold text-surface-900">Turn on {{ ucfirst($module) }} for this role</span>
                                <span class="block text-[11px] font-normal text-surface-400">Required — the permissions below only work once this is checked.</span>
                            </span>
                        </label>
                    @endif

                    @if($actionPermissions->isNotEmpty())
                        <div class="grid grid-cols-1 gap-2 p-3 sm:grid-cols-2">
                            @foreach($actionPermissions as $permission)
                                @php($action = str($permission->name)->before('-')->title())
                                <label class="group relative flex cursor-pointer items-start gap-2.5 rounded-xl border border-surface-200 bg-white p-2.5 text-sm text-surface-700 transition-all duration-150 hover:border-surface-300 hover:bg-surface-50 has-[:checked]:border-primary-300 has-[:checked]:bg-primary-50/70 has-[:checked]:text-primary-900 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary-500/30">
                                    <input type="checkbox" name="permissions[]" value="{{ $permission->name }}" data-module="{{ $module }}" x-model="selected" class="peer sr-only" />
                                    <span class="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-md border border-surface-300 bg-white transition-colors peer-checked:border-primary-500 peer-checked:bg-primary-500">
                                        <svg class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                    </span>
                                    <span class="min-w-0">
                                        <span class="block font-medium">{{ $action }}</span>
                                    </span>
                                </label>
                            @endforeach
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    @endif
    @error('permissions')<p class="mt-2 text-xs text-red-600">{{ $message }}</p>@enderror
</div>