<?php

if(get_theme_mod('skill_area_disable') != 'on' ){
	?>
	<!-- skill Area Start -->
	<?php 
	if( get_theme_mod('skill_areaTpadding',true) ) {
		$skill_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('skill_areaTpadding')).';';
	}
	if( get_theme_mod('skill_areaBpadding',true) ) {
		$skill_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('skill_areaBpadding')).';';
	}
	?>		
	<div class="skill-area" id="skill" style="<?php echo esc_attr($skill_areaTpadding); ?>" "<?php echo esc_attr($skill_areaBpadding); ?>">
		<div class="container">
		<?php
		$showStatic = true;
		for( $i = 1; $i < 3; $i++ ){
			$url = get_theme_mod('skill_page_url_'.$i, '#');
			$link = get_theme_mod('skill_page_link'.$i);
			$skill_page_id = get_theme_mod('skill_page_icon'.$i); 
			if(!empty($skill_page_id)){
				$showStatic = false;
				break;
			}
		}
		?>
	

			<div class="skill-single-area">  
				<?php
				$cols = get_theme_mod('skill_npp_count', 3);
				$cols++;
							// echo '$cold: '.$cols;
				switch($cols){
					case 1:
					$colCls = 'col-md-12 col-sm-12 col-xs-12';
					break;
					case 2:	
					$colCls = 'col-md-6 col-sm-6 col-xs-12';
					break;
					case 3:
					case 5:
					case 6:
					case 9:
					case 11:
					case 12:
					case 13:
					case 14:
					case 15:
					$colCls = 'col-md-4 col-sm-6 col-xs-12';
					break;
					case 4:
					$colCls = 'col-md-3 col-sm-6 col-xs-12';
					break;
					default: 
					$colCls = 'col-md-4 col-sm-6 col-xs-12';
					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('skill_page_url_'.$i, '#');

						$skill_page_title = get_theme_mod('skill_page_title_'.$i, 'RESIDENTIAL & COMMERCIAL');
						$skill_page_number = get_theme_mod('skill_page_number_'.$i, '01');
						$skill_page_id = get_theme_mod('skill_page'.$i); 
						$skill_page_icon = get_theme_mod('skill_page_icon'.$i);
						if($skill_page_icon){
							?>
							<div class="<?php echo $colCls;?>">
								<div class="skill-single-bx wow zoomIn">
									<div class="skill-content">
										<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
										<img src="<?php echo esc_url($skill_page_icon); ?>" class="img-responcive" />
		                            	</a>
										<div class="skill-num"><?php echo $skill_page_number; ?></div>
										<div class="skill-single-top">
											<div class="skill-single-back"></div>
											<h4 class="title inner-area-title" ><a href="<?php echo esc_url(!empty($url)?$url:'#');?>" data-hover="<?php echo $skill_page_title; ?>"><span><?php echo $skill_page_title; ?></span></a>
											</h4>
										</div>
									</div>
									<div class="clearfix"></div>
								</div>				
							</div>

							<?php
						}
					}else{?>
						<div class="<?php echo $colCls;?>">
							<div class="skill-single-bx wow zoomIn">
									<div class="skill-content">
									<a href="#">
										<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/skill.jpg');?>" alt="features" />
									</a>
									<div class="skill-num">01</div>
									<div class="skill-single-top">
										<div class="skill-single-back"></div>
										<h4 class="title inner-area-title" ><a href="#" data-hover="RESIDENTIAL & COMMERCIAL"><span>RESIDENTIAL & COMMERCIAL</span></a>
										</h4>
									</div>
									</div>
								<div class="clearfix"></div>
							</div>				
						</div>
					<?php }

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