[{"id":"e73eb58","elType":"section","settings":{"jet_parallax_layout_list":[]},"elements":[{"id":"8418b9a","elType":"column","settings":{"_column_size":100,"_inline_size":null},"elements":[{"id":"46da0f9","elType":"widget","settings":{"html":"<form id=\"country-form\">\r\n    <div class=\"form-group\">\r\n        <label for=\"resident-country\">Select Your Country of Residence:<\/label>\r\n        <select id=\"resident-country\" name=\"resident-country\" class=\"form-control\">\r\n            <option value=\"\">-- Select --<\/option>\r\n            <option value=\"USA\">United States<\/option>\r\n            <option value=\"Canada\">Canada<\/option>\r\n            <option value=\"UK\">United Kingdom<\/option>\r\n            <!-- Add more countries here -->\r\n        <\/select>\r\n    <\/div>\r\n\r\n    <div class=\"form-group\">\r\n        <label for=\"applying-country\">Select the Country You Want to Apply To:<\/label>\r\n        <select id=\"applying-country\" name=\"applying-country\" class=\"form-control\">\r\n            <option value=\"\">-- Select Resident Country First --<\/option>\r\n        <\/select>\r\n    <\/div>\r\n\r\n    <div class=\"form-group\">\r\n        <button type=\"button\" id=\"redirect-button\" disabled>Proceed<\/button>\r\n    <\/div>\r\n<\/form>","custom_css":"\/* Form Container *\/\r\n#country-form {\r\n    max-width: 500px;\r\n    margin: 0 auto;\r\n    padding: 20px;\r\n    background: #f9f9f9;\r\n    border: 1px solid #ddd;\r\n    border-radius: 8px;\r\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n\/* Form Group *\/\r\n.form-group {\r\n    margin-bottom: 20px;\r\n}\r\n\r\n\/* Labels *\/\r\nlabel {\r\n    display: block;\r\n    margin-bottom: 8px;\r\n    font-weight: bold;\r\n    color: #333;\r\n}\r\n\r\n\/* Dropdowns *\/\r\n.form-control {\r\n    width: 100%;\r\n    padding: 10px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 4px;\r\n    font-size: 16px;\r\n    color: #555;\r\n    background: #fff;\r\n    transition: border-color 0.3s ease;\r\n}\r\n\r\n.form-control:focus {\r\n    border-color: #0073e6;\r\n    outline: none;\r\n}\r\n\r\n\/* Button *\/\r\n#redirect-button {\r\n    display: block;\r\n    width: 100%;\r\n    padding: 12px;\r\n    background: #0073e6;\r\n    color: #fff;\r\n    border: none;\r\n    border-radius: 4px;\r\n    font-size: 16px;\r\n    cursor: pointer;\r\n    transition: background 0.3s ease;\r\n}\r\n\r\n#redirect-button:disabled {\r\n    background: #ccc;\r\n    cursor: not-allowed;\r\n}\r\n\r\n#redirect-button:not(:disabled):hover {\r\n    background: #005bb5;\r\n}"},"elements":[],"widgetType":"html"},{"id":"83770f2","elType":"widget","settings":{"html":"<script>\r\ndocument.getElementById('resident-country').addEventListener('change', function() {\r\n    const residentCountry = this.value;\r\n    const applyingCountryDropdown = document.getElementById('applying-country');\r\n    const redirectButton = document.getElementById('redirect-button');\r\n\r\n    \/\/ Clear existing options\r\n    applyingCountryDropdown.innerHTML = '<option value=\"\">-- Select --<\/option>';\r\n    redirectButton.disabled = true; \/\/ Disable the button initially\r\n\r\n    \/\/ Define country mappings and links\r\n    const countryMappings = {\r\n        USA: [\r\n            { name: 'Canada', link: 'https:\/\/example.com\/canada' },\r\n            { name: 'Mexico', link: 'https:\/\/example.com\/mexico' },\r\n            { name: 'UK', link: 'https:\/\/example.com\/uk' }\r\n        ],\r\n        Canada: [\r\n            { name: 'USA', link: 'https:\/\/example.com\/usa' },\r\n            { name: 'Mexico', link: 'https:\/\/example.com\/mexico' },\r\n            { name: 'France', link: 'https:\/\/example.com\/france' }\r\n        ],\r\n        UK: [\r\n            { name: 'USA', link: 'https:\/\/example.com\/usa' },\r\n            { name: 'Canada', link: 'https:\/\/example.com\/canada' },\r\n            { name: 'Germany', link: 'https:\/\/example.com\/germany' }\r\n        ],\r\n        \/\/ Add more mappings as needed\r\n    };\r\n\r\n    \/\/ Populate the applying country dropdown\r\n    if (residentCountry && countryMappings[residentCountry]) {\r\n        countryMappings[residentCountry].forEach(country => {\r\n            const option = document.createElement('option');\r\n            option.value = country.link; \/\/ Store the link in the option value\r\n            option.textContent = country.name;\r\n            applyingCountryDropdown.appendChild(option);\r\n        });\r\n    }\r\n});\r\n\r\n\/\/ Add event listener for the applying country dropdown\r\ndocument.getElementById('applying-country').addEventListener('change', function() {\r\n    const redirectButton = document.getElementById('redirect-button');\r\n    if (this.value) {\r\n        redirectButton.disabled = false; \/\/ Enable the button if a country is selected\r\n    } else {\r\n        redirectButton.disabled = true; \/\/ Disable the button if no country is selected\r\n    }\r\n});\r\n\r\n\/\/ Add event listener for the redirect button\r\ndocument.getElementById('redirect-button').addEventListener('click', function() {\r\n    const selectedLink = document.getElementById('applying-country').value;\r\n    if (selectedLink) {\r\n        window.location.href = selectedLink; \/\/ Redirect to the selected link\r\n    }\r\n});\r\n<\/script>"},"elements":[],"widgetType":"html"}],"isInner":false}],"isInner":false}]