@include('layout/frontend/_header')



	<div id="colorlib-doctor">
		<div class="container">
			<div class="row">
				<div class="col-sm-12 breadcrumbs">
					<ol class="breadcrumb breadcrumb-2new">
						<li class="breadcrumb-item"><a title="Go to IKI" href="{{ url('/') }}">Home</a></li>
						<li class="breadcrumb-item"><a href="javascript://">Gallery</a></li>
					</ol>
				</div>
			</div>
			<div class="row animate-box">
				<div class="col-md-12 text-center colorlib-heading">
					<h2>IKI INDIA PHOTO GALLERY

</h2>
					<!--p>List of activities  which help in networking and implement sustainable development practices</p-->
				</div>
			</div>
			<div class="row">
				
				<div id="aboutiki">

 
            
	<div class="card p-3 shadow">

		<nav>
			<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-1" type="button" role="tab" aria-controls="nav-home" aria-selected="true">1st IKI India Networking Workshop </button>
					<!--			<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-2" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">2nd IKI India  Networking Workshop </button>-->
				<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-3" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">3rd IKI India Networking Workshop </button>
                	<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-4" type="button" role="tab" aria-controls="nav-4" aria-selected="false">4th IKI India Networking Workshop </button>
                
			</div>
		</nav>
		<div class="tab-content p-3 border bg-light" id="nav-tabContent">
	<div class="tab-pane fade active show" id="nav-1" role="tabpanel" aria-labelledby="nav-home-tab">
				<section class="photo-gallery">
  <div class="container">
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 gallery-grid">
      <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
      <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_2.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_2.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
      <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_3.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_3.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
        
          <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_4.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_4.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
        
                <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_5.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_5.JPG') }}" class="img-fluid" alt="">
        </a>
      </div> 
        
        
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_6.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_6.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_7.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_7.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_8.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_8.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_9.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_9.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_10.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_10.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_11.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_11.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_12.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_12.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_13.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_13.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_14.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_14.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_15.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_15.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_16.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_16.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_17.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_17.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_18.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_18.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_19.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_19.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_20.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_20.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_21.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_21.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_22.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_22.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
                   <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_1_India_23.JPG') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_1_India_23.JPG') }}" class="img-fluid" alt="">
        </a>
      </div>
      </div>
    </div>
</section>
			</div>
				<!--	<div class="tab-pane fade" id="nav-2" role="tabpanel" aria-labelledby="nav-profile-tab">
				<p><strong>This is some placeholder content</strong></p>
			</div>-->
			<div class="tab-pane fade" id="nav-3" role="tabpanel" aria-labelledby="nav-contact-tab">

<section class="photo-gallery">
  <div class="container">
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 gallery-grid">
      <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/glimpsis.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/glimpsis.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
      <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/glimpsis_1.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/glimpsis_1.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
      <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/glimpsis_2.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/glimpsis_2.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>

      </div>
    </div>
</section>


<script>

const html = document.querySelector('html');
html.setAttribute('data-bs-theme', 'dark');

