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

?>
<!-- banner section -->
<main id="maincontent" role="main">
  <?php do_action( 'vw_modern_kitchen_above_banner' ); ?>
  <?php if (get_theme_mod('vw_modern_kitchen_hide_show_banner_section', false)) { ?>
    <section id="banner" class="banner-section position-relative">
      <?php if (get_theme_mod('vw_modern_kitchen_banner_bg_img') != "") { ?>
        <img src="<?php echo esc_url(get_theme_mod('vw_modern_kitchen_banner_bg_img')); ?>" class="banner-img" alt="<?php echo esc_attr('banner image', 'vw-modern-kitchen'); ?>">
      <?php }?>
      <?php if (get_theme_mod('vw_modern_kitchen_banner_small_title') != '' || get_theme_mod('vw_modern_kitchen_banner_title') != '' || get_theme_mod('vw_modern_kitchen_banner_text') != '') { ?>
        <div class="banner-content mw-100 m-auto p-0 position-absolute">
          <div class="container">
            <div class="banner-inner-box py-5 pe-5">
              <p class="banner-small-title text-capitalize wow fadeInDown mb-3 text-lg-start text-md-start text-center" data-wow-delay=".25s"><?php echo esc_html(get_theme_mod('vw_modern_kitchen_banner_small_title')); ?></p>
              <h1 class="banner-title text-capitalize wow fadeInDown mb-4 text-lg-start text-md-start text-center" data-wow-delay=".30s"><?php echo esc_html(get_theme_mod('vw_modern_kitchen_banner_title')); ?></h1>
              <p class="banner-text mb-0 wow fadeInDown text-lg-start text-md-start text-center" data-wow-delay=".40s"><?php echo esc_html(get_theme_mod('vw_modern_kitchen_banner_text')); ?></p>
            </div>
          </div>
        </div>
      <?php } ?>
      <?php if ( get_theme_mod('vw_modern_kitchen_banner_button_label') != '' || get_theme_mod('vw_modern_kitchen_banner_button_url') != '') {?>
        <div class ="banner-btn position-absolute" data-wow-delay=".45s">
          <a href="<?php echo esc_url(get_theme_mod('vw_modern_kitchen_banner_button_url'));?>" class="text-capitalize justify-content-center d-flex align-items-center gap-lg-4 gap-md-4 gap-3"><?php echo esc_html(get_theme_mod('vw_modern_kitchen_banner_button_label'));?><i class="fa-solid fa-arrow-right"></i></i>
          </a>
        </div>
      <?php }?>
    </section>
  <?php }?>

  <!-- Blogs Section -->
  <?php if (get_theme_mod('vw_modern_kitchen_blog_section_hide_show', false)){ ?>
    <section id="blog-section" class="my-5 pt-5">
      <div class="container">
        <div class="blog-sec-content mb-5 text-center wow fadeInDown">
          <?php if(get_theme_mod('vw_modern_kitchen_blog_section_title') != '') {?>
            <p class="section-sub-title text-capitalize"><?php echo esc_html(get_theme_mod('vw_modern_kitchen_blog_section_sub_title')) ?></p>
          <?php }?>
          <?php if(get_theme_mod('vw_modern_kitchen_blog_section_title') != '') {?>
            <h2 class="section-title text-capitalize"><?php echo esc_html(get_theme_mod('vw_modern_kitchen_blog_section_title')) ?></h2>
          <?php }?>
        </div>
        <div class="owl-carousel">
          <?php
            $vw_modern_kitchen_catdata=  get_theme_mod('vw_modern_kitchen_blog_category');
            if($vw_modern_kitchen_catdata){
            $vw_modern_kitchen_page_query = new WP_Query(array(
              'category_name' => esc_html($vw_modern_kitchen_catdata, 'vw-modern-kitchen')
            ));  
          ?>         
          <?php while( $vw_modern_kitchen_page_query->have_posts() ) : $vw_modern_kitchen_page_query->the_post(); ?>
            <div class="blog-box">
              <div class="blog-img mb-3 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-modern-kitchen'); ?>">
                <?php }?>
                <div class="articles position-absolute p-3 me-3">
                  <h5 class="blog-title text-capitalize"><a href="<?php the_permalink(); ?>"><?php the_title();?><span class="screen-reader-text"><?php the_title(); ?></span></a></h5>
                  <div class="row">
                    <div class="col-xl-10 col-lg-10 col-md-10 col-12">
                      <p class="post-para mb-0">
                        <?php 
                          $vw_modern_kitchen_excerpt = get_the_excerpt(); 
                          echo esc_html(wp_trim_words($vw_modern_kitchen_excerpt, 12)); 
                        ?>
                      </p>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-2 col-12">
                      <div class="blog-btn">
                        <a href="<?php the_permalink();?>"><i class="fa-solid fa-arrow-right"></i></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          <?php endwhile;
            wp_reset_postdata();
          }?>
        </div>
      </div>
    </section>
  <?php }?>
  <?php do_action( 'vw_modern_kitchen_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(); ?> 