<?php /* Template Name: Blog Page */ ?>
<?php get_header(); ?>

<!-- Start Breadcrumb 
    ============================================= -->
    <div class="breadcrumb-area text-center shadow dark bg-fixed text-light" style="background-image: url(<?php echo get_field('web_banner'); ?>);">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <h1><?php echo get_field('banner_title'); ?></h1>
                    <ul class="breadcrumb">
                        <li><a href="<?php echo site_url() ?>"><i class="fas fa-home"></i> Home</a></li>
                        <li class="active">Blog</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End Breadcrumb -->

    <div class="blog-area full-blog blog-standard full-blog grid-colum default-padding">
        <div class="container">
            <div class="blog-items">
                <div class="blog-content">
                    <div class="blog-item-box">
                        <div class="row">
                        <?php
                        // Set up pagination variables
                        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

                        // Query to get 'csr' custom post type posts with pagination
                        $args = array(
                            'post_type' => 'post', // Custom post type 'csr'
                            'posts_per_page' => 6, // Number of posts per page
                            'orderby' => 'date', // Order by date
                            'order' => 'DESC', // Descending order
                            'paged' => $paged, // Current page number
                        );

                        $query = new WP_Query($args);
                        ?>
                        <?php if ( $query->have_posts() ) : ?>
                        <div class="row">
                        
                            <?php while ( $query->have_posts() ) : $query->the_post(); ?>

                             <!-- Single Item -->
                            <div class="col-lg-4 col-md-6 single-item">
                                <div class="item wow fadeInUp" data-wow-delay="500ms">
                                    <div class="thumb">
                                        <?php if ( has_post_thumbnail() ) : ?>
                                            <img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title_attribute(); ?>">
                                        <?php else : ?>
                                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/blog/1.jpg" alt="Thumb">
                                        <?php endif; ?>
                                        <div class="date"><?php echo get_the_date(); ?></div>
                                    </div>
                                    <div class="info">
                                        <h3>
                                            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                        </h3>
                                        <p><?php the_excerpt(); ?></p>
                                        <a class="btn circle btn-gray border btn-md" href="<?php the_permalink(); ?>">Read More</a>
                                    </div>
                                </div>
                            </div>
                            <!-- End Single Item -->
                            <?php endwhile; ?>
                            
                        </div>

                        <!-- Pagination -->
                        <div class="row">
                            <div class="col-md-12 pagi-area text-center">
                                <nav aria-label="navigation">
                                    <ul class="pagination">
                                        <?php
                                        // Create pagination links
                                        echo paginate_links(array(
                                            'total' => $query->max_num_pages,
                                            'current' => $paged,
                                            'prev_text' => '<i class="fas fa-angle-double-left"></i>',
                                            'next_text' => '<i class="fas fa-angle-double-right"></i>',
                                            'before_page_number' => '<li class="page-item">',
                                            'after_page_number' => '</li>',
                                        ));
                                        ?>
                                    </ul>
                                </nav>
                            </div>
                        </div>

                        <?php wp_reset_postdata(); ?>
                    <?php else : ?>
                        <p>No  posts found.</p>
                    <?php endif; ?>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Blog -->

<?php get_footer(); ?>