<?php
    if (function_exists('render_block_preview_image') && render_block_preview_image($block, 'Contact us form block preview')) {
        return;
    }
    $className = 'contact-us-section demo-page sk-section-spacing ' . ($block['className'] ?? '');
    $heading     = get_field('heading');
    $description = get_field('description');
    $left_image  = get_field('left_image');
 $form_id = get_field('form_id');    ?>
 <section class="<?php echo esc_attr(trim($className)); ?>">
     <div class="container">
         <div class="contact-us-block">
             <div class="contact-us-header">
                 <?php if (isset($heading) && !empty($heading)) : ?>
                     <h1><?php echo esc_html($heading); ?></h1>
                 <?php endif;
                    if (isset($description) && !empty($description)) :
                        echo wp_kses_post($description);
                    endif; ?>
             </div>
             <div class="contact-form">
                 <div class="contact-us-image" data-aos="fade-up">
                     <?php if (isset($left_image) && !empty($left_image) && isset($left_image['url']) && !empty($left_image['url'])) : ?>
                         <img src="<?php echo esc_url($left_image['url']); ?>" alt="<?php echo (isset($left_image['alt']) && !empty($left_image['alt'])) ? esc_attr($left_image['alt']) : ''; ?>">
                     <?php endif; ?>
                 </div>
                 <div class="contact-us-block-form" data-aos="fade-up">
                     <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
                     <script data-hubspot-rendered="true">
                    hbspt.forms.create({
                        region: "na1",
                        portalId: "21157292",
                        formId: "<?php echo $form_id; ?>",
                        sfdcCampaignId: "",
                        css: " ",
                        onFormReady: ($form) => {
                            const formInputs = $form.find(".hs-fieldtype-text input");

                            formInputs.each(function() {
                                const input = this;

                                /*Add class on load if input has value*/
                                if (input.value) {
                                    input.closest(".hs-fieldtype-text").classList.add("focused");
                                }

                                /*Add class on focus*/
                                input.addEventListener("focus", () => {
                                    input.closest(".hs-fieldtype-text").classList.add("focused");
                                });

                                /*Remove class if empty on blur*/
                                input.addEventListener("blur", () => {
                                    if (!input.value) {
                                        input.closest(".hs-fieldtype-text").classList.remove("focused");
                                    }
                                });
                            });
                        }
                    });
                </script> 
                 </div>
             </div>
         </div>
     </div>
 </section>