<?php

if(get_theme_mod('features_area_disable') != 'on' ){
	?>
	<!-- features Area Start -->
	<?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')).';';
	}
	if( get_theme_mod('features_areaLpadding',true) ) {
		$features_areaLpadding = 'padding-left:'.esc_attr(get_theme_mod('features_areaLpadding')).';';
	}
	if( get_theme_mod('features_areaRpadding',true) ) {
		$features_areaRpadding = 'padding-right:'.esc_attr(get_theme_mod('features_areaRpadding')).';';
	}
	?>		
	<div class="features-area bg-img-1 text-center" id="features" style="<?php echo esc_attr($features_areaTpadding); ?>" "<?php echo esc_attr($features_areaBpadding); ?>" "<?php echo esc_attr($features_areaLpadding); ?>" "<?php echo esc_attr($features_areaRpadding); ?>">

		<?php
		$showStatic = true;
		for( $i = 1; $i < 3; $i++ ){
			$url = get_theme_mod('features_page_url_'.$i, '#');
			$link = get_theme_mod('features_page_link'.$i);
			$features_page_id = get_theme_mod('features_page_icon'.$i); 
			if(!empty($features_page_id)){
				$showStatic = false;
				break;
			}
		}
		$features_page_maintitle = get_theme_mod('features_page_maintitle', 'Our Features');
	
		?>
		<div class="row justify-content-center featured-high-area">
			<div class="col-xl-8 col-lg-8">
					<?php if($features_page_maintitle){ ?>
				<div class="section-title">
					<h2><?php echo ($features_page_maintitle);  ?></h2>
					<div class="titleborder"></div>
				</div>
				<?php }?>
			</div>
		</div>

		<div class="container">  
			<div class="featured-single-area">  
				<?php
				$cols = get_theme_mod('features_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:
					case 11:
					case 13:
					case 15:
					$colCls = 'col-md-4 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');
				?>

				<?php
				for( $i = 1; $i <= $cols; $i++ ){

					if( get_theme_mod('features_page_TitleColor'.$i,true) ) {
						$features_page_TitleColor = 'color:'.esc_attr(get_theme_mod('features_page_TitleColor'.$i)).';';
					}

					if( get_theme_mod('features_page_ContentColor'.$i,true) ) {
						$features_page_ContentColor = 'color:'.esc_attr(get_theme_mod('features_page_ContentColor'.$i)).';';
					}

					if( get_theme_mod('features_page_ButtonColor'.$i,true) ) {
						$features_page_ButtonColor = 'color:'.esc_attr(get_theme_mod('features_page_ButtonColor'.$i)).';';
					}

					if( get_theme_mod('features_page_ButtonBorderColor'.$i,true) ) {
						$features_page_ButtonBorderColor = 'border-color:'.esc_attr(get_theme_mod('features_page_ButtonBorderColor'.$i)).';';
					}

					if( get_theme_mod('features_page_BoxBorderColor'.$i,true) ) {
						$features_page_BoxBorderColor = 'border-color:'.esc_attr(get_theme_mod('features_page_BoxBorderColor'.$i)).';';
					}

					if($showStatic === false){
						$url = get_theme_mod('features_page_url_'.$i, '#');

						$features_page_title = get_theme_mod('features_page_title_'.$i, 'Design & Coding');
						$features_page_descr = get_theme_mod('features_page_descr_'.$i, 'Lorem ipsumst dolors consectetur adipisicing sed does');
						$features_page_id = get_theme_mod('features_page'.$i); 
						$features_page_icon = get_theme_mod('features_page_icon'.$i);
						if($features_page_icon){
							?>
							<div class="<?php echo $colCls;?> fs-area padding0">
								<div class="fs-single-bx wow bounceInUp" style="<?php echo esc_attr($features_page_BoxBorderColor); ?>">
									<div class="fs-single-bx-inner">
										<img src="<?php echo esc_url($features_page_icon); ?>" class="img-responsive"/>
										<a class="icon" href="<?php echo esc_url(!empty($url)?$url:'#');?>"><i class="fa fa-cloud-upload"></i></a>
										<div class="single-top">
											<h4 class="title inner-area-title" style="<?php echo esc_attr($features_page_TitleColor); ?>">
												<?php echo $features_page_title; ?>
											</h4>
											<p class="section-area-text">
												<?php echo $features_page_descr; ?>
											</p>
											<div class="clearfix"></div>
										</div>
									</div>
								</div>
							</div>
							<?php
						}
					}else{?>
						<div class="<?php echo $colCls;?> fs-area padding0">
							<div class="fs-single-bx wow bounceInUp">
								<div class="fs-single-bx-inner">
									<img src="<?php echo esc_html(get_template_directory_uri()); ?>/images/feature.jpg" class="img-responsive" />
										<a class="icon" href="#"><i class="fa fa-cloud-upload"></i></a>
									<div class="single-top">
										<h4 class="title inner-area-title">Design & Coding
										</h4>
										<p class="section-area-text">
										Lorem ipsumst dolors consectetur adipisicing sed does </p>
										<div class="clearfix"></div>
									</div>
								</div>
							</div>
							
						</div>
					<?php }

				}?>
			</div>
		</div>
	</div> 
	<!-- features Area Start -->
	<script>
		jQuery.noConflict();
		$(function(){
			function singletopHeight(){
				var ht = 0;
				$('#features .single-top').each(function(i){
					var tHt = $(this).height();
					if(ht<tHt){
						ht=tHt;
					}
				});
				$('#features .single-top').height(ht+'px');
			}
			singletopHeight();
		});
		$( window ).resize(function(){
			singletopHeight();
		});
	</script>
	
<?php } 