<?php    
if(get_theme_mod('home_area_disable') != 'on' ){ ?>
	<?php 
		if( get_theme_mod('home_areaTpadding',true) ) {
			$home_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('home_areaTpadding')).';';
		}
		if( get_theme_mod('home_areaBpadding',true) ) {
			$home_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('home_areaBpadding')).';';
		}
	?>	
	<div class="home-area " id="home" style="<?php echo esc_attr($home_areaTpadding); ?>" "<?php echo esc_attr($home_areaBpadding); ?>" >
		<div class="home-ovly"></div>
		<div class="container">
				<?php
					$homes_page_id = get_theme_mod('homes_page');
				?>
				<?php
						$homesubtitle = get_theme_mod('home_subtitle', 'Popular');
						$hometitle = get_theme_mod('home_title', 'Our Popular Homes');
						$home_btntxt = get_theme_mod('home_btntxt', 'Explore All');
						$home_btnlink = get_theme_mod('home_btnlink', '#');
				?>
				<div class="row justify-content-center">
						<?php if($hometitle || $homesubtitle){ ?>	
							<div class="section-title">
										<h4><span><?php echo ($homesubtitle);  ?></span></h4>
								<h2><span><?php echo ($hometitle);  ?></span></h2>
							</div>
						<?php }?>
				</div>
				<div class="homebx">
						<div  class="owl-carousel">
							<?php 
							$showStatic = true;
							$cols = get_theme_mod('home_npp_count', 5);
							$cols++;
							switch($cols){
								case 1:
								$colCls = 'col-md-12 col-sm-12';
								break;
								case 2:	
								$colCls = 'col-lg-6 col-md-6 col-sm-6';
								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';
								break;
								default: 
								$colCls = 'col-lg-4 col-md-6 col-sm-6';
								break;
							}
									
							for( $i = 1; $i <= $cols; $i++ ){
								$homes_page_id = get_theme_mod('homes_page'.$i); 
								$homes_page_icon1 = get_theme_mod('homes_page_icon1'.$i);
								if($homes_page_id){
									$showStatic = false;
									echo homeShortCode($homes_page_id, $isCustomizer=true, $i);
								}
							}
						if($showStatic === true){
							for( $i = 1; $i <= $cols; $i++ ){ ?>
							<div class="item">
								<div class="single-home-bx" data-wow-duration="1s">
									<div class="single-home " ser-match-height>
										<div class="home-icon">
											<a href="#">
												<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/home.jpg');?>" alt="homes" />	
											</a>
										</div>
									</div>
									<div class="homedetailbx">
										<div class="home-location">
												<i class="fa fa-map-marker" aria-hidden="true"></i>Crestview Manor ndianapolis,
										</div>
										<a href="#">
											<h4 class="post-title inner-area-title wow fadeInDown">home For Sale</h4>
										</a>
										<div class="home-areadata">
											<span class="bed">
									    		<i class="fa fa-bed" aria-hidden="true"></i>3 bed
										    </span>
										    <span class="size">
										    	<i class="fa fa-square-o" aria-hidden="true"></i>10x10m
										    </span>
										    <span class="distance">
										    	<i class="fa fa-line-chart" aria-hidden="true"></i>1600 m
										    </span>
										 </div>
										 <div class="home-info">
									  		<div class="homebtn">
													<a href="#"><span>Book Now</span></a>
											</div>
											<div class="home-price">
												  <span>Great Price</span>
												  $ 412,0000
											</div>	
										 </div>
									</div>
								</div>				
							</div>
						<?php 
						}
					} ?>
				</div>
			</div>
			<div class="home-button">
				<?php 
					if($home_btntxt){ 
				?>
					<a href="<?php echo ($home_btnlink);  ?>">
						<span><?php echo ($home_btntxt);  ?></span>
						<i class="fa fa-long-arrow-right"></i>
					</a>
				<?php }?>
			</div>		
		</div>
</div>
<script>
    $(document).ready(function() {
    $('#home .owl-carousel').owlCarousel({
        loop: true,              // Consistent looping behavior
        margin: 10,              // Default margin set, can be overridden in breakpoints
        autoHeight: true,
        autoplay: false,         // Control autoplay globally
        autoplayTimeout: 5000,
        autoplaySpeed: 4000,
        responsiveClass: true,
        navText: [
            '<i class="fa fa-caret-left" aria-hidden="true"></i>',
            '<i class="fa fa-caret-right" aria-hidden="true"></i>'
        ],
        responsive: {
            0: {
                items: 1,
                nav: true,
                margin: 20
            },
            500: {
                items: 2,
                nav: true,
                margin: 4
            },
            992: {                 // This now starts from 992px and above
                items: 3,
                nav: true,
                loop: true,
                margin: 33
            }
        }
    });
});

</script>
<?php }