<?php
if(get_theme_mod('about_area_disable') != 'on' ){
?> 
<?php 
	if( get_theme_mod('about_areaTpadding',true) ) {
		$about_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('about_areaTpadding')).';';
	}
	if( get_theme_mod('about_areaBpadding',true) ) {
		$about_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('about_areaBpadding')).';';
	}
	if( get_theme_mod('about_areawave',true) ) {
		$about_areawave = 'top:'.esc_attr(get_theme_mod('about_areawave')).';';
	}
?>			 
<div class="about-area" id="about">
	<div class="about-ovly"></div>
	<div class="container">
		<div class="about-area-bx">
			<?php
				$about_page_id = get_theme_mod('about_page');
				$aboutsubtitle = get_theme_mod('aboutsubtitle', 'About Us Company');
				$abouttitle = get_theme_mod('about_title', 'Your Trusted Partner In Realizing Property Dreams.');
				$abouttext = get_theme_mod('about_text', 'Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lorem Ipsum Has Been The Industrys Standard Dummy Text Ever Since The 1500S, When An Unknown');
			?>
			<div class="row mr-0">
				<div class="col-lg-6 col-md-12 wow zoomIn" data-wow-duration="1s">
					<div class="abt-rbx">
						<div class="section-subtitle">
							<?php if($aboutsubtitle){ ?>	
								<div class="subtitle-brd"></div>
								<h4><?php echo ($aboutsubtitle);  ?></h4>
							<?php }?>
						</div>
						<div class="section-title">
							<?php if($abouttitle){ ?>	
								<h2><?php echo ($abouttitle);  ?></h2>
							<?php }?>
						</div>
					</div>
					<?php
						$showStatic = true;
						for( $i = 1; $i < 11; $i++ ){
							$aboutus_page_id = get_theme_mod('aboutus_page_icon'.$i); 
							if(!empty($aboutus_page_id)){
								$showStatic = false;
								break;
							}
						}
					?>
					<div class="aboutus-post-wrap">
						<?php
						$cols = get_theme_mod('aboutus_npp_count', 2);
						$cols++;
						// echo '$cold: '.$cols;
						switch($cols){
							case 1:
							$colCls = 'col-lg-12 col-md-12 col-sm-12';
							break;
							case 2:
							case 4:
							case 8:
							case 7:
							case 10:
							case 11:
							case 12:
							$colCls = 'col-lg-12 col-md-12 col-sm-12';
							break;
							default: 
							$colCls = 'col-md-12 col-sm-12';
							break;
						}
						$icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
						?>
						<div class="aboutus-post-boxes">
							<?php
							for( $i = 1; $i <= $cols; $i++ ){
							if($showStatic === false){
								
								$aboutus_page_title = get_theme_mod('aboutus_page_title'.$i, 'There are many variations of ');
								$aboutus_page_text = get_theme_mod('aboutus_page_text'.$i, 'Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lorem Ipsum ');
								$aboutus_page_id = get_theme_mod('aboutus_page'.$i); 
								$aboutus_page_icon = get_theme_mod('aboutus_page_icon'.$i);
								if($aboutus_page_title){
							?> 
							<div class="aboutus-single wow zoomIn" >
								<div class="row">
									<div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-3 ">
										<div class="about-icon">
											<i class="<?php echo $aboutus_page_icon; ?>" aria-hidden="true"></i>
										</div>
									</div>
									<div class="col-xl-7 col-xl-offset3 col-lg-10 col-md-10 col-sm-10 col-9 about-plan">
										<div class="about-area-data">
											<h4 class="inner-area-title">
												<?php echo $aboutus_page_title; ?>
											</h4>
											<p><?php echo $aboutus_page_text; ?></p>
										</div>	
										<div class="clearfix"></div>
									</div>
								</div>
							</div>
							<?php
								}
							}else{?>
								<div class="aboutus-single wow zoomIn">
									<div class="row">
										<div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-3">
											<div class="about-icon">
												<i class="fa fa-money" aria-hidden="true"></i>
											</div>
										</div>
										<div class="col-xl-7 col-xl-offset3 col-lg-10 col-md-10 col-sm-10 col-9 about-plan">
											<div class="about-area-data">
												<h4 class="inner-area-title">
													Budget Friendly
												</h4>
												<p>Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lorem Ipsum</p>
											</div>	
											<div class="clearfix"></div>
										</div>
									</div>
								</div>
							<?php }
							}?>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
				<div class="col-lg-6 col-md-12 wow zoomIn">
					<div class="section-subtext">
						<p><?php echo ($abouttext);  ?></p>
					</div>
					<div class="mainaccordian">
						<?php
							$showStatic1 = true;
							for( $i = 1; $i < 6; $i++ ){
								$aboutus_page_id1 = get_theme_mod('about_image'.$i); 
								if(!empty($aboutus_page_id1)){
									$showStatic1 = false;
									break;
								}
							}
						?>
						<?php
							$cols = get_theme_mod('aboutus_img_count', 2);
							$cols++;
						?>
						<?php 
						for( $i = 1; $i <= $cols; $i++ ){
							if($showStatic1 === false){
								$luzuk_aboutus_page_title = get_theme_mod('luzuk_aboutus_page_title_'.$i, 'LAND FOR SALE');
								$luzuk_aboutus_title_img = get_theme_mod('about_image'.$i);
								$about_image = get_theme_mod('about_image'.$i);
								if($about_image){
						?>
						<div class="aboutarea-img wow zoomIn">
							<?php
								echo '<img alt="'. $luzuk_aboutus_page_title .'" src="'.esc_url($luzuk_aboutus_title_img).'" class="img-responsive secondry-bg-img" />';
							?>
							<div class="about-imgtitle">
								<span><?php echo $luzuk_aboutus_page_title; ?></span>
							</div>
						</div>
					<?php
						}
					}else{?>
						<div class="aboutarea-img wow zoomIn">
							<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/abotimg.jpg');?>" alt="services" />
							<div class="about-imgtitle"><span>LAND FOR SALE </span></div>
						</div>
						<?php }
						}?>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
</div>
<script type="text/javascript">
	$("#about .aboutarea-img").first().addClass("active");
	const slides = document.querySelectorAll('#about .aboutarea-img');
	let active = document.querySelector('.aboutarea-img.active');

	slides.forEach((slide) => {
	  slide.onclick = () => {
	    active.classList.remove('active');
	    active = slide;
	    slide.classList.add('active');
	  }
	})
</script>
<?php }  