Update script.js

script.js

@@ -1,3 +1,9 @@
+/**
+ * Client-Side JavaScript for the International Umbrella Endowment
+ *
+ * This version includes the fix to auto-populate the Deal ID into the lookup field upon successful submission.
+ * Final Version: Monday, June 16, 2025
+ */
 document.addEventListener('DOMContentLoaded', () => {
     
     // --- CONFIGURATION ---
@@ -20,14 +26,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // --- EVENT LISTENERS ---
     
-    // Show the submission form modal
     if (showSubmissionButton) {
         showSubmissionButton.addEventListener('click', () => {
             submissionModal.classList.remove('hidden');
         });
     }
 
-    // Attach close listeners to both modals
     [submissionModal, dealModal].forEach(modal => {
         if (modal) {
             modal.querySelector('.modal-close').addEventListener('click', () => closeModal(modal));
@@ -37,11 +41,9 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
-    // Handle form submissions
     if (submissionForm) submissionForm.addEventListener('submit', handleFormSubmit);
     if (lookupForm) lookupForm.addEventListener('submit', handleLookupSubmit);
     
-    // Handle Admin Action Clicks
     if (adminForm) {
         document.getElementById('admin-approve-button').addEventListener('click', () => handleAdminClick('approve'));
         document.getElementById('admin-decline-button').addEventListener('click', () => handleAdminClick('decline'));
@@ -49,11 +51,61 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // --- HANDLER FUNCTIONS ---
 
+    /**
+     * Handles the main form submission to create a new deal.
+     * THIS FUNCTION CONTAINS THE FIX.
+     */
     async function handleFormSubmit(event) {
-        // ... (This function is already correct from our last version) ...
+        event.preventDefault();
+        const submitButton = document.getElementById('submit-button');
+        
+        showStatus(submissionStatus, 'Submitting...');
+        submitButton.disabled = true;
+        
+        try {
+            const formData = new FormData(submissionForm);
+            const response = await fetch(workerUrl, { method: 'POST', body: formData });
+            const result = await response.json();
+
+            if (!response.ok) {
+                // Use the error message from the worker if available
+                throw new Error(result.message || result.error || 'An unknown error occurred.');
+            }
+            
+            const dealId = result.deal_id;
+            
+            // --- THIS IS THE CORRECTED LOGIC ---
+            // 1. Update the success message.
+            showSuccess(submissionStatus, `Success! Deal ID copied below.`);
+
+            // 2. Automatically populate the lookup field on the main page.
+            if(lookupInput) {
+                lookupInput.value = dealId;
+            }
+            
+            // 3. Highlight the lookup container to draw attention to it.
+            if(lookupContainer) {
+                lookupContainer.classList.add('highlight');
+                setTimeout(() => {
+                    lookupContainer.classList.remove('highlight');
+                }, 2000); // Remove highlight after 2 seconds
+            }
+
+            submissionForm.reset();
+            
+            // 4. Close the modal after a delay so the user can see the message.
+            setTimeout(() => closeModal(submissionModal), 2500);
+
+        } catch (error) {
+            showError(submissionStatus, error.message);
+        } finally {
+            submitButton.disabled = false;
+        }
     }
 
-    // THIS FUNCTION IS NOW CORRECTED
+    /**
+     * Handles the lookup form submission to check a deal's status.
+     */
     async function handleLookupSubmit(event) {
         event.preventDefault();
         if (!lookupInput.value) {
@@ -65,7 +117,6 @@ document.addEventListener('DOMContentLoaded', () => {
             const result = await response.json();
             if (!response.ok) throw new Error(result.error || 'Deal not found.');
             
-            // This now calls the correct helper function to open the modal
             openDealInfoModal(result);
 
         } catch (error) {
@@ -73,36 +124,84 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    /**
+     * Handles clicks on the admin approve/decline buttons.
+     */
     async function handleAdminClick(action) {
-        // ... (This function is already correct) ...
+        const dealId = document.getElementById('admin-deal-id').value;
+        if (!dealId) {
+            showError(adminStatus, 'Please enter a Deal ID.');
+            return;
+        }
+        showStatus(adminStatus, 'Processing...');
+        
+        const formData = new FormData();
+        formData.append('action', action);
+        formData.append('deal_id', dealId);
+
+        try {
+            const response = await fetch(workerUrl, { method: 'POST', body: formData });
+            const result = await response.json();
+            if (!response.ok) throw new Error(result.message || result.error || 'Action failed.');
+            showSuccess(adminStatus, result.message);
+        } catch (error) {
+            showError(adminStatus, error.message);
+        }
     }
 
     // --- UI HELPER FUNCTIONS ---
 
-    // THIS FUNCTION IS NOW RESTORED AND FULLY FEATURED
+    /**
+     * Populates and opens the deal information modal.
+     */
     function openDealInfoModal(dealData) {
-        // Select all the span elements inside the modal
-        document.getElementById('modal-deal-id').textContent = dealData.deal_id;
-        document.getElementById('modal-owner-name').textContent = dealData.owner_name;
-        document.getElementById('modal-contact-email').textContent = dealData.contact_email;
-        document.getElementById('modal-contact-phone').textContent = dealData.contact_phone || 'N/A';
-        document.getElementById('modal-year-built').textContent = dealData.year_built || 'N/A';
-        document.getElementById('modal-gross-tonnage').textContent = dealData.gross_tonnage || 'N/A';
-        document.getElementById('modal-token-amount').textContent = dealData.token_amount;
-        document.getElementById('modal-vessel-description').textContent = dealData.vessel_description || 'No description provided.';
-        
-        // Handle the status badge
-        const statusBadge = document.getElementById('modal-status-badge');
-        statusBadge.textContent = dealData.status;
-        statusBadge.className = `badge ${dealData.status || 'active'}`; // Set class for color
+        const modalBody = document.getElementById('modal-body');
+        // Clear previous results
+        modalBody.innerHTML = '';
+
+        // Create and append deal details
+        const details = {
+            "Deal ID": dealData.deal_id,
+            "Status": `<span class="badge ${dealData.status || 'active'}">${dealData.status}</span>`,
+            "Owner": dealData.owner_name,
+            "Contact Email": dealData.contact_email,
+            "Contact Phone": dealData.contact_phone,
+            "Vessel Year Built": dealData.year_built,
+            "Gross Tonnage": dealData.gross_tonnage,
+            "Tokens Requested": dealData.token_amount,
+            "Description": `<p class="description-text">${dealData.vessel_description || 'N/A'}</p>`
+        };
+
+        for (const [key, value] of Object.entries(details)) {
+            if (value) { // Only show fields that have data
+                const p = document.createElement('p');
+                p.innerHTML = `<strong>${key}:</strong> ${value}`;
+                modalBody.appendChild(p);
+            }
+        }
         
-        // Show the modal
         dealModal.classList.remove('hidden');
     }
 
     function closeModal(modalElement) {
-        modalElement.classList.add('hidden');
+        if(modalElement) modalElement.classList.add('hidden');
     }
     
-    // ... all other showStatus, showSuccess, showError functions are correct ...
+    function showStatus(element, message) {
+        element.className = 'status';
+        element.innerHTML = message;
+        element.style.display = 'block';
+    }
+
+    function showSuccess(element, message) {
+        element.className = 'status success';
+        element.innerHTML = `<strong>${message}</strong>`;
+        element.style.display = 'block';
+    }
+
+    function showError(element, message) {
+        element.className = 'status error';
+        element.innerHTML = `<strong>Error:</strong> ${message}`;
+        element.style.display = 'block';
+    }
 });