<?php

get_header();
?>


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

			?>
			 <!-- 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 -->
	 <!-- Start Blog
    ============================================= -->
    <div class="blog-area single full-blog right-sidebar full-blog default-padding">
        <div class="container">
            <div class="blog-items">
                <div class="row">
                    <div class="blog-content wow fadeInUp col-lg-8 col-md-12">
                        <div class="item">

                            <div class="blog-item-box">
                                <!-- Start Post Thumb -->
                                <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>
                                <!-- Start Post Thumb -->

                                <div class="info">
                                    <div class="meta">
                                        <ul>
                                            <li><a href="#"><i class="fas fa-user"></i><?php echo get_the_author_meta('display_name'); ?></a></li>
                                            <li><a href="#"><i class="fas fa-comments"></i> <?php echo get_comments_number(); ?> Comments</a></li>
                                        </ul>
                                    </div>
									<?php the_content() ?>
                                    
                                    
                                </div>
                            </div>
                        </div>

                        <!-- Start Post Pagination -->
                        <!-- Start Post Pagination -->
						<div class="post-pagi-area">
							<?php 
							// Previous Post Link
							$prev_post = get_previous_post();
							if (!empty($prev_post)): ?>
								<a href="<?php echo get_permalink($prev_post->ID); ?>">
									<i class="fas fa-angle-double-left"></i> Previous Post
									<h5><?php echo get_the_title($prev_post->ID); ?></h5>
								</a>
							<?php endif; ?>

							<?php 
							// Next Post Link
							$next_post = get_next_post();
							if (!empty($next_post)): ?>
								<a href="<?php echo get_permalink($next_post->ID); ?>">
									Next Post <i class="fas fa-angle-double-right"></i>
									<h5><?php echo get_the_title($next_post->ID); ?></h5>
								</a>
							<?php endif; ?>
						</div>
						<!-- End Post Pagination -->

                        <!-- End Post Pagination -->

                        <!-- Start Post Tags-->
                        <div class="post-tags share">
						<div class="tags">
							<?php
							// Get post tags
							$post_tags = get_the_tags();
							if ($post_tags) {
								foreach($post_tags as $tag) { ?>
									<a href=""><?php echo $tag->name; ?></a>
								<?php }
							} else {
								
							}
							?>
						</div>

                            <div class="social">
                                <ul>
                                    <li class="facebook">
                                        <a href="#">
                                            <i class="fab fa-facebook-f"></i>
                                        </a>
                                    </li>
                                    <li class="twitter">
                                        <a href="#">
                                            <i class="fab fa-twitter"></i>
                                        </a>
                                    </li>
                                    <li class="pinterest">
                                        <a href="#">
                                            <i class="fab fa-pinterest-p"></i>
                                        </a>
                                    </li>
                                    <li class="linkedin">
                                        <a href="#">
                                            <i class="fab fa-linkedin-in"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- End Post Tags -->
                    </div>
                    <!-- Start Sidebar -->
                    <div class="sidebar wow fadeInLeft col-lg-4 col-md-12">
                        <aside>
                            <div class="sidebar-item search">
                                <div class="sidebar-info">
                                    <form>
                                        <input type="text" name="text" class="form-control">
                                        <button type="submit"><i class="fas fa-search"></i></button>
                                    </form>
                                </div>
                            </div>
                            <div class="sidebar-item recent-post">
							<div class="title">
								<h4>Recent Post</h4>
							</div>
							<ul>
								<?php
								// Query for recent posts
								$recent_posts_query = new WP_Query(array(
									'posts_per_page' => 3, // Change this number to show more or fewer posts
									'post_status'    => 'publish'
								));

								// Check if there are posts
								if ($recent_posts_query->have_posts()) :
									while ($recent_posts_query->have_posts()) : $recent_posts_query->the_post(); ?>
										<li>
											<div class="thumb">
												<a href="<?php the_permalink(); ?>">
												<?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/default.jpg" alt="Default Thumbnail">
																	<?php endif; ?>
												</a>
											</div>
											<div class="info">
												<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
												<div class="meta-title">
													<span class="post-date"><i class="fas fa-calendar-alt"></i> <?php echo get_the_date('d M, Y'); ?></span>
												</div>
											</div>
										</li>
									<?php endwhile;
									wp_reset_postdata(); // Reset post data after the loop
								else : ?>
									<li>No recent posts available.</li>
								<?php endif; ?>
							</ul>

                            </div>
                            <div class="sidebar-item category">
								<div class="title">
									<h4>Category List</h4>
								</div>
								<div class="sidebar-info">
									<ul>
										<?php
										// Get all categories
										$categories = get_categories(array(
											'orderby' => 'name', // Order by name
											'order'   => 'ASC',  // Sort in ascending order
										));

										// Loop through each category and display it
										foreach ($categories as $category) {
											// Get the category link
											$category_link = get_category_link($category->term_id);
											// Get the category name and post count
											$category_name = $category->name;
											$category_count = $category->count;
											?>
											<li>
												<a href="<?php echo esc_url($category_link); ?>">
													<?php echo esc_html($category_name); ?> 
													<span>(<?php echo esc_html($category_count); ?>)</span>
												</a>
											</li>
										<?php } ?>
									</ul>
								</div>

                            </div>
                            <!-- <div class="sidebar-item gallery">
                                <div class="title">
                                    <h4>Gallery</h4>
                                </div>
                                <div class="sidebar-info">
                                    <ul>
                                        <li>
                                            <a href="#">
                                                <img src="assets/img/thumbs/1.jpg" alt="thumb">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <img src="assets/img/thumbs/5.jpg" alt="thumb">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <img src="assets/img/thumbs/6.jpg" alt="thumb">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <img src="assets/img/thumbs/4.jpg" alt="thumb">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <img src="assets/img/thumbs/3.jpg" alt="thumb">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <img src="assets/img/thumbs/2.jpg" alt="thumb">
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div> -->
                            <!-- <div class="sidebar-item archives">
                                <div class="title">
                                    <h4>Archives</h4>
                                </div>
                                <div class="sidebar-info">
                                    <ul>
                                        <li><a href="#">Aug 2021</a></li>
                                        <li><a href="#">Sept 2021</a></li>
                                        <li><a href="#">Nov 2021</a></li>
                                        <li><a href="#">Dec 2021</a></li>
                                    </ul>
                                </div>
                            </div> -->
                            <div class="sidebar-item social-sidebar">
                                <div class="title">
                                    <h4>follow us</h4>
                                </div>
                                <div class="sidebar-info">
                                    <ul>
                                        <li class="facebook">
                                            <a href="#">
                                                <i class="fab fa-facebook-f"></i>
                                            </a>
                                        </li>
                                        <li class="twitter">
                                            <a href="#">
                                                <i class="fab fa-twitter"></i>
                                            </a>
                                        </li>
                                        <li class="pinterest">
                                            <a href="#">
                                                <i class="fab fa-pinterest"></i>
                                            </a>
                                        </li>
                                        <li class="linkedin">
                                            <a href="#">
                                                <i class="fab fa-linkedin-in"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <!-- <div class="sidebar-item tags">
                                <div class="title">
                                    <h4>tags</h4>
                                </div>
                                <div class="sidebar-info">
                                    <ul>
                                        <li><a href="#">Food</a>
                                        </li>
                                        <li><a href="#">tech</a>
                                        </li>
                                        <li><a href="#">nation</a>
                                        </li>
                                        <li><a href="#">study</a>
                                        </li>
                                        <li><a href="#">health</a>
                                        </li>
                                        <li><a href="#">food</a>
                                        </li>
                                        <li><a href="#">travel</a>
                                        </li>
                                        <li><a href="#">science</a>
                                        </li>
                                    </ul>
                                </div>
                            </div> -->
                        </aside>
                    </div>
                    <!-- End Start Sidebar -->
                </div>
            </div>
        </div>
    </div>
    <!-- End Blog -->

<?php endwhile ?>
<?php
get_footer();
?>