<?php
if (function_exists('render_block_preview_image') && render_block_preview_image($block, 'bottom-cta-with-form preview')) {
    return;
}
$className = 'resources-custom-cta-section sk-section-spacing ' . ($block['className'] ?? '');
$form_id = get_field('form_id');

?>
<section class="<?php echo esc_attr(trim($className)); ?>">
    <div class="container">
        <div class="resources-custom-cta-content sk-section-spacing">
            <?php $heading = get_field('heading');
            if (isset($heading) && !empty($heading)): ?>
                <h2><?php echo esc_html($heading); ?></h2>
            <?php endif; ?>
            <div class="resources-custom-cta-form">
                <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>
</section>