const lang = document.querySelector("html").lang;
//  عرض صفحات في تفاصيل المنتج
const showProductPageDetails = () => {
  const descDiv = document.createElement("div");
  descDiv.classList.add("description-div");
  // وصف المنتج
  const productDesc = document.querySelector(
    ".product-single .product-single-top-description"
  );
  let des = document.createElement("div");
  let desTitle = document.createElement("button");
  desTitle.classList.add("accordion");
  desTitle.innerText = "وصف المنتج";
  if (lang == "en") {
    desTitle.innerText = "Product Description";
  }
  let desText = document.createElement("p");
  desText.classList.add("accordion-content");
  productDesc ? desText.appendChild(productDesc) : "";

  des.appendChild(desTitle);
  des.appendChild(desText);

  const sizeGuideTable = document.createElement("div");
  sizeGuideTable.innerHTML = `
      <div>
      متجر "أصايل" يقدم خدمة التوصيل والشحن لعملائه لضمان تسهيل عملية الشراء واستلام المنتجات بسهولة وراحة لتفاصيل أكثر
      <a href="https://aslline.me/ar/%D8%A7%D9%84%D8%AA%D9%88%D8%B5%D9%8A%D9%84-%D9%88%D8%A7%D9%84%D8%B4%D8%AD%D9%86/page-2068565720" target="_blank"> صفحة الشحن والتوصيل  </a>
      </div>`;

  // صفحة الشحن
  let shipping = document.createElement("div");
  shipping.appendChild(sizeGuideTable);
  let title2 = document.createElement("button");
  title2.classList.add("accordion");
  title2.innerText = "الشحن والتوصيل";
  if (lang == "en") {
    title2.innerText = "Shipping and delivery";
  }
  let text2 = document.createElement("p");
  text2.classList.add("accordion-content");
  sizeGuideTable ? text2.appendChild(sizeGuideTable) : "";

  shipping.appendChild(title2);
  shipping.appendChild(text2);

  descDiv.appendChild(des);
  descDiv.appendChild(shipping);

  /* ############################################### */
  // نقل المشاركة تحت أضف للسلة داخل تفاصيل المنتج
  const share = document.querySelector("salla-social-share");
  if (share) {
    share.classList.add("share2");
    descDiv.appendChild(share);
  }
  // show in productForm
  const productForm = document.querySelector("#product-form");
  if (productForm) {
    productForm.after(descDiv);
  }
};

const myfunc = () => {
  const accordionBtns = document.querySelectorAll(".accordion");
  if (accordionBtns) {
    accordionBtns.forEach((accordion) => {
      if (accordion) {
        accordion.onclick = function () {
          // accordion.addEventListener('click', function () {
          this.classList.toggle("is-open");
          let content = this.nextElementSibling;
          if (content.style.maxHeight) {
            content.style.maxHeight = null;
          } else {
            content.style.maxHeight = content.scrollHeight + "px";
          }
          // })
        };
      }
    });
  }
};

const interval = setInterval(() => {
  myfunc();
}, 2000);

window.addEventListener("load", () => {
  showProductPageDetails();
});

const changeContentToAccordion = () => {
  const contentEntry = document.querySelector(".content-entry");
  const elements = Array.from(contentEntry.children);

  let accordionContainer = null;
  let panelContainer = null;

  elements.forEach((el) => {
    if (el.tagName === "H3") {
      accordionContainer = document.createElement("button");
      accordionContainer.classList.add("accordion");
      accordionContainer.textContent = el.textContent;

      el.parentNode.insertBefore(accordionContainer, el);

      panelContainer = document.createElement("p");
      panelContainer.classList.add("panel");

      el.parentNode.insertBefore(panelContainer, el.nextSibling);

      el.remove();
    } else if (panelContainer) {
      panelContainer.appendChild(el);
    }
  });

  const accordions = document.querySelectorAll(".accordion");
  accordions.forEach((acc) => {
    acc.addEventListener("click", function () {
      this.classList.toggle("active");
      const panel = this.nextElementSibling;
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    });
  });
};
window.addEventListener("load", () => {
  if (
    window.location.pathname.includes("page-1427172825") ||
    window.location.pathname.includes("page-2068565720")
  ) {
    changeContentToAccordion();
  }
});

