create loading and handle from js create edit and delete roles

resources/js/roles/create.js

@@ -0,0 +1,55 @@
+document.addEventListener("DOMContentLoaded", function (e) {
+    const toastNotification = document.getElementById("toastNotification");
+    const toast = new bootstrap.Toast(toastNotification);
+    document
+        .getElementById("btnCreateRole")
+        .addEventListener("click", async function () {
+            let submitButton = this;
+            let spinner = document.getElementById("spinner");
+            let form = document.getElementById("formCreateRole");
+
+            if (!form) {
+                console.error("Form element not found!");
+                return;
+            }
+            // Get form data
+            let formData = new FormData(form);
+
+            // Disable button and show spinner
+            submitButton.disabled = true;
+            spinner.classList.remove("d-none");
+
+            try {
+                let response = await fetch(form.action, {
+                    method: "POST",
+                    headers: {
+                        "X-CSRF-TOKEN": document
+                            .querySelector('meta[name="csrf-token"]')
+                            .getAttribute("content"),
+                    },
+                    body: formData,
+                });
+
+                if (response.ok) {
+                    let result = await response.json();
+                    document.getElementById("toast-message").innerText =
+                        result.message;
+                    toast.show();
+                    setTimeout(() => {
+                        window.location.href = "/roles";
+                    }, 2000);
+                } else {
+                    let error = await response.json();
+                    document.getElementById("toast-message").innerText =
+                        error.message;
+                    toast.show();
+                    console.error("Error:", error);
+                }
+            } catch (error) {
+                console.error("Request failed:", error);
+                document.getElementById("toast-message").innerText =
+                    error.message;
+                toast.show();
+            }
+        });
+});