<?php
 if(get_theme_mod('banner2_area_disable') != 'on' ){
?>
<?php 
	if( get_theme_mod('banner2_areaTpadding',true) ) {
		$banner2_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('banner2_areaTpadding')).';';
	}
	if( get_theme_mod('banner2_areaBpadding',true) ) {
		$banner2_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('banner2_areaBpadding')).';';
	}

?>			
<div class="banner2 " id="banner2">	
	<div class="banner2bx">	  
		<div class="b2_oly"></div>
		<?php
			// width 
			$c_width = get_theme_mod('bann2_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
			}
		?>
		<?php							
			$bann2_title = get_theme_mod('bann2_title', 'Reliable ');
			$bann2_hightitle = get_theme_mod('bann2_hightitle', 'Handyman');
			$bann2_sometitle = get_theme_mod('bann2_sometitle', 'Services For');
			$bann2_extratitle = get_theme_mod('bann2_extratitle', 'Every Job, Big Or Small');

			$bann2_txtno1 = get_theme_mod('bann2_txtno1', '483000+ ');
			$bann2_txt = get_theme_mod('bann2_txt', 'App Download In 2024 ');

			$bann2_txtno2 = get_theme_mod('bann2_txtno2', '30000+ ');
			$bann2_txt2 = get_theme_mod('bann2_txt2', '30000+ Daily Active User');
		?>
		<div class="<?php echo esc_attr($c_width); ?>">
			<div class="out-bx">
				<div class="row">
				
					<div class="bx">
						<h3><?php echo ($bann2_title); ?><span> <?php echo ($bann2_hightitle); ?> </span><?php echo ($bann2_sometitle); ?></h3>
						<h4><?php echo ($bann2_extratitle); ?></h4>

						<?php if( $bann2_txtno1 || $bann2_txt ){ ?>	
						<p class="appdown">
							<svg xmlns="http://www.w3.org/2000/svg" width="15" height="18" viewBox="0 0 15 18">
							  <path id="Path_551" data-name="Path 551" d="M7.5,0A12.5,12.5,0,0,0,9.864,5.344,15.928,15.928,0,0,0,15,9a13.392,13.392,0,0,0-5.136,3.39A12.945,12.945,0,0,0,7.5,18a15.344,15.344,0,0,0-2.627-5.61A13.389,13.389,0,0,0,0,9,16.246,16.246,0,0,0,4.873,5.344,15.089,15.089,0,0,0,7.5,0Z" fill="#fff"/>
							</svg> 
							<strong><?php echo ($bann2_txtno1); ?></strong> <?php echo ($bann2_txt); ?>
						</p>
						<?php }?>

						<?php if( $bann2_txtno2 || $bann2_txt2 ){ ?>
						<p class="apactv"> 
							<svg xmlns="http://www.w3.org/2000/svg" width="15" height="18" viewBox="0 0 15 18">
							  <path id="Path_551" data-name="Path 551" d="M7.5,0A12.5,12.5,0,0,0,9.864,5.344,15.928,15.928,0,0,0,15,9a13.392,13.392,0,0,0-5.136,3.39A12.945,12.945,0,0,0,7.5,18a15.344,15.344,0,0,0-2.627-5.61A13.389,13.389,0,0,0,0,9,16.246,16.246,0,0,0,4.873,5.344,15.089,15.089,0,0,0,7.5,0Z" fill="#fff"/>
							</svg>
	 						<strong><?php echo ($bann2_txtno2); ?></strong> <?php echo ($bann2_txt2); ?>
	 					</p>
	 					<?php }?>
	 					
						
						<div class="bttn">
						<?php
							$bann2vbt_text = get_theme_mod('bann2vbt_text', 'Tap To Play');
							$iframe = get_theme_mod('luzuk_bann2_vb_embade', 'Add your video embed code in customizer');
						?>
						<?php if($bann2vbt_text ){ ?>						
							<div class="video-pop">
							    <a class="popup-youtube" id="video-pop">                             
		                        	<span> <?php echo($bann2vbt_text); ?> </span> <i class="fa fa-play"></i>  
								</a>
							    <div id="popup" class="popup">
							        <div class="popup-content">
							            <span id="closePopup">&times;</span>
							            <?php echo $iframe; ?>
							        </div>
							    </div>
							</div>									
						<?php }?>
						<div class="clearfix"></div>
						</div>				
					</div>
					
					<?php										
						$img_ttle = get_theme_mod('img_ttle', 'Get Our App');
						$bann2apleimglink1 = get_theme_mod('bann2apleimglink1', '#');
						$bann2gpyimglink2 = get_theme_mod('bann2gpyimglink2', '#');
					?>
						
					<div class="imgbx">
						<div class="imgbrd"></div>
						
						<div class="imgtitle"><?php echo($img_ttle); ?></div>
						<?php if( get_theme_mod('qrimg2_display','show' ) == 'show') :?>
						<div class="qrimg">					
							<?php 
								$qr_image = get_theme_mod('qr_image');
								if(!empty($qr_image)){
									echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($qr_image).'" class="img-responsive secondry-bg-img" />';
								}else{
									echo '<img src="'.get_template_directory_uri().'/images/QR.png" class="img-responsive" />';
								}
							?>							
						</div>
						<?php endif ?>

						<?php if( get_theme_mod('appleimg2_display','show' ) == 'show') :?>
						<div class="aplimg">
							<a href="<?php echo ($bann2apleimglink1);  ?>" >
							<?php 
								$apple_image = get_theme_mod('apple_image');
								if(!empty($apple_image)){
									echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($apple_image).'" class="img-responsive secondry-bg-img" />';
								}else{
									echo '<img src="'.get_template_directory_uri().'/images/apple.png" class="img-responsive" />';
								}
							?>	
							</a>
						</div>
						<?php endif ?>

						<?php if( get_theme_mod('Gpayimg2_display','show' ) == 'show') :?>
						<div class="gpayimg">
							<a href="<?php echo ($bann2gpyimglink2);  ?>" >
							<?php 
								$gpay_image = get_theme_mod('gpay_image');
								if(!empty($qr_image2)){
									echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($gpay_image).'" class="img-responsive secondry-bg-img" />';
								}else{
									echo '<img src="'.get_template_directory_uri().'/images/gpay.png" class="img-responsive" />';
								}
							?>	
							</a>
						</div>
						<?php endif ?>		
					</div>					
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	document.getElementById("video-pop").addEventListener("click", function() {
	    const popup = document.getElementById("popup");
	    const popupContent = popup.querySelector(".popup-content");

	    popup.classList.add("show");
	    popupContent.classList.add("show");
	});

	document.getElementById("closePopup").addEventListener("click", function() {
	    const popup = document.getElementById("popup");
	    const popupContent = popup.querySelector(".popup-content");
	    const videoIframe = popupContent.querySelector("iframe"); // Select the iframe inside the popup

	    popupContent.classList.remove("show");
	    popup.classList.remove("show");

	    // Stop the video by resetting the src attribute
	    videoIframe.src = videoIframe.src;
	});

</script>
<?php }  