@if ($errors->any())
    <div class="rounded-lg border border-error/30 bg-error-container px-4 py-3 text-on-error-container font-body-sm">
        Revisa los campos marcados antes de continuar.
    </div>
@endif

<form class="bg-white rounded-xl border border-outline-variant p-8 shadow-[0px_4px_20px_rgba(0,0,0,0.04)] space-y-6"
    action="{{ $action }}" method="POST">
    @csrf
    @if ($method !== 'POST')
        @method($method)
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="pretty_name">Nombre visible</label>
            <input class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                id="pretty_name" name="pretty_name" type="text" value="{{ old('pretty_name', $role?->pretty_name) }}" required />
            @error('pretty_name') <p class="mt-1 font-body-sm text-error">{{ $message }}</p> @enderror
        </div>
        <div>
            <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="module">Módulo principal</label>
            <input class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                id="module" name="module" type="text" value="{{ old('module', $role?->module ?? 'usuarios') }}" required />
            @error('module') <p class="mt-1 font-body-sm text-error">{{ $message }}</p> @enderror
        </div>
    </div>

    @unless ($role)
        <div>
            <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="name">Nombre técnico</label>
            <input class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                id="name" name="name" type="text" value="{{ old('name') }}" placeholder="Se genera automáticamente si se deja vacío" />
            @error('name') <p class="mt-1 font-body-sm text-error">{{ $message }}</p> @enderror
        </div>
    @endunless

    <div class="space-y-5">
        <div>
            <h3 class="font-title-md text-title-md text-primary">Permisos</h3>
            <p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Selecciona los accesos que tendrá este rol.</p>
        </div>

        @foreach ($permissionsByModule as $module => $permissions)
            <div class="rounded-xl border border-outline-variant bg-surface-container-lowest p-5">
                <p class="font-label-md text-label-md text-secondary uppercase tracking-wider mb-4">{{ $module }}</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    @foreach ($permissions as $permission)
                        <label class="flex items-start gap-3 rounded-lg bg-white border border-outline-variant p-3 cursor-pointer hover:border-primary">
                            <input class="mt-1 text-primary focus:ring-primary" name="permissions[]" type="checkbox"
                                value="{{ $permission->name }}"
                                @checked(in_array($permission->name, old('permissions', $role?->permissions->pluck('name')->all() ?? []))) />
                            <span>
                                <span class="block font-label-md text-label-md text-on-surface">
                                    {{ $permission->pretty_name ?? $permission->name }}
                                </span>
                                <span class="block font-body-sm text-body-sm text-on-surface-variant">{{ $permission->name }}</span>
                            </span>
                        </label>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>

    <div class="flex justify-end gap-3 border-t border-outline-variant pt-6">
        <a class="rounded-lg border border-outline-variant px-5 py-3 font-label-md text-label-md text-on-surface-variant"
            href="{{ route('admin.permisos.index') }}">Cancelar</a>
        <button class="rounded-lg bg-primary px-5 py-3 font-label-md text-label-md text-on-primary" type="submit">
            Guardar rol
        </button>
    </div>
</form>