<?php
/**
 * Template part for displaying product section
 *
 * @package Amusement Park
 * @subpackage amusement_park
 */
?>
<?php $amusement_park_static_image = get_stylesheet_directory_uri() . '/assets/images/header_img.png'; ?>
<section id="about">
  <div class="container py-5">
    <?php if (get_theme_mod('amusement_park_about_short_heading') != '') { ?>
      <h2 class="text-center mb-5"><?php echo esc_html(get_theme_mod('amusement_park_about_short_heading', '')); ?></h2>
    <?php } ?>
    <div class="row">
      <?php
      $amusement_park_about_page = array();
      $amusement_park_mod = absint(get_theme_mod('amusement_park_about_page'));
      if ('page-none-selected' != $amusement_park_mod) {
        $amusement_park_about_page[] = $amusement_park_mod;
      }
      if (!empty($amusement_park_about_page)) :
        $amusement_park_args = array(
          'post_type' => 'page',
          'post__in' => $amusement_park_about_page,
          'orderby' => 'post__in'
        );
        $amusement_park_query = new WP_Query($amusement_park_args);
        if ($amusement_park_query->have_posts()) :
          while ($amusement_park_query->have_posts()) : $amusement_park_query->the_post(); ?>
            <div class="col-lg-5 col-md-6 about-img align-self-center px-md-0 position-relative">
              <?php if (has_post_thumbnail()) { ?>
                <img src="<?php the_post_thumbnail_url('full'); ?>" />
              <?php } else { ?>
                <img src="<?php echo esc_url($amusement_park_static_image); ?>" />
              <?php } ?>
              <div class="rating-col">
                <div class="row">
                  <div class="col-lg-5 col-md-6 col-6 align-self-center px-0 position-relative">
                    <?php 
                    $amusement_park_selected_category = get_theme_mod('amusement_park_about_catData', 'select');
                    if ($amusement_park_selected_category != 'select') { ?>
                      <div class="abt-cat">
                        <div class="owl-carousel m-0">
                          <?php
                          $amusement_park_abtpage_query = new WP_Query(array(
                            'category_name' => esc_attr($amusement_park_selected_category),
                            'posts_per_page' => -1,
                          ));
                          if ($amusement_park_abtpage_query->have_posts()) :
                            while ($amusement_park_abtpage_query->have_posts()) : $amusement_park_abtpage_query->the_post(); ?>
                              <div class="abt-imagebox">
                                <?php if (has_post_thumbnail()) { ?>
                                  <img src="<?php the_post_thumbnail_url(); ?>" />
                                <?php } else { ?>
                                  <img src="<?php echo esc_url($amusement_park_static_image); ?>" />
                                <?php } ?>
                              </div>
                            <?php endwhile;
                            wp_reset_postdata();
                          else : ?>
                            <p><?php esc_html_e('No posts found in this category.', 'amusement-park'); ?></p>
                          <?php endif; ?>
                        </div>
                      </div>
                    <?php } ?>
                  </div>
                  <div class="col-lg-6 col-md-6 col-6 align-self-center px-0 text-center">
                    <?php if (get_theme_mod('amusement_park_customer_review') != '') { ?>
                      <div class="customzer-rating">
                        <span class="text-center pe-lg-3"><?php echo esc_html(get_theme_mod('amusement_park_customer_review', '')); ?></span>
                      <?php
                      $amusement_park_customer_rating = get_theme_mod('amusement_park_customer_rating', '');
                      if (!empty($amusement_park_customer_rating)) { ?>
                        <span class="star-rating my-3">
                          <?php for ($amusement_park_i = 1; $amusement_park_i <= 5; $amusement_park_i++) {
                            if ($amusement_park_i <= $amusement_park_customer_rating) {
                              echo '<i class="fas fa-star"></i>';
                            } else {
                              echo '<i class="far fa-star"></i>';
                            }
                          } ?>
                        </span>
                      <?php } ?>
                      <svg class="svg-border">
                        <rect class="dashed-border" x="0" y="0" width="100%" height="100%" rx="12" ry="12"/>
                      </svg>
                    </div>

                      <?php } ?>
                  </div>
                  <div class="col-lg-1"></div>
                </div>
              </div>
              <?php if(get_theme_mod('amusement_park_image_text') != ''){ ?>
                <div class="image-outerbox">
                  <div class="image-text">
                    <div class="no-years"><?php echo esc_html(get_theme_mod('amusement_park_image_text')); ?></div>
                    <div class="pt-2"><?php esc_html_e('Years', 'amusement-park'); ?></div>
                  </div>
                </div>
              <?php }?>
            </div>
          <?php endwhile; ?>
          <div class="col-lg-7 col-md-6 about-box align-self-center px-md-0">
            <div class="px-4 py-5">
              <?php while ($amusement_park_query->have_posts()) : $amusement_park_query->the_post(); ?>
                <p class="about-content"><?php echo wp_trim_words(get_the_content(), 70); ?></p>
                <div class="abt-btn mt-3 text-end">
                  <a href="<?php the_permalink(); ?>"><?php esc_html_e('Read More', 'amusement-park'); ?></a>
                </div>
              <?php endwhile; ?>
              <?php wp_reset_postdata(); ?>
            </div>
          </div>
        <?php else : ?>
          <div class="no-postfound"></div>
        <?php endif; ?>
      <?php endif; ?>
      <div class="clearfix"></div>
    </div>
  </div>
</section>
