<?php
if(get_theme_mod('features_area_disable') != 'on' ){
?>
	<?php 
		if( get_theme_mod('features_areaTpadding',true) ) {
			$features_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('features_areaTpadding')).';';
		}
		if( get_theme_mod('features_areaBpadding',true) ) {
			$features_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('features_areaBpadding')).';';
		}
	?>			
	<div class="features-area " id="features">	
		<?php if( get_theme_mod('feature_img_display','show' ) == 'show') :?>
			<div class="feature-img">
				<?php 
					echo '<img alt="features" src="'.get_template_directory_uri().'/images/fealeaf.png" class="img-responsive" />';
				?>	
			</div>
		<?php endif ?>
		<?php
			$fea_maintitle = get_theme_mod('fea_maintitle', 'Our Best Feature');
		?>
		<div class="row justify-content-center">
			<?php if($fea_maintitle){ ?>	
			<div class="section-title">
				<div class="heading-brd1"></div>
				<h2><?php echo ($fea_maintitle);  ?></h2>
			</div>
			<?php }?>
		</div>
		<div class="container">
			<?php
				$showStatic = true;
				for( $i = 1; $i < 11; $i++ ){
					$featuresus_page_id = get_theme_mod('featuresus_page_icon'.$i); 
					if(!empty($featuresus_page_id)){
						$showStatic = false;
						break;
					}
				}
			?>
			<div class="featuresus-post-wrap">
				<?php
					$cols = get_theme_mod('featuresus_npp_count', 5);
					$cols++;
					// echo '$cold: '.$cols;
					switch($cols){
						case 1:
						$colCls = 'col-md-12 col-sm-12';
						break;
						case 2:	
						$colCls = 'col-xl-6 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-xl-4 col-lg-4 col-md-6 col-sm-6';
						break;
						default: 
						$colCls = 'col-xl-4 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');
				?>
				<div class="featuresus-post-boxes row">
									<!-- <div class="owl-carousel owl-theme">  -->
					<?php
							for( $i = 1; $i <= $cols; $i++ ){
								if($showStatic === false){
							$url = get_theme_mod('luzuk_features_page_url_'.$i, '#');	
							$featuresus_page_title = get_theme_mod('featuresus_page_title'.$i, 'Flavours Tea');
							$featuresus_page_text = get_theme_mod('featuresus_page_text'.$i, 'Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed porta pharetra mauris, sed dapibus ex maximus nec.');
							$featuresus_page_id = get_theme_mod('featuresus_page'.$i); 
							$featuresus_page_icon = get_theme_mod('featuresus_page_icon'.$i);
							if($featuresus_page_icon){	
					?>
					<div class="<?php echo $colCls;?> featuresbx wow zoomIn" data-wow-duration="1s">
						<div class="featuresus-single " >
							<div class="features-box"> 
								<div class="hi-icon">
									<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
										<span class="<?php echo $featuresus_page_icon; ?>"></span>
										<?php 
											echo '<img alt="features" src="'.get_template_directory_uri().'/images/leaf.png" class="img-responsive" />';
										?>	
									</a>
								</div>
							</div> 
							<div class="features-area-data">
								<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
									<h4 class="inner-area-title">
										<?php echo $featuresus_page_title; ?>
									</h4>
								</a>
								<p><?php echo $featuresus_page_text; ?></p>
							</div>
						</div>
					</div>
					<?php					
							}
						}else{?>
					<div class="<?php echo $colCls;?>  featuresbx wow zoomIn" data-wow-duration="1s">
						<div class="featuresus-single" >
							<div class="features-box"> 
								<div class="hi-icon">
									<a href="#">
										<span class="fa fa-coffee"></span>
										<?php 
											echo '<img alt="features" src="'.get_template_directory_uri().'/images/leaf.png" class="img-responsive" />';
										?>	
									</a>
								</div>
							</div> 
							<div class="features-area-data">
								<a href="#"><h4 class="inner-area-title">Flavours Tea</h4></a>
								<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed porta pharetra mauris, sed dapibus ex maximus nec.</p>
							</div>
						</div>
					</div>
					<?php }

						}?>
					<!-- </div>	 -->
				</div>
			</div>
		</div>
	</div>
<script type="text/javascript">
	var title = 0;
jQuery(".features-area .featuresbx").each(function(){
  if ($(this).height() > title) { title = $(this).height(); }
});
jQuery(".features-area .featuresbx").height(title);


// on Resize change height

jQuery(window).resize(function(){
  jQuery(".features-area .featuresbx").height("");
  var title = 0;
  jQuery(".features-area .featuresbx").each(function(){
    if ($(this).height() > title) { title = $(this).height(); }
  });
  jQuery(".features-area .featuresbx").height(title);
});
</script>
<!-- 	<script>
        var maxHeight = -1,
        elems = document.querySelectorAll(".features-area .featuresbx > *");
        elems = [].slice.call(elems) // Now a true Array

        elems.forEach(function(e){
            maxHeight = Math.max(maxHeight, e.offsetHeight);
        });

        elems.forEach(function(e){
            e.style.height = maxHeight + "px";
        });

  </script> -->

<?php }  