@props([
    'role' => null,
    'action',
    'method' => 'POST',
    'menuPermissions',
])

@php
    $selectedPermissionIds = old(
        'permission_ids',
        isset($role) ? $role->permissions->pluck('id')->all() : []
    );
    $permissionIdByName = $menuPermissions->keyBy('name');
@endphp

<form method="POST" action="{{ $action }}" class="space-y-6">
    @csrf
    @if($method !== 'POST')
        @method($method)
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <div>
            <x-form.label for="name" value="Nome" />
            <x-form.input
                id="name"
                name="name"
                value="{{ old('name', $role?->name) }}"
                required
            />
            <x-form.error name="name" />
        </div>

        <div>
            <x-form.label for="description" value="Descrição" />
            <x-form.input
                id="description"
                name="description"
                value="{{ old('description', $role?->description) }}"
            />
            <x-form.error name="description" />
        </div>

    </div>

    <div class="border-t border-gray-200 pt-6">
        <h3 class="text-sm font-semibold text-gray-900 mb-1">Menus e submenus</h3>
        <p class="text-xs text-gray-500 mb-4">
            Marque os módulos e sub-itens que esta role pode usar. Ao marcar uma opção <strong>(todos os submenus)</strong>,
            os checkboxes daquele módulo são marcados automaticamente (e o contrário ao desmarcar). Também é possível marcar só submenus específicos.
        </p>
        <div id="role-menu-permissions" class="space-y-6">
            @foreach(\App\Enums\MenuPermission::groupedForForm() as $section => $cases)
                <div>
                    <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">{{ $section }}</h4>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                        @foreach($cases as $menuCase)
                            @php
                                $permission = $permissionIdByName->get($menuCase->value);
                            @endphp
                            @continue(!$permission)
                            <label class="flex items-start gap-2 rounded-lg border border-gray-200 px-3 py-2 hover:bg-gray-50 cursor-pointer">
                                <input
                                    type="checkbox"
                                    name="permission_ids[]"
                                    value="{{ $permission->id }}"
                                    data-permission-name="{{ $menuCase->value }}"
                                    class="js-role-menu-perm mt-1 rounded border-gray-300 text-gray-900 focus:ring-gray-900"
                                    @checked(in_array($permission->id, $selectedPermissionIds, true))
                                />
                                <span class="text-sm text-gray-800">{{ $menuCase->label() }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
        <script>
            (function () {
                const cascadeParents = @json(\App\Enums\MenuPermission::cascadeParentToChildPrefix());
                const root = document.getElementById('role-menu-permissions');
                if (!root || typeof cascadeParents !== 'object' || cascadeParents === null) {
                    return;
                }

                function menuCheckboxes() {
                    return root.querySelectorAll('input.js-role-menu-perm[type="checkbox"]');
                }

                function syncParentsFromChildren() {
                    for (const parentName of Object.keys(cascadeParents)) {
                        const prefix = cascadeParents[parentName];
                        const parentCb = root.querySelector('input.js-role-menu-perm[data-permission-name="' + parentName + '"]');
                        if (!parentCb) continue;
                        const descendants = [...menuCheckboxes()].filter(function (cb) {
                            const n = cb.dataset.permissionName || '';
                            return n.startsWith(prefix);
                        });
                        if (!descendants.length) continue;
                        const allOn = descendants.every(function (cb) { return cb.checked; });
                        const anyOn = descendants.some(function (cb) { return cb.checked; });
                        parentCb.checked = allOn;
                        parentCb.indeterminate = anyOn && !allOn;
                    }
                }

                root.addEventListener('change', function (e) {
                    const input = e.target;
                    if (!input.matches('input.js-role-menu-perm[type="checkbox"]')) return;
                    const name = input.dataset.permissionName;
                    if (name && Object.prototype.hasOwnProperty.call(cascadeParents, name)) {
                        const prefix = cascadeParents[name];
                        const checked = input.checked;
                        menuCheckboxes().forEach(function (cb) {
                            const n = cb.dataset.permissionName || '';
                            if (n.startsWith(prefix)) {
                                cb.checked = checked;
                            }
                        });
                        input.indeterminate = false;
                        return;
                    }
                    syncParentsFromChildren();
                });

                syncParentsFromChildren();
            })();
        </script>
        <x-form.error name="permission_ids" />
    </div>

    <div class="flex justify-end gap-3">
        <a href="{{ route('roles.index') }}" class="text-gray-600 hover:text-gray-900">
            Cancelar
        </a>

        <x-ui.button type="submit">
            {{ $role ? 'Atualizar' : 'Criar' }}
        </x-ui.button>
    </div>
</form>