<?php
/**
 * Template part for displaying slider section
 *
 * @package Car Auto Parts
 * @subpackage car_auto_parts
 */

// Get the default slider image URL.
$car_auto_parts_static_image = get_stylesheet_directory_uri() . '/assets/images/header_img.png';

// Check if slider arrows option is enabled.
$car_auto_parts_slider_arrows = get_theme_mod('car_auto_parts_slider_arrows', true);
?>

<?php if ($car_auto_parts_slider_arrows) : ?>
  <section id="slider">
    <div class="container">
      <div class="owl-carousel owl-theme">
        <?php 
        // Initialize an array to store selected pages for the slider.
        $car_auto_parts_slide_pages = array();
        
        // Loop through theme modifications to get selected pages.
        for ($car_auto_parts_count = 1; $car_auto_parts_count <= 4; $car_auto_parts_count++) {
          $mod = absint(get_theme_mod('car_auto_parts_slider_page' . $car_auto_parts_count));
          if ($mod != 0) {
            $car_auto_parts_slide_pages[] = $mod;
          }
        }

        // If there are pages to display, set up the query.
        if (!empty($car_auto_parts_slide_pages)) :
          $car_auto_parts_args = array(
            'post_type' => 'page',
            'post__in' => $car_auto_parts_slide_pages,
            'orderby' => 'post__in',
            'posts_per_page' => -1 // Ensure all selected pages are retrieved.
          );
          $car_auto_parts_query = new WP_Query($car_auto_parts_args);

          // Check if the query has posts.
          if ($car_auto_parts_query->have_posts()) :
            while ($car_auto_parts_query->have_posts()) : $car_auto_parts_query->the_post(); ?>
              <div class="item">
                <div class="row">
                  <div class="col-lg-5 col-md-6 col-12 slider-content-col align-self-center">
                    <div class="carousel-caption">
                      <div class="inner_carousel">
                        <?php 
                        // Get the short heading from theme modifications.
                        $car_auto_parts_short_heading = get_theme_mod('car_auto_parts_slider_short_heading', '');
                        if (!empty($car_auto_parts_short_heading)) : ?>
                          <p class="slidetop-text mb-md-1 mt-4 mt-md-0 mb-0"><?php echo esc_html($car_auto_parts_short_heading); ?></p>
                        <?php endif; ?>
                        <?php if (get_theme_mod('car_auto_parts_show_slider_title', true)) : ?>
                          <h1 class="mt-md-2 mb-3"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
                        <?php endif; ?>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-6 col-md-5 col-12 slider-img-col align-self-center">
                    <?php if (has_post_thumbnail()) : ?>
                      <img src="<?php echo esc_url(get_the_post_thumbnail_url(get_the_ID(), 'full')); ?>" alt="<?php the_title_attribute(); ?>" />
                    <?php else : ?>
                      <img src="<?php echo esc_url($car_auto_parts_static_image); ?>" alt="<?php esc_attr_e('Slider Image', 'car-auto-parts'); ?>" />
                    <?php endif; ?>
                  </div>
                  <div class="col-lg-1 col-md-1 col-4 social-box">
                    <div class="text-lg-end text-md-center text-center align-self-center social-area mb-md-0 ps-lg-2">
                      <?php
                      // Retrieve social media links from theme modifications.
                      $car_auto_parts_social_media_facebook = get_theme_mod('car_auto_parts_social_media_facebook');
                      $car_auto_parts_social_media_instagram = get_theme_mod('car_auto_parts_social_media_instagram');
                      $car_auto_parts_social_media_twitter = get_theme_mod('car_auto_parts_social_media_twitter');
                      $car_auto_parts_social_media_linkedin = get_theme_mod('car_auto_parts_social_media_linkedin');

                      // Output social media links while keeping the original structure.
                      if ($car_auto_parts_social_media_facebook != '') { ?>
                        <a target="_blank" href="<?php echo esc_url($car_auto_parts_social_media_facebook); ?>">
                          <i class="fab fa-facebook-f"></i>
                          <span class="screen-reader-text"><?php esc_html_e('Facebook', 'car-auto-parts'); ?></span>
                        </a>
                      <?php }
                      if ($car_auto_parts_social_media_instagram != '') { ?>
                        <a target="_blank" href="<?php echo esc_url($car_auto_parts_social_media_instagram); ?>">
                          <i class="fab fa-instagram"></i>
                          <span class="screen-reader-text"><?php esc_html_e('Instagram', 'car-auto-parts'); ?></span>
                        </a>
                      <?php }
                      if ($car_auto_parts_social_media_twitter != '') { ?>
                        <a target="_blank" href="<?php echo esc_url($car_auto_parts_social_media_twitter); ?>">
                          <i class="fab fa-twitter"></i>
                          <span class="screen-reader-text"><?php esc_html_e('Twitter', 'car-auto-parts'); ?></span>
                        </a>
                      <?php }
                      if ($car_auto_parts_social_media_linkedin != '') { ?>
                        <a target="_blank" href="<?php echo esc_url($car_auto_parts_social_media_linkedin); ?>">
                          <i class="fab fa-linkedin-in"></i>
                          <span class="screen-reader-text"><?php esc_html_e('Linkedin', 'car-auto-parts'); ?></span>
                        </a>
                      <?php } ?>
                    </div>
                  </div>
                </div>
              </div>
            <?php endwhile;
            wp_reset_postdata(); // Reset post data after the custom query.
          else : ?>
            <div class="no-postfound"><?php esc_html_e('No posts found', 'car-auto-parts'); ?></div>
          <?php endif;
        endif; ?>
      </div>
    </div>
    <div class="clearfix"></div>
  </section>
<?php endif; ?>