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

?>
<!-- banner section -->
<main id="maincontent" role="main">
  <?php do_action( 'anime_stream_above_slider' ); ?>
  <?php if (get_theme_mod('anime_stream_hide_show_slider_section', true)) { ?>
    <section class="slider-section position-relative wow fadeInDown">
      <div id="project-slider" class="mw-100 m-auto p-0 position-relative">
        <?php
          $anime_stream_catdata=  get_theme_mod('anime_stream_slider_category');
          if($anime_stream_catdata){
          $anime_stream_page_query = new WP_Query(array(
            'category_name' => esc_html($anime_stream_catdata, 'anime-stream')
          ));  
        ?>         
        <?php while( $anime_stream_page_query->have_posts() ) : $anime_stream_page_query->the_post(); ?>
          <div class="project-box p-2">
            <div class="project-content d-flex align-items-center justify-content-between mb-3">
              <h1 class="project-title text-capitalize mb-0"><a href="<?php the_permalink(); ?>"><?php the_title();?><span class="screen-reader-text"><?php the_title(); ?></span></a></h1>
              <div class="project-btn-box">
                <a href="<?php the_permalink(); ?>" class="project-btn text-capitalize py-1 px-2"><i class="fa-solid fa-comment-dots me-2"></i><?php esc_html_e('view project','anime-stream') ?></a>
                <button class="close-button"><i class="fa-solid fa-xmark"></i></button>
              </div>
            </div>
            <div class="project-img 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', 'anime-stream'); ?>">
              <?php }?>
              <?php
                $anime_stream_content = apply_filters('the_content', get_the_content());
                $anime_stream_video = false;
                if (false === strpos($anime_stream_content, 'wp-playlist-script')) {
                  $anime_stream_video = get_media_embedded_in_content($anime_stream_content, array('video', 'object', 'embed', 'iframe'));
                }
                if (!is_single() && !empty($anime_stream_video)) {
                  foreach ($anime_stream_video as $anime_stream_video_html) {
                    $anime_stream_video_html = str_replace('<video', '<video autoplay muted playsinline loop', $anime_stream_video_html);
                    $anime_stream_video_html = str_replace('controls', '', $anime_stream_video_html);
                    $anime_stream_video_id = 'popup-video-' . get_the_ID();
                ?>
                <!-- Button to trigger popup -->
                <button class="open-video-btn slider-video-btn position-absolute" data-video="slider-popup-video-<?php echo esc_attr(get_the_ID()); ?>"><i class="fa-solid fa-play"></i></button>
                <!-- Hidden popup container -->
                <div id="slider-popup-video-<?php echo esc_attr(get_the_ID()); ?>" class="video-popup-overlay slider-video-popup">
                  <div class="video-popup-box">
                    <span class="close-popup slider-close-popup"><i class="fa-solid fa-xmark"></i></span>
                    <div class="entry-video">
                      <?php echo $anime_stream_video_html; ?>
                    </div>
                  </div>
                </div>
              <?php }}?>
            </div>
          </div>
        <?php endwhile;
          wp_reset_postdata();
        }?>
      </div>
    </section>
  <?php }?>
  <?php do_action( 'anime_stream_below_slider' ); ?>

  <!-- Top Charts Section -->
  <?php if (get_theme_mod('anime_stream_chart_section_hide_show', true)){ ?>
    <section id="top-chart-section" class="pt-5 wow fadeInUp">
      <div class="row">
        <div class="col-lg-11 col-md-11 col-11 align-self-center">
          <div class="top-chart-sec-content">
            <?php if(get_theme_mod('anime_stream_chart_section_title') != '') {?>
              <h2 class="section-title text-capitalize mb-0"><?php echo esc_html(get_theme_mod('anime_stream_chart_section_title')) ?></h2>
            <?php }?>
          </div>
        </div>
        <div class="col-lg-1 col-md-1 col-1 align-self-center d-flex justify-content-end gap-4">
          <div class="cards-swiper-button-prev"><i class="fa-solid fa-chevron-left"></i></div>
          <div class="cards-swiper-button-next"><i class="fa-solid fa-chevron-right"></i></div>
        </div>
      </div>
      <div class="cards-mySwiper mt-4">
        <div class="swiper-wrapper">
          <?php
            $anime_stream_catdata=  get_theme_mod('anime_stream_top_chart_category');
            if($anime_stream_catdata){
            $anime_stream_page_query = new WP_Query(array(
              'category_name' => esc_html($anime_stream_catdata, 'anime-stream')
            ));  
          ?>         
          <?php while( $anime_stream_page_query->have_posts() ) : $anime_stream_page_query->the_post(); ?>
            <div class="top-chart-box swiper-slide pb-3">
              <div class="top-chart-img mb-1 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', 'anime-stream'); ?>">
                <?php }?>
                <div class="card-year position-absolute">
                  <a href="<?php echo esc_url( get_year_link( get_the_date('Y') ) ); ?>">
                    <?php echo esc_html( get_the_date('Y') ); ?>
                    <span class="screen-reader-text"><?php echo esc_html( get_the_date() ); ?></span>
                  </a>
                </div>
                <?php if ( shortcode_exists( 'kkstarratings' ) ) { ?>
                  <div class="card-review position-absolute">
                    <?php echo do_shortcode( '[kkstarratings]' ); ?>
                  </div>
                <?php } ?>
              </div>
              <div class="articles p-2">
                <div class="d-flex justify-content-between gap-2">
                  <h5 class="top-chart-title text-capitalize mb-0"><a href="<?php the_permalink(); ?>"><?php the_title();?><span class="screen-reader-text"><?php the_title(); ?></span></a></h5>
                  <?php if (class_exists('cbxwpbookmark')) { ?>
                    <div class="bookmark">
                      <?php echo do_shortcode('[cbxwpbookmarkbtn]','anime-stream'); ?>
                    </div>
                  <?php } ?>
                </div>
                <p class="post-para mb-4">
                  <?php 
                    $anime_stream_excerpt = get_the_excerpt(); 
                    echo esc_html(wp_trim_words($anime_stream_excerpt, 10)); 
                  ?>
                </p>
                <a href="<?php the_permalink(); ?>" class="card-btn p-2"><i class="fa-solid fa-comment-dots me-2"></i><?php esc_html_e('Learn More','anime-stream'); ?></a>
                <?php
                  $anime_stream_content = apply_filters('the_content', get_the_content());
                  $anime_stream_video = false;
                  if (false === strpos($anime_stream_content, 'wp-playlist-script')) {
                    $anime_stream_video = get_media_embedded_in_content($anime_stream_content, array('video', 'object', 'embed', 'iframe'));
                  }
                  if (!is_single() && !empty($anime_stream_video)) {
                    foreach ($anime_stream_video as $anime_stream_video_html) {
                      $anime_stream_video_html = str_replace('<video', '<video autoplay muted playsinline loop', $anime_stream_video_html);
                      $anime_stream_video_html = str_replace('controls', '', $anime_stream_video_html);
                      $anime_stream_video_id = 'popup-video-' . get_the_ID();
                  ?>
                  <!-- Button to trigger popup -->
                  <button class="open-video-btn chart-video-btn" data-video="chart-popup-video-<?php echo esc_attr(get_the_ID()); ?>"><i class="fa-solid fa-play"></i></button>
                  <!-- Hidden popup container -->
                  <div id="chart-popup-video-<?php echo esc_attr(get_the_ID()); ?>" class="video-popup-overlay chart-video-popup">
                    <div class="video-popup-box">
                      <span class="close-popup chart-close-popup"><i class="fa-solid fa-xmark"></i></span>
                      <div class="entry-video">
                        <?php echo $anime_stream_video_html; ?>
                      </div>
                    </div>
                  </div>
                <?php }}?>
              </div>
            </div>
          <?php endwhile;
            wp_reset_postdata();
          }?>
        </div>
      </div>
    </section>
  <?php }?>
  <?php do_action( 'anime_stream_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(); ?> 