<?php
/**
 *
 * @package luzuk Premium
 */
 if(get_theme_mod('appointment_area_disable') != 'on' ){ ?>
	
<div class="appointment " id="appointment">		  
	<?php
		// width 
		$c_width = get_theme_mod('app_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
			}

		// Sub Heading Style
    	$sub_heading_case = get_theme_mod('app_subtitle_case', 'uppercase');

		if ($sub_heading_case === 'uppercase') {
				$text_case = 'uppercase';
			} elseif ($sub_heading_case === 'lowercase') {
			    $text_case = 'lowercase';
			} elseif ($sub_heading_case === 'capitalize') {
			    $text_case = 'capitalize';
			} else {
			    $text_case = 'capitalize'; // Default to 'left' if the setting is invalid
			}

		// Heading Style
    	$heading_case = get_theme_mod('app_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
			}
	?>
		<div class="<?php echo esc_attr($c_width); ?>">
		<?php							
			$app_titletxt = get_theme_mod('app_titletxt', 'Eco-Friendly Power System');
			$app_title = get_theme_mod('app_lhtitle', 'We strive to spark a global shift toward sustainability by delivering cutting-edge, eco-friendly solutions that inspire recycling and conscious living.');
			$app_txt = get_theme_mod('app_txt', 'Dedicated to transforming the way energy is consumed,
	offering clean and renewable solar solutions ever.');

		?>
				<div class="conbx">
						<div class="row mr-0">
								<div class="lhsimgbx">	
										<div class="row ">
												<div class="mgbx1">
													<?php 
														$app_1image = get_theme_mod('app_1image');
														if(!empty($app_1image)){
															echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($app_1image).'" class="img-responsive secondry-bg-img" />';
														}else{
															echo '<img src="'.get_template_directory_uri().'/images/app1.jpg" class="img-responsive" />';
														}
													?>	
												</div>
												<div class="mgbx2">
													<?php 
														$app_2image = get_theme_mod('app_2image');
														if(!empty($app_2image)){
															echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($app_2image).'" class="img-responsive secondry-bg-img" />';
														}else{
															echo '<img src="'.get_template_directory_uri().'/images/app4.jpg" class="img-responsive" />';
														}
													?>
												</div>
										</div>
								</div>
								<div class="section-title">
										<div class="titlebx">
												<div class="sub_title" style="text-transform: <?php echo esc_attr($sub_heading_case); ?>; ">
														<?php echo ($app_titletxt); ?>
												</div>
												<h3 style=" text-transform: <?php echo esc_attr($heading_case); ?>;"><?php echo ($app_title); ?></h3>
												<div class="txt"><?php echo ($app_txt); ?></div>
												<?php 
											        $right_stickybtn = get_theme_mod('right_stickybtn', 'GET A QUOTE');
											        $right_stickyform = get_theme_mod('right_stickyform', 'Add Form Shortcode in customizer');
												?>
											  <?php if(!empty($right_stickybtn)){ ?>
												<div class="sticky-btn">
														<div onclick="change()" class="open-popup">
																<div class="txtinn"><?php echo $right_stickybtn; ?></div>
																<div class="ainc"> 
                                    <i class="fa-solid fa-arrow-right"></i> 
                                </div>	
														</div>	
														<div class="one" id="visible-block" onclick="rrr()">
														  	<div class="overlay" ></div>
															  <div class="middle" id="visible">
																    <div class="two">
																      	<button id="closeButton" onclick="rrr(event)">x</button>
																      <?php echo do_shortcode($right_stickyform); ?>
																    </div>
															  </div>
														</div>
												</div>
											<?php }?>
										</div>
								</div>	
								<div class="rhsimgbx">
										<div class="row ">
												<div class="mgbx3">
													<?php 
														$app_3image = get_theme_mod('app_3image');
														if(!empty($app_3image)){
															echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($app_3image).'" class="img-responsive secondry-bg-img" />';
														}else{
															echo '<img src="'.get_template_directory_uri().'/images/app2.jpg" class="img-responsive" />';
														}
													?>	
												</div>
												<div class="mgbx4">
													<?php 
														$app_4image = get_theme_mod('app_4image');
														if(!empty($app_4image)){
															echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($app_4image).'" class="img-responsive secondry-bg-img" />';
														}else{
															echo '<img src="'.get_template_directory_uri().'/images/app3.jpg" class="img-responsive" />';
														}
													?>
												</div>
										</div>
								</div>
						</div>
				</div>	
		</div>
</div>
<script>
	function change() {
  document.getElementById('visible').style.right = "0"; // Slide in from the right
  document.getElementById('visible-block').style.right = "0"; // Show the full block
}

function rrr(event) {
  event.stopPropagation(); // Prevent the event from bubbling up
  document.getElementById('visible').style.right = "-100%"; // Slide out to the right
  document.getElementById('visible-block').style.right = "-100%"; // Hide the full block
}
</script>
<?php }  