<?php

if(get_theme_mod('feature_area_disable') != 'on' ){	?>
	 	
<div class="feature-area" id="feature" >
	<?php
			// width 
			$c_width = get_theme_mod('fea_c_width', 'container');

		    if ($c_width === 'container') {
			    $c_alignment = 'container';
			} elseif ($c_width === 'container-fluid') {
			    $c_alignment = 'container-fluid';
			} else {
			    $text_alignment = 'container'; // Default to 'container' if the setting is invalid
			}

	?>	
	<?php
	  $showStatic = true;
	  for( $i = 1; $i < 9; $i++ ){
	    $feature_page_id = get_theme_mod('feature_title_img'.$i); 
	    if(!empty($feature_page_id)){
	      $showStatic = false;
	      break;
	    }
	  }
	?>
		
	<div class="<?php echo esc_attr($c_width); ?>">
		<div class="feature-single-area">  
			<div class="row ">		
			<?php
			$cols = get_theme_mod('feature_npp_count', 3);
			$cols++;
						// echo '$cold: '.$cols;
			switch($cols){
				case 1:
				$colCls = 'col-lg-12 col-md-12 col-sm-6 col-xs-12';
				break;
				case 2:	
				$colCls = 'col-lg-6 col-md-6 col-sm-6 col-xs-12';
				break;
				case 3:
				case 5:
				case 6:
				case 9:
				case 11:
				case 13:
				case 15:
				$colCls = 'col-lg-4 col-md-6 col-sm-6 col-xs-12';
				break;
				default: 
				$colCls = 'col-lg-3 col-md-6 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){
				$feature_page_id = get_theme_mod('feature_page'.$i);
				$feature_page_title = get_theme_mod('feature_page_title'.$i, 'Architect');
				$feature_page_txt = get_theme_mod('feature_page_txt'.$i, 'There Are Many Of Passage Lorem Ipsum Available Slightly Believable.');
				$feature_title_img = get_theme_mod('feature_title_img'.$i); 
				$feature_page_icon = get_theme_mod('feature_page_icon'.$i);
				$feature_title_img = get_theme_mod('feature_title_img'.$i);
				if($feature_title_img){
              
        	?>
			
	          	<div class="<?php echo $colCls;?> f-bx">
	              	<div class="fea-single f-bxinn">
	            		<div class="fea-icon">
	                  		<!-- <span class="</?php echo $feature_page_icon; ?>"></span> --> 
							<?php
								echo '<img src="'.esc_url($feature_title_img).'" class="img-responsive secondry-bg-img" />';
							?>
	                	</div> 
	                	<div class="fea-conbx">
                			<div class="fea-title inner-area-title">
                					<?php echo $feature_page_title; ?>
                			</div>
                			<p><?php echo $feature_page_txt; ?></p>
	                	</div> 
	            	</div>
	              	<div class="clearfix"></div>
	          	</div>
				<?php   }
				                          
				}else{?>

				<div class="<?php echo $colCls;?> f-bx">
					<div class="fea-single f-bxinn">
						<div class="fea-icon">
								<!-- <span class="fa fa-wrench" aria-hidden="true"></span> -->
							<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/fac3.png');?>"  />
						</div>
						<div class="fea-conbx">
							<div class="fea-title inner-area-title">Architect </div>
							<p>There Are Many Of Passage Lorem Ipsum Available Slightly Believable.</p>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
		            <?php }
		          }?>
			    <div class="clearfix"></div>
			</div>
		</div>
	</div>
</div> 
	<!-- feature Area Start -->
 <script type="text/javascript">
	jQuery.noConflict();
      var title = 0;
      jQuery("#feature .f-bxinn").each(function(){
        if ($(this).height() > title) { title = $(this).height(); }
      });
      jQuery("#feature .f-bxinn").height(title);


      // on Resize change height

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

<?php } 