<?php
/**
 * Template Name: Custom Home Page
 */
get_header();

?>
<!-- banner section -->
<main id="maincontent" role="main">

  <?php do_action( 'vw_lifestyle_blog_above_slider' ); ?>
  
  <?php 
    if (get_theme_mod('vw_lifestyle_blog_hide_show_slider_section', true)) { 
    $vw_lifestyle_blog_catdata = get_theme_mod('vw_lifestyle_blog_slider_category');
    if ($vw_lifestyle_blog_catdata) {
      $vw_lifestyle_blog_page_query = new WP_Query(array(
        'category_name' => esc_html($vw_lifestyle_blog_catdata, 'vw-lifestyle-blog'),
        'posts_per_page' => 3
      ));
      if ($vw_lifestyle_blog_page_query->have_posts()) { ?>
      <section class="slider-section wow fadeInRightBig position-relative pt-3" data-wow-delay=".25s">
        <div class="row">
          <div class="col-xxl-2 col-xl-2 col-lg-2 col-md-3 col-12">
            <div class="left-main">
              <?php 
                for($vw_lifestyle_blog_i = 1; $vw_lifestyle_blog_i <= 6; $vw_lifestyle_blog_i++) {   
                  if(get_theme_mod('vw_lifestyle_blog_slider_left_image' . $vw_lifestyle_blog_i) != '') { ?>
                    <div class="left-img left-img<?php echo esc_attr($vw_lifestyle_blog_i); ?>">
                      <img class="short-left-img" src="<?php echo esc_url(get_theme_mod('vw_lifestyle_blog_slider_left_image' . $vw_lifestyle_blog_i)); ?>" title="<?php echo esc_attr('#bannerimage', 'vw-lifestyle-blog'); ?>">
                    </div>
                  <?php }
                }
              ?>
            </div>
          </div>
          <div class="col-xxl-8 col-xl-8 col-lg-8 col-md-6 col-12">
            <div id="slider" class="mw-100 m-auto p-0">
              <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="3500">
                <div class="carousel-inner">
                  <?php 
                  $vw_lifestyle_blog_slide_index = 0;
                  while ($vw_lifestyle_blog_page_query->have_posts()) : $vw_lifestyle_blog_page_query->the_post(); ?>
                    <div class="carousel-item <?php echo esc_attr($vw_lifestyle_blog_slide_index) == 0 ? 'active' : ''; ?> text-center">
                      <h1 class="post-title text-capitalize">
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                      </h1>
                      <div class="post-meta d-flex justify-content-center align-items-center gap-3">
                        <span class="author d-flex align-items-center">
                          <a href="<?php echo esc_url(get_author_posts_url(get_the_author_meta('ID'))); ?>" class="author-link d-flex align-items-center">
                            <?php 
                              $vw_lifestyle_blog_get_author_id = get_the_author_meta('ID');
                              echo get_avatar( get_the_author_meta('ID') );
                            ?>
                            <span class="ms-2">
                              <?php echo esc_html__('By', 'vw-lifestyle-blog') . ' ' . esc_html(get_the_author()); ?>
                            </span>
                          </a>
                        </span>
                        <span class="comments">
                          <i class="fa-solid fa-message me-1"></i>
                          <?php echo esc_html(get_comments_number()); ?>
                        </span>
                        <span class="date"><?php echo esc_html(get_the_date()); ?></span>
                      </div>
                      <div class="slider-img mt-3">
                        <?php if (has_post_thumbnail()) { 
                          the_post_thumbnail('full', ['class' => 'slider-carousel-img']);
                        } else { ?>
                          <img class="slider-carousel-img" src="<?php echo esc_url(get_template_directory_uri()) ?>/assets/images/post-image.png" alt="<?php echo esc_attr('Post Image', 'vw-lifestyle-blog'); ?>">
                        <?php } ?>
                      </div>
                    </div>
                  <?php 
                  $vw_lifestyle_blog_slide_index++;
                  endwhile; 
                  wp_reset_postdata(); ?>
                </div>
                <div class="carousel-indicators mt-4">
                  <div class="row w-100 justify-content-center">
                    <?php 
                    $vw_lifestyle_blog_indicator_index = 0;
                    $vw_lifestyle_blog_page_query->rewind_posts();
                    while ($vw_lifestyle_blog_page_query->have_posts()) : $vw_lifestyle_blog_page_query->the_post(); ?>
                      <div class="col-lg-4 col-md-4 col-4 ps-0 slider-dot-img">
                        <button type="button" data-bs-target="#carouselExampleIndicators" 
                          data-bs-slide-to="<?php echo esc_attr($vw_lifestyle_blog_indicator_index); ?>" 
                          class="indicator-item <?php echo esc_attr($vw_lifestyle_blog_indicator_index) == 0 ? 'active' : ''; ?>">
                          <div class="indicator-img-wrapper">
                            <?php if (has_post_thumbnail()) { 
                              the_post_thumbnail('thumbnail', ['class' => 'indicator-img']); 
                            } else { ?>
                              <img src="<?php echo esc_url(get_template_directory_uri()) ?>/assets/images/post-image.png" alt="<?php echo esc_attr('Post Image', 'vw-lifestyle-blog'); ?>" class="indicator-img">
                            <?php } ?>
                          </div>
                          <div class="indicator-text text-start ps-2">
                            <h5 class="indicator-title mb-0 text-capitalize"><?php the_title(); ?></h5>
                          </div>
                        </button>
                      </div>
                    <?php 
                    $vw_lifestyle_blog_indicator_index++;
                    endwhile; 
                    wp_reset_postdata(); ?>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xxl-2 col-xl-2 col-lg-2 col-md-3 col-12">
            <div class="right-main">
              <?php 
                for($vw_lifestyle_blog_j=1; $vw_lifestyle_blog_j<=6; $vw_lifestyle_blog_j++) {  
                if(get_theme_mod('vw_lifestyle_blog_slider_right_image'.$vw_lifestyle_blog_j) != '') {?>
                <div class="right-img right-img<?php echo esc_attr($vw_lifestyle_blog_j); ?>">
                  <img class="short-right-img" src="<?php echo esc_url(get_theme_mod('vw_lifestyle_blog_slider_right_image'.$vw_lifestyle_blog_j)); ?>" title="<?php echo esc_attr('#bannerimage', 'vw-lifestyle-blog'); ?>">
                </div>
              <?php }}?>
            </div>
          </div>
        </div>
      </section>
  <?php }}}?>

  <?php do_action( 'vw_lifestyle_blog_below_slider' ); ?>

  <!-- Blogs Section -->
  <?php if (get_theme_mod('vw_lifestyle_blog_blogs_section_hide_show', true)){ ?>
    <section id="blogs-section" class="wow fadeInLeftBig" data-wow-delay=".25s">
      <div class="container">
        <div class="section-content">
          <?php if(get_theme_mod('vw_lifestyle_blog_blogs_section_text') != '') {?>
            <p class="section-text mb-0 text-capitalize"><?php echo esc_html(get_theme_mod('vw_lifestyle_blog_blogs_section_text')) ?></p>
          <?php }?>
          <?php if(get_theme_mod('vw_lifestyle_blog_blogs_section_title') != '') {?>
            <h2 class="section-title text-capitalize pb-2"><?php echo esc_html(get_theme_mod('vw_lifestyle_blog_blogs_section_title')) ?></h2>
          <?php }?>
        </div>
        <div class="row">
          <div class="col-xxl-9 col-xl-9 col-lg-9 col-md-8 col-12">
            <div class="row">
              <?php
                for ($vw_lifestyle_blog_i=1; $vw_lifestyle_blog_i <= 3; $vw_lifestyle_blog_i++) {
                $vw_lifestyle_blog_postData=  get_theme_mod('vw_lifestyle_blog_services_category'.$vw_lifestyle_blog_i);
                if($vw_lifestyle_blog_postData){ ?>
                  <?php
                    $vw_lifestyle_blog_args = array(
                      'p' => esc_html($vw_lifestyle_blog_postData ,'vw-lifestyle-blog'),
                      'posts_per_page' => 3,
                      'post_type' => 'post'
                    );
                    $vw_lifestyle_blog_query = new WP_Query( $vw_lifestyle_blog_args );
                    if ( $vw_lifestyle_blog_query->have_posts() ) :
                      while ( $vw_lifestyle_blog_query->have_posts() ) : $vw_lifestyle_blog_query->the_post(); ?>
                      <div class="col-xl-4 col-lg-4 col-md-6 col-12 blogs-box mb-3">
                        <div class="classes-inner-box position-relative">
                          <?php if(has_post_thumbnail()){ ?>
                            <?php the_post_thumbnail(); ?>
                          <?php } else {?>
                            <img src="<?php echo esc_url(get_template_directory_uri()) ?>/assets/images/post-image.png" alt="<?php echo esc_attr('Post Image', 'vw-lifestyle-blog'); ?>">
                          <?php }?>
                          <div class="blog-category position-absolute"><?php the_category(); ?></div>
                        </div>
                        <div class="shadow-box">
                          <div class="blogs-content p-3">
                            <h3 class="blogs-title mb-1"><a href="<?php the_permalink(); ?>"><?php the_title(); ?><span class="screen-reader-text"><?php the_title(); ?></span></a></h3>
                            <p class="mb-4 blogssec-desc">
                              <?php 
                                $vw_lifestyle_blog_excerpt = get_the_excerpt(); 
                                echo esc_html(wp_trim_words($vw_lifestyle_blog_excerpt, 10)); 
                              ?>
                            </p>
                            <div class="row">
                              <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-6 align-self-center">
                                <span class="author d-flex align-items-center">
                                  <a href="<?php echo esc_url(get_author_posts_url(get_the_author_meta('ID'))); ?>" class="author-link d-flex align-items-center">
                                    <?php 
                                      $vw_lifestyle_blog_get_author_id = get_the_author_meta('ID');
                                      echo get_avatar( get_the_author_meta('ID') );
                                    ?>
                                    <span class="ms-2">
                                      <?php echo esc_html__('By-', 'vw-lifestyle-blog'); ?><br>
                                      <?php echo esc_html(get_the_author()); ?>
                                    </span>
                                  </a>
                                </span>
                              </div>
                              <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-6 align-self-center">
                                <span class="date"><?php echo esc_html(get_the_date()); ?></span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    <?php endwhile;
                      wp_reset_postdata();
                    endif; ?>
                <?php }
              } ?>
            </div>
          </div>
          <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-12 category-box">
            <div class="category-bg position-relative">
              <?php if(get_theme_mod('vw_lifestyle_blog_category_bg_image') != '') {?>
                <img class="cat-bg" src="<?php echo esc_url(get_theme_mod('vw_lifestyle_blog_category_bg_image')); ?>" title="<?php echo esc_attr('#bannerimage', 'vw-lifestyle-blog'); ?>">
              <?php } else { ?>
                <img class="cat-bg" src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/category-bg.png'); ?>" title="<?php echo esc_attr('#bannerimage', 'vw-lifestyle-blog'); ?>">
              <?php }?>
              <div class="post-cat position-absolute">
                <h4 class="cat-title mb-4"><?php echo esc_html__('Categories', 'vw-lifestyle-blog')  ; ?></h4>
                <ul class="category-list">
                  <?php 
                  $vw_lifestyle_blog_categories = get_categories(['number' => 10]);
                  foreach ($vw_lifestyle_blog_categories as $vw_lifestyle_blog_category) { 
                    echo '<li><a href="' . esc_url(get_category_link($vw_lifestyle_blog_category->term_id)) . '">' . esc_html($vw_lifestyle_blog_category->name) . '</a></li>';
                  }?>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  <?php }?>
  <?php do_action( 'vw_lifestyle_blog_after_service' ); ?>

  <div id="content-vw" class="entry-content">
    <div class="container">
      <?php while (have_posts()) : the_post(); ?>
        <?php the_content(); ?>
      <?php endwhile; // end of the loop. 
      ?>
    </div>
  </div>
</main>

<?php get_footer(); ?> 