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

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

  <?php do_action( 'expert_computer_repair_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 $expert_computer_repair_content_pages = array();
            for ( $count = 1; $count <= 4; $count++ ) {
              $mod = intval( get_theme_mod( 'expert_computer_repair_slider_page' . $count ));
              if ( 'page-none-selected' != $mod ) {
                $expert_computer_repair_content_pages[] = $mod;
              }
            }
            if( !empty($expert_computer_repair_content_pages) ) :
              $args = array(
                'post_type' => 'page',
                'post__in' => $expert_computer_repair_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="slider-content">                            
                        <h2><?php the_title(); ?></h2>
                        <p>
                          <?php $expert_computer_repair = get_the_excerpt(); echo esc_html( expert_computer_repair_string_limit_words( $expert_computer_repair,20 ) ); ?>
                        </p>                        
                        <div class="read-btn">
                          <a class="btn1" href="<?php echo esc_url(get_theme_mod('expert_computer_repair_slider_getfreeconsultation_link', '#')); ?>"><?php esc_html_e( 'Get Free Quote', 'expert-computer-repair' ); ?> <i class="fas fa-arrow-right"></i> </a>

                          <a class="btn2" href="<?php echo esc_url(get_theme_mod('expert_computer_repair_slider_viewportfoliobtn_link', '#')); ?>">         
                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone w-4 h-4 text-white relative z-10"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg> <?php esc_html_e( 'Call Now', 'expert-computer-repair' ); ?>
                           
                          </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', 'expert-computer-repair' );?></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', 'expert-computer-repair' );?></span>
        </a>
      <!-- </div> -->
      <div class="clearfix"></div>
    </div>
  </section>

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

  <section id="feature">
    <div class="container">
      <div class="featurebx">          
          <div class="contenbx m-0 p-0">
              <div class="row m-0 p-0">
                <!-- Feature 1 -->
                <div class=" feabx fea-color-1">
                  <div class="feabxinn">
                    <div class="single-fea">
                        <div class="icnbx">
                          <?php $icon1 = esc_attr( get_theme_mod( 'expert_computer_repair_feature_icon1', 'fa-solid fa-desktop' ) );
                          if ( ! empty( $icon1 ) ) : ?>
                            <i class="<?php echo $icon1; ?>"></i>
                          <?php else : ?>
                            
                          <?php endif; ?>
                        </div>
                        <div class="fea-conbx">
                          <h1><?php echo esc_html(get_theme_mod('expert_computer_repair_feature_box1_heading', 'Desktop Repair ')); ?></h1>
                        </div>
                    </div>
                  </div>
                </div>

                <!-- Feature 2 -->
                <div class=" feabx fea-color-2">
                    <div class="feabxinn">
                      <div class="single-fea">
                          <div class="icnbx">
                          <?php $icon2 = esc_attr( get_theme_mod( 'expert_computer_repair_feature_icon2', 'fas fa-volume-up' ) );
                          if ( ! empty( $icon2 ) ) : ?>
                            <i class="<?php echo $icon2; ?>"></i>
                          <?php else : ?>
                          
                          <?php endif; ?>
                          </div>
                          <div class="fea-conbx">
                            <h1><?php echo esc_html(get_theme_mod('expert_computer_repair_feature_box2_heading', 'Speaker Repair')); ?></h1>
                          </div>
                      </div>
                    </div>
                </div>

                <!-- Feature 3 -->
                <div class=" feabx fea-color-3">
                    <div class="feabxinn">
                      <div class="single-fea">
                          <div class="icnbx">
                            <?php $icon3 = esc_attr( get_theme_mod( 'expert_computer_repair_feature_icon3', 'fa-regular fa-hard-drive' ) );
                            if ( ! empty( $icon3 ) ) : ?>
                              <i class="<?php echo $icon3; ?>"></i>
                            <?php else : ?>
                              
                            <?php endif; ?>
                          </div>
                          <div class="fea-conbx">
                            <h1><?php echo esc_html(get_theme_mod('expert_computer_repair_feature_box3_heading', 'Hard Disk Repair')); ?></h1>
                            
                          </div>
                      </div>
                    </div>
                  </div>

                  <!-- Feature 4 -->
                  <div class=" feabx fea-color-4">
                    <div class="feabxinn">
                      <div class="single-fea">
                          <div class="icnbx">
                            <?php $icon4 = esc_attr( get_theme_mod( 'expert_computer_repair_feature_icon4', 'fa-solid fa-mobile-screen-button' ) );
                            if ( ! empty( $icon4 ) ) : ?>
                              <i class="<?php echo $icon4; ?>"></i>
                            <?php else : ?>
                              
                            <?php endif; ?>
                          </div>        
                          <div class="fea-conbx">
                              <h1><?php echo esc_html(get_theme_mod('expert_computer_repair_feature_box4_heading', 'Mobile Repair')); ?></h1>
                          </div>
                      </div>
                    </div>
                  </div>
                  <!-- Feature 5 -->
                  <div class=" feabx fea-color-5">
                    <div class="feabxinn">
                      <div class="single-fea">
                          <div class="icnbx">
                            <?php $icon3 = esc_attr( get_theme_mod( 'expert_computer_repair_feature_icon5', 'fa-solid fa-print' ) );
                            if ( ! empty( $icon3 ) ) : ?>
                              <i class="<?php echo $icon3; ?>"></i>
                            <?php else : ?>
                              
                            <?php endif; ?>
                          </div>        
                          <div class="fea-conbx">
                              <h1><?php echo esc_html(get_theme_mod('expert_computer_repair_feature_box5_heading', 'Printer Repair')); ?></h1>
                          </div>
                      </div>
                    </div>
                  </div>

                  <!-- Feature 6 -->
                  <div class=" feabx fea-color-6">
                    <div class="feabxinn">
                      <div class="single-fea">
                          <div class="icnbx">
                            <?php $icon6 = esc_attr( get_theme_mod( 'expert_computer_repair_feature_icon6', 'fa-solid fa-laptop' ) );
                            if ( ! empty( $icon6 ) ) : ?>
                              <i class="<?php echo $icon6; ?>"></i>
                            <?php else : ?>
                              
                            <?php endif; ?>
                          </div>        
                          <div class="fea-conbx">
                              <h1><?php echo esc_html(get_theme_mod('expert_computer_repair_feature_box7_heading', 'Laptop Repair')); ?></h1> 
                          </div> 
                      </div>
                    </div>
                  </div>
                  <!-- Feature 7 -->
                  <div class=" feabx fea-color-7">
                    <div class="feabxinn">
                      <div class="single-fea">
                          <div class="icnbx">
                            <?php $icon7 = esc_attr( get_theme_mod( 'expert_computer_repair_feature_icon7', 'fa-solid fa-microchip' ) );
                            if ( ! empty( $icon7 ) ) : ?>
                              <i class="<?php echo $icon7; ?>"></i>
                            <?php else : ?>
                              
                            <?php endif; ?>
                          </div>        
                          <div class="fea-conbx">
                              <h1><?php echo esc_html(get_theme_mod('expert_computer_repair_feature_box7_heading', 'Mother Board Repair')); ?></h1>
                          </div> 
                      </div>
                    </div>
                  </div>
                  <!-- Feature 8 -->
                  <div class=" feabx fea-color-7">
                    <div class="feabxinn">
                      <div class="single-fea">
                          <div class="icnbx">
                            <?php $icon8 = esc_attr( get_theme_mod( 'expert_computer_repair_feature_icon8', 'fa-solid fa-desktop' ) );
                            if ( ! empty( $icon8 ) ) : ?>
                              <i class="<?php echo $icon8; ?>"></i>
                            <?php else : ?>
                              
                            <?php endif; ?>
                          </div>        
                          <div class="fea-conbx">
                              <h1><?php echo esc_html(get_theme_mod('expert_computer_repair_feature_box8_heading', 'Monitor Repair')); ?></h1>
                          </div> 
                      </div>
                    </div>
                  </div>

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

  <section id="ourservices-section">
      <div class="container">
          <div class="titlebx">
              <h5>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap w-5 h-5 text-[#0066FF]"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg><span><?php echo esc_html(get_theme_mod('expert_computer_repair_btn_ourservicesubheading', 'Premium Services')); ?></span>
                <!-- <div class="shbg"></div> -->
              </h5>
              <h2>
                  <?php echo esc_html(get_theme_mod('expert_computer_repair_btn_ourservicesheading', 'Expert ')); ?> <span><?php echo esc_html(get_theme_mod('expert_computer_repair_btn_ourservicesheadingspan', 'Repair Solutions')); ?></span>
              </h2>
              <p><?php echo esc_html(get_theme_mod('expert_computer_repair_btn_ourservicesdescription', 'Comprehensive tech repair services backed by certified technicians and genuine parts')); ?></p>
          </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('expert_computer_repair_ourservices_page_1'),
                        get_theme_mod('expert_computer_repair_ourservices_page_2'),
                        get_theme_mod('expert_computer_repair_ourservices_page_3'),
                      );

                      $i = 1; 

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

                        if ($page instanceof WP_Post) :
                  ?>
                  <div class="col-lg-4 col-md-6 col-sm-12 serbx">
                      <div class="ourservices-box ">       
                          <div class="imgbx">
                              <div class="ourservices-img">
                                  <?php echo get_the_post_thumbnail($page->ID, 'full'); ?>
                                  <div class="ser-oly"></div> 
                              </div>     
                              <div class="b-box">
                                  <div class="row m-0 p-0">
                                      <div class="day"><i class="fa-regular fa-clock"></i> <?php esc_html_e( 'Same Day', 'expert-computer-repair' ); ?></div>
                                      <div class="w-rty"><i class="far fa-check-circle"></i> <?php esc_html_e( 'Warranty', 'expert-computer-repair' ); ?></div>
                                  </div>
                              </div>
                              <div class="ourservices-content"> 
                                  <a href="<?php echo esc_url(get_permalink($page->ID)); ?>">
                                      <div class="title"><?php echo esc_html(get_the_title($page->ID)); ?></div>
                                  </a>
                                  <div class="ourservices-description">
                                    <?php
                                    $excerpt = $page->post_excerpt ? $page->post_excerpt : wp_strip_all_tags($page->post_content);
                                    echo esc_html(wp_trim_words($excerpt, 20));
                                    ?>
                                  </div>
                                  <div class="s-btn" >
                                    <a href="<?php echo esc_url(get_permalink($page->ID)); ?>">
                                      <?php esc_html_e('Get Quote', 'expert-computer-repair'); ?> <i class="fa-solid fa-chevron-right"></i>
                                    </a>
                                  </div>
                              </div> 
                              
                          </div>
                              
                          
                      </div>
                  </div>
                  <?php
                    endif;  endforeach; 
                  ?>
              </div>
          </div>
      </div>
      <div class="clearfix"></div>
  </section>

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