<?php
/**
 *
 * @package Luzuk Premium
 */
if(get_theme_mod('skill_section_disable') != 'on' ){?>
	<?php 
			if( get_theme_mod('skill_toppadding',true) ) {
                $skill_toppadding = 'padding-top:'.esc_attr(get_theme_mod('skill_toppadding')).';';
            }
            if( get_theme_mod('skill_bottompadding',true) ) {
                $skill_bottompadding = 'padding-bottom:'.esc_attr(get_theme_mod('skill_bottompadding')).';';
            }
		?>	
 
<section id="skill-section" class="ht-section " style="<?php echo esc_attr($skill_toppadding); ?> <?php echo esc_attr($skill_bottompadding); ?>">	
		<div class="col-md-12 col-sm-12 skill-left pd-0">
			<div class="skill-box">
				<?php
					$showStatic = true;
					for( $i = 1; $i < 4; $i++ ){
						$url = get_theme_mod('skillnew_page_url_'.$i, '#');
						$skill_page_id = get_theme_mod('skill_page_icon'.$i); 
						if(!empty($skill_page_id)){
							$showStatic = false;
							break;
						}
					}	
				?>
			<div class="skillrightbox">
				<div class="skill-post-wrap">
					<?php
						$cols = get_theme_mod('skill_npp_count', 2);
						$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-6';
							break;
							case 3:
							case 5:
							case 6:
							case 9:
							case 11:
							case 13:
							case 15:
							$colCls = 'col-md-4 col-sm-6 col-xs-6';
							break;
							default: 
							$colCls = 'col-md-3 col-sm-6 col-xs-6';
							break;
						}
						$icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
					?>
					<div class="">
						<?php
						for( $i = 1; $i <= $cols; $i++ ){
							if($showStatic === false){
								$skill_page_title = get_theme_mod('skill_page_title_'.$i, 'Commercial');
								$url = get_theme_mod('skillnew_page_url_'.$i, '#');
								$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;?> skillbx pd-0">
								<div class="skill-post">
									<div class="skill-icon">	
		 								<img src="<?php echo esc_url($skill_page_icon); ?>" class="img-responsive" />
		 								<div class="clearfix"></div>
									</div>
									<?php
										$skillnew_page_id = get_theme_mod('skillnew_page');
										$skillnew_page_button_title = get_theme_mod('skillnew_page_button_title_'.$i, 'Interior Design');
									?>
									<?php if($skillnew_page_button_title){ ?>
										<div class="readmore">
											<div class="b-hv"></div>
											<a class="btn" href="<?php echo esc_url(!empty($url)?$url:'#');?>"><?php echo $skillnew_page_button_title; ?><i class="fa fa-long-arrow-right"></i>
											</a>
											<div class="clearfix"></div>
										</div>
									<?php } ?>
									<h5><?php echo $skill_page_title; ?></h5>
									
									<div class="clearfix"></div>
								</div>
								<div class="clearfix"></div>
							</div>
							
							<?php
						}	
						}else{?>
							<div class="<?php echo $colCls;?> skillbx pd-0">
								<div class="skill-post">
									<div class="skill-icon">			
										<img src="<?php echo esc_html(get_template_directory_uri()); ?>/images/skill1.jpg" class="img-responsive" />
									</div>
									<div class="readmore">
										<div class="b-hv"></div>
										<a class="btn" href="#">Interior Design <i class="fa fa-long-arrow-right"></i></a>
									</div>
									<h5>Commercial</h5>
									<div class="clearfix"></div>
								</div>
								<div class="clearfix"></div>
							</div>
						<?php }
						}?>
					</div>
				</div>
			</div>	
		</div>
		<!-- </div> -->
	</div>
	<div class="clearfix"></div>
	</section>
<script type="text/javascript">
    var title = 0;
    jQuery("#skill-section .skill-pos").each(function(){
      if ($(this).height() > title) { title = $(this).height(); }
    });
    jQuery("#skill-section .skill-pos").height(title);


    // on Resize change height

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


<?php }