<?php 
/**
 * Template part for displaying Featured About Section
 *
 * @package Safety Wear
 */

$safety_wear_about      = get_theme_mod( 'safety_wear_about_setting',false );
$safety_wear_number_of_featured_mission_items    = get_theme_mod( 'safety_wear_number_of_featured_mission_items' ); ?>

<?php if ( $safety_wear_about ){?>
<div id="about-section" class="section-content py-5">
        <?php
         $safety_wear_featured_mission_section_title = get_theme_mod( 'safety_wear_featured_mission_section_title' );?>
            <div class="section-title mb-5 text-center">
                <?php if( $safety_wear_featured_mission_section_title ) { ?>
                    <h3><?php echo esc_html($safety_wear_featured_mission_section_title); ?></h3>
                    <img role="img" src="<?php echo esc_url(get_template_directory_uri() . '/images/headline.png'); ?>" alt="<?php esc_attr_e( 'Headline Image','safety-wear' );?>">
                <?php } ?>
            </div>
       
        <div class="tabs">
            <ul class="tabs-nav">
                <?php for( $i=1; $i<=$safety_wear_number_of_featured_mission_items; $i++ ) : ?>
                    <li class="tabs-nav-box"><a href="<?php echo('#tab-').$i ?>"><?php echo esc_html( get_theme_mod( 'safety_wear_featured_mission_section_tab_'.$i ) ); ?></a></li>
                <?php endfor; ?>
            </ul>
            <div class="tabs-stage">
                <?php for( $i=1; $i<=$safety_wear_number_of_featured_mission_items; $i++ ) : ?>
                    <div id="<?php echo('tab-').$i ?>" class="featured-mission-box">
                        <?php 
                            $safety_wear_catergory_name = get_theme_mod('safety_wear_trending_post_slider_args_' . $i);
                            $args = array(
                                'post_type'           => 'post',
                                'category_name'       => $safety_wear_catergory_name,
                                'orderby'             => 'post__in',
                                'ignore_sticky_posts' => true,
                            );?>
                            <div class="row m-0"><?php
                            $loop = new WP_Query($args);
                            if ( $loop->have_posts() ) :
                                while ($loop->have_posts()) : $loop->the_post(); ?>
                                    <div class="col-lg-3 col-md-4 align-self-center px-0">
                                        <div class="box wow zoomInUp delay-1000" data-wow-duration="2s">
                                            <?php
                                                if ( has_post_thumbnail() ) : ?>
                                                    <div class="image-container">
                                                  <?php the_post_thumbnail();?>
                                                  </div>
                                                <?php else:
                                                  ?>
                                                  <div class="image-container">
                                                    <img src="<?php echo get_stylesheet_directory_uri() . '/images/tab-img.jpg'; ?>">
                                                  </div>
                                                  <?php
                                                endif;
                                              ?>
                                            <div class="box-content">
                                                <h4 class="title"><a href="<?php the_permalink();?>"><?php the_title();?></a></h4></div>
                                        </div>
                                        </div>
                                <?php endwhile;
                            endif;
                        ?>
                        </div>
                    </div>
                <?php endfor; ?>
            </div>
        </div>
</div>
<?php } ?>