script.js

/**
 * 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 ---
    const workerUrl = 'https://form-handler-worker.aiagents.workers.dev/';

    // --- ELEMENT SELECTIONS ---
    const submissionForm = document.getElementById('vessel-exchange-form');
    const lookupForm = document.getElementById('deal-lookup-form');
    const adminForm = document.getElementById('admin-action-form');
    
    const showSubmissionButton = document.getElementById('show-submission-button');
    const submissionModal = document.getElementById('submission-modal');
    const dealModal = document.getElementById('deal-modal');
    
    const lookupContainer = document.getElementById('lookup-container');
    const lookupInput = document.getElementById('lookup-deal-id');
    
    const submissionStatus = document.getElementById('status-message');
    const adminStatus = document.getElementById('admin-status-message');

    // --- EVENT LISTENERS ---
    
    if (showSubmissionButton) {
        showSubmissionButton.addEventListener('click', () => {
            submissionModal.classList.remove('hidden');
        });
    }

    [submissionModal, dealModal].forEach(modal => {
        if (modal) {
            modal.querySelector('.modal-close').addEventListener('click', () => closeModal(modal));
            modal.addEventListener('click', (event) => {
                if (event.target === modal) closeModal(modal);
            });
        }
    });

    if (submissionForm) submissionForm.addEventListener('submit', handleFormSubmit);
    if (lookupForm) lookupForm.addEventListener('submit', handleLookupSubmit);
    
    if (adminForm) {
        document.getElementById('admin-approve-button').addEventListener('click', () => handleAdminClick('approve'));
        document.getElementById('admin-decline-button').addEventListener('click', () => handleAdminClick('decline'));
    }

    // --- HANDLER FUNCTIONS ---

    /**
     * Handles the main form submission to create a new deal.
     * THIS FUNCTION CONTAINS THE FIX.
     */
    async function handleFormSubmit(event) {
        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;
        }
    }

    /**
     * Handles the lookup form submission to check a deal's status.
     */
    async function handleLookupSubmit(event) {
        event.preventDefault();
        if (!lookupInput.value) {
            alert('Please enter a Deal ID.');
            return;
        }
        try {
            const response = await fetch(`${workerUrl}?deal_id=${lookupInput.value}`);
            const result = await response.json();
            if (!response.ok) throw new Error(result.error || 'Deal not found.');
            
            openDealInfoModal(result);

        } catch (error) {
            alert(error.message);
        }
    }

    /**
     * Handles clicks on the admin approve/decline buttons.
     */
    async function handleAdminClick(action) {
        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 ---

    /**
     * Populates and opens the deal information modal.
     */
    function openDealInfoModal(dealData) {
        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);
            }
        }
        
        dealModal.classList.remove('hidden');
    }

    function closeModal(modalElement) {
        if(modalElement) modalElement.classList.add('hidden');
    }
    
    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';
    }
});