<?php
/**
 *
 * @package LZ Premium
 */
if(get_theme_mod('lz_fitness_premium_oursteps_section_disable') != 'on' ){?>
	<section id="oursteps-content-section" class="ht-section">
		<div class="container">
			<div class="row">
				<?php
				$showStatic = true;
				for( $i = 1; $i < 6; $i++ ){
					$lz_fitness_oursteps_page_id = get_theme_mod('lz_fitness_oursteps_page'.$i); 
					if(!empty($lz_fitness_oursteps_page_id)){
						$showStatic = false;
						break;
					}
				}
				// $lz_fitness_oursteps_page_id = get_theme_mod('lz_fitness_oursteps_page');
				$lz_fitness_oursteps_title = get_theme_mod('lz_fitness_oursteps_title', 'OUR STEPS');
					
				?>

				<div class="col-md-12">
					<!-- <div class=""> -->
						

							<div class="ht-section-title-tagline">
								<h2 class="ht-section-title lz-oursteps-heading">
									<?php
									if(!empty($lz_fitness_oursteps_title))	{
										echo ($lz_fitness_oursteps_title);
									} ?>
								</h2>
								<div class="dlab-separator-outer m-b0">
					                <div class="dlab-separator text-primary style-icon"></div>
					            </div>
					            <div class="clearfix"></div>
							</div>
								<!-- <div class="skill-post-wrap"> -->
									<?php
									$cols = get_theme_mod('lz_fitness_oursteps_npp_count', 3);
									$cols++;
							// echo '$cold: '.$cols;
									switch($cols){
										case 1:
										$colCls = 'col-md-12 col-sm-12';
										break;
										case 2:
										case 3:
										case 4:
										case 5:
										case 6:
										$colCls = 'col-md-12 col-sm-12';
										break;
										default: 
										$colCls = 'col-md-12 col-sm-12'; 
										break;
									}
									$icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
									?>
									<div class="roadmap-outer">
										<?php
										for( $i = 1; $i <= $cols; $i++ ){
											if($showStatic === false){
												$lz_fitness_oursteps_page_id = get_theme_mod('lz_fitness_oursteps_page'.$i);
												$lz_fitness_oursteps_page_number = get_theme_mod('lz_fitness_oursteps_page_number_'.$i, '01');
												
												if($lz_fitness_oursteps_page_id){
													$args = array( 
														'page_id' => absint($lz_fitness_oursteps_page_id) 
													);
													$query = new WP_Query($args);
													if( $query->have_posts() ):
														while($query->have_posts()) : $query->the_post();
												
												?>

												<div class="<?php echo $colCls;?> roadmap stepheight">
													<div class="roadmap-icon wow fadeIn" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeIn;">
															<span class="year"><?php echo $lz_fitness_oursteps_page_number; ?></span>
														</div>
														<div class="roadmap-content wow fadeInRight" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInRight;">	
															<h2><?php the_title(); ?></h2>
															<p><?php 
																if(has_excerpt()){
																	echo get_the_excerpt();
																}else{
																	echo lz_fitness_excerpt( get_the_content(), 120); 
																}?></p>
														</div>							
															<div class="clearfix"></div>
													</div>

													<?php
															endwhile;
														endif;	
														wp_reset_postdata();
													}
																	
												}else{?>
													<div class="<?php echo $colCls;?> roadmap stepheight">
													<div class="roadmap-icon wow fadeIn" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeIn;">
															<span class="year">01</span>
														</div>
														<div class="roadmap-content wow fadeInRight" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInRight;">	
															<h2>Marketing</h2>
															<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia mi ultrices, luctus nunc ut, commodo enim. Vivamus sem erat.</p>
														</div>							
															<div class="clearfix"></div>
													</div>
											<?php }

										}?>
										<div class="clearfix"></div>
									</div>
								<!-- </div> -->
							
						<!-- </div> -->
						<div class="clearfix"></div>
					</div>

						

				</div>
				<!-- <div class="clearfix"></div> -->
			</div>
			<div class="clearfix"></div>
		</section>
		<script>
		  jQuery.noConflict();
		  $(function(){
		    function stepheightHeight(){
		      var ht = 0;
		      $('#oursteps-content-section .roadmap-content h2').each(function(i){
		        var tHt = $(this).height();
		        if(ht<tHt){
		          ht=tHt;
		        }
		      });
		      $('#oursteps-content-section .roadmap-content h2').height(ht+'px');
		    }
		    stepheightHeight();
		  });
		  $( window ).resize(function(){
		    stepheightHeight();
		  });
		</script>

	<?php }