/*const updateSwiper = () => {
  const photoBlocks = document.querySelectorAll(".banners-slider");
  if (photoBlocks) {
    photoBlocks.forEach((photoBlock, i) => {
      console.log("gdgdg", photoBlock, i);
      console.log("gdgdg", photoBlock, i);
      // const script1 = document.createElement("script");
      // script1.src =
      //   "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js";
      // document.body.appendChild(script1);
      const slides =document.querySelectorAll(
        `.banners-slider:nth-of-type(${i+1}) .swiper .swiper-slide`
      );
      console.log("slides", slides);
      const newSlider = document.createElement("div");
      newSlider.classList.add("swiper");
      newSlider.classList.add("new-swiper");
      const wrapper = document.createElement("div");
      wrapper.classList.add("swiper-wrapper");
      slides.forEach((slide) => {
        let div = document.createElement("div");
        div.classList.add("swiper-slide");
        div.innerHTML = slide.innerHTML;
        wrapper.appendChild(div);
      });
      const pagination = document.createElement("div");
      pagination.classList.add("swiper-pagination");
      newSlider.appendChild(wrapper);
      newSlider.appendChild(pagination);

      photoBlock.appendChild(newSlider);
      photoBlock.classList.add("photo-block");

      const script = document.createElement("script");
      script.type = "module";
      script.innerHTML = `
        const swiper = new Swiper('.new-swiper', {
          direction: "vertical",
          slidesPerView: 1,
          spaceBetween: 30,
          mousewheel: true,
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
        });
    `;
      document.body.appendChild(script);
    });
  }
};
window.addEventListener("load", () => {
  // const script1 = document.createElement("script");
  // script1.src = "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js";
  // document.body.appendChild(script1);
  setTimeout(() => {
    updateSwiper();
  }, 500);
  setTimeout(() => {
    const newSwiper = document.querySelector(".new-swiper");
    if (!newSwiper) {
      updateSwiper();
    }
  }, 800);
  setTimeout(() => {
    const newSwiper = document.querySelector(".new-swiper");
    if (!newSwiper) {
      updateSwiper();
    }
  }, 1200);
  setTimeout(() => {
    const newSwiperSlide = document.querySelector(".new-swiper .swiper-slide");
    if (!newSwiperSlide) {
      updateSwiper();
    }
  }, 3000);
});*/


const loadScript = (type = "script", src, onLoadCallback) => {
  let item;

  if (type === 'script') {
    item = document.createElement('script');
    item.src = src;
  } else if (type === 'stylesheet') {
    item = document.createElement('link');
    item.rel = 'stylesheet';  
    item.href = src;
  } else {
    console.error('Invalid type specified. Use "script" or "stylesheet".');
    return;
  }

  item.onload = () => {
    console.log(`${src} loaded.`);
    if (typeof onLoadCallback === 'function') {
      onLoadCallback();
    }
  };
  document.head.appendChild(item);
};

