<?php
if (function_exists('render_block_preview_image') && render_block_preview_image($block, 'Guide Page Banner Block preview')) {
    return;
}
$className = 'guide-detail-banner sk-section-spacing ' . ($block['className'] ?? '');
$micro_heading = get_field('micro_heading');
$heading = get_field('heading');
$description = get_field('description');
$second_heading = get_field('second_heading');
$form_id = get_field('form_id');
$sub_heading = get_field('sub_heading') ?: 'Share Resource';
?>
<section class="<?php echo esc_attr(trim($className)); ?>" data-aos="fade-up">
    <div class="container">
        <div class="guide-detail-banner-wrapper" id="white-paper">
            <div class="guide-detail-banner-content">
                <?php if (isset($micro_heading) && !empty($micro_heading)): ?>
                    <span><?php echo esc_html($micro_heading); ?></span>
                <?php endif;
                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;
                if (shortcode_exists('social_share')): ?>
                    <div class="social-icons">
                        <?php if (isset($sub_heading) && !empty($sub_heading)): ?>
                            <h4 class="share-resource-title">
                                <?php echo esc_html($sub_heading); ?>
                            </h4> <?php endif;
                        echo do_shortcode('[social_share]') ?>
                    </div>
                <?php endif; ?>
            </div>

            <div class="guide-detail-banner-form">
                <?php if (isset($second_heading) && !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>
</section>