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

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

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

	<section id="banner-section">
		<?php 
			$luzuk_woodworker_banner_image = get_theme_mod('luzuk_woodworker_banner_image');

			if(!empty($luzuk_woodworker_banner_image)){
				echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($luzuk_woodworker_banner_image).'" class="img-responsive secondry-bg-img" />';
			}else{
				echo '<img alt="luzuk_woodworker_banner_image" src="'.get_template_directory_uri().'/assets/images/banner.jpg" class="img-responsive" />';
			}
		?>
		<div class="ban_oly"></div>

		<?php
            $bann_maintitle = get_theme_mod('bann_maintitle', 'GET A QUICK QUOTE');
            $bann_fm_shortcode = get_theme_mod('bann_fm_shortcode', '[Add Form shortcode]');
        ?>
		
		<div class="conbx">
			<div class="row">			
				<div class="bn_content_bx">
					<div class="banner-content">
						<div class="banner-box">
							 <li>
                            <div class="f_img smll_img">
                                <?php 
									echo '<img src="'.get_template_directory_uri().'/assets/images/sl1.png" class="img-responsive" />';
                                ?>  
                                <div class="smll_img_brd"></div>
                                <div class="smll_img_brd2"></div>                  
                            </div>  
                        </li>
                        <li>
                            <div class="s_img smll_img">
                                <?php 
									echo '<img src="'.get_template_directory_uri().'/assets/images/sl2.png" class="img-responsive" />';
                                ?>  
                                <div class="smll_img_brd"></div>  
                                <div class="smll_img_brd2"></div>              
                            </div>  
                        </li>
                        <li>
                            <div class="t_img smll_img">
                                <?php 
									echo '<img src="'.get_template_directory_uri().'/assets/images/sl3.png" class="img-responsive" />';
                                ?>  
                                <div class="smll_img_brd"></div>
                                <div class="smll_img_brd2"></div>                  
                            </div> 
                        </li>
                    </div>
						<h3 class="subheading"><?php echo esc_html(get_theme_mod('luzuk_woodworker_bannersubheading')); ?></h3>				
						<h4 class="heading"><?php echo esc_html(get_theme_mod('luzuk_woodworker_bannerheading')); ?></h4>				
						<p class="description"><?php echo esc_html(get_theme_mod('luzuk_woodworker_bannerdescription')); ?></p>	
						<div class="btn">			
							<a  href="<?php echo esc_url(get_theme_mod('luzuk_woodworker_bannerreadmorebtnlink')) ?>">
								<?php esc_html_e( 'Read More','woodworker' );?>
							</a>
						</div>
					</div>
				</div>
				<div class="bnfm_bx">	
				<?php if (is_plugin_active('contact-form-7/wp-contact-form-7.php')) { ?>

					<div class="bann-forminn ">  
						<div class="bann-form "> 
							<h2><?php echo ($bann_maintitle);  ?> </h2> 
							<?php if($bann_fm_shortcode){ ?> 
								<div class="bnfm">
									<?php echo do_shortcode($bann_fm_shortcode);?>
								</div>
							<?php } else {
								echo '<p class="shortcerror">Add Form Shortcode from customizer.</p>';
							} ?> 
						</div>
					</div>
				<?php } else { 
					echo '<p class="error">Please install and activate the <a href="https://wordpress.org/plugins/contact-form-7/" target="_blank">Contact Form 7 plugin</a> to use the form functionality.</p>';
				} ?>
				</div>
			</div> 
		</div>
			
	</section>

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

	<section id="aboutus-section">
		<!-- <div class="overlay"></div> -->
		<div class="container"> 
			<div class="row"> 
				<div class="abt_imgbx">
					<div class="aboutus-img">
						<?php 
							$luzuk_woodworker_aboutus_image = get_theme_mod('luzuk_woodworker_aboutus_image');

							if(!empty($luzuk_woodworker_aboutus_image)){
								echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($luzuk_woodworker_aboutus_image).'" class="img-responsive secondry-bg-img" />';
							}else{
								echo '<img alt="luzuk_woodworker_aboutus_image" src="'.get_template_directory_uri().'/assets/images/abt.jpg" class="img-responsive" />';
							}
						?>
						<div class="abt-brd"></div>
					</div>	
				</div>
				<div class="abt_cont">
					<h3 class="subheading"><?php echo esc_html(get_theme_mod('luzuk_woodworker_aboutussubheading')); ?>
						<div class="abtbrd1"></div>
						<div class="abtbrd2"></div>
					</h3>				
					<h4 class="heading"><?php echo esc_html(get_theme_mod('luzuk_woodworker_aboutusheading')); ?></h4>				
					<h4 class="title"><?php echo esc_html(get_theme_mod('luzuk_woodworker_aboutustitle')); ?></h4>				
					<p class="description"><?php echo esc_html(get_theme_mod('luzuk_woodworker_aboutusdescription')); ?></p>				
					<div class="row">
						<div class="col-lg-6 col-md-12 col-sm-12">
							<div class="detials">
								<div class="row">
									<div class="profileimg">
										<?php 
											$luzuk_woodworker_aboutus_profileimg = get_theme_mod('luzuk_woodworker_aboutus_profileimg');

											if(!empty($luzuk_woodworker_aboutus_profileimg)){
												echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($luzuk_woodworker_aboutus_profileimg).'" class="img-responsive secondry-bg-img" />';
											}else{
												echo '<img alt="luzuk_woodworker_aboutus_profileimg" src="'.get_template_directory_uri().'/assets/images/default.png" class="img-responsive" />';
											}
										?>
									</div>
									<div class="profiledetail">
										<h4 class="name"><?php echo esc_html(get_theme_mod('luzuk_woodworker_aboutusname')); ?></h4>				
										<h4 class="designation"><?php echo esc_html(get_theme_mod('luzuk_woodworker_aboutusdesignation')); ?></h4>				
									</div>
								</div>
							</div>
						</div>
						<div class="col-lg-6 col-md-12 col-sm-12">
							<div class="list">
								<li>
									<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
									<?php echo esc_html(get_theme_mod('luzuk_woodworker_aboutuslist1')); ?>
								</li>
								<li>
									<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
									<?php echo esc_html(get_theme_mod('luzuk_woodworker_aboutuslist2')); ?>
								</li>
								<li>
									<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
									<?php echo esc_html(get_theme_mod('luzuk_woodworker_aboutuslist3')); ?>
								</li>
							</div>
						</div>
					</div>
					
					<div class="bttn">
						<a class="get" href="<?php echo esc_url(get_theme_mod('luzuk_woodworker_aboutusreadmorebtnlink')) ?>">
							<?php esc_html_e( 'Read More','woodworker' );?>
						</a>
					</div>
				</div>
			</div>
		</div>
	</section>

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

	<section id="services-section">
		<div class="container"> 
			<div class="headbx">		
				<h2 class="heading"><?php echo esc_html(get_theme_mod('luzuk_woodworker_servicesheading')); ?>				<div class="h_brd1"></div>
					<div class="h_brd2"></div>
				</h2>						
			</div>
			<div class="content">
				<div class="row mr-0">
				<?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_woodworker_page_setting_' . $i);
					if ($selected_page_id) {
						$pages_selected = true;
						break;
					}
				}
				?>

				<!-- <div class="owl-carousel owl-theme row"> -->
					<?php
					// 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_woodworker_page_setting_' . $i);
							if ($selected_page_id) {
								$page = get_post($selected_page_id);
								?>
								<div class="serbx col-lg-4 col-md-6 col-sm-12">
									<div class="serbxinn">
										<a href="<?php echo get_permalink($page->ID); ?>">
											<?php echo get_the_post_thumbnail($page->ID, 'medium'); ?>
											<div class="s_oly"></div>
										</a>
										<div class="sconbx ">
											<a href="<?php echo get_permalink($page->ID); ?>">
												<h4><?php echo $page->post_title; ?></h4>
											</a>
										</div>
									</div>
								</div>
							<?php }
						}
					} else {
						// Display message if no pages are selected
						echo '<p>Please select page from customizer</p>';
					}
					?>
				</div>
			</div>
		</div>
	</section>

	<?php do_action('luzuk_woodworker_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(); ?>