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

<main id="main" role="main">

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

  <section id="slider" class=" mw-100">
      
        <!-- <div class="container"> -->
       <!-- <div class="container"> -->
        <div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-bs-ride="carousel"> 
          <?php $home_electrician_content_pages = array();
            for ( $count = 1; $count <= 4; $count++ ) {
              $mod = intval( get_theme_mod( 'home_electrician_slider_page' . $count ));
              if ( 'page-none-selected' != $mod ) {
                $home_electrician_content_pages[] = $mod;
              }
            }
            if( !empty($home_electrician_content_pages) ) :
              $args = array(
                'post_type' => 'page',
                'post__in' => $home_electrician_content_pages,
                'orderby' => 'post__in'
              );
              $query = new WP_Query( $args );
            if ( $query->have_posts() ) :
              $i = 1;
          ?>     
          <div class="carousel-inner" role="listbox">
            <?php  while ( $query->have_posts() ) : $query->the_post(); ?>
                <div <?php if($i == 1){echo 'class="carousel-item active"';} else{ echo 'class="carousel-item"';}?>>     
                  <!-- <div class="row"> -->
                    <div class="row m-0 p-0">
                      <div class="sliderbg-img">  
                          <?php the_post_thumbnail(); ?> 
                          <div class="grid-overlay"></div> 
                          <div class="s-oly"></div>   

                      </div>
                      
                      <div class="titlebx" bis_skin_checked="1">
                        <h2><?php the_title(); ?><br>
                          <span>              
                            <?php echo esc_html(get_theme_mod('home_electrician_slider_subtitle', ' One Platform')); ?> 
                          </span>
                        </h2>
                      </div>                           
                      <div class="slider-content"> 
                        <p>
                          <?php $home_electrician = get_the_excerpt(); echo esc_html( home_electrician_string_limit_words( $home_electrician,20 ) ); ?>
                        </p>                        
                        <div class="read-btn">
                          <a class="btn1" href="<?php echo esc_url(get_theme_mod('home_electrician_slider_getfreeconsultation_link', '#')); ?>"><?php esc_html_e( 'Get Free Quote', 'home-electrician' ); ?></a>
                        </div>
                        <div class="clearfix"></div>
                      </div>
                    </div>
                    <!-- </div>    -->
                <!-- </div> -->
              </div>
            <?php $i++; endwhile; 
            wp_reset_postdata();?>
          </div>
          
        <!-- </div> -->
        <?php else : ?> 
          <div class="no-postfound"></div>
        <?php endif;
        endif;?>
        <a class="carousel-control-prev" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev" role="button">
          <span class="carousel-control-prev-icon" aria-hidden="true"><i class="fas fa-caret-left"></i></span><span class="screen-reader-text"><?php esc_html_e( 'Previous', 'home-electrician' );?></span>
        </a>
        <a class="carousel-control-next" data-bs-target="#carouselExampleCaptions" data-bs-slide="next" role="button">
          <span class="carousel-control-next-icon" aria-hidden="true"><i class="fas fa-caret-right"></i></span><span class="screen-reader-text"><?php esc_html_e( 'Next', 'home-electrician' );?></span>
        </a>
      <!-- </div> -->
       <div class="border1" bis_skin_checked="1"></div>
       <div class="border2" bis_skin_checked="1"></div>
       <div class="vid" bis_skin_checked="1">
            <div class="video-content" bis_skin_checked="1">
                 
                <a id="video-pop" class="video">
                    <div class="sl-video-img" bis_skin_checked="1">

                      <?php 
                        $home_electrician_slider_img = get_theme_mod('elec$home_electrician_slider_img');

                        if(!empty($home_electrician_slider_img)){
                          echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($home_electrician_slider_img).'" class="img-responsive secondry-bg-img" />';
                        }else{
                          echo '<img alt="elecc$home_electrician_slider_img" src="'.get_template_directory_uri().'/assets/images/homeelectricianaboutimg.png" class="img-responsive" />';
                        }
                      ?>
                    </div>
                </a>
                
            </div>
        </div>
      <div class="clearfix"></div>
    </div>
  </section>

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

  <section id="whoweare">
    <div class="container">
      <div class="whowearehead">
        <div class="conbx" >
          <h2>
            <?php echo esc_html(get_theme_mod('home_electrician_whoweare_heading', 'WHO ARE ARE')); ?>
          </h2>
          <div class=" scroll-section">
            <div class="title reveal-type inner-area-title"> 
              <?php echo esc_html(get_theme_mod('home_electrician_whoweare_description', ' It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here, content here, making it look like readable English')); ?> 
            </div> 	
          </div> 
          
        </div>       
      </div>       
      <div class="whowearebx">   
        <div class="row m-0 p-0">
          <div class="image">
            <?php 
              $home_electrician_whoweare_image1 = get_theme_mod('home_electrician_whoweare_image1');

              if(!empty($home_electrician_whoweare_image1)){
                echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($home_electrician_whoweare_image1).'" class="img-responsive secondry-bg-img" />';
              }else{
                echo '<img alt="home_electrician_whoweare_image1" src="'.get_template_directory_uri().'/assets/images/homeelectricianaboutimg.png" class="img-responsive" />';
              }
            ?>
            
          </div>
          <div class="yearbx">
              <div class="abtbrd"></div>
              <h2 class="y-title inner-area-title"><?php echo esc_html(get_theme_mod('home_electrician_whoweare_imgheading', 'EXPERTISE THAT SPARKS INNOVATION')); ?></h2>
                                  <div class="abt-yerbx">		      
                <div class="abt-yertxtbx">
                    <svg viewBox="0 0 200 200">
                        <defs> <path id="circlePath" d="M 100, 100 m -75, 0 a 75,75 0 1,1 150,0 a 75,75 0 1,1 -150,0"></path>
                        </defs>
                        <text>
                          <textPath href="#circlePath" startOffset="0%">
                              <tspan class="dot">•</tspan>  <?php esc_html_e( 'years experience', 'home-electrician' ); ?> <tspan class="dot">•</tspan> <?php esc_html_e( 'years experience', 'home-electrician' ); ?>   
                          </textPath>
                        </text>
                    </svg>
                  </div>
                  <div class="abt-num"><?php echo esc_html(get_theme_mod('home_electrician_whoweare_yearnum', '15')); ?><sup>+</sup></div>
              </div> 
              <div class="clearfix"></div> 
          </div>
          
          <div class="image">
            <?php 
              $home_electrician_whoweare_image2 = get_theme_mod('home_electrician_whoweare_image2');

              if(!empty($home_electrician_whoweare_image2)){
                echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($home_electrician_whoweare_image2).'" class="img-responsive secondry-bg-img" />';
              }else{
                echo '<img alt="home_electrician_whoweare_image2" src="'.get_template_directory_uri().'/assets/images/homeelectricianaboutimg.png" class="img-responsive" />';
              }
            ?>
            
          </div>
          <div class="feature-track">
  
              <div class="feature-item">
                  <span class="dot"></span>
                  <h4><?php echo esc_html(get_theme_mod('home_electrician_whoweare_text1', 'ADVANCED TECHNOLOGY')); ?></h4>
              </div>
  
              <div class="feature-item">
                  <span class="dot"></span>
                  <h4><?php echo esc_html(get_theme_mod('home_electrician_whoweare_text2', 'INNOVATIVE SOLUTIONS')); ?></h4>
              </div>
  
              <div class="feature-item">
                  <span class="dot"></span>
                  <h4><?php echo esc_html(get_theme_mod('home_electrician_whoweare_text3', 'MODERN EQUIPMENTS')); ?></h4>
              </div>
  
              <div class="feature-item">
                  <span class="dot"></span>
                  <h4><?php echo esc_html(get_theme_mod('home_electrician_whoweare_text4', 'QUICK RESPONSE')); ?></h4>
              </div>
  
          </div>
        </div>

        
        
      </div>
    </div>
   
  </section>
    
  <?php do_action( 'home_electrician_below_aboutus' ); ?>

  <section id="ourservices-section">
      <div class="container">
          <div class="titlebx">
              <h5>
                <svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M5.33333 8.13282L8.33333 0L0 10.1704H5.33333L1.33333 19L10 8.13282H5.33333Z" fill="#F5DD23"></path>
						</svg> <?php echo esc_html(get_theme_mod('home_electrician_btn_ourservicesubheading', 'Services')); ?></span>
                <!-- <div class="shbg"></div> -->
              </h5>
              <h2>
                <?php echo esc_html(get_theme_mod('home_electrician_btn_ourservicesheading', 'reliable Electricians services backed by exper ')); ?> 
              </h2>
          </div>
      </div>
         
      <div class="container">
          <div class="ourservices-container">
              <div class="row m-0 p-0">
                  <?php
                      // Get selected page IDs
                      $page_ids = array(
                        get_theme_mod('home_electrician_ourservices_page_1'),
                        get_theme_mod('home_electrician_ourservices_page_2'),
                        get_theme_mod('home_electrician_ourservices_page_3'),
                      );

                      $i = 1; 

                      foreach ($page_ids as $page_id) :
                        $page = get_post($page_id);

                        if ($page instanceof WP_Post) :
                  ?>
                  <div class="serbx">
                    <div class="row m-0 p-0">
                      <div class="single-service-bx">       
                        <div class="single-service">
                          <div class="row m-0 p-0">
                            <div class="sertxbx" bis_skin_checked="1">
                              <h4 class="post-title inner-area-title ">
                                <span><?php echo sprintf('%02d', $i); ?></span>
                                <?php echo esc_html(get_the_title($page->ID)); ?>
                              </h4>
                            </div>
                            <div class="service-icon">
                              <a href="<?php echo esc_url(get_permalink($page->ID)); ?>">
                                <?php echo get_the_post_thumbnail($page->ID, 'full'); ?>
                              </a>
                            </div>
                            <div class="s-btn" >
                              <a href="<?php echo esc_url(get_permalink($page->ID)); ?>">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right group-hover:translate-x-1 transition-transform"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                              </a>
                            </div>
                            
                          </div>
                        </div>
                              
                          
                      </div>
                    </div>
                  </div>
                  <?php
                      endif;
                      $i++;
                  endforeach;
                  ?>
              </div>
          </div>
      </div>
      <div class="clearfix"></div>
  </section>

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

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