<?php
/**
 * Template Name: Blog full width
 *
 * @package Luzuk Premium
 */
get_header(); 
?>
  <?php $image = wp_get_attachment_url( get_post_thumbnail_id($post->ID));?>
<header class="page-main-header"  <?php  if (!empty($image)) : ?> style="background: url('<?php echo esc_url($image); ?>'); background-repeat: no-repeat; background-size:auto;position: relative;" <?php endif ?>  >
      <div class="overlay1"></div>
    <div class="container">
        <?php the_title( '<h1 class="ht-main-title ">', '</h1>' ); ?>
        <div class="clearfix"></div>
    
       <?php if( get_theme_mod('breadcrumb_button_display','show' ) == 'show') :
          ?>
          <div class="breadcrumbbox ">
              <div class="container">
                  <div class='button top-bttn'><?php luzuk_lite_the_breadcrumb(); ?></div>
                  <!--  <?php //luzuk_lite_the_breadcrumb(); ?> -->
              </div>
          </div>
      <?php endif ?>    
    </div>
</header><!-- .entry-header --> 


<main id="innerpage-box">
    <div class="container">
        <div class="inner_contentbox">
            <div id="blog-box" class="ht-blog-wrap innerpage-whitebox">
              <?php
                  $current_page = max(1, get_query_var('paged'));
                  $luzuk_blog_cat_exclude = get_theme_mod('luzuk_blog_categories');
                  $luzuk_blog_cat_exclude = explode(',', $luzuk_blog_cat_exclude);
                  $excerpt = get_theme_mod('luzuk_blog_categories_settings');
                  $args = array(
                      'category__not_in' => $luzuk_blog_cat_exclude,
                      // 'page'=,
                      'paged'=> $current_page,

                  );
              $query = new WP_Query($args);
              $i = 1; // ✅ Initialize the post counter here
              if($query -> have_posts()):
                  while($query -> have_posts()) : $query -> the_post();
                   $luzuk_image = wp_get_attachment_image_src(get_post_thumbnail_id() , 'total-blog-thumb');
                   $img = (has_post_thumbnail())?esc_url($luzuk_image[0]):get_template_directory_uri().'/images/default.png';
              ?>
                <div class="inner-blog-post col-md-4 col-sm-6 col-xs-12 ">
                    <div class="inner-blogpost">
                        <div class="ht-blog-thumbnail">
                            <a href="<?php the_permalink(); ?>">
                              <?php if( get_theme_mod('postdate_button_display','show' ) == 'show') : ?>
                              <div class="blog-date">
                                  <ul>
                                      <li class="dte"><?php echo $i; ?> </li>  
                                      <li > <?php echo get_the_date( 'j' ); ?></li>       
                                      <!-- <li></?php echo get_the_date( 'Y' ); ?></li> -->
                                      <li ><?php echo get_the_date( 'M' ); ?></li>
                                  </ul>
                              </div>
                              <?php endif ?> 
                              <img class="inner-blog-img" src="<?php echo $img; ?>" alt="<?php the_title(); ?>">
                            </a>
                        </div>
                        <div class="inner-blogpost-info">
                            <a href="<?php the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
                            <div class="inner-blog-excerpt">
                                 <?php 
                                 if (has_excerpt()) {
                                            echo get_the_excerpt();
                                        } else {
                                            echo luzuk_excerpt(get_the_content(),80);
                                   }
                                ?>
                            </div>
                            <?php 
                                $innblg_btn = get_theme_mod('innblg_btn', 'More Posts');
                            ?>
                            <?php if (!empty($innblg_btn)) { ?>
                            <div class="readmore1">
                                <a href="<?php the_permalink(); ?>"><?php echo ($innblg_btn); ?> </a>
                            </div>
                             <?php } ?>
                            <div class="clearfix"></div>
                        </div>
                        <div class="clearfix"></div> 
                    </div>
                   <script type="text/javascript">
                      var title = 0;
                      jQuery(".inner-blog-post .inner-blogpost").each(function(){
                        if ($(this).height() > title) { title = $(this).height(); }
                      });
                      jQuery(".inner-blog-post .inner-blogpost").height(title);


                      // on Resize change height

                      jQuery(window).resize(function(){
                        jQuery(".inner-blog-post .inner-blogpost").height("");
                        var title = 0;
                        jQuery(".inner-blog-post .inner-blogpost").each(function(){
                          if ($(this).height() > title) { title = $(this).height(); }
                        });
                        jQuery(".inner-blog-post .inner-blogpost").height(title);
                      });
                  </script>
              </div> 
              <?php
                  $i++; // ✅ Increment the counter after each post
                      endwhile;
                  endif;
                  wp_reset_postdata();
              ?>
              <div class="clearfix"></div>
          </div>
          <div class="pagingation">
              <?php lzGetPagination($query);?>
          </div>
          <div class="clearfix"></div>
      </div>
    </div>
</main>
<?php get_footer(); ?>