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

if(get_theme_mod('luzuk_premium_oursteps_section_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-post-section" class="ht-section " style="<?php echo esc_attr($oursteps_areaTpadding); ?>" "<?php echo esc_attr($oursteps_areaBpadding); ?>" "<?php echo esc_attr($oursteps_areaLpadding); ?>" "<?php echo esc_attr($oursteps_areaRpadding); ?>"> 
		
		<div class="lightbox">
			
				<?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;
					}
				}
				$luzuk_oursteps_title = get_theme_mod('luzuk_oursteps_title', 'OUR STEPS');
				?>

		 	 <div class="container">
				<div class="row">
			 		 <div class="ht-section-title-tagline">
			 			<?php if($luzuk_oursteps_title){ ?>
			 				<div class="heading-icon-l">
								<i class="fa fa-cog"></i>
							</div>
				 			<div class="section-title ht-border">
				 				<h2><?php echo ($luzuk_oursteps_title);  ?></h2>
				 				<div class="title-icon">
			 					 	<img src="<?php echo esc_html(get_template_directory_uri()); ?>/images/heading-tap.png" />
			 					</div>
			 				</div>
			 				<div class="clearfix"></div>
			 			<?php }?>
			 		</div> 
			 	</div>		
		 	</div> 
			
			<div class="container">
				<div class="row row-eq-height">
					<div class="col-md-12 oursteps-post-wrap">
						<!-- <div class="inside-full-height"> -->
							<!-- <div class="content">  -->
								<?php
								$cols = get_theme_mod('luzuk_oursteps_npp_count', 3);
								$cols++;
	// echo '$cold: '.$cols;
								switch($cols){
									case 1:
									$colCls = 'col-md-12 col-sm-12';
									break;
									case 2:
									$colCls = 'col-md-6 col-sm-6';
									break;
									case 3:
									case 5:
									case 6:
									case 9:
									$colCls = 'col-md-4 col-sm-6';
									break;
									case 4:
									case 7:
									case 8:
									case 10:
									case 11:
									case 12:
									$colCls = 'col-md-3 col-sm-6';
									break;
									default: 
									$colCls = 'col-md-3 col-sm-6';
									break;
								}
								$icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
								?>
								<!-- <div class="row oursteps-post-boxes"> -->
									<?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, '1');
											$luzuk_oursteps_page_title = get_theme_mod('luzuk_oursteps_page_title_'.$i, 'BOOKING');
											$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;?> padding10">
													<div class="oursteps-post">
														<div class="Numrical">
															<h3><?php echo $luzuk_oursteps_page_numtitle; ?></h3>
														</div>
														<div class="oursteps-icon">
															<span class="<?php echo $luzuk_oursteps_page_icon; ?>"></span>
														</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;?> padding10">
												<div class="oursteps-post">
													<div class="Numrical">
														<h3>1</h3>
													</div>
													<div class="oursteps-icon">
														<span class="fa fa-cube"></span>
													</div>
													<div class="details">
														<a href="#"><h5 class="title">BOOKING</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>
					<div class="clearfix"></div>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>

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


	// on Resize change height

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

<?php } 