@php
    $role = $role ?? null;
    $isProtected = $isProtected ?? false;
    $current = old('permissions', $role?->permissions->pluck('name')->all() ?? []);
@endphp

<div class="max-w-md">
    <x-label for="name">Nombre del rol *</x-label>
    <x-input id="name" type="text" name="name" value="{{ old('name', $role?->name) }}" required
             :readonly="$isProtected" class="{{ $isProtected ? 'opacity-60' : '' }}" />
    @if ($isProtected)
        <p class="mt-1.5 text-xs text-amber-600 dark:text-amber-400">
            <i class="fa-solid fa-lock mr-1"></i>Rol del sistema: el nombre no se puede modificar.
        </p>
    @endif
    <x-error for="name" />
</div>

@if ($role?->name === 'superadmin')
    <div class="mt-6 rounded-xl bg-amber-50 px-4 py-3 text-sm text-amber-800 ring-1 ring-amber-600/20 dark:bg-amber-500/10 dark:text-amber-300 dark:ring-amber-400/20">
        <i class="fa-solid fa-circle-info mr-1"></i>
        El superadmin tiene acceso total al sistema; sus permisos no se gestionan aquí.
    </div>
@else
    <h3 class="mb-3 mt-8 text-sm font-semibold text-gray-900 dark:text-white">Permisos</h3>
    <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
        @foreach ($permissions as $module => $items)
            <div class="rounded-xl bg-gray-50 p-4 ring-1 ring-gray-950/5 dark:bg-white/5 dark:ring-white/10">
                <p class="mb-3 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                    {{ ucfirst($module) }}
                </p>
                <div class="space-y-2">
                    @foreach ($items as $permission)
                        <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                            <input type="checkbox" name="permissions[]" value="{{ $permission->name }}"
                                   @checked(in_array($permission->name, $current, true))
                                   class="size-4 rounded border-gray-300 text-primary focus:ring-primary">
                            {{ $permission->name }}
                        </label>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
    <x-error for="permissions" />
@endif

<div class="mt-8 flex items-center justify-end gap-3">
    <a href="{{ route('roles.index') }}">
        <x-button type="button" variant="secondary">Cancelar</x-button>
    </a>
    <x-button type="submit"><i class="fa-solid fa-floppy-disk"></i> Guardar</x-button>
</div>