<?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');
		$about_subHeading = get_theme_mod('about_subHeading', 'About Us');
		$about_title = get_theme_mod('about_title', 'Lorem Ipsum are available');
	
	?>		
	<div class="<?php echo esc_attr($c_width); ?> ">
		<?php if( get_theme_mod('abticir_display','show' ) == 'show') :?>   
		<div class="abt-cir">	
			<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
			  <defs>
			    <pattern id="linePattern" width="14" height="14" patternUnits="userSpaceOnUse">
			      <line x1="0" y1="0" x2="15" y2="15"  stroke-width="1.2" />
			    </pattern>
			  </defs>
			  <circle cx="50" cy="50" r="40" fill="url(#linePattern)" stroke="#222222" stroke-width="0" />
			</svg>
		</div>
		<?php endif ?>

		<div class="row mr-0">
			<div class="titlebx">
				<div class="row mr-0">
					<div class="subtitlebx">	
						<?php if( $about_subHeading  ){ ?>
						<div class="sub_title" style="text-align: <?php echo esc_attr($text_alignment); ?>; text-transform: <?php echo esc_attr($heading_case); ?>;"><?php echo ($about_subHeading); ?> 
							<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
							  <g transform="scale(-1, 1)" transform-origin="center">
							    <path d="M 2.5 8 L 0 10.5 L 2.5 13 L 4 13 L 2 11 L 19 11 L 19 10 L 2 10 L 4 8 L 2.5 8 z"
							      style="fill-opacity:1; stroke:none; stroke-width:0px;"></path>
							  </g>
							</svg>
						</div>
						<?php }?>
										
						<div class="clearfix"></div>
					</div>
					<div class="sub-imgbx">
						<div class="about-subimg">
							<?php 
								$about_subimg = get_theme_mod('about_subimg');
								if(!empty($about_subimg)){
									echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($about_subimg).'" class="img-responsive secondry-bg-img" />';
								}else{
									echo '<img src="'.get_template_directory_uri().'/images/abthead.jpg" class="img-responsive" />';
								}
							?>	
						</div>	
					</div>
				</div>
				<h2 style="text-align: <?php echo esc_attr($text_alignment); ?>; text-transform: <?php echo esc_attr($heading_case); ?>;"><?php echo ($about_title); ?></h2>
			</div>
			<div class=" R-imgbx ">						 
				<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 class="clearfix"></div>	
			</div>
		</div> 

		<div class="row mr-0">
			<?php
				$yer_num = get_theme_mod('yer_num', '14');	
				$yer_exp = get_theme_mod('yer_exp', 'Year Of Experience');				
			?>
			<div class="abtbx " data-wow-duration="1s">							
				<?php if( $yer_num || $yer_exp ){ ?>
				<div class="yearbx">
					<div class="yearbxinn">	
						<?php if( $yer_num  ){ ?>
						<div class="num inner-area-title"><?php echo $yer_num; ?></div>
						<?php }?>
						<div class="clearfix"></div>
						<div class="exp"><?php echo $yer_exp; ?></div>
					</div>
				</div>
				<?php }?>
			</div>
			<!-- end -->
			<?php
				$tb_name1 = get_theme_mod('tb_name1', '2010-2014');	
				$tb_txt1 = get_theme_mod('tb_txt1', '<p>There Are Many Variations Of Passages Of Lorem Ipsum Available, But The Majority Have Suffered Alteration In Some Form, By Injected Humour, Or Randomised Words Which Do not Look Even Slightly Believable.</p>
					<li>Responsive all devices</li>
  <li>Smooth animations </li>
  <li>Modern design</li>
  <li>Clean & Clear</li>
  ');	

				$tb_name2 = get_theme_mod('tb_name2', '2015-2020');	
				$tb_txt2 = get_theme_mod('tb_txt2', '<p>There Are Many Variations Of Passages Of Lorem Ipsum Available, But The Majority Have Suffered Alteration In Some Form, By Injected Humour, Or Randomised Words Which Do not Look Even Slightly Believable.</p>
					<li>Responsive all devices</li>
  <li>Smooth animations </li>
  <li>Modern design</li>
  <li>Clean & Clear</li>');

				$tb_name3 = get_theme_mod('tb_name3', '2021-2024');		
				$tb_txt3 = get_theme_mod('tb_txt3', '<p>There Are Many Variations Of Passages Of Lorem Ipsum Available, But The Majority Have Suffered Alteration In Some Form, By Injected Humour, Or Randomised Words Which Do not Look Even Slightly Believable.</p>
					<li>Responsive all devices</li>
  <li>Smooth animations </li>
  <li>Modern design</li>
  <li>Clean & Clear</li>');
			?>
			<div class="tbbox">
				<div class="tabs-container">
				    <div class="tabs">
					    <div class="tab-links">
					    	<?php if( $tb_name1  ){ ?>
					        <div class="tab-link" data-tab="tab-1"> <?php echo $tb_name1; ?></div>
					        <?php }?>

					        <?php if( $tb_name2  ){ ?>
					        <div class="tab-link" data-tab="tab-2"><?php echo $tb_name2; ?></div>
					        <?php }?>

					        <?php if( $tb_name3  ){ ?>
					        <div class="tab-link" data-tab="tab-3"><?php echo $tb_name3; ?></div>
					        <?php }?>
					    </div>

				        <div class="tab-content " id="tab-1">
				        	<?php echo $tb_txt1; ?>	        
				        </div>

						<div class="tab-content" id="tab-2">
							<?php echo $tb_txt2; ?>
						</div>

						<div class="tab-content" id="tab-3">
							<?php echo $tb_txt3; ?>
						</div>
				    </div>
	  			</div>

	  			<div class="btnbx">
					<?php
						$abtbtn_text = get_theme_mod('abtbtn_text', 'About Us');
						$abtbtnlink = get_theme_mod('abtbtnlink', '#');
					?>
					<?php if($abtbtn_text ){ ?>
					<div class="abt-btn">						
						<a href="<?php echo ($abtbtnlink);  ?>" >
                        	<?php echo($abtbtn_text); ?> <span class="fa fa-long-arrow-right"></span>
						</a>					
					</div>	
					<?php }?>
				</div>
			</div>	
		</div>
		<div class="clearfix"></div>
	</div>
</div>

<script type="text/javascript">
const tabLinks = document.querySelectorAll('#about .tab-link');
const tabContents = document.querySelectorAll('#about .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 }  