sugar.js

document.addEventListener('DOMContentLoaded', function() {
    // 1. Create the Modal Container
    const modal = document.createElement('div');
    modal.id = "testModal";
    Object.assign(modal.style, {
        display: "none", position: "fixed", zIndex: "9999", left: "0", top: "0",
        width: "100%", height: "100%", backgroundColor: "rgba(0,0,0,0.6)", overflowY: "auto"
    });

    // 2. Define the Form HTML (Restored with ALL mandatory SugarCRM fields)
    const formHTML = `

       <style>
    /* 1. Modal Container: White background with black border */
    #testModal div[style*="background-color: white"] {
        background-color: white !important;
    }

    /* 2. Original Table: Force transparency to show the white background */
    #testModal table {
        background-color: transparent !important;
    }

    /* 3. Input and Drop-down styling: Increased height and black border */
    #testModal input[type="text"], 
    #testModal select {
        height: 45px !important; /* Increased height */
        border: 1px solid black !important; /* Black border */
        border-radius: 4px !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }

    /* 4. The Button: Non-bold text, pill shape, lime color */
    #testModal .submit-btn, 
    #testModal input[type="button"] {
        display: inline-block !important;
        border-radius: 50px !important;
        padding: 15px 45px !important;
        background: #cad045 !important;
        font-size: 18px !important;
        font-weight: normal !important; /* Removed bold weight */
        border: 0 !important;
        color: black !important;
        cursor: pointer !important;
        font-family: sans-serif !important;
        transition: opacity 0.2s !important;
        width: auto !important;
    }

    #testModal .submit-btn:hover,
    #testModal input[type="button"]:hover {
        opacity: 0.8 !important;
    }
</style>
        <div style="background-color: white; margin: 5% auto; padding: 20px; width: 90%; max-width: 600px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); position: relative; font-family: Arial, sans-serif;">
            <span id="closeModal" style="position: absolute; right: 15px; top: 10px; font-size: 28px; font-weight: bold; cursor: pointer; color: #333;">&times;</span>
            
            <form id="WebToLeadForm" action="https://integralmemory.sugaropencloud.uk/index.php?entryPoint=WebToLeadCapture" method="POST" name="WebToLeadForm">
                <input id="email_opt_in" type="hidden" name="email_opt_in" value="off" />
                <table style="width: 100%; border-collapse: collapse; background-color: #e9f3ff; font-size: 14px;">
                    <tbody>
                        <tr align="center">
                            <td colspan="2" style="padding: 20px 10px;">
                                <h2 style="color: #0069e1; margin: 0;">Download our LED Strip Collection Brochure</h2>
                                <p style="color: #333; font-size: 13px;">Please fill the form below to access the download</p>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding: 10px;">First Name: <span style="color:red;">*</span></td>
                            <td style="padding: 10px;"><input id="first_name" name="first_name" type="text" style="width:100%"></td>
                        </tr>
                        <tr>
                            <td style="padding: 10px;">Last Name: <span style="color:red;">*</span></td>
                            <td style="padding: 10px;"><input id="last_name" name="last_name" type="text" style="width:100%"></td>
                        </tr>
                        <tr>
                            <td style="padding: 10px;">Email Address: <span style="color:red;">*</span></td>
                            <td style="padding: 10px;"><input id="email" name="email" type="text" style="width:100%" onchange="validateEmailAdd();"></td>
                        </tr>
                        <tr>
                            <td style="padding: 10px;">Business Type: <span style="color:red;">*</span></td>
                            <td style="padding: 10px;">
                                <select id="led_webform_businesstype_c" name="led_webform_businesstype_c" style="width:100%">
                                    <option value=""></option>
                                    <option value="Architecture Firm">Architecture Firm</option>
                                    <option value="End User">Consumer (End User)</option>
                                    <option value="Electrical Contractor Company">Electrical Contractor Company</option>
                                    <option value="Electrical Wholesaler">Electrical Wholesaler</option>
                                    <option value="Electrician">Electrician</option>
                                    <option value="Interior Design">Interior Design</option>
                                    <option value="Lighting Design">Lighting Design</option>
                                    <option value="Mechanical Electrical Consultant">Mechanical &amp; Electrical Consultant</option>
                                    <option value="Retailer">Retailer</option>
                                </select>
                            </td>
                        </tr>
                        <tr align="center">
                            <td colspan="2" style="padding: 20px;">
                                <input type="button" value="Submit & Download" onclick="submit_form();" style="padding: 10px 30px; background: #0069e1; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight:bold;">
                            </td>
                        </tr>
                    </tbody>
                </table>

                <!-- Hidden Fields (matching 484.html exactly) -->
                <input type="hidden" id="campaign_id" name="campaign_id" value="7767f3ea-027a-11f1-9374-69d321b5fe5c" />
                <input type="hidden" id="redirect_url" name="redirect_url" value="https://integral-led.com/en/image/GetDocument/4504" />
                <input type="hidden" id="redirectRequestType" name="redirectRequestType" value="GET" />
                <input type="hidden" id="redirectIncludeParams" name="redirectIncludeParams" value="0" />
                <input type="hidden" id="assigned_user_id" name="assigned_user_id" value="c216ab9a-e426-4b3f-babc-e7917f50621b" />
                <input type="hidden" id="team_id" name="team_id" value="1" />
                <input type="hidden" id="team_set_id" name="team_set_id" value="1" />
                <input type="hidden" id="req_id" name="req_id" value="title;account_name;lead_source_description;memory_led_c;last_name;email;first_name;led_webform_businesstype_c;" />
                <input type="hidden" id="title" name="title" value="hidden" />
                <input type="hidden" id="lead_source_description" name="lead_source_description" value="hidden" />
                <input type="hidden" id="account_name" name="account_name" value="hidden" />
                <input type="hidden" id="memory_led_c" name="memory_led_c" value="hidden" />
                <input type="hidden" id="lead_source" name="lead_source" value="Integral LED - Download Strip Collection Brochure" />
            </form>
        </div>
    `;

    modal.innerHTML = formHTML;
    document.body.appendChild(modal);

    // 3. Inject the External SugarCRM Script
    const sugarScript = document.createElement('script');
    sugarScript.src = "https://integralmemory.sugaropencloud.uk/cache/include/javascript/sugar_grp1.js?v=nRDN_LZGCPq2tGmg02ykGg";
    document.head.appendChild(sugarScript);

    // 4. Form Validation & Submission Logic (matching 484.html exactly)
    window.submit_form = function() {
        check_webtolead_fields();
    };

    window.check_webtolead_fields = function() {
        // Handle boolean fields
        if (document.getElementById('bool_id') != null) {
            var reqs = document.getElementById('bool_id').value;
            bools = reqs.substring(0, reqs.lastIndexOf(';'));
            var bool_fields = bools.split(';');
            nbr_fields = bool_fields.length;

            for (var i = 0; i < nbr_fields; i++) {
                if (document.getElementById(bool_fields[i]).value == 'on') {
                    document.getElementById(bool_fields[i]).value = 1;
                } else {
                    document.getElementById(bool_fields[i]).value = 0;
                }
            }
        }

        // Handle required fields validation
        if (document.getElementById('req_id') != null) {
            var reqs = document.getElementById('req_id').value;
            reqs = reqs.substring(0, reqs.lastIndexOf(';'));
            var req_fields = reqs.split(';');
            nbr_fields = req_fields.length;
            var req = true;

            for (var i = 0; i < nbr_fields; i++) {
                if (document.getElementById(req_fields[i]).value.length <= 0 ||
                    document.getElementById(req_fields[i]).value == 0) {
                    req = false;
                    break;
                }
            }

            if (req) {
                document.WebToLeadForm.submit();
                return true;
            } else {
                alert('Please provide all the required fields');
                return false;
            }
            return false
        } else {
            document.WebToLeadForm.submit();
        }
    };

    window.validateEmailAdd = function() {
        // Validate email1 field
        if (document.getElementById('email1') && document.getElementById('email1').value.length > 0) {
            if (document.getElementById('email1').value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/) == null) {
                alert('Not a valid email address');
            }
        }

        // Validate email2 field
        if (document.getElementById('email2') && document.getElementById('email2').value.length > 0) {
            if (document.getElementById('email2').value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/) == null) {
                alert('Not a valid email address');
            }
        }
    };

    // 5. Open/Close Listeners
    const btn = document.getElementById("openModalBtn");
    const closeSpan = document.getElementById("closeModal");

    if(btn) btn.onclick = () => modal.style.display = "block";
    if(closeSpan) closeSpan.onclick = () => modal.style.display = "none";
    window.onclick = (e) => { if (e.target == modal) modal.style.display = "none"; };
});