<?php
/*
Template Name: Resources
*/

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_the_title(); ?></h1>
                <?php $description = get_field('resources_description'); ?>
                <?php if (!empty($description)) echo '<p class="banner-content">' . $description . '</p>'; ?>
            </div>
        </div>
    </section>

    <section class="section ultimate-ebooks pt-0">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="search-anything-wrapper mb-3 mb-lg-5">
                        <div>
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search anything..." aria-label="Search" />
                                <button class="search-icon-wrapper">
                                    <svg width="34" height="33" viewBox="0 0 34 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M32 31L25.8235 24.4862M14.5735 25.7354C16.2247 25.7354 17.8597 25.4284 19.3852 24.832C20.9107 24.2356 22.2968 23.3614 23.4644 22.2594C24.6319 21.1574 25.5581 19.8491 26.19 18.4093C26.8218 16.9694 27.1471 15.4262 27.1471 13.8677C27.1471 12.3092 26.8218 10.766 26.19 9.32612C25.5581 7.88627 24.6319 6.57798 23.4644 5.47597C22.2968 4.37395 20.9107 3.49978 19.3852 2.90337C17.8597 2.30697 16.2247 2 14.5735 2C11.2388 2 8.04069 3.25034 5.6827 5.47597C3.32471 7.70159 2 10.7202 2 13.8677C2 17.0152 3.32471 20.0338 5.6827 22.2594C8.04069 24.485 11.2388 25.7354 14.5735 25.7354Z" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <?php
                $args = [
                    'post_type'     => 'page',
                    'post_per_page' => -1,
                    'post_parent'   => get_the_ID(),
                    'order_by'      => 'menu_order',
                    'order'         => 'ASC',
                ];

                $resources = new WP_Query($args);
            ?>

            <div class="ebooks-content-parent">

                    <?php if ( $resources->have_posts() ) : ?>
                        <?php $i = 1; ?>
                        <?php while ( $resources->have_posts() ) : $resources->the_post(); ?>

                            <?php if (str_contains(get_the_title(), 'Thank')) continue; ?>

                            <div class="row gx-xl-4 gy-3 gy-lg-4 <?php echo $resources->post_count != $i ? "mb-2 mb-lg-5" : ""; ?> justify-content-between">

                                <div class="col-lg-6">
                                    <div class="img-wrapper">
                                        <?php if (has_post_thumbnail()) : ?>
                                            <img src="<?php the_post_thumbnail_url('full'); ?>" alt="<?php echo get_the_title(); ?>" class="img-fluid" loading="lazy">
                                        <?php endif; ?>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="ebook-text-cont">
                                        <h2 class="ebook-title"><?php echo get_the_title(); ?></h2>
                                        <p class="ebook-short-description">
                                            <?php echo get_the_content(); ?>
                                        </p>
                                        <?php $intro = get_field('guide_header_intro'); ?>

                                        <?php echo wpautop($intro); ?>
                                        <a href="<?php echo get_the_permalink(); ?>" class="demo-btn">Download</a>
                                    </div>
                                </div>
                            </div>
                            <?php $i++; ?>
                        <?php endwhile; ?>
                        <?php wp_reset_postdata(); ?>
                    <?php endif; ?>

            </div>
        </div>
    </section>

    <section class="section join-our-newsletter pt-0">
        <div class="container">
            <div class="join-our-newsletter-wrapper">
                <div class="row flex-column-reverse flex-lg-row gy-3">
                    <div class="col-lg-6">
                        <div class="join-newsletter-content">
                            <h2 class="join-newsletter-title"><?php echo get_field('newsletter_heading'); ?></h2>
                            <p class="join-newsletter-description">
                                <?php echo get_field('newsletter_description'); ?>
                            </p>

                            <div class="tnp tnp-subscription join-newsletter-form m-0">
                                <form method="post" action="https://warego.co/wp-admin/admin-ajax.php?action=tnp&na=s" data-hs-cf-bound="true">
                                    <input type="hidden" name="nlang" value="">
                                    <div class="tnp-field tnp-field-email input-group m-0">
                                        <input type="email" class="tnp-email form-control" name="ne" id="tnp-1" value="" placeholder="Enter Your Email Address" required="">
                                    </div>
                                    <div class="tnp-field tnp-field-button" style="text-align: left">
                                        <input type="submit" class="tnp-submit subscribe-now-btn" value="Subscribe Now">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="img-wrapper">
                            <img src="<?php echo get_field('newsletter_image'); ?>" alt="<?php echo get_field('newsletter_heading'); ?>" class="img-fluid" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<?php get_footer(); ?>


<script>
jQuery(document).ready(function ($) {
    // Attach a keyup event to the search input
    var section = $('.ebooks-content-parent');
    var searchValues;
    $('.search-anything-wrapper input[type="text"]').on('keyup', function () {
        searchValues = $(this).val().toLowerCase(); // Get the search value in lowercase
        searchValues = searchValues.split(' ');
        console.log(searchValues);
        
        // Iterate through each section with a list of logos
        var sectionVisible = false; // Flag to check if any logo in this section matches
        section.find('.row').each(function () {
            var listItem = $(this).find('h2');
            var logoName = listItem.text().toLowerCase(); // Get the text of the logo in lowercase
            if (searchValues.every(item => logoName.includes(item))) {
                $(this).show(); // Show matching logos
                sectionVisible = true; // Mark the section as visible if a match is found
            } else {
                $(this).hide(); // Hide non-matching logos
            }
        });
        // Show or hide the entire section including heading and description
        if (sectionVisible) {
            section.show(); // Show the heading and description
            section.next('.row').show(); // Show the entire list
        } else {
            section.hide(); // Hide the heading and description if no logos match
            section.next('.row').hide(); // Hide the list if no logos are visible
        }
    });
});
</script>