<?php
/**
 * Search result
 */
get_header();
$query = new WP_Query(
    array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => -1,
    'order' => 'DESC',
    's' => get_search_query()

    )
);
$posts = $query->posts;
if (!empty(get_search_query())) {
    ?>
    <section class="blog-post py-120">
        <div class="container">
            <?php echo get_search_form(); ?>
            <div class="font-16 text-bold text-black text-uppercase">
                <?php printf(esc_html__('Search Results for: %s', 'your-theme-text-domain'), '<span>' . get_search_query() . '</span>'); ?>
            </div>
            <div class="row">
                <?php foreach ($posts as $post) {
                    $title      = get_the_title();
                    $content    = get_the_excerpt();
                    $blog_img   = get_the_post_thumbnail_url($post->ID);
                    $date       = get_the_date('d M, Y', $post->ID);
                    $author     = get_the_author();
                    $blog_read_time  = get_field('blog_read_time', $post->ID);
                    ?>
                    <div class="col-12 col-md-6 d-flex align-items-stretch mb-4">
                        <div data-aos="fade-up" data-aos-duration="800" class="w-100">
                            <div class="blog-card d-flex flex-column mt-4 h-100">
                                <a href="<?php the_permalink(); ?>" class="blog-post-img overflow-hidden position-relative">
                                    <img src="<?php echo $blog_img; ?>" title="<?php echo $title; ?>" alt="<?php echo $title; ?>" width="100%" height="100%" />
                                    <div class="blog-info d-flex align-items-center">
                                        <div class="d-flex justify-content-between w-100 text-white">
                                            <div>
                                                <div class="font-14 text-bold"><?php echo $author; ?></div>
                                                <div class="font-14"><?php echo $date; ?></div>
                                            </div>
                                            <div class="font-14 text-semi">
                                                <?php
                                                $post_id = get_the_ID();
                                                $categories = get_the_category($post_id);
                                                if ($categories) {
                                                    foreach ($categories as $category) {
                                                        echo esc_html($category->name) . ' ';
                                                    }
                                                }
                                                ?>
                                            </div>
                                        </div>
                                    </div>
                                </a>
           

                                <div class="font-20 text-semi text-black my-3"><a href="<?php echo get_the_permalink(); ?>"><?php echo $title; ?></a></div>
                                <div class="blog-content">
                                    <?php echo $content; ?>
                                </div>
                                <div class="d-flex justify-content-between mt-auto">
                                    <a href="<?php the_permalink(); ?>" class="font-16 text-medium text-blue">
                                        Read post
                                        <img src="<?php echo get_template_directory_uri(); ?>/assets/images/upper-right-arrow-blue.svg" alt="arrow" />
                                    </a>
                                    <div class="font-16 text-black">
                                        <img src="<?php echo get_template_directory_uri(); ?>/assets/images/clock-black.svg" alt="clock" />
                                        <?php display_reading_time(); ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php }
                wp_reset_postdata(); ?>

            </div>
        </div>

    </section>
<?php } else { ?>
<section class="blog-post py-120 pt-5">
    <div class="container">
        <?php echo get_search_form(); ?>
        <div class="font-16 text-bold text-black text-uppercase">
            <?php printf(esc_html__('No search Results for: %s', 'your-theme-text-domain'), '<span>' . get_search_query() . '</span>'); ?>
        </div>
        <div class="row">
            <div class="col-12 col-md-12 d-flex align-items-stretch mb-4">
                <div data-aos="fade-up" data-aos-duration="800" class="w-100 aos-init aos-animate">
                    <div class="blog-card d-flex flex-column mt-4 h-100">
                        <iframe src="https://lottie.host/embed/39eb5f48-24ad-4118-a5a3-d24dd9758426/UvglMS7NCb.json">
                        <iframe src="<?php echo get_template_directory_uri(); ?>/assets/images/no-data.html"></iframe>
                        <div class="font-16 text-bold text-black text-uppercase no-data-found text-center pt-4">No blog found!</div>'
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<?php } ?>

<?php 
$cta_image        =   get_field('cta_image', 307);
$cta_description  =   get_field('cta_description', 307);
$button_url       =   get_field('button_url', 307);
?>
<!-- business message  -->
<section class="business-msg bg-dark-blue position-relative pt-5">
    <div class="container">
        <div class="d-flex align-items-center flex-wrap pb-5 pb-lg-0">
            <?php if ($cta_image) { ?>
            <img src="<?php echo $cta_image['url']; ?>" alt="<?php echo $cta_image['alt']; ?>"
                title="<?php echo $cta_image['title']; ?>" class="business-man-img" />
            <?php } ?>
            <div class="business-detail mt-4 mt-lg-0">
                <?php if ($cta_description) { ?>
                <div class="font-20">
                    <?php echo $cta_description; ?>
                </div>
                <?php } if ($button_url) {
                    ?>   
                <a href="<?php echo $button_url['url']; ?>"
                    class="d-flex align-items-center justify-content-center msg-btn mt-4 text-white">
                    <?php echo $button_url['title']; ?>
                </a>
                <?php } ?>
            </div>
        </div>
    </div>
    <div class="round-pattern w-100 position-absolute start-0">
        <img src="<?php echo get_template_directory_uri(); ?>/assets/images/round-pattern-small.svg" alt="pattern"
            width="100%" />
    </div>
</section>
<?php get_footer(); ?>
<script>
    jQuery(document).ready(function($) {
        // jQuery("#search-form-1").on("keyup", function(){
        //     var inputValue = jQuery(this).val();
        //     if(inputValue === ""){
        //         window.location.href = "<?php echo site_url(); ?>/blog/";
        //     }
        // });

        jQuery('#search-form-1').on('input', function() {
            var inputValue = $(this).val().trim();
            console.log(inputValue);
            if (inputValue) {
                $('.filter-btn').removeAttr('disabled');
            } else {
                $('.filter-btn').attr('disabled', 'disabled');
            }
        });
    });
</script>