@use('App\Enums\RoleName')

@php
$role ??= null;
$isBuiltIn = $role !== null && RoleName::isBuiltIn($role->name);
$selectedPermissions = old('permissions', $role?->permissions->pluck('name')->all() ?? []);
@endphp

<x-toast :message="$errors->any() ? __('Please fix the fields marked in red.') : null" icon="error" />

<div class="flex flex-col gap-8">
    <!-- Role -->
    <section class="flex flex-col gap-6 rounded-2xl bg-white p-6 shadow-raised sm:p-8">
        @if ($role)
            <div class="flex flex-wrap items-center gap-3">
                <x-role-badge :role="$role->name" class="text-sm" />
                <x-status-badge :active="$role->is_active" />

                <span class="text-sm text-gray-500">
                    {{ trans_choice('{0} No users have this role|{1} :count user has this role|[2,*] :count users have this role', $role->users()->count()) }}
                </span>
            </div>
        @endif

        <div>
            <x-input-label for="name" :value="__('Role name')" />

            @if ($isBuiltIn)
                <div class="mt-1 flex h-[42px] items-center rounded-md border border-gray-200 bg-gray-50 px-3 text-sm text-gray-700 sm:max-w-sm">
                    {{ RoleName::labelFor($role->name) }}
                </div>
                <p class="mt-1 text-sm text-gray-600">{{ __('Built-in roles cannot be renamed.') }}</p>
            @else
                <x-text-input id="name" name="name" type="text" class="mt-1 block w-full sm:max-w-sm" :value="old('name', $role?->name)" autofocus autocomplete="off" placeholder="{{ __('e.g. Manager') }}" />
                <p class="mt-1 text-sm text-gray-600">{{ __('A short name people will recognise, like Manager or Accountant.') }}</p>
                <x-input-error class="mt-2" :messages="$errors->get('name')" />
            @endif
        </div>
    </section>

    <!-- Access -->
    <div class="flex flex-col gap-4">
        <div>
            <h3 class="text-base font-semibold text-gray-900">{{ __('Access') }}</h3>
            <p class="text-sm text-gray-600">
                {{ __('Tick what this role is allowed to do in each part of the app. Everyone can always open the dashboard and their own profile.') }}
            </p>
        </div>

        <x-input-error :messages="$errors->get('permissions.*')" />

        {{-- One card per module. A module added in the code appears here as another card after Refresh. --}}
        <div class="grid grid-cols-1 gap-6 md:grid-cols-2 2xl:grid-cols-3">
            @foreach ($permissionGroups as $group => $permissions)
                <section
                    x-data="{
                        allowed: 0,
                        total: {{ count($permissions) }},
                        boxes() {
                            return [...$root.querySelectorAll('[data-permission]')];
                        },
                        sync() {
                            this.allowed = this.boxes().filter((box) => box.checked).length;
                        },
                        toggleAll(checked) {
                            this.boxes().forEach((box) => { box.checked = checked; });
                            this.sync();
                        },
                    }"
                    x-init="sync()"
                    class="flex flex-col gap-4 rounded-2xl bg-white p-6 shadow-raised"
                >
                    <header class="flex items-center justify-between gap-3 border-b border-gray-100 pb-4">
                        <div class="flex min-w-0 items-center gap-3">
                            <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-brand-50 text-sm font-bold text-brand-700 ring-1 ring-brand-100">
                                {{ Str::upper(Str::substr($group, 0, 1)) }}
                            </span>

                            <div class="min-w-0">
                                <h4 class="truncate text-base font-semibold text-gray-900">{{ __($group) }}</h4>
                                <p class="text-xs text-gray-500" x-text="`${allowed} of ${total} allowed`">
                                    {{ trans_choice('{1} :count permission|[2,*] :count permissions', count($permissions)) }}
                                </p>
                            </div>
                        </div>

                        <label class="inline-flex shrink-0 cursor-pointer items-center gap-2 text-sm font-medium text-gray-600">
                            {{ __('Allow all') }}
                            <x-switch ::checked="allowed === total" @change="toggleAll($event.target.checked)" />
                        </label>
                    </header>

                    <div class="flex flex-col gap-3">
                        @foreach ($permissions as $permission)
                            <label for="permission-{{ $permission->value }}" class="group flex cursor-pointer items-center gap-3 rounded-xl border border-gray-200 bg-white p-3 transition duration-150 ease-in-out hover:border-gray-300 has-[:checked]:border-brand-300 has-[:checked]:bg-brand-50">
                                <span class="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-gray-100 text-gray-500 transition duration-150 ease-in-out group-has-[:checked]:bg-brand-600 group-has-[:checked]:text-white">
                                    <x-permission-icon :action="$permission->action()" />
                                </span>

                                <span class="min-w-0 flex-1">
                                    <span class="block text-sm font-semibold text-gray-900">{{ __($permission->label()) }}</span>
                                    <span class="block text-xs text-gray-600">{{ __($permission->description()) }}</span>
                                </span>

                                <x-switch
                                    id="permission-{{ $permission->value }}"
                                    name="permissions[]"
                                    :value="$permission->value"
                                    :checked="in_array($permission->value, $selectedPermissions, true)"
                                    data-permission
                                    @change="sync()"
                                />
                            </label>
                        @endforeach
                    </div>
                </section>
            @endforeach
        </div>
    </div>

    <!-- Save -->
    <div class="flex items-center justify-end gap-3 rounded-2xl bg-white px-6 py-4 shadow-raised sm:px-8">
        <x-secondary-button :href="route('roles.index')">{{ __('Cancel') }}</x-secondary-button>

        <x-primary-button>
            @unless ($role)
                <x-icon-plus />
            @endunless

            {{ $submitLabel }}
        </x-primary-button>
    </div>
</div>