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

?>

<!-- slider section -->
<main id="maincontent" role="main">
  <?php if(get_theme_mod('vw_radio_station_show_hide_banner',true)== 1 || get_theme_mod( 'vw_radio_station_resp_slider_hide_show', true) == 1) { ?>
    <section id="banner" class="position-relative wow bounceInDown delay-1000 py-4" data-wow-duration="3s">
      <div class="container">
        <div class="inner_carousel text-center">
          <div class="banner-content">
            <div class="row">
              <div class="col-xl-2 col-lg-2 col-md-2 col-12 align-self-center text-start banner-video">
                <?php if(get_theme_mod('vw_radio_station_video_button_icon') != '' || get_theme_mod('vw_radio_station_video_button_url') != '') {?>
                  <div class="video-btn">
                    <a id="openBtn">
                     <i class="<?php echo esc_attr(get_theme_mod('vw_radio_station_video_button_icon','fas fa-play')); ?>"></i>
                    </a>
                    <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('vw_radio_station_video_button_url'));?>" frameborder="0" allowfullscreen></iframe>
                      </div>
                    </div>
                  </div>
                <?php }?>
              </div>
              <div class="col-xl-8 col-lg-8 col-md-9 col-12 text-start banner-text">
                <?php if(get_theme_mod('vw_radio_station_banner_title1') != '' || get_theme_mod('vw_radio_station_banner_title2') != '' || get_theme_mod('vw_radio_station_banner_title3') != '' || get_theme_mod('vw_radio_station_banner_title4') != '') { ?>
                  <h1 class="banner-title1 text-capitalize">
                    <?php echo esc_html(get_theme_mod('vw_radio_station_banner_title1')); ?>
                  </h1>
                  <div class="row">
                    <div class="col-xxl-8 col-xl-7 col-lg-7 col-md-7 col-12 align-self-center">
                      <h1 class="banner-title2 text-capitalize">
                        <?php echo esc_html(get_theme_mod('vw_radio_station_banner_title2')); ?>
                      </h1>
                    </div>
                    <div class="col-xxl-4 col-xl-5 col-lg-5 col-md-5 col-12 align-self-center">
                      <?php if ( get_theme_mod('vw_radio_station_img_text') != "") { ?>
                        <div class="review-box d-flex">
                          <span class="img-text mb-0 me-3 text-capitalize">
                            <?php echo esc_html(get_theme_mod('vw_radio_station_img_text')) ?>
                          </span>
                          <?php if ( get_theme_mod('vw_radio_station_heading_img') != "") { ?>
                            <img class="heading-img" src="<?php echo esc_url(get_theme_mod('vw_radio_station_heading_img')); ?>" alt="" title="#slidecaption">
                          <?php } ?>
                        </div>
                      <?php } ?>
                    </div>
                  </div>
                  <h1 class="banner-title3 text-capitalize">
                    <?php echo esc_html(get_theme_mod('vw_radio_station_banner_title3')); ?>
                  </h1>
                  <div class="row bottom-heading">
                    <div class="col-xl-5 col-lg-5 col-md-5 col-12 align-self-center">
                      <?php if ( get_theme_mod('vw_radio_station_add_box_text') != "") { ?>
                        <div class="text-box">
                          <span class="mb-0 text-capitalize"><?php echo esc_html(get_theme_mod('vw_radio_station_add_box_text')) ?></span><i class="fa-solid fa-quote-left ms-4"></i>
                        </div>
                      <?php } ?>
                    </div>
                    <div class="col-xl-7 col-lg-7 col-md-7 col-12 align-self-center">
                      <h1 class="banner-title4 text-capitalize mb-0">
                        <?php echo esc_html(get_theme_mod('vw_radio_station_banner_title4')); ?>
                      </h1>
                    </div>
                  </div>
                <?php } ?>
              </div>
            </div>
          </div>
          <div class="banner-img py-4">
            <?php if ( get_theme_mod('vw_radio_station_featured_image_sec') != "") { ?>
              <img class="heading-img" src="<?php echo esc_url(get_theme_mod('vw_radio_station_featured_image_sec')); ?>" alt="" title="#slidecaption">
            <?php } ?>
          </div>
          <div class="banner-social-icon">
            <?php if (is_active_sidebar('banner-social-icon')) : ?>
              <?php dynamic_sidebar('banner-social-icon'); ?>
              <p class="social-text mb-0"><?php echo esc_html__('Follow Us :', 'vw-radio-station'); ?></p>
            <?php else : ?>
              <div class="widget">
                <div class="custom-social-icons" >
                  <a href="https://youtube.com" target="_blank"><i class="fab fa-youtube"></i></a> 
                  <a href="https://instagram.com" target="_blank"><i class="fab fa-instagram"></i></a> 
                  <a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a> 
                  <a href="https://dribbble.com" target="_blank"><i class="fa-solid fa-basketball"></i></a> 
                  <a href="https://facebook.com" target="_blank"><i class="fab fa-facebook"></i></a>
                </div>
              </div>
              <p class="social-text mb-0"><?php echo esc_html__('Follow Us :', 'vw-radio-station'); ?></p>
            <?php endif; ?>
          </div>
        </div>
      </div>
      <div class="clearfix"></div>
    </section>
  <?php }?>
  <?php do_action( 'vw_radio_station_after_banner' ); ?>

  <!-- Show Time Section -->
  <?php if (get_theme_mod('vw_radio_station_hide_show_show_time_section', true) == 1) {?>
    <section id="showtime-sec" class="py-5">
      <div class="container">
        <div class="about-text text-center">
          <?php if(get_theme_mod('vw_radio_station_special_text') != ''){ ?>
            <p class="mb-2 showtime-text text-capitalize"><?php echo esc_html(get_theme_mod('vw_radio_station_special_text')); ?></p>
          <?php } ?>
          <?php if(get_theme_mod('vw_radio_station_special_heading') != ''){ ?>
            <h3 class="showtime-title text-capitalize"><?php echo esc_html(get_theme_mod('vw_radio_station_special_heading')); ?></h3>
          <?php } ?>
        </div>
        <div class="row py-2">
          <?php
            $vw_radio_station_featured_post = get_theme_mod('vw_radio_station_claases_number');
            for ($vw_radio_station_i=1; $vw_radio_station_i <= $vw_radio_station_featured_post; $vw_radio_station_i++) {
            $vw_radio_station_postData=  get_theme_mod('vw_radio_station_services_category'.$vw_radio_station_i);
            if($vw_radio_station_postData){ ?>
              <?php
                $vw_radio_station_args = array(
                  'p' => esc_html($vw_radio_station_postData ,'vw-radio-station'),
                  'posts_per_page' => 1,
                  'post_type' => 'post'
                );
                $vw_radio_station_query = new WP_Query( $vw_radio_station_args );
                if ( $vw_radio_station_query->have_posts() ) :
                  while ( $vw_radio_station_query->have_posts() ) : $vw_radio_station_query->the_post(); ?>
                  <div class="col-xl-3 col-lg-4 col-md-6 col-12 text-center show-box my-3">
                    <div class="position-relative">
                      <div class="classes-inner-box">
                        <?php if(has_post_thumbnail()){ ?>
                          <?php the_post_thumbnail(); ?>
                        <?php } else {?>
                          <img src="<?php echo esc_url(get_template_directory_uri()) ?>/assets/images/default-post.png" alt="<?php echo esc_attr('Post Image', 'vw-radio-station'); ?>">
                        <?php }?>
                      </div>
                      <div class="show-content position-absolute p-3">
                        <h4 class="show-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?><span class="screen-reader-text"><?php the_title(); ?></span></a></h4>
                        <div class="show-detail">
                          <?php if( get_theme_mod('vw_radio_station_add_show_date'.$vw_radio_station_i) != ''){ ?>
                            <p class="showdate mb-1"><i class="fa-solid fa-calendar-days me-2"></i><?php echo esc_html(get_theme_mod('vw_radio_station_add_show_date'.$vw_radio_station_i));?></p>
                          <?php }?>
                          <?php if( get_theme_mod('vw_radio_station_add_show_time'.$vw_radio_station_i) != ''){ ?>
                            <p class="showtime mb-1"><i class="fa-solid fa-clock me-2"></i><?php echo esc_html(get_theme_mod('vw_radio_station_add_show_time'.$vw_radio_station_i));?></p>
                          <?php }?>
                        </div>
                        <p class="mb-0 showsec-desc mt-2">
                          <?php 
                            $vw_radio_station_excerpt = get_the_excerpt(); 
                            echo esc_html(wp_trim_words($vw_radio_station_excerpt, 20)); 
                          ?>
                        </p>
                      </div>
                    </div>
                  </div>
                <?php endwhile;
                  wp_reset_postdata();
                endif; ?>
            <?php }
          } ?>
        </div>
      </div>
    </section>
  <?php }?>

  <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(); ?> 