{"html_contact_form": "\n\n<!-- Contact Form -->\n<div class=\"mb-8\">\n    <form class=\"js-contact-form\" method=\"post\" action=\"/contact_us/\">\n        <input type=\"hidden\" name=\"csrfmiddlewaretoken\" value=\"AqTYGrHPlYOaJ77nknXkkq8lLxKtVysrKLN5PUkxKVDvJ1Jb5BRbwShDUd8Ywc4h\">\n        \n        <!-- Name and Surname Row -->\n        <div class=\"grid grid-cols-2 gap-4 mb-4\">\n            <div>\n                <label class=\"block text-sm font-semibold text-ai-primary mb-1\">Name</label>\n                <input type=\"text\" name=\"name\" placeholder=\"Type here\" required class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-ai-primary focus:border-transparent\">\n            </div>\n            <div>\n                <label class=\"block text-sm font-semibold text-ai-primary mb-1\">Surname</label>\n                <input type=\"text\" name=\"surname\" placeholder=\"Type here\" required class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-ai-primary focus:border-transparent\">\n            </div>\n        </div>\n        \n        <!-- Email and Phone Row -->\n        <div class=\"grid grid-cols-2 gap-4 mb-4\">\n            <div>\n                <label class=\"block text-sm font-semibold text-ai-primary mb-1\">Email</label>\n                <input type=\"email\" name=\"email\" placeholder=\"Email Address\" required class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-ai-primary focus:border-transparent\">\n            </div>\n            <div>\n                <label class=\"block text-sm font-semibold text-ai-primary mb-1\">Phone</label>\n                <input type=\"text\" name=\"phone\" placeholder=\"Phone Number\" required class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-ai-primary focus:border-transparent\">\n            </div>\n        </div>\n        \n        <!-- Contact Type -->\n        <div class=\"mb-4\">\n            <label class=\"block text-sm font-semibold text-ai-primary mb-1\">Type</label>\n            <select name=\"contact_type\" required class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-ai-primary focus:border-transparent bg-white\">\n                <option value=\"\">Select type...</option>\n                <option value=\"G\">General</option>\n                <option value=\"E\">Enquiry</option>\n                <option value=\"S\">Service</option>\n            </select>\n        </div>\n        \n        <!-- Message -->\n        <div class=\"mb-4\">\n            <label class=\"block text-sm font-semibold text-ai-primary mb-1\">Message</label>\n            <textarea name=\"message\" rows=\"4\" placeholder=\"Message\" required class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-ai-primary focus:border-transparent resize-none\"></textarea>\n        </div>\n        \n        <!-- Submit Button -->\n        <button type=\"submit\" class=\"w-full px-6 py-3 bg-ai-primary text-white font-bold rounded-lg hover:bg-ai-accent transition-colors duration-200\">\n            Submit\n        </button>\n    </form>\n</div>\n\n<!-- Image and Contact Details -->\n<div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\n    <!-- Contact Image -->\n    <div class=\"flex items-center justify-center\">\n        <img class=\"w-full rounded-lg\" src=\"/static/core/images/contact_us.7a555fd5fa04.png\" alt=\"Contact Us\">\n    </div>\n    \n    <!-- Contact Details -->\n    <div class=\"flex flex-col justify-center\">\n        <h5 class=\"text-lg font-bold text-ai-primary mb-4\">Our contact details:</h5>\n        <div class=\"space-y-3\">\n            <p class=\"flex items-center text-gray-700\">\n                <i class=\"fa-solid fa-phone w-5 text-gray-500\"></i>\n                <span class=\"ml-3\">012 880 1777</span>\n            </p>\n            <p class=\"flex items-center text-gray-700\">\n                <i class=\"fa-solid fa-envelope w-5 text-gray-500\"></i>\n                <span class=\"ml-3\">marketing@autoigroup.co.za</span>\n            </p>\n            <a href=\"https://maps.app.goo.gl/y4hiK8pYvc78rgu17\" target=\"_blank\" class=\"flex items-start text-gray-700 hover:text-ai-primary transition-colors\">\n                <i class=\"fa-solid fa-map-marker-alt w-5 text-gray-500 mt-1\"></i>\n                <span class=\"ml-3\">Suite 2, The Gables Centre, 174 Ivan Avenue, Hennopspark, Centurion, Gauteng, 0172, South Africa</span>\n            </a>\n        </div>\n    </div>\n</div>\n\n<!-- Our Location Section -->\n<div>\n    <h3 class=\"text-xl font-bold text-ai-primary mb-4\">Our Location</h3>\n    <div id=\"map-container\" class=\"w-full rounded-lg overflow-hidden\">\n        <iframe src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3590.229884648744!2d28.166892177117564!3d-25.86191027728913!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1e9565c310fbbc45%3A0x488d9736ac35eaf5!2sAuto%20Investments%20Motor%20Group!5e0!3m2!1sen!2sza!4v1725028276551!5m2!1sen!2sza\" width=\"100%\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"></iframe>\n    </div>\n</div>\n\n\n<script>\n$(document).ready(function () {\n    // Handle contact form submission with Ajax and Zapier integration\n    $('.js-contact-form').on('submit', function(event) {\n        event.preventDefault();\n        \n        // Get form data\n        const formData = $(this).serialize();\n        const $submitBtn = $(this).find('button[type=\"submit\"]');\n        const originalBtnText = $submitBtn.text();\n        \n        // Disable button and show loading state\n        $submitBtn.prop('disabled', true).text('Sending...');\n        \n        $.ajax({\n            type: 'POST',\n            url: $(this).attr('action'),\n            data: formData,\n            success: function(response) {\n                // Google Analytics dataLayer push for successful contact form\n                window.dataLayer = window.dataLayer || [];\n                window.dataLayer.push({\n                    event: 'lead_submit',\n                    lead_status: 'success',\n                    \n                    // form context\n                    form_id: 'contact-form',\n                    form_name: 'Contact us form',\n                    lead_type: 'contact',\n                    \n                    // user data (only available fields)\n                    email: $('.js-contact-form input[name=\"email\"]').val(),\n                    phone: $('.js-contact-form input[name=\"phone\"]').val(),\n                    first_name: $('.js-contact-form input[name=\"name\"]').val(),\n                    last_name: $('.js-contact-form input[name=\"surname\"]').val()\n                });\n\n                // Send the form data to Zapier webhook\n                var zapierData = {\n                    // Lead/Contact Information (only send available fields)\n                    lead_id: response.lead_id || 'contact_' + Date.now(),\n                    first_name: $('.js-contact-form input[name=\"name\"]').val(),\n                    last_name: $('.js-contact-form input[name=\"surname\"]').val(),\n                    email: $('.js-contact-form input[name=\"email\"]').val(),\n                    phone: $('.js-contact-form input[name=\"phone\"]').val(),\n                    message: $('.js-contact-form textarea[name=\"message\"]').val(),\n                    contact_type: $('.js-contact-form select[name=\"contact_type\"]').val(),\n                    \n                    // Additional Context\n                    lead_source: 'Website - Contact Form',\n                    lead_type: 'contact',\n                    form_name: 'Contact us form',\n                    timestamp: new Date().toISOString()\n                };\n                \n                // Try sending as form-encoded data first (Zapier often prefers this)\n                $.ajax({\n                    type: 'POST',\n                    url: 'https://hooks.zapier.com/hooks/catch/14251355/uu8xlgd/',\n                    data: zapierData,\n                    success: function(zapierResponse) {\n                        console.log('Contact form data sent to Zapier successfully (form-encoded)');\n                    },\n                    error: function(xhr, status, error) {\n                        console.log('Form-encoded failed, trying JSON...');\n                        // If form-encoded fails, try JSON\n                        $.ajax({\n                            type: 'POST',\n                            url: 'https://hooks.zapier.com/hooks/catch/14251355/uu8xlgd/',\n                            contentType: 'application/json',\n                            data: JSON.stringify(zapierData),\n                            success: function(zapierResponse) {\n                                console.log('Contact form data sent to Zapier successfully (JSON)');\n                            },\n                            error: function(xhr, status, error) {\n                                console.log('Error sending contact form data to Zapier (both methods failed):', error);\n                                console.log('Status:', status);\n                                console.log('XHR:', xhr);\n                                console.log('Response Text:', xhr.responseText);\n                            }\n                        });\n                    }\n                });\n\n                // Redirect to thank you page if URL is provided\n                if (response.redirect_url) {\n                    window.location.href = response.redirect_url;\n                } else {\n                    // Show success message\n                    alert('Your message has been sent successfully!');\n                    \n                    // Reset the form after successful submission\n                    $('.js-contact-form')[0].reset();\n                }\n                \n                // Re-enable button\n                $submitBtn.prop('disabled', false).text(originalBtnText);\n            },\n            error: function(xhr, status, error) {\n                // Show error message\n                alert('There was an error sending your message. Please try again.');\n                \n                // Re-enable button\n                $submitBtn.prop('disabled', false).text(originalBtnText);\n            }\n        });\n    });\n});\n</script>        \n            \n\n        "}