const addCarousel = () => {
  const parent = document.querySelector('.page-single .content--single-page h1');
  const carouselSec = document.createElement('section');
  carouselSec.className = 'carousel-sec';
    const images = [
    'https://cdn.salla.sa/form-builder/Tp7SVtXJskwr4U8Q7lWaCksFYcRY7YGJkKeE7bEU.jpg',
   'https://cdn.salla.sa/form-builder/ctqbjRBHuDvJqhWJDdp4b1kHOzn0yrfnhlnOJCRw.jpg',
    'https://cdn.salla.sa/form-builder/Ha1EHivQdfaKO3usu00jBiVymf1Fb2nJQqTi978d.jpg',
    'https://cdn.salla.sa/form-builder/eWrXsE7BI4TTeUQr0C3hNR6X1Cqs6GtG52sisY9K.jpg',
    'https://cdn.salla.sa/form-builder/4RVF0kHaSqHMZzJvVKOQsJtSCxUlBI4AW4UU8wHR.jpg',
    'https://cdn.salla.sa/form-builder/RRsilAk8ssO0fABlytufKfeXcY4e9PYNEVNZgPq5.jpg',
    'https://cdn.salla.sa/form-builder/r4FKJARntdOpomCcET0XppJ5lmxdR5kvaI78etZX.jpg',
    'https://cdn.salla.sa/form-builder/ykaYlXejM11DzUxvDgr3jdKtHM1aOVsdkTbNii32.jpg',
    'https://cdn.salla.sa/form-builder/A8LmDA3zZEE5nILFBmavhC2FEc9jOhZ1aMl0Zgbr.jpg',
    'https://cdn.salla.sa/form-builder/HYupuiZ1Tc3z7eZ95gM2hdEZJ2vsJx94YBLt4eHr.jpg',
    
    'https://cdn.salla.sa/form-builder/3xuNlqyISnsObJOKukY45iNVceKbp6IX7oUPlnJI.jpg',
    'https://cdn.salla.sa/form-builder/mDY4QxWQ7oaLGl7UPnTpKc7B81xrv1Ai2JpvAqbg.jpg',
  'https://cdn.salla.sa/form-builder/lztzy9SjNAmZX58eN2pIK29M1Kubqs9NzhuEVk2a.jpg',
    'https://cdn.salla.sa/form-builder/44lxaNmYqYAoNjDgJ5j6RRYuDMauQ5Gv51kJa2gR.jpg',
    'https://cdn.salla.sa/form-builder/WiEVsKVOUBzn9wOevw3J8VXDl7qzkoz2c6fT9EfZ.jpg',
    'https://cdn.salla.sa/form-builder/GRYVq4R84lEkBtMHQE1GwaghQzMLIZPN1fimlzol.jpg'
  ];

/*
  const images = [
    'https://cdn.salla.sa/form-builder/XmkIcP47xGHMHoqAaUVKiRjnt85tggj2rCeuuEkx.png',
   'https://cdn.salla.sa/form-builder/pfVTwLZ6YeOqmtJcpF77jLqFdrFwOFWGfqNj965K.png',
    'https://cdn.salla.sa/form-builder/SmYAAtmAwSoFioDRvbNd26NXQKUKMDmDfEpwLAQM.png',
    'https://cdn.salla.sa/form-builder/EkrH7l10ADlBGIPDG6FYRQ0CQZ74xPfchdyoqtPM.png',
    'https://cdn.salla.sa/form-builder/yvRelQUPGWqwLvsjatQB38YMgRZ7irCTIyZI8KK4.png',
    'https://cdn.salla.sa/form-builder/N6zeG0AH2djMK0wBxwI5vIKYTTBdqvGUA34RPisJ.png',
    'https://cdn.salla.sa/form-builder/YubJrieFGOqsrHLyj2vNXjVOMEx86mUwaoDuRuYI.png',
    'https://cdn.salla.sa/form-builder/ZAIwjlMGEmplNM62FkdzYXOS8RpkeHm2WxByKgrJ.png',
    'https://cdn.salla.sa/form-builder/X1rmF8soMQ9JEs8iSOOJykmzulh6uFy5Jn9EwvNN.png',
    'https://cdn.salla.sa/form-builder/wf2KW73rKGIu64EPGfA3kC8MYfzakC8HjPQT65Ze.png',
    
    'https://cdn.salla.sa/form-builder/PIJaTqTYFTbcpL3WaID4H5nL4KFkyaXsYAHI2WA8.png',
    'https://cdn.salla.sa/form-builder/5TOToUaLLh9hFwTjI8URKGLTINboAEV1Elp2KrK7.png',
  'https://cdn.salla.sa/form-builder/KikjQGHctVGqFJRQjZdknIFBUZGZjNv1X1xMQ7m9.png',
    'https://cdn.salla.sa/form-builder/cQgPia8V7jbWaMdCAcioUtaL8kyoROBNTPOWCp0z.png',
    'https://cdn.salla.sa/form-builder/RzyismZ6S3e14cd8vJ7gcclKjHdCjnYUxMKWohym.png',
    'https://cdn.salla.sa/form-builder/ahP8YbaCtcoq0UjUCvVfVlZEXscoMnUgO6uxaon7.png',
    'https://cdn.salla.sa/form-builder/RSchmVBHZmeXMU6bwZMsG6eNqdS1D4ZHMF4XHBz1.png',
    'https://cdn.salla.sa/form-builder/wBHhJFSWWWJtAkv9mf66ssEJ7IfRYLIWdQdcMeZM.png',
    'https://cdn.salla.sa/form-builder/qOOYpgKymRmKUIULiGAtWlLtb5CtBHETo8WhIDzq.png',
    'https://cdn.salla.sa/form-builder/42IKv1HMOG8mG9flcDS4e8aXHb3Q6czDosZZWITI.png',
    
    'https://cdn.salla.sa/form-builder/krtnl4VcEBjthuQYeGXoe5CuBGo581n4acULiWZw.png',
    'https://cdn.salla.sa/form-builder/3y6MMBjU0ngUcknlknscMgpeMe48idlmNtalmJe3.png', 
    'https://cdn.salla.sa/form-builder/9mIv50jI8CENBlENI7hOhIyh6lPG5lsACbLvNkC2.png',
    'https://cdn.salla.sa/form-builder/ElOwKEsfcYJFtWOJyR1BDS2qJRdmlX9yDKzkK7Pl.png'
  ];
*/
  let carouselHTML = `<h2 class="text-center text-xl pt-6 pb-4">Fall/Winter 2024 Collection</h2><div class="carousel" data-flickity='{
           "imagesLoaded": true,
           "groupCells": "100%",
           "dragThreshold": 5,
           "cellAlign": "left",
           "wrapAround": true,
           "prevNextButtons": true,
           "percentPosition": true,
           "pageDots": false,
           "rightToLeft": false,
           "autoPlay": 4000
         }'>`;

images.forEach((src, index) => {
  carouselHTML += `
    <div class="carousel-cell">
      <img src="${src}" alt="Image ${index + 1}" class="carousel-img"/>
    </div>
  `;
});


  carouselHTML += `</div>`;
  carouselSec.innerHTML = carouselHTML;

  if (parent && parent.textContent == 'Look Book') {
    
      const content = document.querySelector('.page-single .content--single-page');
            const contentP = document.querySelector('.page-single .content--single-page .content-entry');
      content.classList.add('left-content')
contentP.after(carouselSec);
  }

  addEventListenersToImages(); // Add event listeners after carousel is added to the DOM
};

