@php
    $permissionOptions = $permissionOptions ?? collect();
@endphp

<x-layouts.app title="Rolle anlegen" 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 anlegen</div>
                <div class="mt-1 text-sm text-rk-slate">Name, Scope und Permissions definieren.</div>
            </div>
            <a href="{{ route('security.roles.index') }}" class="btn-rk-soft">
                Zurück
            </a>
        </div>

        <form method="POST" action="{{ route('security.roles.store') }}" class="grid grid-cols-1 xl:grid-cols-3 gap-4">
            @csrf

            <div class="xl:col-span-1 rounded-3xl bg-white border border-rk p-6 shadow-sm">
                <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') }}"
                        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"
                        placeholder="z.B. ortstelle_admin">
                    @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') }}"
                        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"
                        placeholder="z.B. Ortstelle Admin">
                    @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', 'district') === $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="w-full rounded-2xl bg-rk-red px-4 py-3 text-sm font-semibold text-white hover:bg-rk-red-dark transition-rk hover:shadow-button">
                        Rolle speichern
                    </button>
                </div>
            </div>

            <div class="xl:col-span-2 rounded-3xl bg-white border border-rk p-6 shadow-sm">
                <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">Gruppiert nach Modul.</div>
                    </div>
                    <button type="button" id="toggleAll" class="btn-rk-soft">
                        Alle toggeln
                    </button>
                </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)
                                    <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(in_array($p->id, old('permission_ids', []), true))>
                                        <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
            </div>
        </form>

        <script>
            (function() {
                const all = () => Array.from(document.querySelectorAll('input[type="checkbox"][name="permission_ids[]"]'));
                const toggleAllBtn = document.getElementById('toggleAll');

                toggleAllBtn?.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>