<?php get_header(); ?>

<section class="slider-sec">
      <div class="slider-container">
        <button class="slider-arrow left" id="left-arrow">&#8592;</button>
        <div class="slider">
            <?php if (have_rows('top_content','option')) : ?>
    <?php while (have_rows('top_content','option')) : the_row(); ?>

        <?php
        $slider_image = get_sub_field('top_content_image');
        $slider_title = get_sub_field('top_content_text');
        ?>

        <div class="slider-item">
            <?php if ($slider_image) : ?>
                <img src="<?php echo esc_url($slider_image['url']); ?>" alt="<?php echo esc_attr($slider_image['alt']); ?>" />
            <?php endif; ?>

            <?php if ($slider_title) : ?>
                <p><?php echo esc_html($slider_title); ?></p>
            <?php endif; ?>
        </div>

    <?php endwhile; ?>
<?php endif; ?>
        </div>
        <button class="slider-arrow right" id="right-arrow">&#8594;</button>
      </div>
  </section>
  
    <section class="banner-sec">
        <div class="container">
            <div class="row">
                <div class="banner-main-div" style="background:url('<?php echo bloginfo('template_directory'); ?>/image/about-landing-banner.png');background-repeat: no-repeat;
    object-fit: cover;background-position: center;">
                   <h1><?php single_cat_title(); ?></h1>
                <div class="search-container" id="searchContainer">
                   <div class="search-box">
                              <form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
                                <div class="search-inner social-box align-items-center">
                                  <input type="search" class="search-field" name="s" placeholder="Search here..." value="<?php echo get_search_query(); ?>" />
                                  <input type="hidden" name="post_type" value="threads" />
                                  <button type="submit" class="search-btn">Search</button>
                                </div>
                              </form>
                           <div class="auto-search-results"></div>
                   </div>
                </div>
                   <div class="social-links-main">
                            <div class="container">
                                <div class="d-flex justify-content-center ">
                                    <?php if (have_rows('header_social_media','option')) : ?>
                                        <?php while (have_rows('header_social_media','option')) : the_row(); ?>
                                    
                                            <?php
                                            $social_url = get_sub_field('header_social_media_link');
                                            $icon_class = get_sub_field('header_social_media_class');
                                            ?>
                                    
                                            <div class="col-box mx-3">
                                                <a href="<?php echo esc_url($social_url); ?>" target="_blank">
                                                    <i class="<?php echo esc_attr($icon_class); ?>"></i>
                                                </a>
                                            </div>
                                    
                                        <?php endwhile; ?>
                                    <?php endif; ?>
                                </div>
                            </div>
                          </div>
                </div>
            </div>
        </div>
    </section>


<section class="blog-category-section">
    <div class="container">

        <?php if (have_posts()) : ?>

            <div class="row g-4">

                <?php while (have_posts()) : the_post(); ?>

                    <?php
                    $image = has_post_thumbnail()
                        ? get_the_post_thumbnail_url(get_the_ID(), 'large')
                        : get_template_directory_uri() . '/images/no-image.jpg';
                    ?>

                    <div class="col-lg-4 col-md-6 col-12">
                        <article class="blog-category-card">

                            <a href="<?php the_permalink(); ?>" class="blog-card-img">
                                <img src="<?php echo esc_url($image); ?>" alt="<?php the_title_attribute(); ?>">
                            </a>

                            <div class="blog-card-content">

                                <div class="blog-card-meta">
                                    <span><?php echo esc_html(get_the_date('M d, Y')); ?></span>
                                    <span><?php the_author(); ?></span>
                                </div>

                                <h2>
                                    <a href="<?php the_permalink(); ?>">
                                        <?php the_title(); ?>
                                    </a>
                                </h2>

                                <p>
                                    <?php
                                    if (has_excerpt()) {
                                        echo esc_html(wp_trim_words(get_the_excerpt(), 20));
                                    } else {
                                        echo esc_html(wp_trim_words(get_the_content(), 20));
                                    }
                                    ?>
                                </p>

                                <a href="<?php the_permalink(); ?>" class="blog-card-btn">
                                    Read More
                                </a>

                            </div>
                        </article>
                    </div>

                <?php endwhile; ?>

            </div>

            <div class="blog-category-pagination">
                <?php
                the_posts_pagination(array(
                    'mid_size'  => 2,
                    'prev_text' => __('« Previous'),
                    'next_text' => __('Next »'),
                ));
                ?>
            </div>

        <?php else : ?>

            <div class="no-post-found">
                <h3>No posts found in this category.</h3>
                <p>Please check back later.</p>
            </div>

        <?php endif; ?>

    </div>
</section>

<?php get_footer(); ?>