const createModal = () => {
  const modal = document.createElement('div');
  modal.id = 'imageModal';
  modal.classList.add('modal');
  modal.style.display = 'none';
  
  const closeBtn = document.createElement('span');
  closeBtn.classList.add('close');
  closeBtn.innerHTML = '&times;';
  closeBtn.addEventListener('click', closeModal);

  const modalImage = document.createElement('img');
  modalImage.id = 'modalImage';
  modalImage.classList.add('modal-content');

  const caption = document.createElement('div');
  caption.id = 'caption';

  modal.appendChild(closeBtn);
  modal.appendChild(modalImage);
  modal.appendChild(caption);

  document.body.appendChild(modal);
};

const openModal = (src) => {
  const modal = document.getElementById('imageModal');
  const modalImage = document.getElementById('modalImage');
  const caption = document.getElementById('caption');

  modal.style.display = 'block';
  modalImage.src = src;

  caption.innerHTML = "Some caption for the image"; // You can modify this to use dynamic captions
};

const closeModal = () => {
  const modal = document.getElementById('imageModal');
  modal.style.display = 'none';
};

const addEventListenersToImages = () => {
  const images = document.querySelectorAll('.carousel-img'); // Select images with class "carousel-img"
  console.log(images); // To check if images are correctly selected
  
  images.forEach(img => {
    img.addEventListener('click', () => openModal(img.src)); // Open modal on image click
  });
};

window.addEventListener("load", () => {
  setTimeout(async () => {
    // Load Flickity script and stylesheet
    try {
      await loadScript('script', 'https://cdnjs.cloudflare.com/ajax/libs/flickity/3.0.0/flickity.pkgd.min.js');
      await loadScript('stylesheet', 'https://cdnjs.cloudflare.com/ajax/libs/flickity/3.0.0/flickity.css');
      
      addCarousel(); // Create the carousel and add event listeners after it's added
      createModal(); // Create the modal after the carousel
    } catch (error) {
      console.error('Error loading Flickity:', error);
    }
  }, 100);
});

const link = document.createElement("link");
link.href = "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@700&display=swap";
link.rel = "stylesheet";
document.head.appendChild(link);


//test
  const observer = new MutationObserver(() => {
    const oldLinksDiv = document.querySelector('.store-footer.basic-footer .flex.justify-center.my-3');
    const alreadyInjected = document.querySelector('.custom-app-links');

    if (oldLinksDiv && !alreadyInjected) {
      // أخفِ القديم
      oldLinksDiv.style.display = 'none';

      // أضف الجديد مكانه بالضبط
      const newDiv = document.createElement('div');
      newDiv.className = 'custom-app-links';
      newDiv.innerHTML = `
        <a href="https://apps.apple.com/us/app/asl-line/id6520390907" rel="noreferrer" target="_blank">
          <img src="https://shiro.com.sa/wp-content/uploads/2025/07/ios.png" alt="Download on App Store">
        </a>
        <a href="https://play.google.com/store/apps/details?id=com.aslline.app" rel="noreferrer" target="_blank">
          <img src="https://shiro.com.sa/wp-content/uploads/2025/07/android.png" alt="Get it on Google Play">
        </a>
      `;
      oldLinksDiv.parentNode.insertBefore(newDiv, oldLinksDiv.nextSibling);

      observer.disconnect();
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
  
  
  //video