<?php
/**
 *
 * This is the section that displays the section on the homepage.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package GrShop
 */
 $b_section_label = get_theme_mod( 'b_section_label','Our Blog' );
 $b_section_title = get_theme_mod( 'b_section_title','Grocery & Food' );
 $b_section_focus = get_theme_mod( 'b_section_focus','News' );
 
?>
<!-- Blog Area -->
<div class="departments gr-section-padding gr-custom-bg">
    <div class="container">
        <div div class="row mb-30">
            <div class="col-12">
                <div class="section-title  text-center m-btm-30">
                    <p class="small-title font-stylish m-btm-10 pr-color"><?php echo $b_section_label;?></p>
                    <h2 class="s-content-title"><?php echo $b_section_title;?> <span class="pr-color"><?php echo $b_section_focus;?></span></h2>
                </div>
            </div>
        </div>
        <div class="row d-flex align-items-center justify-content-center">
            <?php
            $selected_category = get_theme_mod( 'select_blog_category' );
            $blog_number = get_theme_mod( 'show_post', 3 );
            // Define the query arguments
            $args = array(
                'post_type' => 'post', // Fetch posts
                'posts_per_page' => $blog_number, // Number of posts to display
                'ignore_sticky_posts' => 1, // Ignore sticky posts
                'cat'                 => $selected_category, // Filter by selected category

            );

            // Initialize the query
            $query = new WP_Query( $args );

            // Check if there are posts available
            if ( $query->have_posts() ) :
                // Loop through posts
                while ( $query->have_posts() ) : $query->the_post();
            ?>
                    <div class="col-lg-4 col-md-4 col-12">
                        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                            <div class="grshop-grocery-single-post">
                                <?php if ( has_post_thumbnail() ) : ?>
                                    <div class="grshop-grocery-single-post__head">
                                        <div class="grshop-grocery-single-post__comments"><i class="fa fa-comments"></i><?php echo esc_html( get_comments_number() ); ?></div>
                                        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'grshop-grocery-blog-thumb' ); ?></a>
                                    </div>
                                <?php endif; ?>
                                <div class="grshop-grocery-single-post__body">
                                    <h2 class="grshop-grocery-single-post__title">
                                        <?php if ( is_sticky() ) : ?><span class="grshop-grocery-sticky"><i class="fa-regular fa-note-sticky"></i></span><?php endif; ?>
                                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                    </h2>
                                    <!-- Post Meta -->
                                    <ul class="grshop-grocery-post-meta">
                                        <li><i class="fa fa-pencil"></i><?php grshop_grocery_posted_on(); ?></li>
                                        <li><i class="fa fa-user"></i><a class="grshop-grocery-post-meta__author" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>"><?php grshop_grocery_posted_by(); ?></a></li>
                                    </ul>
                                    <div class="grshop-grocery-single-post__content"><?php the_excerpt(); ?></div>
                                    <div class="grshop-grocery-single-post__button">
                                        <a href="<?php the_permalink(); ?>" class="grshop-grocery-btn"><?php esc_html_e( 'View Article', 'grshop-grocery' ); ?></a>
                                    </div>
                                </div>
                            </div>
                        </article> <!-- #post-<?php the_ID(); ?> -->
                    </div>
            <?php
                endwhile;
                // Restore original post data
                wp_reset_postdata();
            endif;
            ?>
        </div>
    </div>
</div>
<!-- End Blog Area -->