<?php
/**
 * Template Name: Home Template
 */

get_header(); 

$indoor_sports_zone_number = get_theme_mod('indoor_sports_zone_slider_number');
?>

<main id="skip-content">
<section id="slider" class="px-5 pt-3">
  <div class="container-fluid p-0">
    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner " role="listbox">
        <?php for ($i=1; $i<=$indoor_sports_zone_number; $i++) { ?>
          <div <?php if($i == 1){echo 'class="carousel-item active"';} else{ echo 'class="carousel-item"';}?> >
              <div class="slide-image">
                <?php if (get_theme_mod('indoor_sports_zone_slide_image'.$i)): ?>
                  <img src="<?php echo esc_url(get_theme_mod('indoor_sports_zone_slide_image'.$i)); ?>">
                <?php else: ?>
                  <div class="slide-image-box"></div>
                <?php endif ?>
              </div>
            <div class= "carousel-caption">
              <?php if(get_theme_mod('indoor_sports_zone_slide_sub_heading'.$i) != ''){ ?>
                <h6 class="slider-sub-heading"><?php echo esc_html( get_theme_mod( 'indoor_sports_zone_slide_sub_heading'.$i));?></h6>
              <?php }?>
              <?php if(get_theme_mod('indoor_sports_zone_slide_heading'.$i) != ''){ ?>
                <h1 class="slider-heading"><?php echo esc_html( get_theme_mod( 'indoor_sports_zone_slide_heading'.$i));?></h1>
              <?php }?>
              <?php if(get_theme_mod('indoor_sports_zone_slide_text'.$i) != ''){ ?>
                <p class="slider-paragraph"><?php echo esc_html( get_theme_mod( 'indoor_sports_zone_slide_text'.$i));?></p>
              <?php }?>
              <?php if(get_theme_mod('indoor_sports_zone_slide_btnurl'.$i) != '' || get_theme_mod('indoor_sports_zone_slide_btntext'.$i) != ''){ ?>
                <a class="slider-button btn" href="<?php echo esc_url(get_theme_mod('indoor_sports_zone_slide_btnurl'.$i)); ?>">
                  <?php echo esc_html(get_theme_mod('indoor_sports_zone_slide_btntext'.$i)); ?>
                </a>
              <?php }?>
            </div>
          </div>
        <?php } ?>
      </div>
      <div class="slider-indicator carousel-indicators text-center">
        <?php 
          for ($i=1;$i<=$indoor_sports_zone_number; $i++) { 
              ?>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="<?php echo esc_attr($i-1); ?>"
              <?php if($i == 1){echo 'class="indicator active"';} ?> >
                <?php if (get_theme_mod('indoor_sports_zone_slide_image'.$i)): ?>
                  <img src="<?php echo esc_url(get_theme_mod('indoor_sports_zone_slide_image'.$i)); ?>">
                <?php else: ?>
                  <div class="slide-small-img-box"></div>
                <?php endif ?>
                <?php if(get_theme_mod('indoor_sports_zone_slide_image_title'.$i) != ''){ ?>
                  <h6> <?php  echo esc_html(get_theme_mod('indoor_sports_zone_slide_image_title'.$i)); ?></h6>
                <?php } ?>
            </button>
        <?php  }?>
      </div>
      <div class="carousal-pre-next">
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev"  data-bs-slide-to="<?php echo($i-1); ?>" class="<?php if($i==1){echo 'active';} ?>">
          <span class="carousel-control-prev-icon" aria-hidden="true"><span class="slider-prev"><?php esc_html_e('Prev','indoor-sports-zone') ?></span></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next" data-bs-target="#carouselExampleAutoplaying"  data-bs-slide-to="<?php echo($i-1); ?>" class="<?php if($i==1){echo 'active';} ?>">
          <span class="carousel-control-next-icon" aria-hidden="true"><span class="slider-next"><?php esc_html_e('Next','indoor-sports-zone') ?></span></span>
        </button>
      </div>
    </div>
  </div>
</section>
<?php if (get_theme_mod( 'indoor_sports_zone_about_section_setting','' )) { ?>
  <section class="featured py-5">
    <div class="container">
      <div class="about-text-box text-center mb-4">
        <?php if(get_theme_mod('indoor_sports_zone_services_short_heading') != ''){ ?>
          <h4 class="image-heading mb-2"><?php echo esc_html(get_theme_mod('indoor_sports_zone_services_short_heading')); ?></h4>
        <?php }?>
        <?php if(get_theme_mod('indoor_sports_zone_services_image_heading') != ''){ ?>
          <h3 class="image-heading mb-2"><?php echo esc_html(get_theme_mod('indoor_sports_zone_services_image_heading')); ?></h3>
        <?php }?>
      </div>
      <div class="owl-carousel" role="listbox">
        <?php
          $indoor_sports_zone_services_cat = get_theme_mod('indoor_sports_zone_services_sec_category','');
          if($indoor_sports_zone_services_cat){
            $indoor_sports_zone_page_query5 = new WP_Query(array( 'category_name' => esc_html($indoor_sports_zone_services_cat,'indoor-sports-zone'),'posts_per_page' => 5));
            $i=1;
            while( $indoor_sports_zone_page_query5->have_posts() ) : $indoor_sports_zone_page_query5->the_post(); ?>
              <?php if(get_theme_mod('indoor_sports_zone_services_icon'.$i,'fas fa-stethoscope')){ ?>
                <div class="feature-box m-0">
                  <div class="feature-img">
                    <?php if(has_post_thumbnail()){?>
                      <div class="project-bg">
                        <?php the_post_thumbnail(); ?>
                      </div>
                      <?php } else{?>
                      <div class="project-bg">
                        <img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/service.png" alt="" />
                      </div>
                    <?php } ?>

                    
                  </div>
                  <div class="ser-content">
                    <h4 class="mt-2 text-left"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
                    <p class=" m-0 content"><?php echo esc_html( wp_trim_words( get_the_content(),6 )); ?></p>
                  </div>
                </div>
              <?php }?>
            <?php $i++; endwhile;
          wp_reset_postdata();
        } ?>
      </div>
    </div>
  </section>
<?php } ?>
  <section id="page-content">
    <div class="container">
      <div class="py-5">
        <?php
          if ( have_posts() ) :
            while ( have_posts() ) : the_post();
              the_content();
            endwhile;
          endif;
        ?>
      </div>
    </div>
  </section>
</main>

<?php get_footer(); ?>