<?php 
/**
 * Template part for displaying Featured Mission Section
 *
 * @package Prime Beauty Salon
 */
    $prime_beauty_salon_featured_mission_section_title      = prime_beauty_salon_get_option( 'prime_beauty_salon_featured_mission_section_title' );
    $prime_beauty_salon_featured_mission_section_text      = prime_beauty_salon_get_option( 'prime_beauty_salon_featured_mission_section_text' );
    $prime_beauty_salon_number_of_featured_mission_items     = prime_beauty_salon_get_option( 'prime_beauty_salon_number_of_featured_mission_items' );
    $prime_beauty_salon_default_image_path2 = get_template_directory_uri() . '/assets/images/feature-right.png';
    $prime_beauty_salon_default_image_path1 = get_template_directory_uri() . '/assets/images/featureright.png';

    for( $i=1; $i<=$prime_beauty_salon_number_of_featured_mission_items; $i++ ) :
        $prime_beauty_salon_featured_mission_posts[] = prime_beauty_salon_get_option( 'prime_beauty_salon_featured_mission_post_'.$i );
    endfor; ?>

    <div id="mission-section" class="section-content">
        <div class="tabs">
            <?php if( !empty($prime_beauty_salon_featured_mission_section_title) ): ?>
                <div class="section-title">
                    <h4><?php echo esc_html($prime_beauty_salon_featured_mission_section_title); ?></h4>
                </div>
            <?php endif;
            if( !empty($prime_beauty_salon_featured_mission_section_text) ): ?>
                <div class="section-title">
                    <p><?php echo esc_html($prime_beauty_salon_featured_mission_section_text); ?></p>
                </div>
            <?php endif; ?>

            <ul class="tabs-nav">
                <?php for( $i=1; $i<=$prime_beauty_salon_number_of_featured_mission_items; $i++ ) : ?>
                    <li class="tabs-nav-box"><a href="<?php echo('#tab-').$i ?>"><?php echo esc_html( prime_beauty_salon_get_option( 'prime_beauty_salon_featured_mission_section_tab_'.$i ) ); ?></a></li>
                <?php endfor; ?> 
            </ul>
            <?php $args = array (
                'post_type'     => 'page',
                'posts_per_page' => absint( $prime_beauty_salon_number_of_featured_mission_items ),
                'post__in'      => $prime_beauty_salon_featured_mission_posts,
                'orderby'       =>'post__in',
                'ignore_sticky_posts' => true,
            );?>
            <?php
            $loop = new WP_Query($args);
            if ( $loop->have_posts() ) :
            $i=0; $j=0; 
                while ($loop->have_posts()) : $loop->the_post(); $i++; $j++; ?>
                <article>
                    <div class="tabs-stage">
                        <div id="<?php echo('tab-').$i ?>" class="featured-mission-box">
                            <div class="featured-mission-item">
                                <div class="content-image>
                                    <?php if (has_post_thumbnail( $post->ID ) ): ?>
                                        <?php the_post_thumbnail(); ?>
                                    <?php else: ?>
                                        <img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/feature-left.png' ); ?>" alt="Default Image">
                                    <?php endif; ?>
                                </div>
                                <div class="content-details">
                                    <div class="entry-content">
                                        <?php
                                            $prime_beauty_salon_excerpt = prime_beauty_salon_the_excerpt( 50 );
                                            echo wp_kses_post( wpautop( $prime_beauty_salon_excerpt ) );
                                        ?>
                                    </div><!-- .entry-content --> 
                                </div>
                            </div><!-- .featured-mission-item -->
                        </div>
                    </div>
                </article>
            <?php endwhile; ?>
            <?php endif; ?>
            <?php wp_reset_postdata(); ?>
        </div>

        <?php
        $prime_beauty_salon_image_path1 = get_theme_mod('prime_beauty_salon_image_path1');

        $prime_beauty_salon_image_path2 = get_theme_mod('prime_beauty_salon_image_path2');
        ?>

        <div class="center_image mt-5">
            <figure class="cd-image-container wow zoomInUp delay-1000" data-wow-duration="2s">
                <?php if( !empty($prime_beauty_salon_image_path1) ): ?>
                    <img src="<?php echo esc_url($prime_beauty_salon_image_path1); ?>" alt="Your Image">
                    <span class="cd-image-label" data-type="original"></span>
                <?php else: ?>
                    <img src="<?php echo esc_url($prime_beauty_salon_default_image_path1); ?>" alt="Default Image 1">
                    <span class="cd-image-label" data-type="original"></span>
                <?php endif; ?>

                <div class="cd-resize-img">
                    <?php if( !empty($prime_beauty_salon_image_path2) ): ?>
                        <img src="<?php echo esc_url($prime_beauty_salon_image_path2); ?>" alt="Your Image">
                        <span class="cd-image-label" data-type="modified"></span>
                    <?php else: ?>
                        <img src="<?php echo esc_url($prime_beauty_salon_default_image_path2); ?>" alt="Default Image 2">
                        <span class="cd-image-label" data-type="modified"></span>
                    <?php endif; ?>
                </div>

                <span class="cd-handle"></span>
            </figure>
        </div>
    </div><!-- .section-content -->