{{--
    Permission matrix, rendered from App\Support\Permissions::catalogue() so the
    UI can never drift from what the Gates actually check.

    $catalogue  group => [slug => label]
    $granted    list of slugs already held
--}}
<div class="form-grid">
    <x-field label="Role name" name="name" :required="true" span="6">
        <input type="text" id="name" name="name" class="input @error('name') is-invalid @enderror"
               value="{{ old('name', $role->name ?? '') }}" required
               @if (isset($role) && $role->is_system) readonly @endif>
        @if (isset($role) && $role->is_system)
            <p class="field__hint">Built-in role — the name is fixed because the system refers to it internally.</p>
        @endif
    </x-field>

    <x-field label="Description" name="description" span="6">
        <input type="text" id="description" name="description" class="input"
               value="{{ old('description', $role->description ?? '') }}">
    </x-field>
</div>

<div class="form-section u-mt-6">
    <h2 class="form-section__title">Permissions</h2>
    <p class="form-section__description">
        Each permission maps to one operation. A user holding none of a module's
        permissions will not see it in the menu at all.
    </p>

    @if (isset($role) && $role->isAdministrator())
        <x-alert type="info" :dismissible="false">
            The Administrator role always holds every permission, including any added by a
            future update. It cannot be restricted — create a separate role instead.
        </x-alert>
    @endif

    <div class="grid grid--2">
        @foreach ($catalogue as $group => $permissions)
            <div class="card" style="box-shadow:none;">
                <div class="card__header">
                    <h3 class="card__title">{{ $group }}</h3>
                    <button type="button" class="btn btn--ghost btn--sm" data-toggle-group="{{ Str::slug($group) }}">
                        Toggle all
                    </button>
                </div>
                <div class="card__body">
                    <div style="display:flex; flex-direction:column; gap:var(--space-2);">
                        @foreach ($permissions as $slug => $label)
                            <label class="choice" style="justify-content:flex-start;">
                                <input
                                    type="checkbox"
                                    name="permissions[]"
                                    value="{{ $slug }}"
                                    data-group="{{ Str::slug($group) }}"
                                    @checked(in_array($slug, old('permissions', $granted), true))
                                    @if (isset($role) && $role->isAdministrator()) disabled checked @endif
                                >
                                <span>{{ $label }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>

@push('scripts')
<script>
    document.querySelectorAll('[data-toggle-group]').forEach((button) => {
        button.addEventListener('click', () => {
            const boxes = document.querySelectorAll(
                'input[data-group="' + button.dataset.toggleGroup + '"]:not([disabled])'
            );
            const turnOn = [...boxes].some((box) => !box.checked);
            boxes.forEach((box) => { box.checked = turnOn; });
        });
    });
</script>
@endpush