// add class
document.addEventListener("DOMContentLoaded", () => {
    // اجلب جميع الأقسام (sections) في المتجر
    const sections = document.querySelectorAll("section");

    // أضف class ثابت ومختلف لكل قسم
    sections.forEach((section, index) => {
        // أنشئ اسم class جديد
        const uniqueClass = `section-${index + 1}`;
        
        // أضف الـ class إلى القسم
        section.classList.add(uniqueClass);
    });
});
/*/////////////////////// موشن الحركه يين كل سيشكن والتاين /////////////*/

document.addEventListener("DOMContentLoaded", function () {
    // إضافة التنسيقات داخل JavaScript
    const style = document.createElement("style");
    style.textContent = `
        .s-block {
            opacity: 0;
            transform: translateY(30px) scale(0.95);
            transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
            will-change: opacity, transform;
        }
        .s-block.appear {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    `;
    document.head.appendChild(style);

    function handleVisibility(elements, className) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    entry.target.classList.add(className);
                } else {
                    entry.target.classList.remove(className);
                    resetAnimation(entry.target);
                }
            });
        }, { threshold: 0.1 });

        elements.forEach((element) => observer.observe(element));
    }

    function resetAnimation(element) {
        element.style.animation = "none";
        element.offsetHeight;
        element.style.animation = "";
    }

    handleVisibility(document.querySelectorAll(".s-block"), "appear");

    const blockObserver = new MutationObserver(() => {
        handleVisibility(document.querySelectorAll(".s-block:not(.appear)"), "appear");
    });

    blockObserver.observe(document.body, { childList: true, subtree: true });
});

/* Add custom Js code below */ 
(function () {
  function injectPreloader() {
    // 1. إنشاء عنصر preloader وإضافة محتواه
    const preloader = document.createElement("div");
    preloader.className = "preloader";
    preloader.innerHTML = `
      <div class="loading-container">
        <div class="loading"></div>
        <img id="loading-icon" src="https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/gZlzmb/sx09m1Khdz8XQeiLPpHFVXK9SPrNrP6yEMIrhLdv.png" alt="Loading...">
      </div>
    `;
    document.body.prepend(preloader);

    // 2. إنشاء عنصر <style> وإضافة CSS داخله
    const style = document.createElement("style");
    style.textContent = `
      .preloader {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 10000 !important;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s ease, visibility 0.3s ease;
      }

      .loading-container,
      .loading {
        height: 100px;
        width: 100px;
        position: relative;
        border-radius: 100%;
      }

      .loading-container {
        margin: 40px auto;
      }

      .loading {
        border: 1px solid transparent;
        border-color: transparent #1C4650 transparent #1C4650;
        animation: rotate-loading 1.5s linear infinite;
        transform-origin: 50% 50%;
      }

      #loading-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        max-width: 66px;
        transform: translate(-50%, -50%);
      }

      @keyframes rotate-loading {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }

      body.loaded .preloader {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
    `;
    document.head.appendChild(style);

    // 3. بعد تحميل الصفحة، انتظر 1.5 ثانية ثم أخفِ الـ Preloader
    window.addEventListener("load", function () {
      setTimeout(function () {
        document.body.classList.add("loaded");
      }, 1500);
    });
  }

  // 4. انتظر حتى يظهر عنصر <body>
  function waitForBody() {
    if (document.body) {
      injectPreloader();
    } else {
      setTimeout(waitForBody, 25);
    }
  }

  waitForBody();
})();




