<?php
/**
 * Template Name: Custom Home
 */
get_header(); ?>

<main id="skip-content" role="main">

	<?php do_action( 'luzuk_building_architecture_above_slider' ); ?>

	<?php if( get_theme_mod('luzuk_building_architecture_slider_hide_show') != ''){ ?>
	<section id="slider">	  
		
			<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
			    <?php $luzuk_building_architecture_slider_pages = array();
			    for ( $count = 1; $count <= 4; $count++ ) {
			        $mod = intval( get_theme_mod( 'luzuk_building_architecture_slider'. $count ));
			        if ( 'page-none-selected' != $mod ) {
			          $luzuk_building_architecture_slider_pages[] = $mod;
			        }
			    }
		      	if( !empty($luzuk_building_architecture_slider_pages) ) :
			        $args = array(
			          	'post_type' => 'page',
			          	'post__in' => $luzuk_building_architecture_slider_pages,
			          	'orderby' => 'post__in'
			        );
		        	$query = new WP_Query( $args );
		        if ( $query->have_posts() ) :
		          	$i = 1;
		    	?>   
		    	 <div class="carousel-inner" role="listbox">
		    	<!-- <div class="container">    -->
				   
				      	<?php  while ( $query->have_posts() ) : $query->the_post(); ?>
				        <div <?php if($i == 1){echo 'class="carousel-item fade-in-image active"';} else{ echo 'class="carousel-item fade-in-image"';}?>>
							<div class="overlay"></div>
							<div class="slideimg">
								<?php
								// Check if the post has a thumbnail
								if (has_post_thumbnail()) {
									// If post has thumbnail, display it
									?>
									<img src="<?php echo esc_url(get_the_post_thumbnail_url(get_the_ID(), 'full')); ?>" alt="<?php echo esc_attr(get_the_title()); ?>" />
									<?php
								} else {
									// If post does not have thumbnail, display default image
									?>
									<img src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/abt1.jpg'); ?>" alt="Default Image" />
									<?php
								}
								?>
							</div>
												
							<div class="content">
								<!-- <h5></?php echo esc_html(get_theme_mod('luzuk_building_architecture_excerpt')); ?></h5>  -->
								

								<h2><?php the_title(); ?>
									<div class="t-brd"></div>
								</h2>

								<?php 
									$luzuk_building_architecture_slider_excerpt_length = get_theme_mod('luzuk_building_architecture_slider_excerpt_length','5');
								
									if( $luzuk_building_architecture_slider_excerpt_length != ''){?>
									<p ><?php $luzuk_building_architecture_excerpt = get_the_excerpt(); echo esc_html( luzuk_building_architecture_string_limit_words( $luzuk_building_architecture_excerpt, esc_attr(get_theme_mod('luzuk_building_architecture_slider_excerpt_length','5') ) )); ?></p>
								<?php } ?>

								<div class="sbtn1" >
									<a href="<?php echo esc_url(get_theme_mod('luzuk_building_architecture_sliderbtnlink', '#')); ?>">
										<?php echo esc_html(get_theme_mod('luzuk_building_architecture_sliderbtntext', 'Lets Talk')); ?>
										<i class="fa-solid fa-arrow-right"></i>
									</a>
								</div>
							</div>
				        </div>
				      	<?php $i++; endwhile; 
				      	wp_reset_postdata();?>
				    <!-- </div> -->
			    <?php else : ?>

			    	</div>
			    	<div class="no-postfound"></div>
	      		<?php endif;
			    endif;?>
			<div class="slidebtn">
			    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
						
					<span class="carousel-control-prev-icon" aria-hidden="true">
					  <i class="fas fa-chevron-left"></i>
			      	</span>
			      	<span class="screen-reader-text"><?php esc_html_e( 'Prev','building-architecture' );?></span>
			    </a>
			    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
					
					<span class="carousel-control-next-icon" aria-hidden="true">
					  <i class="fas fa-chevron-right"></i>
			      	</span>
			      	<span class="screen-reader-text"><?php esc_html_e( 'Next','building-architecture' );?></span>
			    </a>
				<!-- <ol class="carousel-indicators">
                    <//?php for ($j = 0; $j < $i; $j++) : ?>
                        <li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $j; ?>" class="<?php if ($j === 0) echo 'active'; ?>"></li>
                    <//?php endfor; ?>
                </ol> -->
			</div>
		  	<div class="clearfix"></div>
		</div> 
		<!-- <div class="scrolldown">
			<h2><//?php esc_html_e( 'Scroll Down', 'building-architecture' ); ?></h2>
		</div> -->
	</section>
	<?php }?>
	
	<?php do_action('luzuk_building_architecture_below_slider'); ?>

	<section id="feature-section">
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-md-6 col-sm-6">
					<div class="count-box ">
						<h2 class="count"><?php echo esc_html(get_theme_mod('luzuk_building_architecture_featureprojectcomnumber', '2k+')); ?></h2>
						<h3><?php echo esc_html(get_theme_mod('luzuk_building_architecture_featureprojectcomtext', 'Projects Completed')); ?></h3>
					</div>
				</div>
				<div class="col-lg-3 col-md-6 col-sm-6">
					<div class="count-box ">
						<h2 class="count"><?php echo esc_html(get_theme_mod('luzuk_building_architecture_featureglobalcusnumber', '15+')); ?></h2>
						<h3><?php echo esc_html(get_theme_mod('luzuk_building_architecture_featureglobalcustext', 'Global Customers')); ?></h3>
					</div>
				</div>
				<div class="col-lg-3 col-md-6 col-sm-6">
					<div class="count-box ">
						<h2 class="count"><?php echo esc_html(get_theme_mod('luzuk_building_architecture_featureteamengnumber', '25+')); ?></h2>
						<h3><?php echo esc_html(get_theme_mod('luzuk_building_architecture_featureteamengtext', 'Team Engineers')); ?></h3>
					</div>
				</div>
				<div class="col-lg-3 col-md-6 col-sm-6">
					<div class="count-box ">
						<h2 class="count"><?php echo esc_html(get_theme_mod('luzuk_building_architecture_featureyearofexpnumber', '15+')); ?></h2>
						<h3><?php echo esc_html(get_theme_mod('luzuk_building_architecture_featureyearofexptext', 'Years Of Experience')); ?></h3>
					</div>
				</div>
			</div>
		</div>

