<?php
/**
 * Template Name: Home Custom Page
 */
?>

<?php get_header(); ?>

<main id="main" role="main">
  <?php do_action( 'cafe_alley_above_slider' ); ?>
  <?php if( get_theme_mod('cafe_alley_slider_hide_show', false) != ''){ ?> 
    <section id="slider" class=" mw-100">
        <div class="container">
       <!-- <div class="container"> -->
        <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> 
          <?php $cafe_alley_content_pages = array();
            for ( $count = 1; $count <= 4; $count++ ) {
              $mod = intval( get_theme_mod( 'cafe_alley_slider_page' . $count ));
              if ( 'page-none-selected' != $mod ) {
                $cafe_alley_content_pages[] = $mod;
              }
            }
            if( !empty($cafe_alley_content_pages) ) :
              $args = array(
                'post_type' => 'page',
                'post__in' => $cafe_alley_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="slider-content">
                        <div class="lefttop">
                          <?php 
                            $sm_img_lefttp = get_theme_mod('sm_img_lefttp');

                            if(!empty($sm_img_lefttp)){
                              echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($sm_img_lefttp).'" class="img-responsive secondry-bg-img" />';
                            }else{
                              echo '<img alt="sm_img_lefttp" src="'.get_template_directory_uri().'/assets/images/gr2.svg" class="img-responsive" />';
                            }
                          ?>
                        </div>
                        <div class="lefttleft">
                          <?php 
                            $sm_img_left_left = get_theme_mod('sm_img_left_left');

                            if(!empty($sm_img_left_left)){
                              echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($sm_img_left_left).'" class="img-responsive secondry-bg-img" />';
                            }else{
                              echo '<img alt="sm_img_left_left" src="'.get_template_directory_uri().'/assets/images/gr5.png" class="img-responsive" />';
                            }
                          ?>
                        </div>
                        
                        <h2><?php the_title(); ?></h2>
                        <p>
                          <?php $cafe_alley_excerpt = get_the_excerpt(); echo esc_html( cafe_alley_string_limit_words( $cafe_alley_excerpt,20 ) ); ?>
                        </p>
                        <div class="read-btn">
                          <a href="<?php echo esc_url(get_permalink()); ?>"><?php esc_html_e( 'Order Now', 'cafe-alley' ); ?></a>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="sliderbg-img">
                        
                      <?php the_post_thumbnail(); ?>                            
                      <div class="s-oly"></div>
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 648.864 191.473">
                        <path id="Path_1478" data-name="Path 1478" d="M1001.886,309.922s-6.247,63.445,1.384,112.337,49.565,69.147,76.882,74.76c88.692,18.221,99.491-44.8,217.358-10.412,137.722,40.178,216.059-16.674,282.824,5.218,23.8,7.8,61.388-2.894,66-39.249a285.636,285.636,0,0,0,1.993-31.01C1648.74,407.5,1648.323,399.521,1001.886,309.922Z" transform="translate(-999.478 -309.922)" fill="#d88e2d" opacity="0.38"/>
                      </svg>
                      <div class="sm_image">
                          <?php 
                            $sm_img_ima = get_theme_mod('sm_img_ima');

                            if(!empty($sm_img_ima)){
                              echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($sm_img_ima).'" class="img-responsive secondry-bg-img" />';
                            }else{
                              echo '<img alt="sm_img_ima" src="'.get_template_directory_uri().'/assets/images/gr1.svg" class="img-responsive" />';
                            }
                          ?>
                        </div>
                        <div class="righttop">
                          <?php 
                            $sm_img_rhstp = get_theme_mod('sm_img_rhstp');

                            if(!empty($sm_img_rhstp)){
                              echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($sm_img_rhstp).'" class="img-responsive secondry-bg-img" />';
                            }else{
                              echo '<img alt="sm_img_rhstp" src="'.get_template_directory_uri().'/assets/images/gr3.png" class="img-responsive" />';
                            }
                          ?>
                        </div>
                    </div>   
                </div>
              </div>
            <?php $i++; endwhile; 
            wp_reset_postdata();?>
          </div>
          <div class="rightimg">
              <?php 
                $sm_img_rhs = get_theme_mod('sm_img_rhs');

                if(!empty($sm_img_rhs)){
                  echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($sm_img_rhs).'" class="img-responsive secondry-bg-img" />';
                }else{
                  echo '<img alt="sm_img_rhs" src="'.get_template_directory_uri().'/assets/images/gr5.png" class="img-responsive" />';
                }
              ?>
            </div>
            <div class="left_lt">
              <?php 
                $sm_img_left_2 = get_theme_mod('sm_img_left_2');

                if(!empty($sm_img_left_2)){
                  echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($sm_img_left_2).'" class="img-responsive secondry-bg-img" />';
                }else{
                  echo '<img alt="sm_img_left_2" src="'.get_template_directory_uri().'/assets/images/gr3.png" class="img-responsive" />';
                }
              ?>
            </div>
            <div class="left_bm">
              <?php 
                $sm_img_left_bm = get_theme_mod('sm_img_left_bm');

                if(!empty($sm_img_left_bm)){
                  echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($sm_img_left_bm).'" class="img-responsive secondry-bg-img" />';
                }else{
                  echo '<img alt="sm_img_left_bm" src="'.get_template_directory_uri().'/assets/images/gr4.png" class="img-responsive" />';
                }
              ?>
            </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', 'cafe-alley' );?></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', 'cafe-alley' );?></span>
        </a>
      <!-- </div> -->
      <div class="clearfix"></div>
    </div>
    </section>
  <?php }?>

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

    <section id="service-section">
      <div class="container-fluid">
        <?php if(get_theme_mod('cafe_alley_btn_serviceheading') != '') { ?>
          <div class="service-head">
            <div class="heading-brd1"></div>
            <h4>
              <?php echo esc_html(get_theme_mod('cafe_alley_btn_serviceheading')); ?>
            </h4>
          </div>
        <?php } ?>
        </div>
        <div class="container">
        <div class="row mr-0">
          <?php
          // Get selected page IDs from Customizer
          $page_ids = array(
            get_theme_mod('cafe_alley_service_page_1'),
            get_theme_mod('cafe_alley_service_page_2'),
            get_theme_mod('cafe_alley_service_page_3'),
          );

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

            // Make sure it's a valid WP_Post object
            if ($page instanceof WP_Post) :
              ?>
              <div class="col-lg-4 col-md-6 col-sm-12 serbx">
                  <div class="service-box text-center">
                      <div class="service-img">
                          <?php echo get_the_post_thumbnail($page->ID, 'full'); ?>
                          <div class="ser_oly"></div>
                      </div>
                      <div class="service-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>
                        <p class="service-description">
                          <?php
                          $excerpt = $page->post_excerpt ? $page->post_excerpt : wp_strip_all_tags($page->post_content);
                          echo esc_html(wp_trim_words($excerpt, 25));
                          ?>
                        </p>
                        <div class="bttn" >
                          <a href="<?php echo esc_url(get_permalink($page->ID)); ?>">
                            <?php esc_html_e('View More', 'cafe-alley'); ?>
                          </a>
                        </div>
                      </div>
                  </div>
              </div>
              <?php
            endif;
          endforeach;
          ?>
        
        </div>
      </div>
      <div class="clearfix"></div>
    </section>
    
  <!-- </?php if( get_theme_mod('cafe_alley_service_category') != ''){ ?> -->

    <section id="aboutus-section">
        <div class="container">
          <div class="about-area-bx">
            <div class="row m-0">
              <div class="service-head">
                  <div class="abt-rbx">
                    <h4>
                      <?php echo esc_html(get_theme_mod('cafe_alley_aboutustitle')); ?>
                    </h4>
                    <p class="description"><?php echo esc_html(get_theme_mod('cafe_alley_aboutusdescription')); ?></p>

                    <div class="lists">
                      <p class="list1"><?php echo esc_html(get_theme_mod('cafe_alley_aboutuslist1')); ?></p>
                      <p class="list2"><?php echo esc_html(get_theme_mod('cafe_alley_aboutuslist2')); ?></p>
                      <p class="list3"><?php echo esc_html(get_theme_mod('cafe_alley_aboutuslist3')); ?></p>
                    </div> 

                    <div class="about-btn">
                      <a href="<?php echo esc_url(get_theme_mod('cafe_alley_aboutusbtnlink')); ?>">
                        <?php esc_html_e('View More', 'cafe-alley'); ?>
                      </a>
                    </div>
                  </div>
              </div>

              <div class="imgbx">
                <div class="image">
                  <?php 
                    $cafe_alley_aboutus_image1 = get_theme_mod('cafe_alley_aboutus_image1');

                    if(!empty($cafe_alley_aboutus_image1)){
                      echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($cafe_alley_aboutus_image1).'" class="img-responsive secondry-bg-img" />';
                    }else{
                      echo '<img alt="cafe_alley_aboutus_image1" src="'.get_template_directory_uri().'/assets/images/abt3.png" class="img-responsive" />';
                    }
                  ?>
                </div>
                <div class="ima2">
                  <?php 
                    $cafe_alley_abt_ima = get_theme_mod('cafe_alley_abt_ima');

                    if(!empty($cafe_alley_abt_ima)){
                      echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($cafe_alley_abt_ima).'" class="img-responsive secondry-bg-img" />';
                    }else{
                      echo '<img alt="cafe_alley_abt_ima" src="'.get_template_directory_uri().'/assets/images/flwr.png" class="img-responsive" />';
                    }
                  ?>
                </div>
              </div>
            </div>
            <svg class="svg">
                <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
                    <path d="M0.013,0 H0.984 C0.993,0,1,0.016,1,0.036 V0.968 a0.015,0.031,0,0,1,-0.016,0.032 l-0.93,-0.087 C0.047,0.912,0.04,0.898,0.039,0.881 L0.001,0.033 C0,0.015,0.005,0,0.013,0"></path>
                </clipPath>
            </svg>
            <div class="clipped"> </div>
          </div>
        </div>
    </section>

  <!-- </?php }?> -->
  <?php do_action( 'cafe_alley_below_aboutus' ); ?>

  <!-- <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(); ?>