<?php
if(get_theme_mod('appointment_area_disable') != 'on' ){ ?>
		
<div class="appointment-area" id="appointment" data-wow-duration="1s">	
	<?php
		// width 
		$c_width = get_theme_mod('app_c_width', 'container-fluid');

	    if ($c_width === 'container') {
		    $c_alignment = 'container';
		} elseif ($c_width === 'container-fluid') {
		    $c_alignment = 'container-fluid';
		} else {
		    $text_container = 'container'; // Default to 'container' if the setting is invalid
		}

		//Main 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
			}

		$appointment_page_id = get_theme_mod('appointment_page');
		$app_Heading = get_theme_mod('app_Heading', 'Connect with us');
		$appphone = get_theme_mod('appphone', '+00 000 000 000 00');
		$appemail = get_theme_mod('appemail', 'hello@example.com');
		
	?>		

		<div class="<?php echo esc_attr($c_width); ?> cf-ps">
				<div class="row mr-0">				
						<div class="appconbx">
								<h3 style="text-transform: <?php echo esc_attr($heading_case); ?>;">
										<?php echo ($app_Heading); ?>
								</h3>
						</div>
						<div class="con-dbx">
								<?php if( $appphone ){ ?>
								<li> <a class="" href="tel:<?php echo $appphone;?>"> <p> <i class="fa fa-phone"></i> <?php echo $appphone;?></p></a> </li>
								<?php } ?>
								<?php if( $appemail ){ ?>
								<li> <a href="mailto:<?php echo $appemail;?>"><p> <i class="fa fa-envelope-o"></i> <?php echo $appemail;?> </p> </a> </li>
								<?php } ?>
						</div>

				</div>			
			<div class="clearfix"></div>
		</div>
</div>
<script type="text/javascript">
const tabLinks = document.querySelectorAll('#appointment .tab-link');
const tabContents = document.querySelectorAll('#appointment .tab-content');

// Set the first tab link and content as active by default
if (tabLinks.length > 0 && tabContents.length > 0) {
  tabLinks[0].classList.add('active');
  tabContents[0].classList.add('active');
}

// Add click event listener to each tab link
tabLinks.forEach(link => {
  link.addEventListener('click', () => {
    // Remove active class from all links
    tabLinks.forEach(link => link.classList.remove('active'));
    // Add active class to clicked link
    link.classList.add('active');

    // Hide all tab contents
    tabContents.forEach(content => content.classList.remove('active'));

    // Show current tab content
    const targetTab = document.getElementById(link.dataset.tab);
    targetTab.classList.add('active');
  });
});


</script>
<?php }  