25. Restringir roles que se editar o eliminan

Aquí les dejo otra propuesta para deshabilitar los botones usando estas clases de tailwind de forma condicional :class="$role->id <= 4 ? 'pointer-events-none opacity-75' : ''" y les dejo una explicación de por que disabled no funciona.

Realmente la propiedad disabled si funciona solo que no se puede aplicar al botón editar por que este botón se comporta como un link (<a>) no como un botón normal (<input> o <button>), en cambio si aplican la propiedad disabled en el botón eliminar recordemos que para eliminar se tiene que utilizar el método DELETE de http, por lo tanto debes de utilizar un formulario, ahí si se aplica correctamente la propiedad, sin embargo, intenté utilizar la clase tailwind cursor-not-allowed en Editar pero no me funcionó, cuando pones un botón en disabled automáticamente aplica este tipo de cursor y no logré igualar la aparecencia del botón Editar, por eso mejor opte por aplicar estas clases en los dos componentes, para que quedaran iguales.

Lo que nos mostró victor se complementa perfectamente con este método ya que si alguien desde el inspector de propiedades del navegador elimina estas clases y los botones de habilitan esta la segunda validación que indicará que no se pueden editar o eliminar estos roles, la solución del compañero Fernando Moreno es mas efectiva por que desaparece los botones, sin embargo, considero que validarlo desde el controlador es una excelente medida para prevenir modificar estos roles del sistema.

Saludos.

<div class="flex items-center space-x-2">
    <x-wire-button
        href="{{ route('admin.roles.edit', $role) }}"
        blue xs
        :class="$role->id <= 4 ? 'pointer-events-none opacity-75' : ''"
    >
        <i class="fa-solid fa-pen-to-square"></i>
    </x-wire-button>


    <form action="{{ route('admin.roles.destroy', $role) }}" method="POST">
        @csrf
        @method('DELETE')
        <x-wire-button type="submit" red xs
            :class="$role->id <= 4 ? 'pointer-events-none opacity-75' : ''"
            onclick="return confirm('¿Está seguro que desea eliminar este rol? Ésta accion no se puede deshacer.')">
            <i class="fa-solid fa-trash"></i>
        </x-wire-button>
    </form>
</div>

Podrías ocultar los botones de la siguiente forma:

@if($role->id > 4)
    <x-wire-button blue xs href="{{route('admin.roles.edit', $role)}}">
        <i class="fa-solid fa-pen-to-square"></i>
    </x-wire-button>

    <form action="{{route('admin.roles.destroy', $role)}}" method="POST" class="inline">
        @csrf
        @method('DELETE')
        <x-wire-button red xs type="submit">
            <i class="fa-solid fa-trash"></i>
        </x-wire-button>
    </form>
@endif