<?php
   if ( ! defined( 'ABSPATH' ) ) {
     exit; // Exit if accessed directly
   }
   ?>
<?php get_header(); ?>
<?php $template_url = get_bloginfo ( 'template_url' ) . '/'; ?>
<?php 
   //to check if there is a post regarding the url access the page
   if (have_posts ()) :
     the_post(); 
   endif;
   $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );
   if($url != "")
   {
   $img = $url; 
   }else{
   $img = $template_url."img/acupuncturebg.jpg"; 
   }
?>
<!-- breadcrumb start -->
<section class="z-index-common breadcumb-wrapper" style="background-image: url(<?php echo $img;?>); background-size: 100%;">
    <div class="container">
      <div class="row justify-content-between align-items-center">
        <div class="col-auto">
          <div class="breadcumb-content">
            <h1 class="breadcumb-title"><?php if(get_field('bradcamp_title') != ""){ echo get_field('bradcamp_title');}else{ the_title();}?></h1>
            <div class="breadcumb-menu-wrap">
              <ul class="breadcumb-menu">
                <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">Home</a></li>
                <li><?php if(get_field('bradcamp_title') != ""){ echo get_field('bradcamp_title');}else{ the_title();}?></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
<!-- breadcrumb end -->
<!-- team slider start -->
    
    <!-- team slider end -->

    <section id="our_gallery">
      <div class="container py-5">

         <div class="section-title mb-5 wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
            <h1 class="display-3 mb-4">Gallery</h1>
            <p class="mb-0"><?php the_content(); ?></p>
         </div>
         <div class="row g-3">
         <?php if(have_rows('gallery_repeter')): ?>
                     <?php $i=0; while(have_rows('gallery_repeter')): the_row(); 
                        
                     ?>
            <!-- Image 1 -->
                     <div class="col-md-4">
                        <figure class="gallery_img">
                           <img src="<?php the_sub_field('gallery_image'); ?>"  class="img-fluid gallery-img rounded-3" data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="<?php echo $i; ?>">
                        </figure>
                     </div>
         <?php $i++; endwhile; ?>
                  <?php endif; ?>   
            <!-- Image 2 -->
            <!-- <div class="col-md-4">
               <figure class="gallery_img">
                  <img src="<?php echo get_stylesheet_directory_uri();?>/img/service-2.jpg"  class="img-fluid gallery-img rounded-3" data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="1">
               </figure>
            </div>

           
            <div class="col-md-4">
               <figure class="gallery_img">
                  <img src="<?php echo get_stylesheet_directory_uri();?>/img/service-3.jpg"  class="img-fluid gallery-img rounded-3" data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="2">
               </figure>
            </div> -->

         </div>
      </div>

      <!-- Modal -->
      <div class="modal fade" id="galleryModal" tabindex="-1">
      <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content bg-dark border-0">

            <div class="modal-body p-0">

            <!-- Carousel -->
            <div id="galleryCarousel" class="carousel slide" data-bs-ride="false">
               <div class="carousel-inner rounded overflow-hidden">
            <?php if(have_rows('gallery_repeter')): ?>
                     <?php $i=0; while(have_rows('gallery_repeter')): the_row(); 
                        
                     ?>
                  <div class="carousel-item <?php echo ($i == 0) ? 'active' : ''; ?>">
                  <img src="<?php the_sub_field('gallery_image'); ?>"  class="d-block w-100">
                  </div>
             <?php $i++; endwhile; ?>
                  <?php endif; ?>
                  <!-- <div class="carousel-item">
                  <img src="<?php //echo get_stylesheet_directory_uri();?>/img/service-2.jpg"  class="d-block w-100">
                  </div>

                  <div class="carousel-item">
                  <img src="<?php //echo get_stylesheet_directory_uri();?>/img/service-3.jpg"  class="d-block w-100">
                  </div> -->

               </div>

               <!-- Controls -->
               <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon"></span>
               </button>

               <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
                  <span class="carousel-control-next-icon"></span>
               </button>

            </div>

            </div>

         </div>
      </div>
      </div>
    </section>
<?php get_footer(); ?>