/* ############## أقسام متحركة ############## */
const addImagesSlider = () => {
  const imgs = [
    {
      name: "الأخشاب",
      link: "https://jadigallery.com/%D8%A7%D9%84%D8%A3%D8%AE%D8%B4%D8%A7%D8%A8-woody/c1279695557",
      img: "https://cdn.salla.sa/QGXaG/lBKeiNhfBG7k2pyd0WHrjlNtX5oa2FWUT99U9amE.jpg",
    },
    {
      name: "الأروما",
      link: "https://jadigallery.com/%D8%A7%D9%84%D8%A3%D8%B1%D9%88%D9%85%D8%A7-aromatic/c1004382678",
      img: "https://cdn.salla.sa/QGXaG/JS7zrqQv8IuMDPHs1ACIOUs8Gu7cpyM3EoBG4zVN.jpg",
    },
    {
      name: "الأزهار",
      link: "https://jadigallery.com/%D8%A7%D9%84%D8%A7%D8%B2%D9%87%D8%A7%D8%B1-floral/c397543105",
      img: "https://cdn.salla.sa/QGXaG/OOBLO6X6v61ueB4zsmUJtkk2LAsXrVPupVcuMxjw.jpg",
    },
    {
      name: "الأطقم",
      link: "https://jadigallery.com/%D8%A7%D8%B7%D9%82%D9%85-%D8%A7%D9%84%D8%B9%D8%B7%D9%88%D8%B1/c580168437",
      img: "https://cdn.salla.sa/QGXaG/axUj36dsHzuBQWMdf0emQh8j8WpVNTM4TlUKmC4s.jpg",
    },
    {
      name: "الجلود",
      link: "https://jadigallery.com/%D8%A7%D9%84%D8%AC%D9%84%D9%88%D8%AF-leather/c505657798",
      img: "https://cdn.salla.sa/QGXaG/7VGcUxWVJzFg7xiOSbBlRUcY4WpphjfnQCvbJTja.jpg",
    },
    {
      name: "الحمضيات",
      link: "https://jadigallery.com/%D8%A7%D9%84%D8%AD%D9%85%D8%B6%D9%8A%D8%A7%D8%AA-citrus/c222389196",
      img: "https://cdn.salla.sa/QGXaG/W2kit1SopfbcBiVUdmQotToGnkxozUyHdXmF6jd8.jpg",
    },
    {
      name: "الشرقية",
      link: "https://jadigallery.com/%D8%A7%D9%84%D8%B4%D8%B1%D9%82%D9%8A%D8%A9-oriental/c722272248",
      img: "https://cdn.salla.sa/QGXaG/M12rtLBXn5EQj1u0xnvQVdPppgDSTIVDjb9c2uZ6.jpg",
    },
    {
      name: "الشيبير",
      link: "https://jadigallery.com/%D8%A7%D9%84%D8%B4%D9%8A%D8%A8%D9%8A%D8%B1-chypre/c829224657",
      img: "https://cdn.salla.sa/QGXaG/dvjazy12E4R3Hwm3fyh36oFP9Z2PbxQIX3bTjmK0.jpg",
    },
    {
      name: "الفواكه",
      link: "https://jadigallery.com/%D8%A7%D9%84%D9%81%D8%A7%D9%83%D9%87%D8%A9-fruity/c2060566735",
      img: "https://cdn.salla.sa/QGXaG/ac8ZfpC9eYsSlSzMZJea6jURRK2Dbf04dBjQ15KQ.jpg",
    },
    {
      name: "الفوجير",
      link: "https://jadigallery.com/%D8%A7%D9%84%D9%81%D9%88%D8%AC%D9%8A%D8%B1-fougere/c1777371861",
      img: "https://cdn.salla.sa/QGXaG/ByPUXdpScSA1fmhXwRQv79szetZ8ORAcVEREtSdB.jpg",
    },
  ];
  const htmlTags = Object.keys(imgs)
    .map(function (k) {
      return `
    <div class="swiper-slide">
      <a href="${imgs[k].link}"> <img loading="lazy" src="${imgs[k].img}" alt="${imgs[k].name}"> </a>
    </div>
  `;
    })
    .join("");
  const features = document.createElement("div");
  features.setAttribute("style", "display: none;");
  features.classList.add("images-slider");
  let title = document.createElement("h3");
  title.textContent = "تسوق حسب الرائحة";
  features.appendChild(title);
  const div = document.createElement("div");

  div.innerHTML = `
        <div class="swiper swiper1">
            <div class="swiper-wrapper">
              ${htmlTags}
            </div>
        </div>
    `;
  features.appendChild(div);

  // show in store
  const storeCenter = document.querySelector(".home-block--square-images");
  if (storeCenter) {
    storeCenter.before(features);
  }

  const css = document.createElement("link");
  css.rel = "stylesheet";
  css.href = "https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css";
  document.body.appendChild(css);

  const script = document.createElement("script");
  script.type = "module";
  script.innerHTML = `
        import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.esm.browser.min.js'

        const swiper = new Swiper('.swiper1', {
            slidesPerView: 4,
            spaceBetween: 0,
            grabCursor: true,
            // centeredSlides: true,
            breakpoints: {
                1024: {
                    slidesPerView: 6,
                    spaceBetween: 20,
                },
            },        
        });
    `;
  document.body.appendChild(script);
  setTimeout(() => {
    features.setAttribute("style", "display: block;");
  }, 1000);
};

