create loading and handle from js create edit and delete roles

resources/js/roles/index.js

@@ -67,11 +67,37 @@ class Roles {
     handleDelete(event) {
         if (event.target.classList.contains("btn-delete-role")) {
             event.preventDefault();
-            const id = event.target.getAttribute("data-id");
 
-            if (confirm("Are you sure you want to delete this item?")) {
-                fetch(`/roles/${id}`, {
+            const id = event.target.getAttribute("data-id");
+            let modalElement = document.getElementById("modalConfirmation");
+
+            if (!modalElement) {
+                console.error("Modal element not found!");
+                return;
+            }
+
+            let modal = new bootstrap.Modal(modalElement);
+
+            // Set the role ID on the confirm button inside the modal
+            let btnSaveConfirmation = document.getElementById(
+                "btnSaveConfirmation"
+            );
+            btnSaveConfirmation.setAttribute("data-role-id", id);
+
+            let toastElement = document.getElementById("toastNotificationApi");
+            let toast = new bootstrap.Toast(toastElement);
+
+            // Show the modal
+            modal.show();
+
+            // Prevent multiple event listeners
+            btnSaveConfirmation.onclick = function () {
+                let roleId = this.getAttribute("data-role-id");
+                console.log("Deleted ID:", roleId);
+
+                fetch(`/roles/${roleId}`, {
                     method: "DELETE",
+                    credentials: "include",
                     headers: {
                         "X-CSRF-TOKEN": document
                             .querySelector('meta[name="csrf-token"]')
@@ -81,21 +107,21 @@ class Roles {
                 })
                     .then((response) => {
                         if (response.ok) {
-                            alert("Item deleted successfully!");
-                            window.location.reload();
+                            modal.hide();
+                            toast.show();
+                            setTimeout(() => window.location.reload(), 1500);
                         } else {
                             return response.json().then((error) => {
-                                throw new Error(
-                                    error.message || "Failed to delete item."
-                                );
+                                console.error("Delete failed:", error);
+                                toast.show();
                             });
                         }
                     })
                     .catch((error) => {
                         console.error("Error deleting item:", error);
-                        alert("Something went wrong. Please try again.");
+                        toast.show();
                     });
-            }
+            };
         }
     }
 }