add flatpicker for edit pbg task data

resources/js/pbg-task/show.js

@@ -2,10 +2,22 @@ import { Grid } from "gridjs/dist/gridjs.umd.js";
 import "gridjs/dist/gridjs.umd.js";
 import gridjs from "gridjs/dist/gridjs.umd.js";
 import GlobalConfig from "../global-config";
+import flatpickr from "flatpickr";
+import "flatpickr/dist/flatpickr.min.css";
 
 class PbgTaskAssignments {
     init() {
         this.initTablePbgTaskAssignments();
+        this.handleUpdateData();
+        this.initDatePicker();
+    }
+
+    initDatePicker() {
+        let element = document.getElementById("datepicker_due_date");
+        flatpickr(element, {
+            dateFormat: "Y-m-d",
+            minDate: new Date(),
+        });
     }
 
     initTablePbgTaskAssignments() {
@@ -62,6 +74,65 @@ class PbgTaskAssignments {
             },
         }).render(tableContainer);
     }
+
+    handleUpdateData() {
+        const button = document.getElementById("btnUpdatePbgTask");
+        const form = document.getElementById("formUpdatePbgTask");
+        const toastNotification = document.getElementById("toastNotification");
+        const toast = new bootstrap.Toast(toastNotification);
+        button.addEventListener("click", function (event) {
+            event.preventDefault();
+            let submitButton = this;
+            let spinner = document.getElementById("spinner");
+            submitButton.disabled = true;
+            spinner.classList.remove("d-none");
+
+            const formData = new FormData(form);
+            const formObject = {};
+            formData.forEach((value, key) => {
+                formObject[key] = value;
+            });
+            fetch(form.action, {
+                method: "PUT", // Ensure your Laravel route is set to accept PUT requests
+                body: JSON.stringify(formObject), // Convert form data to JSON
+                credentials: "include",
+                headers: {
+                    Authorization: `Bearer ${document
+                        .querySelector('meta[name="api-token"]')
+                        .getAttribute("content")}`,
+                    "Content-Type": "application/json",
+                    "X-CSRF-TOKEN": document.querySelector(
+                        'meta[name="csrf-token"]'
+                    ).content, // For Laravel security
+                },
+            })
+                .then((response) => {
+                    if (!response.ok) {
+                        return response.json().then((err) => {
+                            throw new Error(
+                                err.message || "Something went wrong"
+                            );
+                        });
+                    }
+                    return response.json();
+                })
+                .then((data) => {
+                    document.getElementById("toast-message").innerText =
+                        data.message;
+                    toast.show();
+                    submitButton.disabled = false;
+                    spinner.classList.add("d-none");
+                })
+                .catch((error) => {
+                    console.error("Error updating task:", error);
+                    document.getElementById("toast-message").innerText =
+                        error.message;
+                    toast.show();
+                    submitButton.disabled = false;
+                    spinner.classList.add("d-none");
+                });
+        });
+    }
 }
 
 document.addEventListener("DOMContentLoaded", function (e) {