update the dynamic submit modal.

Author: MalharBhatt-dev

app/static/js/service_requests.js

@@ -1,12 +1,28 @@
-document.addEventListener("DOMContentLoaded"
-    ,() => {
+document.addEventListener("DOMContentLoaded",() => {
         const theme = localStorage.getItem("theme");
         if (theme === "dark") {
             document.documentElement.classList.add("dark");document.getElementById("themeBtn").textContent = "☀️";
         }
-     loadRequests();
+        loadRequests();
     });
 
+window.onclick = function(e){
+    const modal = document.getElementById("request_form_container");
+    if(e.target === modal){
+        closeLoginModal();
+    }
+}
+
+function openRequestSubmitModal(){
+    document.getElementById("request_form_container").classList.remove("hidden");
+    document.getElementById("request_form_container").classList.add("flex");
+}
+
+function closeRequestSubmitModal(){
+    document.getElementById("request_form_container").classList.add("hidden");
+    document.getElementById("request_form_container").classList.remove("flex");
+}
+
 async function createRequest(){
 
     const selectedEmployee = document.querySelector('input[name="employee"]:checked');
@@ -118,14 +134,11 @@ function openRequestForm(requestId, queryType){
 
 currentRequestId = requestId;
 
-const table = document.getElementById("dynamic_table");
-const container = document.getElementById("request_form_container");
+openRequestSubmitModal();
+
 const fields = document.getElementById("dynamic_form_fields");
 const button = document.getElementById("dynamic_submit_button");
 
-table.classList.add("hidden");
-container.classList.remove("hidden");
-
 fields.innerHTML = "";
 
 switch(queryType){
@@ -270,3 +283,5 @@ async function updateAccount(query_type, payload){
         return null;
     }
 }
+
+

app/templates/service_requests.html

@@ -280,9 +280,9 @@ <h2 class="text-xl font-bold text-gray-900 dark:text-white">My Requests</h2>
                 </div>
             </div>
             <!-- Dynamic Request Form -->
-            <div id="request_form_container" class="hidden fixed inset-0 bg-gray-900/60 dark:bg-gray-950/80 backdrop-blur-xl items-center justify-center z-50 transition-opacity p-4">
+            <div id="request_form_container" class="fixed inset-0 bg-gray-900/60 dark:bg-gray-950/80 backdrop-blur-xl hidden items-center justify-center z-50 transition-opacity p-4">
                 <div class="bg-white dark:bg-gray-900 p-8 rounded-[2rem] shadow-2xl w-full max-w-md relative border border-gray-200 dark:border-gray-700 animate-[fadeIn_0.3s_ease-out] dark:shadow-black/50">
-                    <button onclick="closeLoginModal()" class="close-modal absolute top-5 right-5 w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white transition-colors">
+                    <button onclick="closeRequestSubmitModal()" class="close-modal absolute top-5 right-5 w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white transition-colors">
                         ✕
                     </button>
                     <div class="mb-8">