/* Add custom Js code below */ 
document.addEventListener("DOMContentLoaded", function () {
  // ✅ إنشاء اللودر
  const loader = document.createElement('div');
  loader.id = 'loaderr';
  loader.style.cssText = `
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #5494d4;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    transition: opacity 2s ease; /* ← أبطأ */
  `;

  // ✅ شكل اللوجو + 4 دواير متحركة
  loader.innerHTML = `
    <div style="display: flex; flex-direction: column; align-items: center; gap: 25px;">
      <img src="https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/RyPDw/2d2C13A75aFtbxD5AtCPbJAATe92tfbkHdwI8K1o.png" alt="logo" style="width: 150px; height: 150px; object-fit: contain;" />
      <div style="display: flex; gap: 10px;">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>

      </div>
    </div>
    <style>
      .dot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: black;
        animation: wave 1.5s infinite ease-in-out;
      }
      .dot:nth-child(1) { animation-delay: 0s; }
      .dot:nth-child(2) { animation-delay: 0.2s; }
      .dot:nth-child(3) { animation-delay: 0.4s; }
      .dot:nth-child(4) { animation-delay: 0.6s; }


      @keyframes wave {
        0%, 80%, 100% {
          transform: translateY(0);
        }
        40% {
          transform: translateY(-20px);
        }
      }
    </style>
  `;

  document.body.appendChild(loader);

  // ✅ إزالة اللودر بعد تحميل الصفحة
  window.addEventListener('load', function () {
    const loader = document.getElementById('loaderr');
    if (loader) {
      loader.style.opacity = '0';
      setTimeout(() => loader.remove(), 2000); // ← يتزامن مع transition: 2s
    }
  });
});

document.addEventListener("DOMContentLoaded", function () {
  // اختيار كل أقسام الصفحة
  const sections = document.querySelectorAll("section");

  // ✅ تفعيل الأنيميشن عند ظهور الأقسام أثناء التمرير
  function checkVisibility() {
    sections.forEach(section => {
      const position = section.getBoundingClientRect();
      if (position.top < window.innerHeight && position.bottom >= 0) {
        section.classList.add('visible');
      } else {
        section.classList.remove('visible');
      }
    });
  }

  // إضافة مستمع لحدث التمرير
  window.addEventListener("scroll", checkVisibility);
  checkVisibility(); // تنفيذ التحقق أول مرة عند تحميل الصفحة

  // ✅ تعيين لون الخلفية لكل section إلى 'inherit'
  sections.forEach(function(section) {
    section.style.backgroundColor = '#5494d4';
  });

  // ✅ تعديل خلفية عنصر معين عند ظهوره
  const interval = setInterval(() => {
    const el = document.querySelector(".mm-spn.mm-spn--light");
    if (el) {
      el.style.backgroundColor = "#5494d4";
      el.style.backgroundImage = "none";
      el.style.color = "black";
      clearInterval(interval);
    }
  }, 300);
});
/* لون الزرار في سياسة الاستبدال والإسترجاع */
const style = document.createElement('style');
style.textContent = `
  .s-button-primary {
    background-color: #5494d4 !important;
    color: black !important;
  }
`;
document.head.appendChild(style);

/* أبعاد صفحة المنتجات على الموبايل */
(function () {
  const style = document.createElement('style');
  style.innerHTML = `
    @media screen and (max-width: 768px) {
      .s-products-list-vertical-cards {
        display: inline-grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-width: 86% !important;
        margin: auto !important;
        position: relative !important;
        left: -20px !important;
      }

      button.undefined.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center:hover {
        width: 146px !important;
      }
    }
  `;
  document.head.appendChild(style);
})();

