
//////////////// start lightbox galerie image page site////////////////////////
// Sélection des images à ouvrir dans la lightbox
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger, .paragraph--type--projet-diapo .lightbox-trigger, .field_field_images .lightbox-trigger');
let currentIndex;

// Création de la lightbox
const lightbox = document.createElement('div');
lightbox.id = 'lightbox';
lightbox.classList.add('lightbox');
document.body.appendChild(lightbox);

// Image affichée dans la lightbox
const img = document.createElement('img');
img.classList.add('lightbox-content');
lightbox.appendChild(img);

// Légende
const caption = document.createElement('p');
caption.classList.add('caption');
lightbox.appendChild(caption);

// Bouton de fermeture
const closeBtn = document.createElement('span');
closeBtn.classList.add('close');
closeBtn.innerHTML = '&times;';
lightbox.appendChild(closeBtn);

// Bouton précédent avec image
const prevBtn = document.createElement('a');
prevBtn.classList.add('prev');
const prevImg = document.createElement('img');
prevImg.src = "/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg"; // 🔁 adapte ce chemin
prevImg.alt = 'Précédent';
prevBtn.appendChild(prevImg);
lightbox.appendChild(prevBtn);

// Bouton suivant avec image
const nextBtn = document.createElement('a');
nextBtn.classList.add('next');
const nextImg = document.createElement('img');
nextImg.src = '/themes/custom/quartiers_de_demain/dist/assets/img/next-blanc.svg'; // 🔁 adapte ce chemin
nextImg.alt = 'Suivant';
nextBtn.appendChild(nextImg);
lightbox.appendChild(nextBtn);

// Fonction d'affichage
function showImage(index) {
  if (index < 0) index = images.length - 1;
  if (index >= images.length) index = 0;
  currentIndex = index;

  const currentImg = images[currentIndex];

  // 👉 1. Utiliser l'IMAGE ORIGINALE (href du <a>) si possible
  const parentLink = currentImg.closest('a');
  if (parentLink && parentLink.getAttribute('href')) {
    img.src = parentLink.getAttribute('href');
  } else {
    img.src = currentImg.getAttribute('src');
  }

  // 👉 2. Trouver le conteneur qui porte la légende
  // - Cas 1 : <div><div class="cadre-img-zoom"><img></div><blockquote class="image-field-caption">...</blockquote></div>
  // - Cas 2 : <div class="images"><a><img></a><blockquote class="image-field-caption">...</blockquote></div>
  const wrapper =
    currentImg.closest('.cadre-img-zoom')?.parentElement || // cas 1
    currentImg.closest('.images');                          // cas 2

  let captionText =
    wrapper?.querySelector('.image-field-caption p')?.textContent ||
    currentImg.alt || // fallback si pas de blockquote
    '';

  caption.textContent = captionText;

  lightbox.style.display = 'flex';
}


// Clic sur une image
images.forEach((image, index) => {
  image.addEventListener('click', (e) => {
    e.preventDefault();     // empêche le <a> de s'ouvrir
    e.stopPropagation();    // empêche des comportements externes
    showImage(index);
  });

  // 🔒 Empêche le clic sur le <a> parent d'agir aussi
  const parentLink = image.closest('a');
  if (parentLink) {
    parentLink.addEventListener('click', (e) => {
      e.preventDefault();
      e.stopPropagation();
    });
  }
});


// Navigation & fermeture
closeBtn.addEventListener('click', () => lightbox.style.display = 'none');
prevBtn.addEventListener('click', (e) => {
  e.stopPropagation();
  showImage(currentIndex - 1);
});
nextBtn.addEventListener('click', (e) => {
  e.stopPropagation();
  showImage(currentIndex + 1);
});

// Clic en dehors de l'image pour fermer
lightbox.addEventListener('click', (e) => {
  if (e.target === lightbox) lightbox.style.display = 'none';
});

// Clavier
document.addEventListener('keydown', (e) => {
  if (lightbox.style.display === 'flex') {
    if (e.key === 'Escape') lightbox.style.display = 'none';
    else if (e.key === 'ArrowLeft') showImage(currentIndex - 1);
    else if (e.key === 'ArrowRight') showImage(currentIndex + 1);
  }
});


//////////////// end lightbox galerie image page site////////////////////////