<?php
if (function_exists('render_block_preview_image') && render_block_preview_image($block, 'Text With Form Preview')) {
    return;
}
$anchor = '';

if ( ! empty( $block['anchor'] ) ) {
    $anchor = 'id="' . esc_attr( $block['anchor'] ) . '" ';
}
$className = 'registration-section sk-section-spacing ' . ($block['className'] ?? '');
$form_id = get_field('form_id');
?>
<section <?php echo $anchor; ?> class="<?php echo esc_attr(trim($className)); ?>">
    <div class="container">
        <div class="registration-section-wrapper" id="white-paper">
            <div class="registration-section-content" data-aos="fade-up">
                <?php $heading = get_field('heading');
                if (isset($heading) && !empty($heading)): ?>
                    <h2><?php echo esc_html($heading); ?></h2>
                <?php endif;
                $description = get_field('description');
                if (isset($description) && !empty($description)):
                    echo wp_kses_post($description);
                endif;  ?>
                <div class="registration-section-image" data-aos="fade-up">
                    <?php $left_image = get_field('left_image');
                    if (isset($left_image) && !empty($left_image)):  ?>
                        <img decoding="async" alt="<?php echo (isset($left_image['alt']) && !empty($left_image['alt'])) ? esc_attr($left_image['alt']) : ''; ?>" src="<?php echo esc_url($left_image['url']); ?>"><?php endif; ?>
                </div>
            </div>
            <div class="registration-section-form">
                <?php $second_heading = get_field('second_heading');
                  if (!empty($second_heading)) : ?>
                  <h2><?php echo esc_html($second_heading); ?></h2>
                <?php endif; ?>
                <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>