/* ############## Show More Btn ############## */
const changeShowMoreBtnText = () => {
  const btns = document.querySelectorAll(
    ".home-block.home-block--products-slider .container .btn.btn--oval"
  );
  if (btns.length) {
    btns.forEach((btn) => {
      btn.innerText = "مشاهدة الكل";
    });
  }
};

/* ############################################### */
// الأيقونات المتحركة بال js
const addIcons = () => {
  // icons
  const icons = document.querySelectorAll(".home-block--store-features .store-feature__icon")
  if (icons.length > 0) {
    icons[0].innerHTML = `<img src="https://cdn.salla.sa/QGXaG/wi90OWmGtADPZaLlHlEX0IU0jrD6LR10okbo2Xav.png"  alt="ماركات أصلية 100%">`
    icons[1].innerHTML = `<img src="https://cdn.salla.sa/QGXaG/brbeuK3ixBi7EcI2NmkQH2QX4a6FutQ26VQLWx06.png"  alt="جودة تفوح بفخامتها">`
    icons[2].innerHTML = `<img src="https://cdn.salla.sa/QGXaG/btj4dtF9I4VLa84TGsVwTD4n0AMFJHlqs2CAewg4.png"  alt="خبرة عالية وعميقة">`
  }
}

window.addEventListener("load", () => {
  addImagesSlider();
  changeShowMoreBtnText();
  addIcons();
});


/* ############################################### */
// نقل وصف المنتج تحت أضف للسلة داخل تفاصيل المنتج
const sortProductDetails = () => {
  const productForm = document.querySelector(".product-details__info");
  if (productForm) {
    productForm.setAttribute("style", "margin-bottom: 15px !important;");

    // وصف المنتج
    const productDesc = document.querySelector(
      ".article.article--main.article--product-details"
    );
    let des = document.createElement("div");
    des.classList.add('des-div')

    let h2 = document.createElement("h2");
    h2.innerText = "تفاصيل العطر";
    let div = document.createElement("div");
    div.appendChild(productDesc);
    des.appendChild(h2);
    des.appendChild(div);
    
    const share = document.querySelector('.product-details__info .share-like-wrapper')
    if (share) {
        const storyDiv = document.createElement("div");
        storyDiv.classList.add('product-details__title')
        storyDiv.appendChild(share)
        productForm.after(storyDiv)
    }

    
    des ? productForm.after(des) : "";
  }
};

/* ############################################### */
// صور مميزات المنتج
const productImgFeatures = () => {
  const productSections = document.querySelector('.product-details__info .product-details__title')
  if (productSections) {
      const imgFeatures = document.createElement("div");
      imgFeatures.classList.add('features-div')

      const imgs = document.createElement("div");
      imgs.classList.add('imgs')

      imgs.innerHTML = `
          <img src="https://cdn.salla.sa/QGXaG/rSIe9ejoVNerA3EOsQZTKG0UXvtNGKTKyiXM2Yk9.png" alt="أصلي 100">
          <img src="https://cdn.salla.sa/QGXaG/JPU22DwaljUIAiBE7M3DhHGTT3v9zoAUfeZ9yKHm.png" alt="شحن سريع">
      `
      imgFeatures.appendChild(imgs);
      productSections.after(imgFeatures)
  }
}

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