/* لون الجزء اللي تحت في المنتجات (موبايل فقط) */
window.addEventListener('load', () => {
  const style = document.createElement('style');
  style.textContent = `
    @media screen and (max-width: 768px) {
      .s-product-card-content {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        background-color: transparent !important;
      }

      .s-product-card-entry,
      .s-product-card-entry *,
      .s-product-card-content,
      .s-product-card-content * {
        background-color: transparent !important;
        background: transparent !important;
      }
    }
  `;
  document.head.appendChild(style);
});
document.addEventListener("DOMContentLoaded", () => {
  // دالة لإضافة النجوم في أعلى كارت المنتج
  function addStarsToTop() {
    const cards = document.querySelectorAll(".s-product-card-content");

    cards.forEach(card => {
      // لو مفيش نجوم مضافة قبل كده
      if (!card.querySelector(".stars-custom")) {
        const stars = document.createElement("div");
        stars.className = "stars-custom";
        stars.textContent = "★★★★★";
        stars.style.display = "block";
        stars.style.color = "#facc15";
        stars.style.fontSize = "0.75rem";
        stars.style.marginBottom = "0.25rem";
        stars.style.letterSpacing = "1px";
        stars.style.textAlign = "center";

        // نضيف النجوم في أول الكارت
        card.insertBefore(stars, card.firstChild);
      }
    });
  }

  // شغل الدالة فورًا
  addStarsToTop();

  // راقب الصفحة لو في منتجات بتظهر بعدين
  const observer = new MutationObserver(() => {
    addStarsToTop();
  });

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


document.addEventListener("DOMContentLoaded", () => {
  const whatsappNumber = "+966535323224";

  // إنشاء العنصر العائم
  const whatsappFloat = document.createElement("div");
  whatsappFloat.className = "whatsapp-float";

  // أيقونة الواتساب
  const whatsappIcon = document.createElement("img");
  whatsappIcon.src = "https://i.ibb.co/wZrVWv1J/image.gif";
  whatsappIcon.alt = "WhatsApp";
  whatsappIcon.className = "whatsapp-icon";
  whatsappIcon.setAttribute("loading", "lazy");

  // النافذة المنبثقة
  const whatsappPopup = document.createElement("div");
  whatsappPopup.className = "whatsapp-popup";
  whatsappPopup.style.display = "none";
  whatsappPopup.innerHTML = `
    <div class="popup-header">
      <div class="avatar-container">
        <img src="https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/RyPDw/2d2C13A75aFtbxD5AtCPbJAATe92tfbkHdwI8K1o.png" alt="Avatar" class="avatar-img" loading="lazy">
        <span class="support-text">الدعم الفني</span>
      </div>
      <button class="close-popup">×</button>
    </div>
    <div class="chat-body" id="chat-body"></div>
    <div class="chat-footer">
      <input type="text" id="whatsapp-message" placeholder="اكتب رسالتك هنا" class="chat-input">
      <button id="send-whatsapp" class="whatsapp-button">
        <svg xmlns="http://www.w3.org/2000/svg" fill="white" width="24px" height="24px" viewBox="0 0 24 24">
          <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
        </svg>
      </button>
    </div>
  `;

  // تجميع العناصر
  whatsappFloat.appendChild(whatsappPopup);
  whatsappFloat.appendChild(whatsappIcon);
  document.body.appendChild(whatsappFloat);

  // ستايلات الواتساب
  const whatsappStyle = document.createElement("style");
  whatsappStyle.textContent = `
    .whatsapp-float { position: fixed; bottom: 20px; left: 20px; z-index: 10000; }
    .whatsapp-icon { width: 80px; height: 80px; cursor: pointer; transition: transform 0.3s; }
    .whatsapp-icon:hover { transform: scale(1.1); }
    .whatsapp-popup { position: fixed; bottom: 100px; left: 20px; width: 300px; background: #5494d4; border-radius: 8px; box-shadow: 0 4px 12px black; z-index: 10001; overflow: hidden; }
    .popup-header { display: flex; justify-content: space-between; align-items: center; background-color: black; color: white; padding: 10px; }
    .avatar-container { display: flex; align-items: center; }
    .avatar-img { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; }
    .support-text { font-size: 16px; font-weight: bold; }
    .close-popup { background: none; border: none; font-size: 20px; color: white; cursor: pointer; }
    .chat-body { max-height: 300px; overflow-y: auto; padding: 10px; background-color: #e5ddd5; }
    .chat-message { margin-bottom: 10px; }
    .chat-message.sent { text-align: right; }
    .chat-message p { display: inline-block; background: #dcf8c6; padding: 10px; border-radius: 10px; max-width: 80%; }
    .chat-footer { display: flex; align-items: center; padding: 10px; background: white; border-top: 1px solid #ccc; }
    .chat-input { flex: 1; padding: 10px; border-radius: 20px; border: 1px solid #ccc; }
    .whatsapp-button { background: black; color: white; border: none; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; margin-left: 10px; cursor: pointer; }
  `;
  document.head.appendChild(whatsappStyle);

  // فتح / إغلاق المحادثة
  whatsappIcon.addEventListener("click", () => {
    whatsappPopup.style.display = whatsappPopup.style.display === "none" ? "block" : "none";
    if (whatsappPopup.style.display === "block") {
      const chatBody = document.getElementById("chat-body");
      chatBody.innerHTML = `
        <div class="chat-message"><p>أهلاً بك! نحن هنا لمساعدتك<br>لو تحتاج ترشيح منتج أرسل رقم "1"</p></div>
      `;
    }
  });

  document.querySelector(".close-popup").addEventListener("click", () => {
    whatsappPopup.style.display = "none";
  });

  // الردود الآلية
  function getReply(message) {
    const m = message.toLowerCase().trim();
    if (m === "1") return "form"; // افتح النموذج
    if (m.includes("السلام")) return "وعليكم السلام! كيف يمكنني مساعدتك؟";
    if (m.includes("مرحبا")) return "مرحبًا! كيف أقدر أساعدك؟";
    return "شكراً لتواصلك! سيتم توجيهك للدعم الفني.";
  }

  // إرسال رسالة
  function sendMessage() {
    const input = document.getElementById("whatsapp-message");
    const msg = input.value.trim();
    if (!msg) return;

    const chatBody = document.getElementById("chat-body");
    chatBody.innerHTML += `<div class="chat-message sent"><p>${msg}</p></div>`;
    input.value = "";

    setTimeout(() => {
      const reply = getReply(msg);
      if (reply === "form") {
        showProductForm();
      } else {
        chatBody.innerHTML += `<div class="chat-message"><p>${reply}</p></div>`;
        setTimeout(() => {
          window.location.href = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(msg)}`;
        }, 2000);
      }
    }, 1000);
  }

  document.getElementById("send-whatsapp").addEventListener("click", sendMessage);
  document.getElementById("whatsapp-message").addEventListener("keypress", e => {
    if (e.key === "Enter") sendMessage();
  });

  // نموذج ترشيح منتج
  function showProductForm() {
    const formDiv = document.createElement("div");
    formDiv.id = "product-details";
    formDiv.innerHTML = `
      <h3>أرغب بترشيح منتج</h3>
      <input type="text" id="productName" placeholder="اسم المنتج">
      <input type="text" id="customerName" placeholder="اسمك">
      <input type="text" id="productLink" placeholder="رابط المنتج (اختياري)">
      <div class="button-container">
        <button id="submitProductDetails">إرسال</button>
        <button id="cancelProductDetails">إلغاء</button>
      </div>
    `;
    formDiv.style.cssText = `
      position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
      background:#5494d4;  padding: 20px; border-radius: 15px; z-index: 10002;
      box-shadow: 0 0 10px black; width: 320px;
    `;
    document.body.appendChild(formDiv);

    document.getElementById("cancelProductDetails").addEventListener("click", () => {
      formDiv.remove();
    });

    document.getElementById("submitProductDetails").addEventListener("click", () => {
      const name = document.getElementById("customerName").value.trim();
      const prod = document.getElementById("productName").value.trim();
      const link = document.getElementById("productLink").value.trim();

      if (name && prod) {
        const message = `السلام عليكم، أود ترشيح منتج:\nالاسم: ${name}\nالمنتج: ${prod}\nالرابط: ${link || "غير متوفر"}`;
        window.location.href = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(message)}`;
        formDiv.remove();
      } else {
        alert("يرجى ملء الحقول المطلوبة.");
      }
    });
  }
});



document.addEventListener("DOMContentLoaded", function () {
  // 1️⃣ إنشاء زر الأيقونة
  const infoBtn = document.createElement("div");
  infoBtn.innerHTML = `<div style="
      position: fixed;
      bottom: 100px;
      left: 20px;
      text-align: center;
      cursor: pointer;
      z-index: 9999;
    ">
      <div style="font-size:14px; color:black; font-weight:bold;"> ما يميزنا</div>
      <div style="
        width: 55px; height: 55px;
        background:#5494d4;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 8px black;
        color: black; font-size: 24px;
      ">🤩</div>
    </div>`;
  document.body.appendChild(infoBtn);

  // 2️⃣ إنشاء البوكس
  const faqBox = document.createElement("div");
  faqBox.style.cssText = `
    position: fixed;
    bottom: 170px;
    left: 20px;
    width: 300px;
    background: #5494d4;
    border-radius: 16px;
    box-shadow: 0 6px 16px black;
    padding: 15px;
    font-family: sans-serif;
    direction: rtl;
    display: none;
    z-index: 9999;
    max-height: 400px;
    overflow-y: auto;
  `;

  // 3️⃣ محتوى الأسئلة
  const faqs = [
    { q: "🚚 الشحن والتوصيل", a: "مدة التوصيل من 7-14 يوم عمل حسب موقعك." },
    { q: "💳 الدفع ", a: "نوفر طرق دفع امنة ومتنوعة ." },
    { q: "🎁 المنتجات والإرجاع", a: "كل منتجاتنا أصلية ونوفر سياسة إرجاع سهلة." },
  ];

  faqs.forEach(item => {
    const qDiv = document.createElement("div");
    qDiv.style.cssText = `
      padding: 10px;
      border-bottom: 1px solid #eee;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      color: black;
    `;
    qDiv.innerHTML = `<span>${item.q}</span> <span style="transition: transform 0.3s;">⯈</span>`;

    const aDiv = document.createElement("div");
    aDiv.textContent = item.a;
    aDiv.style.cssText = `
      display: none;
      padding: 8px;
      font-size: 14px;
      color: black;
      background: #5494d4;
      border-radius: 8px;
      margin-top: 5px;
    `;

    qDiv.addEventListener("click", () => {
      const arrow = qDiv.querySelector("span:last-child");
      if (aDiv.style.display === "none") {
        aDiv.style.display = "block";
        arrow.style.transform = "rotate(90deg)";
      } else {
        aDiv.style.display = "none";
        arrow.style.transform = "rotate(0deg)";
      }
    });

    faqBox.appendChild(qDiv);
    faqBox.appendChild(aDiv);
  });

  document.body.appendChild(faqBox);

  // 4️⃣ إظهار/إخفاء البوكس عند الضغط على الأيقونة
  infoBtn.addEventListener("click", () => {
    faqBox.style.display = faqBox.style.display === "none" ? "block" : "none";
  });
});



document.addEventListener("DOMContentLoaded", function () {
  // نجيب كل عناصر الصور الخاصة بالكارد
  const productImages = document.querySelectorAll(".s-product-card-image");

  productImages.forEach(imgWrapper => {
    imgWrapper.style.background = "transparent"; // الخلفية تبقى شفافة
  });
});