<?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" >
		<?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
			}

			// Heading Style
        	$heading_case = get_theme_mod('fea_maintitle_case', 'capitalize');

		    if ($heading_case === 'uppercase') {
				$text_case = 'uppercase';
			} elseif ($heading_case === 'lowercase') {
			    $text_case = 'lowercase';
			} elseif ($heading_case === 'capitalize') {
			    $text_case = 'capitalize';
			} else {
			    $text_case = 'capitalize'; // Default to 'left' if the setting is invalid
			}
				 
			// Alientment
        	$heading_alignment = get_theme_mod('fea_maintitle_align', 'left');

		    if ($heading_alignment === 'left') {
				$text_alignment = 'left';
			} elseif ($heading_alignment === 'center') {
			    $text_alignment = 'center';
			} elseif ($heading_alignment === 'right') {
			    $text_alignment = 'right';
			} else {
			    $text_alignment = 'left'; // Default to 'left' if the setting is invalid
			}

			
	    ?>
		<?php								
			$fea_subtitle = get_theme_mod('fea_subtitle', 'Features');
			$fea_title = get_theme_mod('fea_title', 'Descover Our Latest Quality Service');
			$fea_txt = get_theme_mod('fea_txt', 'There are many variations of passages Lorem Ipsum available, but the majority have suffered believable.');

			$fea_list = get_theme_mod('fea_list', '<li>24/7 Emergency Service</li>
<li>Licensed & Insured Professionals</li>
<li>Fast Response Time</li>
<li>Energy-Efficient Solutions</li>
<li>Customized Service Plans</li>');
			$feabtn_text = get_theme_mod('fefean_text', 'Read More');
			$feabtnlink = get_theme_mod('feabtnlink', '#');

		?>			
		<div class="<?php echo esc_attr($c_width); ?>">
			<div class="row">
				<!-- 1st bx -->
				<div class="box-title">
					<?php if(  $fea_subtitle  ){ ?>	
					<h5 style="text-align: <?php echo esc_attr($text_alignment); ?>;"><?php echo ($fea_subtitle); ?></h5>
					<?php }?>
					<h3 style="text-align: <?php echo esc_attr($text_alignment); ?>;  text-transform: <?php echo esc_attr($heading_case); ?>;"><?php echo ($fea_title); ?></h3>
					<p style="text-align: <?php echo esc_attr($text_alignment); ?>;"><?php echo ($fea_txt); ?></p>
					
					<?php if($feabtn_text ){ ?>
					<div class="fea-btn" style="text-align: <?php echo esc_attr($text_alignment); ?>;">	
						<a href="<?php echo ($feabtnlink);  ?>" >
                        	<span><?php echo($feabtn_text); ?> </span>
						</a>					
					</div>	
					<?php }?>
				</div>
				<!-- 2nd bx -->
				<div class="list">
					<?php echo ($fea_list); ?>
				</div>
				<!-- 3rd bx -->
				<div class="imgbx">
					<div class="row mr-0">
						<div class="dotbx"></div>
						<?php
						$showStatic = true;
						for( $i = 1; $i < 11; $i++ ){
							$feaus_page_icon = get_theme_mod('feaus_page_icon'.$i); 
							if(!empty($feaus_page_icon)){
								$showStatic = false;
								break;
							}
						}
					?>
						<div class="feaus-post-wrap ">				
						<?php
							$cols = get_theme_mod('feaus_npp_count', 4);
							$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';
								
								case 3:
								case 4:
							
								case 5:
								case 6:

								case 9:
								case 11:
								case 13:
								case 15:
								$colCls = 'col-md-2 col-sm-3';
								break;
								default: 
								$colCls = 'col-md-2 col-sm-3';
								break;
							}
							$icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
						?>
							<div class="feaus-post-boxes">
								<div class="owl-carousel owl-theme"> 
								<!-- <div class="row mr-0"> -->
								<?php
									for( $i = 1; $i <= $cols; $i++ ){
										if($showStatic === false){
									$url = get_theme_mod('luzuk_fea_page_url_'.$i, '#');	
									$feaus_page_txt = get_theme_mod('feaus_page_txt'.$i, 'There are many variations of Lorem Ipsum available, but the majority have suffered alteration in some believable.');
									$feaus_page_id = get_theme_mod('feaus_page'.$i); 
									$feaus_page_icon = get_theme_mod('feaus_page_icon'.$i);
									if($feaus_page_icon){
												
								?>
								<!-- <div class="</?php echo $colCls;?>"> -->
									<div class="item">							
										<div class="feabx">
											<div class="feaus-single " data-wow-duration="1s">
												<div class="slid-numb">
								                    <h5>0<?php echo $i; ?></h5>
								                </div>
												<div class="hi-icon">
													<span class="<?php echo $feaus_page_icon; ?>"></span>
												</div>
												<div class="fea-area-data">
													<p> <?php echo $feaus_page_txt; ?> </p>
												</div>		
											</div>
										</div>
									</div>
								<?php					
									}
								}else{?>
									<div class="item">
										<div class="feabx">
											<div class="feaus-single " data-wow-duration="1s">
												<div class="slid-numb">
								                    <h5>0<?php echo $i; ?></h5>
								                </div>
												<div class="hi-icon">
													<span class="fa fa-cog"></span>
												</div>
												<div class="fea-area-data">
													<p>There are many variations of Lorem Ipsum available, but the majority have suffered alteration in some believable.</p>
												</div>			
											</div>
										</div>
									</div>
									<?php }

									}?>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="clearfix"></div>
					

			</div>
		</div>

	</div> 
	<!-- feature Area Start -->
  
<script type="text/javascript">
$(document).ready(function(){
    var highestBox = 0;
        $('#feature .f-bxinn').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('#feature .f-bxinn').height(highestBox);
});
</script>
<script>
    $(document).ready(function() {
      $('#feature .owl-carousel').owlCarousel({
        loop: true,
        margin: 0,
        autoplay: true,
        autoplaySpeed: 5000,
      	animateIn: 'fadeInUp',
        responsiveClass: true,
        responsive: {
          0: {
            items: 1,
            nav: true
          },
          600: {
            items:1,
            nav: true
          },
          1000: {
            items:1,
            nav: true,
            loop: true,
            margin: 1
          }
        }
      })
    })
</script>
<?php } 


