<?php

if(get_theme_mod('feature_area_disable') != 'on' ){
	?>
	<?php 
		if( get_theme_mod('feature_areaTpadding',true) ) {
			$feature_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('feature_areaTpadding')).';';
		}
		if( get_theme_mod('feature_areaBpadding',true) ) {
			$feature_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('feature_areaBpadding')).';';
		}
	
	?>	 	

	<div class="feature-area" id="feature" >
			<div class="container"> 
					<?php			
							$feature_title = get_theme_mod('feature_title', 'OUR');
							$fea_title2 = get_theme_mod('fea_title2', 'Feature');
					?>
					
					<?php if($feature_title || $fea_title2 ){ ?>	
					<div class="section-title">
							<?php if($feature_title ){ ?>	
							<h2>
									<?php echo ($feature_title); ?>
									<div class="t-brd"></div>
							</h2>	
							<?php }?>

							<?php if($fea_title2 ){ ?>	
							<h3><?php echo ($fea_title2); ?></h3>
							<?php }?>
					</div>
					<?php }?>
			</div>

		  <?php
          $showStatic = true;
          for( $i = 1; $i < 9; $i++ ){
            $feature_page_id = get_theme_mod('feature_page_title'.$i); 
            if(!empty($feature_page_id)){
              $showStatic = false;
              break;
            }
          }
      ?>

			<div class="container">  
					<div class="feature-single-area">  
				<?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-4 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');
				?>
								<div class="feature-post-boxes">
										<div class="row m-0">
					 						
					            <?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, 'Maintenance');
					                	$feature_page_txt = get_theme_mod('feature_page_txt'.$i, 'Vivamus consequat eu erat nec tincidunt. Donec posuere lobortis lorem, et dapibus orci consequat.');
					             		$feature_page_icon = get_theme_mod('feature_page_icon'.$i);
					             {
					                ?>

					              <div class="<?php echo $colCls;?> f-bx">
					                  <div class="fea-single">
				                      	<div class="fea-box">
				                      			<div class="fea-icon">
				                            		<span class="<?php echo $feature_page_icon; ?>"></span>
				                          	</div> 
				                      			<div class="fea-title inner-area-title">
				                      					<?php echo $feature_page_title; ?>
				                      			</div>
				                      			<p><?php echo $feature_page_txt; ?></p>
				                      	</div>
					                    	<div class="clearfix"></div>
					                  </div>
					                  <div class="clearfix"></div>
					              </div>
					                <?php
					                      }
					                          
					                }else{?>
												<div class="<?php echo $colCls;?> f-bx">
														<div class="fea-single">
																<div class="fea-box">
																		<div class="fea-icon">
																				<span class="fa fa-wrench" aria-hidden="true"></span>
																		</div>
																		<div class="fea-title inner-area-title">Maintenance </div>
																		<p>Vivamus consequat eu erat nec tincidunt. Donec posuere lobortis lorem, et dapibus orci consequat.</p>
																</div>
														</div>
														<div class="clearfix"></div>
												</div>
					                <?php }
					              }?>
					              <div class="clearfix"></div>
					         		</div>
				        </div>
					</div>
			</div>
	</div> 
	<!-- feature Area Start -->

	<script type="text/javascript">
          var title = 0;
      jQuery("#feature .fea-single").each(function(){
        if ($(this).height() > title) { title = $(this).height(); }
      });
      jQuery("#feature .fea-single").height(title);


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



	
<?php } 