<?php 
/**
 * Template part for displaying Featured About Section
 *
 * @package Architecture Construction
 */
$architecture_construction_work_tab_title = get_theme_mod('architecture_construction_work_tab_title', __('How It Works', 'architecture-construction'));
    $architecture_construction_work_tab_steps = array();
    for ($i = 1; $i <= 3; $i++) {
        $architecture_construction_step = get_theme_mod('architecture_construction_work_tab_step_' . $i, '');
        if (!empty($architecture_construction_step)) {
            $architecture_construction_work_tab_steps[] = $architecture_construction_step;
        }
    }
$architecture_construction_about      = get_theme_mod( 'architecture_construction_about_setting',false );
$architecture_construction_featured_mission_section_title      = get_theme_mod( 'architecture_construction_featured_mission_section_title' );
$architecture_construction_featured_mission_section_text       = get_theme_mod( 'architecture_construction_featured_mission_section_text' );
$architecture_construction_number_of_featured_mission_items    = get_theme_mod( 'architecture_construction_number_of_featured_mission_items' );

$architecture_construction_featured_mission_posts = [];
for( $i=1; $i<=$architecture_construction_number_of_featured_mission_items; $i++ ) :
    $architecture_construction_featured_mission_posts[] = get_theme_mod( 'architecture_construction_featured_mission_post_'.$i );
endfor; ?>
<?php if ( $architecture_construction_about ){?>
<div id="about-section" class="section-content py-5">
    <div class="container">
        <?php if( !empty($architecture_construction_featured_mission_section_title) ): ?>
            <div class="section-title mb-5 text-center">
                <i class="fas fa-hard-hat"></i>
                <h6><?php echo esc_html($architecture_construction_featured_mission_section_text); ?></h6>
                <h3><?php echo esc_html($architecture_construction_featured_mission_section_title); ?></h3>
            </div>
        <?php endif; ?>
        <div class="tabs">
            <ul class="tabs-nav">
                <?php for( $i=1; $i<=$architecture_construction_number_of_featured_mission_items; $i++ ) : ?>
                    <li class="tabs-nav-box"><a href="<?php echo('#tab-').$i ?>"><?php if( !empty( get_theme_mod( 'architecture_construction_featured_mission_section_tab_icon_'.$i ) ) ): ?><i class="<?php echo esc_html( get_theme_mod( 'architecture_construction_featured_mission_section_tab_icon_'.$i ) ); ?>"></i><?php endif; ?><?php echo esc_html( get_theme_mod( 'architecture_construction_featured_mission_section_tab_'.$i ) ); ?></a></li>
                <?php endfor; ?> 
            </ul>
            <?php
            $args = array (
                'post_type'     => 'page',
                'posts_per_page' => absint( $architecture_construction_number_of_featured_mission_items ),
                'post__in'      => $architecture_construction_featured_mission_posts,
                'orderby'       => 'post__in',
                'ignore_sticky_posts' => true,
            );

            $architecture_construction_default_image_url = get_template_directory_uri() . '/images/default_img.png';

            $loop = new WP_Query($args);
            if ( $loop->have_posts() ) :
                $i = 0; $j = 0; 
                while ($loop->have_posts()) : $loop->the_post(); $i++; $j++; ?>
                <div class="tabs-stage">
                    <div id="<?php echo('tab-').$i ?>" class="featured-mission-box">
                        <div class="row">
                            <div class="col-lg-5 col-md-5 align-self-center">
                                <div class="image-container wow zoomInUp delay-1000" data-wow-duration="2s">
                                    <?php 
                                    if (has_post_thumbnail( $post->ID )) {
                                        the_post_thumbnail(); 
                                    } else { ?>
                                        <img src="<?php echo esc_url($architecture_construction_default_image_url); ?>" alt="<?php the_title(); ?>">
                                    <?php } ?>
                                </div>
                            </div>
                            <div class="col-lg-7 col-md-7 align-self-center">
                                <header class="entry-header">
                                    <h4 class="entry-title"><a href="<?php the_permalink();?>"><?php the_title();?></a></h4>
                                </header>
                                <div class="entry-content">
                                    <p class="mb-0"><?php echo wp_trim_words( get_the_content(), 50 ); ?></p>
                                </div>
                                <div class="btn-abount-green my-4">
                                    <a href="<?php the_permalink(); ?>">
                                        <?php esc_html_e('Know More','architecture-construction'); ?> <i class="fas fa-arrow-right"></i>
                                    </a>
                                </div>

                                <div class="work-tab">
                                    <h5><?php echo esc_html($architecture_construction_work_tab_title); ?></h5>
                                    <ul class="working-tab-all">
                                        <?php foreach ($architecture_construction_work_tab_steps as $index => $architecture_construction_step) : ?>
                                            <li class="d-flex">
                                                <span class="count"><?php echo esc_html($index + 1); ?></span>
                                                <p><?php echo esc_html($architecture_construction_step); ?></p>
                                            </li>
                                        <?php endforeach; ?>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endwhile; ?>
            <?php endif; ?>
            <?php wp_reset_postdata(); ?>
        </div>
    </div>
</div>

<?php } ?>