<?php
/**
*
* @package luzuk Premium
*/

if(get_theme_mod('luzuk_premium_oursteps_disable') != 'on' ){ ?>
	<?php 
	if( get_theme_mod('oursteps_areaTpadding',true) ) {
		$oursteps_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('oursteps_areaTpadding')).';';
	}
	if( get_theme_mod('oursteps_areaBpadding',true) ) {
		$oursteps_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('oursteps_areaBpadding')).';';
	}
	if( get_theme_mod('oursteps_areaLpadding',true) ) {
		$oursteps_areaLpadding = 'padding-left:'.esc_attr(get_theme_mod('oursteps_areaLpadding')).';';
	}
	if( get_theme_mod('oursteps_areaRpadding',true) ) {
		$oursteps_areaRpadding = 'padding-right:'.esc_attr(get_theme_mod('oursteps_areaRpadding')).';';
	}
	
	?>	

	<section id="oursteps" > 
		<?php
		$showStatic = true;
		for( $i = 1; $i < 9; $i++ ){
			$url = get_theme_mod('luzuk_oursteps_page_url_'.$i, '#');
			$link = get_theme_mod('luzuk_oursteps_page_link'.$i);
			$luzuk_oursteps_page_id = get_theme_mod('luzuk_oursteps_page_icon'.$i); 
			if(!empty($luzuk_oursteps_page_id)){
				$showStatic = false;
				break;
			}
		}
			$oursteps_title = get_theme_mod('oursteps_title', 'OUR STEPS');
			$oursteps_subtitle = get_theme_mod('oursteps_subtitle', 'OUR STEPS');
		?>

	 	<div class="container">
				<div class="row justify-content-center m-0">
					<?php if($oursteps_title || $oursteps_subtitle ){ ?>	
						<div class="section-title">
								<h2><?php echo ($oursteps_title); ?></h2>
								<h3><?php echo ($oursteps_subtitle); ?></h3>
						</div>
					<?php }?>
				</div>		
	 	</div> 
			
		<div class="container">		
			<div class="col-md-12 oursteps-post-wrap">
				<div class="row row-eq-height m-0">
				<?php
					$cols = get_theme_mod('luzuk_oursteps_npp_count', 3);
					$cols++;

					switch($cols){
						case 1:
						$colCls = 'col-lg-12 col-md-12 col-sm-12';
						break;
						case 2:	
						$colCls = 'col-lg-6 col-md-6 col-sm-6';
						break;
						case 3:
						case 5:
						case 6:
						case 9:
						case 11:
						case 13:
						case 15:
						$colCls = 'col-lg-4 col-md-4 col-sm-6';
						break;
						default: 
						$colCls = 'col-lg-3 col-md-4 col-sm-6';
						break;
					}
					$icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
				?>
				<?php
				for( $i = 1; $i <= $cols; $i++ ){
					if($showStatic === false){
						$url = get_theme_mod('luzuk_oursteps_page_url_'.$i, '#');

						$luzuk_oursteps_page_numtitle = get_theme_mod('luzuk_oursteps_page_numtitle'.$i, '01');
						$luzuk_oursteps_page_title = get_theme_mod('luzuk_oursteps_page_title_'.$i, 'MEET CUSTOMERS');
						$luzuk_oursteps_page_id = get_theme_mod('luzuk_oursteps_page'.$i); 
						$luzuk_oursteps_page_icon = get_theme_mod('luzuk_oursteps_page_icon'.$i);
						if($luzuk_oursteps_page_icon){
				?>
					<div class="<?php echo $colCls;?> oursteps-bx">
						<div class="oursteps-post">
							<div class="Numrical">
								<h3><?php echo $luzuk_oursteps_page_numtitle; ?></h3>
							</div>
							<div class="oursteps-icon">
								<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
									<span class="<?php echo $luzuk_oursteps_page_icon; ?>"></span>
								</a>
							</div>
							<div class="details">
								<a href="<?php echo esc_url(!empty($url)?$url:'#');?>"><h5 class="title"><?php echo $luzuk_oursteps_page_title; ?></h5></a>

								<?php
								$luzuk_oursteps_page_id = get_theme_mod('luzuk_oursteps_page');
								$luzuk_oursteps_page_button_title = get_theme_mod('luzuk_oursteps_page_button_title_'.$i, 'Read More');
								?>
								<?php if( get_theme_mod('oursteps_button_display','show' ) == 'show') :
									?>
									<div class="oursteps-button">
										<a href="<?php echo esc_url(!empty($url)?$url:'#');?>" class="blue">
											<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
										</a>
									</div>
								<?php endif ?>	
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
					<?php
							}
						}else{?>
					<div class="<?php echo $colCls;?> oursteps-bx">
						<div class="oursteps-post">
							<div class="Numrical">
								<h3>01</h3>
							</div>
							<div class="oursteps-icon">
								<a href="#"><span class="fa fa-user-o"></span></a>
							</div>
							<div class="details">
								<a href="#"><h5 class="title">MEET CUSTOMERS</h5></a>
								<?php if( get_theme_mod('oursteps_button_display','show' ) == 'show') :
									?>
									<div class="oursteps-button">
										<a href="#" class="blue"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
									</div>
								<?php endif ?>	
							</div>
							<div class="clearfix"></div>		
						</div>
					</div>
						<?php }

					}?>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<div class="clearfix"></div>
		
			<div class="step-pipe">
		</div>	
	</section>
	<script type="text/javascript">
		jQuery.noConflict();
        var title = 0;
        jQuery("#oursteps .oursteps-post").each(function(){
          if ($(this).height() > title) { title = $(this).height(); }
        });
        jQuery("#oursteps .oursteps-post").height(title);


        // on Resize change height

        jQuery(window).resize(function(){
          jQuery("#oursteps .oursteps-post").height("");
          var title = 0;
          jQuery("#oursteps .oursteps-post").each(function(){
            if ($(this).height() > title) { title = $(this).height(); }
          });
          jQuery("#oursteps .oursteps-post").height(title);
        });
    </script>

<?php } 