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

get_header(); 

?>

<main role="main" id="skip_content">
  <?php do_action( 'jungle_safari_above_banner' ); ?>
  <?php if ( get_theme_mod( 'jungle_safari_banner_hide', false ) ) { ?>
    <section id="banner" class="mw-100 m-auto py-3 position-relative">
      <div class="container">
        <div class="banner-content">
          <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-6 col-12 align-self-center">
              <?php if(get_theme_mod('jungle_safari_banner_small_title') != ''){ ?>
                <div class="title-image-box d-flex align-items-end pb-2 gap-3 justify-content-lg-start justify-content-md-start justify-content-center">
                  <p class="banner-small-title text-uppercase"><?php echo esc_html(get_theme_mod('jungle_safari_banner_small_title')); ?></p><img src="<?php echo esc_url(get_template_directory_uri()) ?>/images/birds.png" alt="<?php echo esc_attr('birds image', 'jungle-safari'); ?>">
                </div>
              <?php } ?>
              <?php if ( get_theme_mod( 'jungle_safari_banner_title') != '' ) : ?>
                <h1 class="banner-title text-uppercase pb-0">
                  <?php echo esc_html( get_theme_mod( 'jungle_safari_banner_title') ); ?>
                </h1>
              <?php endif; ?>
              <?php if(get_theme_mod('jungle_safari_banner_desc_text') != ''){ ?>
                <p class="banner-desc mb-2"><?php echo esc_html(get_theme_mod('jungle_safari_banner_desc_text')); ?></p>
              <?php } ?>
              <?php if ( get_theme_mod('jungle_safari_banner_btn_text') != '' ) {?>
                <div class ="banner-btn pt-2">
                  <a class="text-capitalize" href="<?php echo esc_url(get_theme_mod('jungle_safari_banner_btn_url'));?>"><?php echo esc_html(get_theme_mod('jungle_safari_banner_btn_text'));?></a>
                </div>
              <?php }?>
              <div class="banner-gallery-imgs wow zoomIn">
                <div class="row">
                  <div class="col-xxl-3 col-xl-4 col-lg-5 col-md-6 col-6 video-box pe-0">
                    <?php if ( get_theme_mod('jungle_safari_video_button_url') != "" ) {?>
                      <div class="video-btn">
                        <div class="video-bg-img">
                          <?php if (get_theme_mod('jungle_safari_video_bg_img') != "") { ?>
                            <img src="<?php echo esc_url(get_theme_mod('jungle_safari_video_bg_img')); ?>" alt="<?php echo esc_attr('background-image', 'jungle-safari'); ?>">
                          <?php } else { ?>
                            <img src="<?php echo esc_url(get_template_directory_uri()) ?>/images/video-bg-img.png" alt="<?php echo esc_attr('background-image', 'jungle-safari'); ?>">
                          <?php } ?>
                          <a id="openBtn">
                            <i class="fas fa-play"></i>
                          </a>
                        </div>
                        <div class="overlay" id="videoOverlay">
                          <div class="popup">
                            <span class="close-btn"><i class="fas fa-times"></i></span>
                            <iframe width="100%" height="100%" src="<?php echo esc_url(get_theme_mod('jungle_safari_video_button_url'));?>" frameborder="0" allowfullscreen></iframe>
                          </div>
                        </div>
                      </div>
                    <?php }?>
                  </div>
                  <div class="col-xxl-3 col-xl-4 col-lg-5 col-md-6 col-6 bottom-image-box">
                    <?php if ( get_theme_mod('jungle_safari_banner_bottom_image1') != "" ) {?>
                      <img class="banner-btm-img1" src="<?php echo esc_url(get_theme_mod('jungle_safari_banner_bottom_image1')); ?>">
                    <?php }?>
                    <?php if ( get_theme_mod('jungle_safari_banner_bottom_image2') != "" ) {?>
                      <img class="banner-btm-img2" src="<?php echo esc_url(get_theme_mod('jungle_safari_banner_bottom_image2')); ?>">
                    <?php }?>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 col-12 align-self-center text-lg-end text-md-end text-center">
              <?php if ( get_theme_mod('jungle_safari_banner_side_image') != "" ) {?>
                <div class="banner-img-box wow bounceInRight">
                  <img class="banner-right-img" src="<?php echo esc_url(get_theme_mod('jungle_safari_banner_side_image')); ?>">
                </div>
              <?php } else {?>
                <div class="banner-img-box " >
                  <img class="banner-right-img" src="<?php echo esc_url(get_template_directory_uri()) ?>/images/banner-img.png" alt="<?php echo esc_attr('Image', 'jungle-safari'); ?>">
                </div>
              <?php }?>
            </div>
          </div>
        </div>
      </div>
      <div class="banner-mid-icon position-absolute"><i class="fa-solid fa-paw"></i></div>
      <div class="clearfix"></div>
    </section>
  <?php }?>
  <?php do_action( 'jungle_safari_below_banner' ); ?>

  <!-- Featured Section -->
  <?php if( get_theme_mod( 'jungle_safari_section_title') != '' || get_theme_mod( 'jungle_safari_section_small_text') != '') { ?>
    <section id="featured-sec" class="py-4 mb-5">
      <div class="container">
        <div class="featured-bg py-3 px-4">
          <div class="heading-box text-center mb-3">
            <?php if( get_theme_mod( 'jungle_safari_section_title') != '') { ?>  
              <h2 class="section-heading pb-2 px-3 text-uppercase"><?php echo esc_html(get_theme_mod('jungle_safari_section_title'));?></h2>
            <?php } ?>
            <?php if( get_theme_mod( 'jungle_safari_section_description') != '') { ?>  
              <p class="section-desc"><?php echo esc_html(get_theme_mod('jungle_safari_section_description'));?></p>
            <?php } ?>
          </div>
          <div class="row">
            <?php
              $jungle_safari_featured_post = get_theme_mod('jungle_safari_select_post_number');
              for ($jungle_safari_i=1; $jungle_safari_i <= $jungle_safari_featured_post; $jungle_safari_i++) {
              $jungle_safari_postData=  get_theme_mod('jungle_safari_select_featured_post'.$jungle_safari_i);
              if($jungle_safari_postData){ ?>
                <?php
                  $jungle_safari_args = array(
                    'p' => esc_html($jungle_safari_postData ,'jungle-safari'),
                    'posts_per_page' => 1,
                    'post_type' => 'post'
                  );
                  $jungle_safari_query = new WP_Query( $jungle_safari_args );
                  if ( $jungle_safari_query->have_posts() ) :
                    while ( $jungle_safari_query->have_posts() ) : $jungle_safari_query->the_post(); ?>
                    <div class="col-xl-3 col-sm-6 featured-box pb-4 wow bounceInRight">
                      <div class="featured-img-box position-relative">
                        <?php if(has_post_thumbnail()){ ?>
                          <?php the_post_thumbnail(); ?>
                        <?php } else {?>
                          <img src="<?php echo esc_url(get_template_directory_uri()) ?>/images/post-image.png" alt="<?php echo esc_attr('Post Image', 'jungle-safari'); ?>">
                        <?php }?>
                        <div class="image-overlay position-absolute"></div>
                        <div class="safari-date text-center position-absolute">
                          <i class="fa-solid fa-calendar-days"></i>
                          <a href="<?php echo esc_url( get_day_link( get_the_date('Y'), get_the_date('m'), get_the_date('d') ) ); ?>">
                            <?php echo esc_html( get_the_date('F j, Y') ); ?>
                            <span class="screen-reader-text"><?php echo esc_html( get_the_date('F j, Y') ); ?></span>
                          </a>

                        </div>
                      </div>
                      <div class="featured-content mt-3">
                        <div class="d-flex justify-content-between">
                          <?php if( get_theme_mod('jungle_safari_add_safari_location'.$jungle_safari_i) != ''){ ?>
                            <div class="location-section d-flex align-items-center gap-2">
                              <i class="fa-solid fa-location-dot"></i><p class="safari-location text-uppercase"><?php echo esc_html(get_theme_mod('jungle_safari_add_safari_location'.$jungle_safari_i));?></p>
                            </div>
                          <?php }?>
                          <?php if ( shortcode_exists( 'kkstarratings' ) ) { ?>
                            <div class="safari-review">
                              <?php echo do_shortcode( '[kkstarratings]' ); ?>
                            </div>
                          <?php } ?>
                        </div>
                        <h4 class="safari-title text-capitalize py-1"><a href="<?php the_permalink(); ?>"><?php the_title(); ?><span class="screen-reader-text"><?php the_title(); ?></span></a></h4>
                        <p class="safari-desc"><?php $jungle_safari_excerpt = get_the_excerpt(); echo esc_html( jungle_safari_string_limit_words( $jungle_safari_excerpt, esc_attr(get_theme_mod('jungle_safari_slider_excerpt_number_post','15')))); ?> <?php echo esc_html(get_theme_mod('jungle_safari_blog_excerpt_suffix1',''));?>
                        </p>
                        <div class="price-section mb-3">
                          <?php if( get_theme_mod('jungle_safari_add_safari_price'.$jungle_safari_i) != ''){ ?>
                            <p class="safari-price"><?php echo esc_html(get_theme_mod('jungle_safari_add_safari_price'.$jungle_safari_i));?></p>
                          <?php }?>
                          <?php if( get_theme_mod('jungle_safari_add_safari_price_text'.$jungle_safari_i) != ''){ ?>
                            <p class="price-text"><?php echo esc_html(get_theme_mod('jungle_safari_add_safari_price_text'.$jungle_safari_i));?></p>
                          <?php }?>
                        </div>
                        <div class="featured-btn text-center">
                          <a href="<?php the_permalink(); ?>" class="text-capitalize"><?php echo esc_html__('book now','jungle-safari') ?></a>
                        </div>
                      </div>
                    </div>
                  <?php endwhile;
                    wp_reset_postdata();
                  endif; ?>
              <?php }
            } ?>
          </div>
        </div>
      </div>
    </section>
  <?php }?>

  <div class="container front-page-content mt-4">
    <?php while ( have_posts() ) : the_post(); ?>
      <div class="new-text"><?php the_content(); ?></div>
    <?php endwhile; // end of the loop. ?>
  </div>
</main>

<?php get_footer(); ?>