document.addEventListener("DOMContentLoaded",(function(){

const e=document.createElement("div");
e.className="quick-view-modal";
e.style.cssText=`
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  border-radius: 8px;
  max-width: 50%;
  width: 50%;
  max-height: 50vh;
  overflow-y: auto;
  display: none;
  z-index: 10001;
`;

const t=document.createElement("div");
t.className="quick-view-overlay";
t.style.cssText=`
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  z-index: 10000;
`;

const n=document.createElement("button");
n.innerHTML="×";
n.style.cssText=`
  position: fixed;
  top: 15px;
  right: 15px;
  background: #2c3e50;
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  padding-bottom: 7px;
`;
n.setAttribute("aria-label","إغلاق");

const i=document.createElement("div");
i.style.cssText=`
  margin-top: 20px;
  padding-bottom: 40px;
`;

const o=document.createElement("div");

function r(){
  e.style.display="none";
  t.style.display="none";
  i.innerHTML="";
}

o.innerHTML=`
  <div style="display:flex;justify-content:center;align-items:center;height:200px">
    <div style="border:5px solid #f3f3f3;border-top:5px solid #3498db;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite"></div>
  </div>
  <style>
    @keyframes spin {
      from {transform:rotate(0deg)}
      to {transform:rotate(360deg)}
    }
  </style>
`;

e.appendChild(n);
e.appendChild(i);
document.body.appendChild(e);
document.body.appendChild(t);

n.onclick=r;
t.onclick=r;

setTimeout(()=>{

document.querySelectorAll(".s-product-card-entry").forEach((n)=>{

if(n.querySelector(".quick-view-btn")) return;

const r=document.createElement("button");
r.className="quick-view-btn";
r.innerHTML="👁️";
r.style.cssText=`
  padding: 0px;
  cursor: pointer;
  background: transparent;
  color: #fff;
  border-radius: 30%;
  font-size: 14px;
  width: 37px;
  height: 30px;
  transition: background 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #eee;
`;

r.addEventListener("mouseenter",()=>{r.style.background="#1a252f"});
r.addEventListener("mouseleave",()=>{r.style.background="#2c3e50"});

r.onclick=async ev=>{
  ev.preventDefault();
  ev.stopPropagation();

  const d=n.querySelector("a")?.href;
  if(d){
    i.innerHTML="";
    i.appendChild(o);
    e.style.display="block";
    t.style.display="block";

    try{
      const e2=await fetch(d);
      const t2=await e2.text();
      const n2=new DOMParser().parseFromString(t2,"text/html");

      const o2=n2.querySelector("h1")?.textContent.trim()||"بدون عنوان";

      let r2="";
      const c=n2.querySelector(".price-wrapper");
      if(c){
        const e3=c.querySelector(".total-price:not(.hidden)")||c.querySelector(".total-price");
        if(e3) r2=e3.textContent.trim();
      }

      const s=n2.querySelector(".product__description")?.innerHTML||"لا يوجد وصف متوفر.";
      const a=n2.querySelector(".details-slider img")?.src;
      const l=[...n2.querySelectorAll(".s-slider-thumbs img")].map(e=>e.src);
      const p=n2.querySelector(".s-product-options-option-container")?.outerHTML||"";
      const u=n2.querySelector("form.product-form")?.outerHTML||"";

      i.innerHTML=`
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px">
          <div>
            ${a?`
              <img id="main-product-image" src="${a}" style="max-width:100%;border-radius:6px">
              <div style="display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px">
                ${l.map(e=>`<img src="${e}" style="width:60px;height:60px;cursor:pointer" onclick="document.getElementById('main-product-image').src=this.src">`).join("")}
              </div>
            `:""}
          </div>
          <div>
            <h2>${o2}</h2>
            ${r2?`<div style="color:#e74c3c;font-size:20px">${r2}</div>`:""}
            <div>${s}</div>
            ${p}
            ${u}
            <a href="${d}" style="display:block;margin-top:20px;padding:12px;background:var(--1);color:#fff;text-align:center;border-radius:4px;text-decoration:none">عرض كامل المنتج</a>
          </div>
        </div>
      `;

    }catch(err){
      console.error(err);
      i.innerHTML="<p style='color:red;text-align:center'>حدث خطأ أثناء التحميل</p>";
    }
  }
};

/* =================================================
   التعديل الوحيد: مكان زر العين فقط
================================================= */

const footer = n.querySelector(".s-product-card-content-footer");
if(footer){
  footer.appendChild(r);
}

});
},3000);

}));