@php
    /** @var \Spatie\Permission\Models\Role $role */
    $title = 'Rolle bearbeiten';
    $pageTitle = 'Rolle bearbeiten';
    $pageSubtitle = $role->name;

    $protected = in_array($role->name, ['Chef', 'KFZ Beauftragter', 'Mitarbeiter'], true);
    $readOnly = (bool) ($readOnly ?? false);

    $oldIds = old('permission_ids');
    $selectedIds = is_array($oldIds) ? $oldIds : $selected ?? [];
    $selectedIds = array_map('intval', $selectedIds);
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div class="max-w-3xl space-y-6">
        @if (session('status'))
            <div class="rounded-2xl border border-emerald-200 bg-emerald-50 px-5 py-4 text-sm text-emerald-800">
                {{ session('status') }}
            </div>
        @endif

        @if ($readOnly)
            <div class="rounded-2xl border border-amber-200 bg-amber-50 px-5 py-4 text-sm text-amber-900">
                <div class="font-semibold">Nur Anzeige</div>
                <div class="mt-1 text-sm">
                    Die Chef-Rolle kann nur vom Chef geändert werden.
                </div>
            </div>
        @endif

        <form method="POST" action="{{ route('roles.update', $role) }}"
            class="rounded-2xl border border-gray-200 bg-white p-6 space-y-6">
            @csrf
            @method('PATCH')

            @php($nameValue = old('name', $role->name))

            {{-- WICHTIG: wenn Input disabled ist, wird er nicht gesendet -> hidden als Fallback --}}
            @if ($protected || $readOnly)
                <input type="hidden" name="name" value="{{ $nameValue }}">
            @endif

            <div>
                <label class="text-sm font-medium text-gray-800">Name</label>
                <input name="name" value="{{ $nameValue }}" required maxlength="50" @disabled($protected || $readOnly)
                    class="mt-2 w-full rounded-xl border-gray-200 bg-white focus:border-brand focus:ring-brand disabled:bg-gray-50 disabled:text-gray-500">
                @if ($protected)
                    <div class="mt-2 text-xs text-gray-500">Diese Rolle ist geschützt und kann nicht umbenannt werden.
                    </div>
                @endif
                @error('name')
                    <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                @enderror
            </div>

            <div>
                <div class="flex items-center justify-between">
                    <div class="text-sm font-semibold text-gray-900">Permissions</div>
                    <div class="text-xs text-gray-500">{{ $permissions->count() }} verfügbar</div>
                </div>

                <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-2">
                    @foreach ($permissions as $p)
                        @php($pid = (int) $p->id)
                        <label class="flex items-center gap-2 rounded-xl border border-gray-200 p-3 hover:bg-gray-50">
                            <input type="checkbox" name="permission_ids[]" value="{{ $pid }}"
                                class="rounded border-gray-300 text-brand focus:ring-brand disabled:opacity-60"
                                @checked(in_array($pid, $selectedIds, true)) @disabled($readOnly)>
                            <span class="text-sm font-semibold text-gray-800">{{ $p->name }}</span>
                        </label>
                    @endforeach
                </div>
            </div>

            <div class="flex items-center justify-between gap-2 border-t border-gray-100 pt-5">
                <a href="{{ route('roles.index') }}"
                    class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                    Zurück
                </a>

                <div class="flex items-center gap-2">
                    @if (!$protected && !$readOnly)
                        <form method="POST" action="{{ route('roles.destroy', $role) }}"
                            onsubmit="return confirm('Rolle wirklich löschen?');">
                            @csrf
                            @method('DELETE')
                            <button
                                class="rounded-xl border border-red-200 bg-red-50 px-4 py-2.5 text-sm font-semibold text-red-700 hover:bg-red-100">
                                Löschen
                            </button>
                        </form>
                    @endif

                    <button
                        class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600 disabled:opacity-60"
                        @disabled($readOnly)>
                        Speichern
                    </button>
                </div>
            </div>
        </form>
    </div>
</x-ux-layout>