@php
    $permissionOptions = $permissionOptions ?? collect();
    $selected = $selected ?? [];
@endphp

<x-layouts.app title="Rolle bearbeiten" userRole="Bezirksstelle">
    <div class="flex flex-col gap-4">

        <div class="flex items-end justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">Rolle bearbeiten</div>
                <div class="mt-1 text-sm text-rk-slate">{{ $role->label }} · <span
                        class="font-mono">{{ $role->name }}</span></div>
            </div>
            <a href="{{ route('security.roles.index') }}" class="btn-rk-soft">
                Zurück
            </a>
        </div>

        <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">

            <form method="POST" action="{{ route('security.roles.update', $role) }}"
                class="xl:col-span-1 rounded-3xl bg-white border border-rk p-6 shadow-sm">
                @csrf
                @method('PUT')

                <div class="text-sm font-semibold">Stammdaten</div>

                <div class="mt-4">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Name (slug)</label>
                    <input name="name" value="{{ old('name', $role->name) }}"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent">
                    @error('name')
                        <div class="mt-2 text-xs text-red-600">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mt-4">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Label</label>
                    <input name="label" value="{{ old('label', $role->label) }}"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent">
                    @error('label')
                        <div class="mt-2 text-xs text-red-600">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mt-4">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Scope</label>
                    <select name="scope" class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                        @foreach (['district' => 'district', 'station' => 'station', 'global' => 'global'] as $k => $lbl)
                            <option value="{{ $k }}" @selected(old('scope', $role->scope) === $k)>{{ $lbl }}
                            </option>
                        @endforeach
                    </select>
                    @error('scope')
                        <div class="mt-2 text-xs text-red-600">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mt-6">
                    <button
                        class="rounded-2xl border border-green-200 bg-green-50 px-4 py-2.5 text-sm font-semibold text-black hover:bg-green-100 transition-rk hover:shadow-button w-full">
                        Speichern
                    </button>
                </div>
            </form>

            <form method="POST" action="{{ route('security.roles.permissions.sync', $role) }}"
                class="xl:col-span-2 rounded-3xl bg-white border border-rk p-6 shadow-sm">
                @csrf

                <div class="flex items-start justify-between gap-3">
                    <div>
                        <div class="text-sm font-semibold">Permissions</div>
                        <div class="mt-1 text-xs text-rk-slate">Zuweisung aktualisieren.</div>
                    </div>

                    <div class="flex items-center gap-2">
                        <button type="button" id="toggleAll" class="btn-rk-soft">
                            Alle toggeln
                        </button>

                        <button class="btn-rk-soft-green">
                            Permissions speichern
                        </button>
                    </div>
                </div>

                <div class="mt-4 space-y-4">
                    @foreach ($permissionOptions as $group => $perms)
                        <div class="rounded-2xl border border-rk p-4">
                            <div class="flex items-center justify-between">
                                <div class="text-sm font-semibold">{{ $group }}.*</div>
                                <button type="button" class="groupToggle btn-rk-soft"
                                    data-group="{{ $group }}">
                                    Gruppe toggeln
                                </button>
                            </div>

                            <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-2">
                                @foreach ($perms as $p)
                                    @php $isChecked = in_array($p->id, old('permission_ids', $selected), true); @endphp
                                    <label
                                        class="flex items-start gap-3 rounded-2xl border border-rk bg-neutral-50 p-3">
                                        <input type="checkbox" name="permission_ids[]" value="{{ $p->id }}"
                                            class="mt-1 rounded border-rk" @checked($isChecked)>
                                        <div>
                                            <div class="text-sm font-semibold">{{ $p->name }}</div>
                                            <div class="text-xs text-rk-slate">{{ $p->label ?? '' }}</div>
                                        </div>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>

                @error('permission_ids')
                    <div class="mt-2 text-xs text-red-600">{{ $message }}</div>
                @enderror
            </form>

        </div>

        <form method="POST" action="{{ route('security.roles.destroy', $role) }}"
            onsubmit="return confirm('Rolle wirklich löschen?')"
            class="rounded-3xl bg-white border border-rk p-6 shadow-sm">
            @csrf
            @method('DELETE')

            <div class="flex items-center justify-between gap-3">
                <div>
                    <div class="text-sm font-semibold">Danger Zone</div>
                    <div class="mt-1 text-xs text-rk-slate">Löschen entfernt Zuweisungen (User & Permissions).</div>
                </div>

                <button
                    class="rounded-2xl border border-red-200 bg-red-50 px-4 py-2.5 text-sm font-semibold text-red-700 hover:bg-red-100 transition-rk hover:shadow-button">
                    Rolle löschen
                </button>
            </div>
        </form>

        <script>
            (function() {
                const all = () => Array.from(document.querySelectorAll('input[type="checkbox"][name="permission_ids[]"]'));
                document.getElementById('toggleAll')?.addEventListener('click', () => {
                    const boxes = all();
                    const anyUnchecked = boxes.some(b => !b.checked);
                    boxes.forEach(b => b.checked = anyUnchecked);
                });

                document.querySelectorAll('.groupToggle').forEach(btn => {
                    btn.addEventListener('click', () => {
                        const group = btn.getAttribute('data-group');
                        const boxes = all().filter(b => {
                            const name = b.closest('label')?.querySelector('div .text-sm')
                                ?.textContent || '';
                            return name.startsWith(group + '.');
                        });
                        const anyUnchecked = boxes.some(b => !b.checked);
                        boxes.forEach(b => b.checked = anyUnchecked);
                    });
                });
            })();
        </script>

    </div>
</x-layouts.app>