<?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', '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
		}

		// 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_title = get_theme_mod('abt_title', 'About Us');
		$about_subHeading = get_theme_mod('about_subHeading', 'Home And Businesses Installation Services');
		$abouttext = get_theme_mod('about_text', 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or which do not look even slightly believable.');		
	?>		

	<?php if( $abt_title || $about_subHeading || $abouttext ){ ?>	
	<div class="section-title">
		<div class="<?php echo esc_attr($c_width); ?>">
			<div class="row">
				<div class="col-lg-6">
					<div class="titlebx">
						<h3 style="text-align: <?php echo esc_attr($text_alignment); ?>; text-transform: <?php echo esc_attr($heading_case); ?>;"><?php echo ($abt_title); ?></h3>
						<h5 style="text-align: <?php echo esc_attr($text_alignment); ?>;"><?php echo ($about_subHeading); ?></h5>
						<div class="titlebrd"></div>
					</div>
				</div>
				<div class="col-lg-6">
					<p>
						<?php echo ($abouttext); ?>	
					</p>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
	<?php }?>
				
	<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="col-lg-6 col-md-12 abt-rbx  " data-wow-duration="1s">
				<div class="abtbx ">	
					<div class="row ">	
					<?php
						$cols = get_theme_mod('abt_npp_count', 2);
						$cols++;
									// echo '$cold: '.$cols;
						switch($cols){
							case 1:
							$colCls = 'col-lg-12 col-md-12 col-sm-12 col-xs-12';
							break;
							case 2:	
							$colCls = 'col-lg-12 col-md-12 col-sm-12 col-xs-12';
							break;
							case 3:
							case 5:
							case 6:
							case 9:
							case 11:
							case 13:
							case 15:
							$colCls = 'col-lg-12 col-md-12 col-sm-12 col-xs-12';
							break;
							default: 
							$colCls = 'col-lg-12 col-md-12 col-sm-12 col-xs-12';
							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, 'Licensed and Insured:');
							$abt_page_txt = get_theme_mod('abt_page_txt'.$i, 'Felis Bibendum Ut Tristique Et Egestas Quis Ipsum Suspendisse Ultrices. Aenean Vel Elit Scelerisque Mauris Pellentesque Consectetur Adipiscing Elitpulvinar.');
							$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">
				            			<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
				                  			<span class="<?php echo $abt_page_icon; ?>"></span>    
				                  		</a>            		
				                	</div> 
				                	<div class="abt-conbx">
				                		<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
				                			<div class="abt-title inner-area-title">
				                					<?php echo $abt_page_title; ?>
				                			</div>
			                			</a>
			                			<p><?php echo $abt_page_txt; ?></p>
				                	</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">
										<a href="#">									
											<span class="fa fa-shield" aria-hidden="true"></span>
										</a>
									</div>
									<div class="abt-conbx">
										<a href="#">			
											<div class="abt-title inner-area-title">Licensed and Insured: </div>
										</a>
										<p>Felis Bibendum Ut Tristique Et Egestas Quis Ipsum Suspendisse Ultrices. Aenean Vel Elit Scelerisque Mauris Pellentesque Consectetur Adipiscing Elitpulvinar.</p>				
									</div>
								</div>
							</div>
							<div class="clearfix"></div>
						</div>
			            <?php }
			          }?>
				       <div class="clearfix"></div>
				  	</div>
				</div>
				<?php					
					$abtphone = get_theme_mod('abtphone', '000 123 456 789');
					$phtxt = get_theme_mod('phtxt', 'Call For Booking');
					
					$email = get_theme_mod('email', 'Hello@Example.Com');
					$emtxt = get_theme_mod('emtxt', 'Send Us Email');
				?>	
				<?php if($abtphone || $phtxt || $email || $emtxt ){ ?>
				<div class="abt-contactbx">
					<div class="row ">
						<?php if($abtphone || $phtxt ){ ?>
						<div class="abt-ph">
							<div class="row ">
								<div class="icn">
									<i class="fa fa-volume-control-phone"></i>
								</div>
								<div class="phbx">
									<a class="" href="tel:<?php echo $abtphone;?>"><?php echo $abtphone;?></a>
									<div class="phtext"><?php echo $phtxt;?></div>
								</div>
							</div>
						</div>
						<?php }?>
						<?php if($email || $emtxt ){ ?>
						<div class="abt-mail">
							<div class="row ">
								<div class="icn">
									<i class="fa fa-comments-o"></i>
								</div>
								<div class="mailbx">
									<a href="mailto:<?php echo $email;?>"><?php echo $email;?></a>
									<div class="emtext"><?php echo $emtxt;?></div>
								</div>
							</div>
						</div>
						<?php }?>
					</div>		
				</div>
				<?php }?>

				<div class="btnbx">
					<?php
						$abtbtn_text = get_theme_mod('abtbtn_text', 'Read More');
						$abtbtnlink = get_theme_mod('abtbtnlink', '#');
					?>
					<?php if($abtbtn_text ){ ?>
					<div class="abt-btn">						
						<a href="<?php echo ($abtbtnlink);  ?>" >
                        	<span><?php echo($abtbtn_text); ?> </span>
						</a>					
					</div>	
					<?php }?>
				</div>
			</div>
			<div class="col-lg-6 col-md-12 imgbx ">
				<?php
					$yearnum = get_theme_mod('yearnum', '25');
					$yeartxt = get_theme_mod('yeartxt', 'years expertise');

					$txtnum = get_theme_mod('txtnum', '45+');
					$n_txt = get_theme_mod('n_txt', 'World-Wide');
					$n_txt2 = get_theme_mod('n_txt2', 'Connections');
				?>
				<div class="row">
					<?php if( get_theme_mod('abtimg1_display','show' ) == 'show') :?>    
					<div class="about-img1">
						<?php 
							$about_image1 = get_theme_mod('about_image1');
							if(!empty($about_image1)){
								echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($about_image1).'" class="img-responsive secondry-bg-img" />';
							}else{
								echo '<img src="'.get_template_directory_uri().'/images/abt3.jpg" class="img-responsive" />';
							}
						?>	
					</div>
					<?php endif ?>
					<?php if($yearnum || $yeartxt ){ ?>
					<div class="year">
						<div class="yearbx">
							<div class="num"><?php echo ($yearnum);  ?></div>
							<div class="n-txt"><?php echo ($yeartxt);  ?></div>
						</div>
					</div>
					<?php }?>
				</div>
				<?php if( get_theme_mod('abtimg2_display','show' ) == 'show') :?>	 
				<div class="about-img2">
					<?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/abt2.jpg" class="img-responsive" />';
						}
					?>	
				</div>
				<?php endif ?>
				<div class="abt-img3bx">
					<div class="row">
						<?php if( get_theme_mod('abtvdeo_display','show' ) == 'show') :?>
						<div class="about-img3">
							<div class="video-content-bg" > 
								<div class="hover_bkgr_fricc " >
									<?php
										// Retrieve the video URL from the WordPress customizer
										$videoUrl = get_theme_mod('luzuk_premium_about_video_iframe', '');

										// Check if a valid URL is provided
										if (!empty($videoUrl)) {
										    // Handle YouTube videos
										    if (strpos($videoUrl, 'youtube.com') !== false) {
										        // Extract video ID from a standard YouTube watch URL
										        parse_str(parse_url($videoUrl, PHP_URL_QUERY), $queryParams);
										        if (isset($queryParams['v'])) {
										            $videoId = $queryParams['v'];
										            $videoUrl = "https://www.youtube.com/embed/{$videoId}?autoplay=1&mute=1";
										        }
										    }
										    // Handle Vimeo videos
										    elseif (strpos($videoUrl, 'vimeo.com') !== false) {
										        // For Vimeo, ensure autoplay parameter is added
										        if (strpos($videoUrl, '?') === false) {
										            $videoUrl .= '?autoplay=1';
										        } else {
										            $videoUrl .= '&autoplay=1';
										        }
										    }

										    // Output the iframe HTML with the dynamic URL
										    echo '<iframe id="video-popup-iframe" src="' . esc_url($videoUrl) . '" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen"></iframe>';
										} else {
										    // Optional: Handle the case where no URL has been set
										    echo '<p>No video available.</p>';
										}
									?>
								</div>			
							</div>
						</div>
						<?php endif ?>
						<?php if($txtnum || $n_txt || $n_txt2 ){ ?>
						<div class="txtbx">
							<div class="txtbxinn">
								<div class="num"><?php echo ($txtnum);  ?></div>
								<div class="n-txt1"><?php echo ($n_txt);  ?></div>
								<div class="n-txt2"><?php echo ($n_txt2);  ?></div>
							</div>
						</div>		
						<?php }?>

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

<?php }  