<?php
if(get_theme_mod('facility_area_disable') != 'on' ){
	?>
	<?php 
		if( get_theme_mod('facility_areaTpadding',true) ) {
			$facility_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('facility_areaTpadding')).';';
		}
		if( get_theme_mod('facility_areaBpadding',true) ) {
			$facility_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('facility_areaBpadding')).';';
		}
	?>			
	<div class="facility-area " id="facility">		  
		<?php			
			$facsubheading = get_theme_mod('facsubheading', 'Our Facility');
 			$facility_heading = get_theme_mod('facility_heading', 'WHY YOU SHOULD CHOOSE US');
 		?>

 		<div class="container">
			<!-- <div class="row justify-content-center"> -->
				<?php if($facility_heading || $facsubheading){ ?>	
				<div class="section-title">
				<div class="headbrd"></div>
					<?php if($facsubheading ){ ?>	
							<h1><?php echo ($facsubheading);  ?></h1>
					<?php }?>
						<h2><?php echo ($facility_heading);  ?></h2>
				</div>
				<?php }?>
			<!-- </div> -->
		</div>

		<div class="container">
				<?php
					$showStatic = true;
					for( $i = 1; $i < 11; $i++ ){
						$facilityus_page_id = get_theme_mod('facilityus_page_icon'.$i); 
						if(!empty($facilityus_page_id)){
							$showStatic = false;
							break;
						}
					}
				?>
			<div class="facilityus-post-wrap ">
				
				<?php
					$cols = get_theme_mod('facilityus_npp_count', 5);
					$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="facilityus-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_facility_page_url_'.$i, '#');	
						$facilityus_page_title = get_theme_mod('facilityus_page_title'.$i, 'PICKUP & DROP');
						$facilityus_page_id = get_theme_mod('facilityus_page'.$i); 
						$facilityus_page_icon = get_theme_mod('facilityus_page_icon'.$i);
						if($facilityus_page_icon){
									
					?>
					<!-- <div class="</?php echo $colCls;?>"> -->
						<div class="item">
							<div class="facilitybx">
								<div class="facilityus-single " data-wow-duration="1s">
									<div class="facility-box"> 
										<div class="hi-icon">
											<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
												<span class="<?php echo $facilityus_page_icon; ?>"></span>
											</a>
										</div>
										<div class="facility-area-data">
											<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
													<h4 class="inner-area-title">
													<?php echo $facilityus_page_title; ?>
												</h4>
											</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					<?php					
						}
					}else{?>
						<div class="item">
							<div class="facilitybx">
								<div class="facilityus-single " data-wow-duration="1s">
									<div class="facility-box "> 
										<div class="hi-icon">
											<a href="#"><span class="fa fa-taxi"></span></a>
										</div>
										<div class="facility-area-data">
											<a href="#"><h4 class="inner-area-title">PICKUP & DROP</h4></a>
										</div>	
									</div> 			
								</div>
							</div>
						</div>
						<?php }

						}?>
					</div>
				</div>
			</div>
		</div>
	</div>
<script>
    $(document).ready(function() {
      $('.facility-area .owl-carousel').owlCarousel({
        loop: true,
        margin: 30,
        autoplay: true,
        responsiveClass: true,
        responsive: {
          0: {
            items: 1,
            nav: true
          },
          600: {
            items:2,
            nav: true
          },
          1000: {
            items:6,
            nav: true,
            loop: true,
            margin: 10
          }
        }
      })
    })
</script>
<?php }  