<script>
  $(document).ready(function () {
    var counters = $("#feature-section .count");
    var countersQuantity = counters.length;
    var counterValues = [];

    // Extract initial values and split numbers from text/symbols
    for (let i = 0; i < countersQuantity; i++) {
      let value = counters[i].innerHTML.trim();
      let numberMatch = value.match(/\d+/); // Extract the numeric part
      let prefix = value.replace(/\d+.*/, ""); // Extract prefix (non-numeric before number)
      let suffix = value.replace(/.*\d+/, ""); // Extract suffix (non-numeric after number)

      counterValues[i] = {
        original: value,
        number: numberMatch ? parseInt(numberMatch[0]) : null,
        prefix: prefix,
        suffix: suffix,
      };
    }

    // Function to animate numeric counter
    var count = function (start, end, prefix, suffix, id) {
      let current = start;
      let interval = setInterval(function () {
        if (current < end) {
          current++;
          counters[id].innerHTML = prefix + current + suffix;
        } else {
          clearInterval(interval);
        }
      }, 40);
    };

    // Start counting
    for (let j = 0; j < countersQuantity; j++) {
      let counter = counterValues[j];
      if (counter.number !== null) {
        // Animate numbers
        count(0, counter.number, counter.prefix, counter.suffix, j);
      } else {
        // Display non-numeric values directly
        counters[j].innerHTML = counter.original;
      }
    }
  });
