<?php get_header(); ?>
<section class="section-top">
    <div class="container">
        <div class="col-lg-10 offset-lg-1 text-center">
            <div class="section-top-title">
                <h1>Blog Detail</h1>
                <ul>
                    <li><a href="/">Home</a></li>
                    <li class="ms-1"> / Blog Detail</li>
                </ul>
            </div>
        </div>
    </div>
</section>
  
      <?php
             if(have_posts()) : while ( have_posts() ) : the_post();
          ?>
<section id="trending_causes_main">
  <div class="container">
    <div class="row" id="counter">

      <!-- Left Content -->
      <div class="col-lg-8 left-side">
        <div class="details_wrapper_area">

          <div class="details_big_img">
            <img
              src="<?= get_the_post_thumbnail_url(get_the_ID(), 'full'); ?>"
              alt="blog Image"
            >
          </div>

          <div class="details_text_wrapper">
              <?php 
							// Get the categories associated with the current post
							$categories = get_the_terms(get_the_ID(), 'category');

							if (!empty($categories) && !is_wp_error($categories)) {
								foreach ($categories as $category) {
									echo '<a href="' . esc_url(get_category_link($category->term_id)) . '" class="tags_noted">
											<i class="fas fa-th-list"></i> ' . esc_html($category->name) . '
										  </a> ';
								}
							} else {
								echo '<a href="#" class="tags_noted"><i class="fas fa-th-list"></i> Uncategorized</a>';
							}
							?>
              <hr>
            <h2><?php the_title(); ?></h2>
            <hr>
            <p><?php the_content(); ?></p>
          </div>
        </div>
      </div>
     <?php endwhile;endif;?>
      <!-- Right Sidebar -->
      <div class="col-lg-4">
        <div class="sidebar_first">

          <!-- Latest Blogs -->
          <div class="project_recentdonet_wrapper sidebar_boxed">
            <div class="sidebar_heading_main">
              <h3>Latest Blogs</h3>
            </div>
              <?php	
                 $args = array('posts_per_page'=>5);
                 $result = new WP_Query($args);
                if($result->have_posts()) : while ($result->have_posts() ) : $result->the_post();
                ?>
            <div class="recent_donet_item recent_donet_text1">
              <div class="recent_donet_img">
                <a href="<?php the_permalink();?>">
                  <img
                    src="<?= get_the_post_thumbnail_url(get_the_ID(),'full'); ?>"
                    alt="Mike Richard"
                  >
                </a>
              </div>

              <div class="recent_donet_text">
                <p>
                  <i class="fa-regular fa-clock"></i>
                  <span> <?php echo get_the_date('M d'); ?></span>
                </p>
                <h4>
                  <a href="<?php the_permalink();?>"><?php the_title();?></a>
                </h4>
              </div>
            </div>
               <?php endwhile;endif;?>

          </div>

          <!-- Categories -->
          <div id="custom-addon-wrapper" class="addon-wrapper">
            <div id="custom-addon" class="clearfix">
              <div class="addon-module sidebar-post">
                <div class="addon-content">

                  <div class="sidebar_heading_main">
                    <h3>Categories</h3>
                  </div>

                  <ul class="categories-list">
                  <?php 
										  $categories = get_categories([
								'number' => 5, // Limit to 5 categories
								'orderby' => 'count', // Order by post count
								'order'   => 'DESC' // Show most popular first
							]);
										foreach ($categories as $category) : 
									?>
                    <li>
                      <a href="<?php echo get_category_link($category->term_id); ?>">
                     	<?php echo esc_html($category->name); ?>
                         <span>(<?php echo esc_html($category->count); ?>)</span>
                      </a>
                    </li>
                     <?php endforeach; ?>
                  </ul>

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

          <!-- Share Causes -->
          <div class="share_causes_wrapper sidebar_boxed">
            <div class="sidebar_heading_main">
              <h3>Share Causes</h3>
            </div>

            <div class="social_icon_sidebar">
              <ul>
                <li><a href="#"><i class="bi bi-facebook"></i></a></li>
                <li><a href="#"><i class="bi bi-instagram"></i></a></li>
                <li><a href="#"><i class="bi bi-twitter"></i></a></li>
                <li><a href="#"><i class="bi bi-linkedin"></i></a></li>
              </ul>
            </div>
          </div>

        </div>
      </div>
      <!-- End Right Sidebar -->

    </div>
  </div>
</section>
<?php get_footer(); ?>