document.addEventListener('DOMContentLoaded', () => {
  // --- Create LightBox
  const galleryGrid = document.querySelector(".gallery-grid");
  const links = galleryGrid.querySelectorAll("a");
  const imgs = galleryGrid.querySelectorAll("img");
  const lightboxModal = document.getElementById("lightbox-modal");
  const bsModal = new bootstrap.Modal(lightboxModal);
  const modalBody = lightboxModal.querySelector(".lightbox-content");

  function createCaption (caption) {
    return `<div class="carousel-caption d-none d-md-block">
        <h4 class="m-0">${caption}</h4>
      </div>`;
  }

  function createIndicators (img) {
    let markup = "", i, len;

    const countSlides = links.length;
    const parentCol = img.closest('.col');
    const curIndex = [...parentCol.parentElement.children].indexOf(parentCol);

    for (i = 0, len = countSlides; i < len; i++) {
      markup += `
        <button type="button" data-bs-target="#lightboxCarousel"
          data-bs-slide-to="${i}"
          ${i === curIndex ? 'class="active" aria-current="true"' : ''}
          aria-label="Slide ${i + 1}">
        </button>`;
    }

    return markup;
  }

  function createSlides (img) {
    let markup = "";
    const currentImgSrc = img.closest('.gallery-item').getAttribute("href");

    for (const img of imgs) {
      const imgSrc = img.closest('.gallery-item').getAttribute("href");
      const imgAlt = img.getAttribute("alt");

      markup += `
        <div class="carousel-item${currentImgSrc === imgSrc ? " active" : ""}">
          <img class="d-block img-fluid w-100" src=${imgSrc} alt="${imgAlt}">
          ${imgAlt ? createCaption(imgAlt) : ""}
        </div>`;
    }

    return markup;
  }

  function createCarousel (img) {
    const markup = `
      <!-- Lightbox Carousel -->
      <div id="lightboxCarousel" class="carousel slide carousel-fade" data-bs-ride="true">
        <!-- Indicators/dots -->
        <div class="carousel-indicators">
          ${createIndicators(img)}
        </div>
        <!-- Wrapper for Slides -->
        <div class="carousel-inner justify-content-center mx-auto">
          ${createSlides(img)}
        </div>
        <!-- Controls/icons -->
        <button class="carousel-control-prev" type="button" data-bs-target="#lightboxCarousel" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#lightboxCarousel" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
      `;

    modalBody.innerHTML = markup;
  }

  for (const link of links) {
    link.addEventListener("click", function (e) {
      e.preventDefault();
      const currentImg = link.querySelector("img");
      const lightboxCarousel = document.getElementById("lightboxCarousel");

      if (lightboxCarousel) {
        const parentCol = link.closest('.col');
        const index = [...parentCol.parentElement.children].indexOf(parentCol);

        const bsCarousel = new bootstrap.Carousel(lightboxCarousel);
        bsCarousel.to(index);
      } else {
        createCarousel(currentImg);
      }

      bsModal.show();
    });
  }

  // --- Support Fullscreen
  const fsEnlarge = document.querySelector(".btn-fullscreen-enlarge");
  const fsExit = document.querySelector(".btn-fullscreen-exit");

  function enterFS () {
    lightboxModal.requestFullscreen().then({}).catch(err => {
      alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
    });
    fsEnlarge.classList.toggle("d-none");
    fsExit.classList.toggle("d-none");
  }

  function exitFS () {
    document.exitFullscreen();
    fsExit.classList.toggle("d-none");
    fsEnlarge.classList.toggle("d-none");
  }

  fsEnlarge.addEventListener("click", (e) => {
    e.preventDefault();
    enterFS();
  });

  fsExit.addEventListener("click", (e) => {
    e.preventDefault();
    exitFS();
  });
})


</script>
<div class="modal fade lightbox-modal" id="lightbox-modal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-fullscreen">
    <div class="modal-content">
      <button type="button" class="btn-fullscreen-enlarge" aria-label="Enlarge fullscreen">
        <svg class="bi"><use href="#enlarge"></use></svg>
      </button>
      <button type="button" class="btn-fullscreen-exit d-none" aria-label="Exit fullscreen">
        <svg class="bi"><use href="#exit"></use></svg>
      </button>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-body">
        <div class="lightbox-content">
          <!-- JS content here -->
        </div>
      </div>
    </div>
  </div>
</div>

			</div>
            <div class="tab-pane fade" id="nav-4" role="tabpanel" aria-labelledby="nav-contact-tab">
			<svg class="d-none" xmlns="http://www.w3.org/2000/svg">
  <symbol id="enlarge" viewBox="0 0 16 16">
    <path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z"/>
  </symbol>
  <symbol id="exit" viewBox="0 0 16 16">
    <path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z"/>
  </symbol>
</svg>


<section class="photo-gallery">
  <div class="container">
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 gallery-grid">
      <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/1.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/1.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
      <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/2.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/2.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
      <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/3.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/3.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
      <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/4.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/4.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
      <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/5.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/6.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
      <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_7.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_7.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
      <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_8.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_8.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
      <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_9.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_9.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
      <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_10.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_10.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
        
          <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_11.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_11.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
        
          <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_12.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_12.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
        
          <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_13.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_12.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
        
          <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_13.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_13.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
        
          <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_14.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_14.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
        
          <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_15.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_15.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
        
          <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_16.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_16.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
          <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_17.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_17.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
          <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_18.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_18.jpg') }}" class="img-fluid" alt="">
        </a>
      </div>
          <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_19.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_19.jpg') }}" class="img-fluid" alt="">
        </a>
              </div>
          <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_20.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_20.jpg') }}" class="img-fluid" alt="">
        </a>
              </div>
             <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_21.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_21.jpg') }}" class="img-fluid" alt="">
        </a>
                 </div>
                    <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_22.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_22.jpg') }}" class="img-fluid" alt="">
        </a>
                        </div>
                           <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_23.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_23.jpg') }}" class="img-fluid" alt="">
        </a>
                               </div>
                                  <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_24.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_24.jpg') }}" class="img-fluid" alt="">
        </a>
                                      </div>
                                         <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_25.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_25.jpg') }}" class="img-fluid" alt="">
        </a>
                                             </div>
                                                <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_26.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_26.jpg') }}" class="img-fluid" alt="">
        </a>
                                                    </div>
                                                       <div class="col">
        <a class="gallery-item" href="{{ URL::asset('images/gallery/IKI_27.jpg') }}" target="_blank">
          <img src="{{ URL::asset('images/gallery/IKI_27.jpg') }}" class="img-fluid" alt="">
        </a>
            </div>  
      </div>
    </div>
  </div>
