<?php
/*
Template Name: Guide
*/

get_header('new');

?>


<section class="section ebook-banner no-lazy">
    <div class="container">
        <div class="text-cont text-center">
            <h1 class="banner-heading"><?php echo get_field('guide_header_heading'); ?></h1>
            <p class="banner-content"><?php echo get_field('guide_header_description'); ?></p>
        </div>
    </div>
</section>


<section class="section download-your-guide">
    <div class="container">
        <div class="box">
            <div class="text-cont">
                <h2 class="section-title"><?php echo get_field('guide_form_heading'); ?></h2>
            </div>
                <div class="row">
                    <div class="col-lg-7">
                        <?php echo do_shortcode(get_field('guide_form_shortcode')); ?>
                    </div>
                    <div class="col-lg-5">
                        <div class="img-cont">
                            <img src="<?php echo get_field('guide_form_image'); ?>" alt="<?php echo strip_tags(get_field('guide_form_heading')); ?>" class="img-fluid">
                        </div>
                    </div>
                    <a href="<?php echo get_field('guide_file'); ?>" download="<?php echo get_field('guide_file'); ?>" class="d-none" id="btntodownloadfile">Download NOW FOR FREE</a>
                </div>
        </div>
    </div>
</section>

<?php $what_learn_content = get_field('what_learn_content'); ?>
<?php $what_learn_slider = get_field('what_learn_slider'); ?>

<?php if (!empty($what_learn_content)) : ?>
    <section class="section you-learn-guide">
        <div class="container">
            <div class="box">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="text-cont">
                            <h2 class="section-title"><?php echo get_field('what_learn_heading'); ?></h2>
                            <?php echo $what_learn_content; ?>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="img-cont">
                            <img src="<?php echo get_field('what_learn_image'); ?>" alt="<?php echo strip_tags(get_field('what_learn_heading')); ?>" class="img-fluid">
                        </div>
                    </div>
                </div>
                
                <?php $logos = get_field('what_learn_logos'); ?>
    
                <?php if (is_array($logos) && count($logos)) : ?>
                    <div class="certificate-wrapper">
                        <div class="owl-carousel owl-theme certificate-logo-slider">
                            <?php foreach ($logos as $logo) : ?>
                                <?php $logo = $logo['logo']; ?>
                                <div class="item">
                                    <img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt']; ?>" class="img-fluid">
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </section>
<?php endif; ?>

<?php if (is_array($what_learn_slider) && count($what_learn_slider)) : ?>
    <section class="section you-learn-guide you-learn-playbook pt-5">
        <div class="container">
            <div class="box">
                <div class="text-cont">
                    <h2 class="section-title"><?php echo get_field('what_learn_heading'); ?></h2>
                </div>
                <div class="playbook-slider-wrapper">
                    <div class="owl-carousel owl-theme playbook-slider">
                        <?php foreach ($what_learn_slider as $slide) : ?>
                            <?php $slide = $slide['item']; ?>
                            <div class="item">
                                <div class="card">
                                    <div class="svg-content">
                                        <svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.9205 0.329505C17.3598 0.768845 17.3598 1.48116 16.9205 1.9205L6.4205 12.4205C5.98115 12.8598 5.26885 12.8598 4.8295 12.4205L0.329505 7.9205C-0.109835 7.48116 -0.109835 6.76885 0.329505 6.32951C0.768845 5.89017 1.48116 5.89017 1.9205 6.32951L5.625 10.034L15.3295 0.329505C15.7688 -0.109835 16.4812 -0.109835 16.9205 0.329505Z" fill="#2CC484"/>
                                        </svg>
                                    </div>
                                    <div class="text-content">
                                        <p><?php echo $slide; ?></p>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>

                <?php $logos = get_field('what_learn_logos'); ?>
                <?php if (is_array($logos) && count($logos)) : ?>
                    <div class="certificate-wrapper">
                        <div class="owl-carousel owl-theme certificate-logo-slider">
                            <?php foreach ($logos as $logo) : ?>
                                <?php $logo = $logo['logo']; ?>
                                <div class="item">
                                    <img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt']; ?>" class="img-fluid">
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </section>
<?php endif; ?>

<section class="section inside-the-guide <?php echo get_post_field('post_name'); ?>">
    <div class="container">
        <div class="box">
            <div class="text-cont">
                <h2 class="section-title"><?php echo get_field('inside_guide_heading'); ?></h2>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <?php echo get_field('inside_guide_content'); ?>
                </div>
                <div class="col-lg-6">
                    <div class="img-cont">
                        <img src="<?php echo get_field('inside_guide_image'); ?>" alt="<?php echo strip_tags(get_field('inside_guide_heading')); ?>" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section why-warego">
    <div class="container">
        <div class="box">
            <div class="row align-items-lg-center">
                <div class="col-lg-6">
                    <div class="text-cont">
                        <span class="first-dot">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12" cy="12" r="12" fill="#BCE5F1"/>
                            </svg>
                        </span>
                        <h2 class="section-title"><?php echo get_field('why_warego_heading'); ?></h2>
                        <p class="section-content">
                            <?php echo get_field('why_warego_content'); ?>
                        </p>
                        <?php $cta = get_field('why_warego_cta'); ?>
                        <?php if (is_array($cta)) echo '<a href="' . $cta['url'] . '" class="border-gradient-btn animated-btn">' . $cta['title'] . '</a>'; ?>
                        
                        <span class="second-dot">
                            <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="6.5" cy="6.5" r="6.5" fill="#D2D1F8"/>
                            </svg>
                        </span>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="img-cont">
                        <img src="<?php echo get_field('why_warego_image'); ?>" alt="<?php echo strip_tags(get_field('why_warego_heading')); ?>" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<?php get_footer(); ?>

<script>


    var wpcf7Elm = document.querySelector('.wpcf7-form');
    wpcf7Elm.addEventListener('wpcf7submit', function (event) {
        // document.getElementById("btntodownloadfile").click();
        window.open("<?php echo get_field('guide_redirect_to'); ?>");
    }, false);

    $('.playbook-slider').owlCarousel({
        loop:true,
        margin:10,
        nav:false,
        autoplay:true,
        dots: true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:2
            },
            1000:{
                items:3
            }
        }
    })

    $('.certificate-logo-slider').owlCarousel({
        loop:false,
        margin:10,
        nav:false,
        dots: false,
        responsive:{
            0:{
                items:2,
                loop:false,
                autoplay:true
            },
            600:{
                items:4,
                loop:false,
                autoplay:true
            },
            1000:{
                items:5
            }
        }
    })

</script>