<?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('steps_title_image'.$i); 
			if(!empty($luzuk_oursteps_page_id)){
				$showStatic = false;
				break;
			}
		}
			$oursteps_title = get_theme_mod('oursteps_title', 'Process steps');
		?>
		<?php if( get_theme_mod('step_img_display','show' ) == 'show') :?>
			<div class="steps-imgsec1">
				<?php 
					echo '<img alt="About us" src="'.get_template_directory_uri().'/images/stepsbg1.png" class="img-responsive" />';
				?>
			</div>
		<?php endif ?>
		<?php if( get_theme_mod('step_img_display','show' ) == 'show') :?>
			<div class="steps-imgsec2">
				<?php 
					echo '<img alt="About us" src="'.get_template_directory_uri().'/images/stepsbg2.png" class="img-responsive" />';
				?>
			</div>
		<?php endif ?>
	 	<div class="container">
			<div class="row justify-content-center">
				<?php if($oursteps_title){ ?>	
					<div class="section-title">
						<h2><?php echo ($oursteps_title); ?></h2>
					</div>
				<?php }?>
			</div>	
			<div class="oursteps-post-wrap">
				<div class="row row-eq-height">
				<?php
					$cols = get_theme_mod('luzuk_oursteps_npp_count', 2);
					$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-6 col-sm-6';
						break;
						default: 
						$colCls = 'col-lg-4 col-md-6 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_title = get_theme_mod('luzuk_oursteps_page_title_'.$i, 'Concept Development');
						$luzuk_oursteps_page_id = get_theme_mod('luzuk_oursteps_page'.$i); 
						$luzuk_oursteps_title_img = get_theme_mod('steps_title_image'.$i);
						$luzuk_oursteps_title_text = get_theme_mod('steps_title_text'.$i);
						$steps_title_image = get_theme_mod('steps_title_image'.$i);
						if($steps_title_image){
				?>
					<div class="<?php echo $colCls;?> oursteps-bx">
						<div class="oursteps-post">
							<div class="Numrical">
								<h3>0<?php echo $i; ?></h3>
							</div>
							<div class="oursteps-icon">
								<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
									<?php
										echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($luzuk_oursteps_title_img).'" class="img-responsive secondry-bg-img" />';
									?>
								</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>
								<p><?php echo $luzuk_oursteps_title_text; ?></p>
								<?php
									$luzuk_oursteps_page_id = get_theme_mod('luzuk_oursteps_page');
								?>
								<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>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
					<?php
							}
						}else{?>
					<div class="<?php echo $colCls;?> oursteps-bx">
						<div class="oursteps-post">
							<div class="Numrical">
								<h3>0<?php echo $i; ?></h3>
							</div>
							<div class="oursteps-icon">
								<a href="#">
									<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/steps-img.jpg');?>" alt="services" />
								</a>
							</div>
							<div class="details">
								<a href="#"><h5 class="title">Concept Development</h5></a>
								<p>There are many variations of passages of Lorem Ipsum</p>
								<div class="oursteps-button">
									<a href="#" class="blue"><i class="fa fa-long-arrow-right"></i></a>
								</div>
							</div>
							<div class="clearfix"></div>		
						</div>
					</div>
						<?php }

					}?>
					<div class="clearfix"></div>
				</div>
			</div>
		</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 } 