</section>


<script>

const html = document.querySelector('html');
html.setAttribute('data-bs-theme', 'dark');

document.addEventListener('DOMContentLoaded', () => {
  // --- Create LightBox
  const galleryGrid = document.querySelector(".gallery-grid");
  const links = galleryGrid.querySelectorAll("a");
  const imgs = galleryGrid.querySelectorAll("img");
  const lightboxModal = document.getElementById("lightbox-modal");
  const bsModal = new bootstrap.Modal(lightboxModal);
  const modalBody = lightboxModal.querySelector(".lightbox-content");

  function createCaption (caption) {
    return `<div class="carousel-caption d-none d-md-block">
        <h4 class="m-0">${caption}</h4>
      </div>`;
  }

  function createIndicators (img) {
    let markup = "", i, len;

    const countSlides = links.length;
    const parentCol = img.closest('.col');
    const curIndex = [...parentCol.parentElement.children].indexOf(parentCol);

    for (i = 0, len = countSlides; i < len; i++) {
      markup += `
        <button type="button" data-bs-target="#lightboxCarousel"
          data-bs-slide-to="${i}"
          ${i === curIndex ? 'class="active" aria-current="true"' : ''}
          aria-label="Slide ${i + 1}">
        </button>`;
    }

    return markup;
  }

  function createSlides (img) {
    let markup = "";
    const currentImgSrc = img.closest('.gallery-item').getAttribute("href");

    for (const img of imgs) {
      const imgSrc = img.closest('.gallery-item').getAttribute("href");
      const imgAlt = img.getAttribute("alt");

      markup += `
        <div class="carousel-item${currentImgSrc === imgSrc ? " active" : ""}">
          <img class="d-block img-fluid w-100" src=${imgSrc} alt="${imgAlt}">
          ${imgAlt ? createCaption(imgAlt) : ""}
        </div>`;
    }

    return markup;
  }

  function createCarousel (img) {
    const markup = `
      <!-- Lightbox Carousel -->
      <div id="lightboxCarousel" class="carousel slide carousel-fade" data-bs-ride="true">
        <!-- Indicators/dots -->
        <div class="carousel-indicators">
          ${createIndicators(img)}
        </div>
        <!-- Wrapper for Slides -->
        <div class="carousel-inner justify-content-center mx-auto">
          ${createSlides(img)}
        </div>
        <!-- Controls/icons -->
        <button class="carousel-control-prev" type="button" data-bs-target="#lightboxCarousel" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#lightboxCarousel" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
      `;

    modalBody.innerHTML = markup;
  }

  for (const link of links) {
    link.addEventListener("click", function (e) {
      e.preventDefault();
      const currentImg = link.querySelector("img");
      const lightboxCarousel = document.getElementById("lightboxCarousel");

      if (lightboxCarousel) {
        const parentCol = link.closest('.col');
        const index = [...parentCol.parentElement.children].indexOf(parentCol);

        const bsCarousel = new bootstrap.Carousel(lightboxCarousel);
        bsCarousel.to(index);
      } else {
        createCarousel(currentImg);
      }

      bsModal.show();
    });
  }

  // --- Support Fullscreen
  const fsEnlarge = document.querySelector(".btn-fullscreen-enlarge");
  const fsExit = document.querySelector(".btn-fullscreen-exit");

  function enterFS () {
    lightboxModal.requestFullscreen().then({}).catch(err => {
      alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
    });
    fsEnlarge.classList.toggle("d-none");
    fsExit.classList.toggle("d-none");
  }

  function exitFS () {
    document.exitFullscreen();
    fsExit.classList.toggle("d-none");
    fsEnlarge.classList.toggle("d-none");
  }

  fsEnlarge.addEventListener("click", (e) => {
    e.preventDefault();
    enterFS();
  });

  fsExit.addEventListener("click", (e) => {
    e.preventDefault();
    exitFS();
  });
})


</script>
<div class="modal fade lightbox-modal" id="lightbox-modal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-fullscreen">
    <div class="modal-content">
      <button type="button" class="btn-fullscreen-enlarge" aria-label="Enlarge fullscreen">
        <svg class="bi"><use href="#enlarge"></use></svg>
      </button>
      <button type="button" class="btn-fullscreen-exit d-none" aria-label="Exit fullscreen">
        <svg class="bi"><use href="#exit"></use></svg>
      </button>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-body">
        <div class="lightbox-content">
          <!-- JS content here -->
        </div>
      </div>
    </div>
  </div>
</div>

			</div>
            
		</div>
	</div>

                    
                    
			
			</div>
		</div>
	</div>
        
        
        
@include('layout/frontend/_footer')