<?php
/**
 * Template part for displaying slider section
 *
 * @package Interior Design Studio
 */

$interior_design_studio_static_image = get_stylesheet_directory_uri() . '/assets/images/header_img.png';
?>

<?php if (get_theme_mod('interior_design_studio_slider_arrows', true)) : ?>
<section id="main-slider">
        <div id="slider">
            <div id="owl-carousel" class="owl-carousel">
                <?php
                $interior_design_studio_slide_pages = [];
                for ($interior_design_studio_count = 1; $interior_design_studio_count <= 4; $interior_design_studio_count++) {
                    $interior_design_studio_mod = (int) get_theme_mod('interior_design_studio_slider_page' . $interior_design_studio_count);
                    if ($interior_design_studio_mod && $interior_design_studio_mod !== 'page-none-selected') {
                        $interior_design_studio_slide_pages[] = $interior_design_studio_mod;
                    }
                }

                if (!empty($interior_design_studio_slide_pages)) :
                    $interior_design_studio_args = [
                        'post_type' => 'page',
                        'post__in' => $interior_design_studio_slide_pages,
                        'orderby' => 'post__in',
                    ];
                    $interior_design_studio_query = new WP_Query($interior_design_studio_args);

                    if ($interior_design_studio_query->have_posts()) :
                        while ($interior_design_studio_query->have_posts()) :
                            $interior_design_studio_query->the_post();
                            ?>
                            <div class="item">
                                <!-- Slider Image -->
                                <div class="slider-mainimg">
                                    <?php if (has_post_thumbnail()) : ?>
                                        <img src="<?php echo esc_url(get_the_post_thumbnail_url(null, 'full')); ?>" alt="<?php the_title(); ?>">
                                    <?php else : ?>
                                        <img src="<?php echo esc_url($interior_design_studio_static_image); ?>" alt="<?php esc_attr_e('Default Image', 'interior-design-studio'); ?>">
                                    <?php endif; ?>
                                </div>

                                <div class="carousel-caption">
                                  <div class="inner_carousel">
                                      <?php if (get_theme_mod('interior_design_studio_slider_short_heading')) : ?>
                                          <p class="slidetop-text m-0"><?php echo esc_html(get_theme_mod('interior_design_studio_slider_short_heading')); ?></p>
                                      <?php endif; ?>
                                      <?php if (get_theme_mod('interior_design_studio_show_slider_title', true)) : ?>
                                        <h1><a href="<?php the_permalink(); ?>"><?php echo esc_html( get_the_title() ); ?></a></h1>
                                      <?php endif; ?>
                                      <?php if (get_theme_mod('interior_design_studio_show_slider_content', true)) : ?>
                                          <p class="mb-0 slider-content">
                                              <?php $interior_design_studio_excerpt = get_the_excerpt(); echo esc_html( interior_design_studio_string_limit_words( $interior_design_studio_excerpt, esc_attr(get_theme_mod('interior_design_studio_slider_excerpt_length','30')))); ?>
                                          </p>
                                        <?php endif; ?>
                                      <div class="more-btn mt-4">
                                        <a class="text-capitalize me-2 mb-3 slider-btn1" href="<?php the_permalink(); ?>" target="_blank">
                                            <?php esc_html_e( 'Explore Design Ideas', 'interior-design-studio' ); ?>
                                        </a>
                                      </div>
                                  </div>
                                </div>
                            </div>
                        <?php endwhile;
                        wp_reset_postdata(); ?>
                    <?php else : ?>
                        <div class="no-postfound">
                            <p><?php esc_html_e('No posts found', 'interior-design-studio'); ?></p>
                        </div>
                    <?php endif; ?>
                <?php endif; ?>
            </div>
        </div>
        <?php
        // Declare variables with default values.
        $interior_design_studio_social_media_facebook = get_theme_mod('interior_design_studio_social_media_facebook', '');
        $interior_design_studio_social_media_twitter = get_theme_mod('interior_design_studio_social_media_twitter', '');
        $interior_design_studio_social_media_instagram = get_theme_mod('interior_design_studio_social_media_instagram', '');
        $interior_design_studio_social_media_linkedin = get_theme_mod('interior_design_studio_social_media_linkedin', '');

        // Check if at least one social media link is available.
        $interior_design_studio_has_social_icons = $interior_design_studio_social_media_facebook || 
            $interior_design_studio_social_media_twitter || 
            $interior_design_studio_social_media_instagram || 
            $interior_design_studio_social_media_linkedin;
        ?>

        <div class="social-box">
            <div class="social-area <?php echo $interior_design_studio_has_social_icons ? 'has-icons' : ''; ?>">
                <?php if ($interior_design_studio_social_media_facebook): ?>
                    <a target="_blank" href="<?php echo esc_url($interior_design_studio_social_media_facebook); ?>">
                        <i class="fab fa-facebook-f"></i>
                        <span class="screen-reader-text"><?php esc_html_e('Facebook', 'interior-design-studio'); ?></span>
                    </a>
                <?php endif; ?>

                <?php if ($interior_design_studio_social_media_twitter): ?>
                    <a target="_blank" href="<?php echo esc_url($interior_design_studio_social_media_twitter); ?>">
                        <i class="fab fa-twitter"></i>
                        <span class="screen-reader-text"><?php esc_html_e('Twitter', 'interior-design-studio'); ?></span>
                    </a>
                <?php endif; ?>

                <?php if ($interior_design_studio_social_media_instagram): ?>
                    <a target="_blank" href="<?php echo esc_url($interior_design_studio_social_media_instagram); ?>">
                        <i class="fab fa-instagram"></i>
                        <span class="screen-reader-text"><?php esc_html_e('Instagram', 'interior-design-studio'); ?></span>
                    </a>
                <?php endif; ?>

                <?php if ($interior_design_studio_social_media_linkedin): ?>
                    <a target="_blank" href="<?php echo esc_url($interior_design_studio_social_media_linkedin); ?>">
                        <i class="fab fa-linkedin-in"></i>
                        <span class="screen-reader-text"><?php esc_html_e('LinkedIn', 'interior-design-studio'); ?></span>
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>
<?php endif; ?>