</script>
	</section>

	<?php do_action('luzuk_building_architecture_below_feature_section'); ?>
		<section id="aboutus-section">
			<div class="container">
				<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="#222222" stroke-width="1.2" />
					    </pattern>
					  </defs>
					  <circle cx="50" cy="50" r="40" fill="url(#linePattern)" stroke="#222222" stroke-width="0" />
					</svg>
				</div>
				<div class="row mr-0">
					<div class="leftside">
						<div class="row">
							<div class="sub-title">
								<h6><?php echo esc_html(get_theme_mod('luzuk_building_architecture_aboutusheading', 'About us')); ?>  <i class="fa-solid fa-arrow-right-long"></i></h6>
							</div>
							<div class="sub-img">
								<div class="sub-imginn">
								<?php 
									$luzuk_building_architecture_aboutus_image1 = get_theme_mod('luzuk_building_architecture_aboutus_image1');

									if(!empty($luzuk_building_architecture_aboutus_image1)){
										echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($luzuk_building_architecture_aboutus_image1).'" class="img-responsive secondry-bg-img" />';
									}else{
										echo '<img alt="luzuk_building_architecture_aboutus_image1" src="'.get_template_directory_uri().'/assets/images/abthead.jpg" class="img-responsive" />';
									}
								?>
								</div>
							</div>
						</div>
						<h5><?php echo esc_html(get_theme_mod('luzuk_building_architecture_aboutustitle', 'Lorem Ipsum are available')); ?></h5>
						
					</div>
					<div class="rightside">
						<?php 
							$luzuk_building_architecture_aboutus_image2 = get_theme_mod('luzuk_building_architecture_aboutus_image2');

							if(!empty($luzuk_building_architecture_aboutus_image2)){
								echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($luzuk_building_architecture_aboutus_image2).'" class="img-responsive secondry-bg-img" />';
							}else{
								echo '<img alt="luzuk_building_architecture_aboutus_image2" src="'.get_template_directory_uri().'/assets/images/abt3.jpg" class="img-responsive" />';
							}
						?>
						
					</div>
					<div class="row">
						<div class="expebx">
							<div class="expe">
								<h2><?php echo esc_html(get_theme_mod('luzuk_building_architecture_aboutusyearofexperiencenum', '14')); ?></h2>
								<div class="exptxt"><?php echo esc_html(get_theme_mod('luzuk_building_architecture_aboutusyearofexperiencetext', 'Years Of Experience')); ?></div>
							</div>
						</div>
						<div class="funtabsbx">
							<div class="funtabs">
								<ul class="tabs">
									<li class="tab-link current" data-tab="tab-1"><?php echo esc_html(get_theme_mod('luzuk_building_architecture_aboutustabsyears1', '2010-2015')); ?></li>
									<li class="tab-link" data-tab="tab-2"><?php echo esc_html(get_theme_mod('luzuk_building_architecture_aboutustabsyears2', '2015-2024')); ?></li>
								</ul>

								<div id="tab-1" class="tab-content current">
									<?php echo esc_html(get_theme_mod('luzuk_building_architecture_aboutustabsyears1text', '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 Dont Look Even Slightly Believable.')); ?>
								</div>
								<div id="tab-2" class="tab-content">
									<?php echo esc_html(get_theme_mod('luzuk_building_architecture_aboutustabsyears2text', '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 Dont Look Even Slightly Believable.')); ?>
								</div>

								<div class="list">
									<ul>
										<li>									
											<h4> <i class="fa-solid fa-play"></i><?php echo esc_html(get_theme_mod('luzuk_building_architecture_aboutustabsyears1list1', 'Lorem Ipsum are')); ?></h4>
										</li>
										<li>					
											<h4> <i class="fa-solid fa-play"></i><?php echo esc_html(get_theme_mod('luzuk_building_architecture_aboutustabsyears1list2', 'Lorem Ipsum are')); ?></h4>
										</li>
									</ul>
								</div>
								<div class="list">
									<ul>
										<li>											
											<h4><i class="fa-solid fa-play"></i><?php echo esc_html(get_theme_mod('luzuk_building_architecture_aboutustabsyears1list3', 'Lorem Ipsum are')); ?></h4>
										</li>
										<li>	
											<h4><i class="fa-solid fa-play"></i><?php echo esc_html(get_theme_mod('luzuk_building_architecture_aboutustabsyears1list4', 'Lorem Ipsum are')); ?></h4>
										</li>
									</ul>
									<div class="clearfix"></div>
								</div>
								<div class="bttn">
									<a href="<?php echo esc_url(get_theme_mod('luzuk_building_architecture_aboutusbtnlink', '#')); ?>">
										<?php echo esc_html(get_theme_mod('luzuk_building_architecture_aboutusbtntext', 'About Us')); ?>
										<i class="fa-solid fa-arrow-right"></i>
									</a>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

	<?php do_action('luzuk_building_architecture_below_aboutus_section'); ?>

	<section id="services-section">
		<div class="container"> 
			<div class="headbx">
				<div class="row">
					<div class="head">
						<h4 class="subheading"><?php echo esc_html(get_theme_mod('luzuk_building_architecture_servicessubheading')); ?> <i class="fa-solid fa-arrow-right-long"></i></h4>
						<h2 class="heading"><?php echo esc_html(get_theme_mod('luzuk_building_architecture_servicesheading')); ?></h2>				
					</div>
					<div class="s-img">
						<div class="s-imginn">
							<?php 
								$luzuk_building_architecture_services_image = get_theme_mod('luzuk_building_architecture_services_image');

								if(!empty($luzuk_building_architecture_services_image)){
									echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($luzuk_building_architecture_services_image).'" class="img-responsive secondry-bg-img" />';
								}else{
									echo '<img alt="luzuk_building_architecture_services_image" src="'.get_template_directory_uri().'/assets/images/ser-subtitle.jpg" class="img-responsive" />';
								}
							?>
							<div class="serbtn">
								<a href=""><i class="fa-solid fa-arrow-right"></i></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container-fluid">
			<div class="content">
				<div class="owl-carousel owl-theme">
					<?php
					// Check if any page is selected from customizer
					$pages_selected = false;
					for ($i = 1; $i <= 6; $i++) {
						$selected_page_id = get_theme_mod('luzuk_building_architecture_page_setting_' . $i);
						if ($selected_page_id) {
							$pages_selected = true;
							break;
						}
					}

					// Display pages in slider if selected, otherwise show a message
					if ($pages_selected) {
						// Loop through each selected page and display in the slider
						for ($i = 1; $i <= 7; $i++) {
							$selected_page_id = get_theme_mod('luzuk_building_architecture_page_setting_' . $i);
							if ($selected_page_id) {
								$page = get_post($selected_page_id);
								?>
								<div class="item">
									<div class="serbx">
										<div class="serbxinn">
											<a href="<?php echo get_permalink($page->ID); ?>">
												<?php echo get_the_post_thumbnail($page->ID, 'medium'); ?>
											</a>
											<div class="sconbx">
												<a href="<?php echo get_permalink($page->ID); ?>">
													<h4><?php echo $page->post_title; ?></h4>
												</a>
												<p><?php echo get_the_excerpt($page->ID); ?></p>
												<!-- <div class="btnprice">
													<div class="landbtn">
														<a href="<?php echo get_permalink($page->ID); ?>">
															<?php _e('Learn More', 'building-architecture'); ?>
															<i class="fas fa-long-arrow-alt-right"></i>
														</a>
													</div>
												</div> -->
											</div>
										</div>
									</div>
								</div>
							<?php }
						}
					} else {
						// Display message if no pages are selected
						echo '<p>Please select pages from the customizer</p>';
					}
					?>
				</div>
			</div>
		</div>
	</section>

	<?php do_action('luzuk_building_architecture_below_services_section'); ?>

	<div class="container">
	  	<?php while ( have_posts() ) : the_post(); ?>
	  		<div class="lz-content">
	        	<?php the_content(); ?>
	        </div>
	    <?php endwhile; // end of the loop. ?>
	</div>
</main>

<?php get_footer(); ?>