Confirmar eliminacion Capacidades

resources/views/capacidades.blade.php

@@ -20,7 +20,6 @@
             <a href="{{ route('capacidades.create') }}"
                class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center gap-2">
                 <i class="fas fa-plus"></i>
-                Agregar
             </a>
         </div>
 
@@ -46,10 +45,12 @@
                                 </a>
                                 <form action="{{ route('capacidades.destroy', $capacidad->id) }}"
                                       method="POST"
-                                      class="inline">
+                                      class="inline"
+                                      onsubmit="return false;">
                                     @csrf
                                     @method('DELETE')
-                                    <button type="submit"
+                                    <button type="button"
+                                            onclick="confirmarEliminacion(this)"
                                             class="text-red-600 hover:text-red-900">
                                         <i class="fas fa-trash"></i>
                                     </button>
@@ -76,5 +77,23 @@ setTimeout(function() {
         }, 500); // Tiempo para remover el elemento después de la transición
     }
 }, 3000); // Tiempo en milisegundos antes de comenzar a desaparecer
+
+function confirmarEliminacion(button) {
+    Swal.fire({
+        title: '¿Estás seguro?',
+        text: "Esta acción no se puede deshacer",
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Sí, eliminar',
+        cancelButtonText: 'Cancelar'
+    }).then((result) => {
+        if (result.isConfirmed) {
+            button.closest('form').onsubmit = null;
+            button.closest('form').submit();
+        }
+    });
+}
 </script>
 @endsection