<?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')).';';
	}
?>			
<div class="about-area" id="about">		
	<?php
		// width 
		$c_width = get_theme_mod('abt_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('abt_maintitle_case', 'uppercase');

	    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
		}

		// Alignment
        $heading_alignment = get_theme_mod('abt_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
		$about_page_id = get_theme_mod('about_page');
		
		$abt_heading = get_theme_mod('abt_heading', 'About Us');
		$about_subHeading = get_theme_mod('about_subHeading', 'About Us');
		$about_title1 = get_theme_mod('about_title1', 'Your Trusted Electrical Services ');
		$about_title2 = get_theme_mod('about_title2', '#About Us');
		$abouttext = get_theme_mod('about_text', 'your trusted electrical services with care');		
	?>		

	<div class="section-title">
		<div class="<?php echo esc_attr($c_width); ?> ">
			<div class="titlebx">
				<h3 style="text-align: <?php echo esc_attr($text_alignment); ?>; text-transform: <?php echo esc_attr($heading_case); ?>;"><?php echo ($abt_heading); ?></h3>
				<?php if( $about_subHeading  ){ ?>
				<h5 style="text-align: <?php echo esc_attr($text_alignment); ?>;"><?php echo ($about_subHeading); ?></h5>	
				<?php }?>	
				<h2 style="text-align: <?php echo esc_attr($text_alignment); ?>;"><?php echo ($about_title1); ?></h2>
				<h4 style="text-align: <?php echo esc_attr($text_alignment); ?>;"><?php echo ($about_title2); ?></h4>	
				<p style="text-align: <?php echo esc_attr($text_alignment); ?>;">	<?php echo ($abouttext); ?>	</p>
			</div>	
			
			<div class="clearfix"></div>
		</div>
	</div>
	
	<div class="<?php echo esc_attr($c_width); ?>">		
		<div class="row mr-0">
			<?php
	          $showStatic = true;
	          for( $i = 1; $i < 9; $i++ ){
	          	$url = get_theme_mod('ourabtd_page_url_'.$i, '#');
	            $abt_page_id = get_theme_mod('abt_page_icon'.$i); 
	            if(!empty($abt_page_id)){
	              $showStatic = false;
	              break;
	            }
	          }
	      	?>

			<div class="abtbx " data-wow-duration="1s">	
				<div class="row mr-0">	
					<div class="abtbxinn ">	
						<div class="row mr-0">	
						<?php
							$cols = get_theme_mod('abt_npp_count', 3);
							$cols++;
										// echo '$cold: '.$cols;
							switch($cols){
								case 1:
								$colCls = 'col-lg-6 col-md-6 col-sm-6 col-xs-6';
								break;
								case 2:	
								$colCls = 'col-lg-6 col-md-6 col-sm-6 col-xs-6';
								break;
								case 3:
								case 5:
								case 6:
								case 9:
								case 11:
								case 13:
								case 15:
								$colCls = 'col-lg-6 col-md-6 col-sm-6 col-xs-6';
								break;
								default: 
								$colCls = 'col-lg-6 col-md-6 col-sm-6 col-xs-6';
								break;
							}
							$icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
						?>
									 						
				        <?php
				          for( $i = 1; $i <= $cols; $i++ ){
				            if($showStatic === false){
				            	$url = get_theme_mod('ourabtd_page_url_'.$i, '#');
								//$abt_page_id = get_theme_mod('abt_page'.$i);
								$abt_page_title = get_theme_mod('abt_page_title'.$i, 'Retrofits & Repair');
								$abt_title_img = get_theme_mod('abt_title_img'.$i); 
								$abt_page_icon = get_theme_mod('abt_page_icon'.$i);
								$abt_page_icon = get_theme_mod('abt_page_icon'.$i);
							if($abt_page_icon){
				              
				        ?>
					
				           	<div class="<?php echo $colCls;?> abtcon-bx ">
				                <div class="abt-single ">
				                	<div class="row mr-0">
					            		<div class="abt-icon">
					                  		<span class="<?php echo $abt_page_icon; ?>"></span>         
					                	</div> 
					                	<div class="abt-conbx">	
				                			<div class="abt-title inner-area-title">
				                					<?php echo $abt_page_title; ?>
				                			</div>	
					                	</div>
					                </div>		                	
				            	</div>
				              	<div class="clearfix"></div>
				          	</div>
							<?php   }
							                          
							}else{?>

							<div class="<?php echo $colCls;?> abtcon-bx ">
								<div class="abt-single ">
									<div class="row mr-0">
										<div class="abt-icon">
											<span class="fa fa-cog" aria-hidden="true"></span>
										</div>
										<div class="abt-conbx">
											<div class="abt-title inner-area-title">Retrofits & Repair </div>				
										</div>
									</div>
								</div>
								<div class="clearfix"></div>
							</div>
				            <?php }
				          }?>
					       <div class="clearfix"></div>
					  	</div>
					</div>
				<?php
					$yer_num = get_theme_mod('yer_num', '30');	
					$yer_exp = get_theme_mod('yer_exp', 'Year Of Experience');				
				?>	
					<?php if( $yer_num || $yer_exp ){ ?>
					<div class="yearbx">
						<div class="m-cir"></div>
						<div class="yearbxinn">					
							<div class="m-cirinn"></div>
							<div class="num inner-area-title"><?php echo $yer_num; ?></div>
							<div class="exp inner-area-title"><?php echo $yer_exp; ?></div>
						</div>
					</div>
					<?php }?>
				</div>
				<?php
			  		$sectxt = get_theme_mod('sectxt', 'There Are Many Variations Of Passages Of Lorem Ipsum Available, The Majority Have Suffered Alteration In Some Form, By Injected Humour, Or Randomised Words Which Do not Look Even Slightly Believable.');			
				?>
				<div class="sec_txt">
					<?php echo ($sectxt); ?>
				</div>
			</div>	
			
			<div class=" imgbx ">
				<div class="row">
					<div class="about-head">
						<?php 
							$about_head = get_theme_mod('about_head');
							if(!empty($about_head)){
								echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($about_head).'" class="img-responsive secondry-bg-img" />';
							}else{
								echo '<img src="'.get_template_directory_uri().'/images/abthead.png" class="img-responsive" />';
							}
						?>	
					</div>
					 
					<div class="about-img1">
						<?php 
							$about_image2 = get_theme_mod('about_image2');
							if(!empty($about_image2)){
								echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($about_image2).'" class="img-responsive secondry-bg-img" />';
							}else{
								echo '<img src="'.get_template_directory_uri().'/images/abt3.jpg" class="img-responsive" />';
							}
						?>	
					</div>							
				</div>
				<div class="clearfix"></div>	 
				<div class="about-img2">
					<?php 
						$about_image3 = get_theme_mod('about_image3');
						if(!empty($about_image3)){
							echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($about_image3).'" class="img-responsive secondry-bg-img" />';
						}else{
							echo '<img src="'.get_template_directory_uri().'/images/abt2.jpg" class="img-responsive" />';
						}
					?>	
				</div>		
				<div class="clearfix"></div>	
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>

<?php }  