window.addEventListener("load", () => {
  const observer = new MutationObserver(() => {
    const submitWrap = document.querySelector(".cart-submit-wrap");
    if (!submitWrap) return;

    // منع التكرار
    if (document.querySelector("#agree-terms-checkbox")) return;

    const submitButton = submitWrap.querySelector("button.s-button-element");
    if (!submitButton) return;

    // إنشاء التشيك بوكس جنب كلمة "أوافق"
    const agreeContainer = document.createElement("div");
    agreeContainer.className = "agree-terms mt-4 text-sm da-tm";
    agreeContainer.innerHTML = `
      <label style="display:flex;align-items:center;gap:0.4rem;cursor:pointer;flex-wrap:wrap;line-height:1.6;">
        <input type="checkbox" id="agree-terms-checkbox" />
        <span>
          أوافق على 
          <a href="https://sul4hub.com/p/nypEN" target="_blank" rel="noopener" style="font-weight:bold;text-decoration:underline;color:#0066cc;">
            شروط وأحكام الشحن والتوصيل
          </a>
          و 
          <a href="https://sul4hub.com/p/gblZg" target="_blank" rel="noopener" style="font-weight:bold;text-decoration:underline;color:#0066cc;">
            الاستبدال والاسترجاع
          </a>
        </span>
      </label>
      <div id="agree-terms-error" style="color:#d23;display:none;margin-top:0.4rem;font-size:0.92rem;">
        يجب الموافقة على الشروط والسياسات للاستمرار.
      </div>
    `;

    // أضف التشيك بوكس قبل زر الإتمام
    submitWrap.parentNode.insertBefore(agreeContainer, submitWrap);

    const checkbox = document.getElementById("agree-terms-checkbox");
    const errorEl = document.getElementById("agree-terms-error");

    // عطّل الزر في البداية
    submitButton.disabled = true;

    // حدث عند تغيير التشيك بوكس
    checkbox.addEventListener("change", () => {
      if (checkbox.checked) {
        submitButton.disabled = false;
        errorEl.style.display = "none";
      } else {
        submitButton.disabled = true;
      }
    });

    // تحقق إضافي عند الضغط
    submitButton.addEventListener("click", (ev) => {
      if (!checkbox.checked) {
        ev.preventDefault();
        errorEl.style.display = "block";
        checkbox.focus();
      }
    });
  });

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






document.addEventListener("DOMContentLoaded", function () {
  // استنى لما يتبني التشيك بوكس
  const observer = new MutationObserver(() => {
    const agreeBox = document.querySelector(".agree-terms"); // الحاوية اللي فيها التشيك بوكس

    if (agreeBox && !document.querySelector(".outside-ksa-note")) {
      const note = document.createElement("div");
      note.className = "outside-ksa-note mt-2 text-sm da-tm";
      note.style.cssText = "color:#b11;font-size:14px;margin-top:8px;margin-bottom:10px";
      note.textContent =
        "إذا كنت من الامارات أو اوربا إستخدم باى بال";

      // نضيف الرسالة بعد التشيك بوكس
      agreeBox.insertAdjacentElement("afterend", note);

      console.log("✅ تمت إضافة الرسالة بعد التشيك بوكس");
    }
  });

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



window.addEventListener("load", () => {
  setTimeout(() => {
    let lists = document.querySelectorAll(".s-block.s-block--banners");
    let newElement = document.createElement("div");

    // Hide items 2–5 at start
    lists[2].style.display = "none";
    lists[3].style.display = "none";
    lists[4].style.display = "none";
    lists[5].style.display = "none";

    // Buttons HTML
    newElement.innerHTML = `
      <div id="btn-container" class='btns-container'>
        <button data-index="1" class="tag-btn">اجهزة ريد ماجيك</button>
        <button data-index="3" class="tag-btn">قطع وصلات</button>
        <button data-index="2" class="tag-btn">سكوربين و لي يونق</button>
        <button data-index="4" class="tag-btn">قريباُ</button>
        <button data-index="5" class="tag-btn">الصوت و نقل الشاشة</button>
      </div>`;
    // Insert after first block
    lists[0].parentNode.insertBefore(newElement, lists[0].nextSibling);

    const btnContainer = document.getElementById("btn-container");
    const buttons = btnContainer.querySelectorAll("button");

    // Show function
    window.showOnly = (index) => {
      lists[0].style.display = "block"; // always show index 0

      [...lists].forEach((el, i) => {
        if (i === 0) return; // skip index 0
        el.style.display = i === index ? "block" : "none";
      });

      buttons.forEach((btn) => {
        if (parseInt(btn.dataset.index, 10) === index) {
          btn.style.backgroundColor = "#4492b6";
          btn.style.color = "#fff";
        } else {
          btn.style.backgroundColor = "transparent";
          btn.style.color = "#4492b6";
        }
      });
    };

    // Init
    window.showOnly(1);

    // Click handlers
    buttons.forEach((btn) => {
      btn.addEventListener("click", () => {
        const idx = parseInt(btn.dataset.index, 10);
        window.showOnly(idx);
      });
    });
  }, 2000); // 2 sec delay
});


// ✅ إضافة الرسالة تحت العنوان لما يظهر
document.addEventListener("DOMContentLoaded", function () {
  const observer = new MutationObserver(() => {
    const addressTitle = document.querySelector(".title-address-step");

    if (addressTitle && !document.querySelector(".outside-ksa-note")) {
      const note = document.createElement("div");
      note.className = "outside-ksa-note mt-2 text-sm da-tm";
      note.style.cssText = "color:#b11;font-size:14px;margin-top:10px;";
      note.textContent =
        "‘إذا كنت من الإمارات إستخدم باى بال";
      addressTitle.insertAdjacentElement("afterend", note);
    }
  });

  // راقب الـ body كله
  observer.observe(document.body, { childList: true, subtree: true });
});








(function(){
  // ✨ لينك الصورة اللي انت عايزها
  const storeLogo = "https://cdn.salla.sa/form-builder/r5PU20xLUwLcBMbZLsFKvjZfOAVqQzX8auzbET7m.png";

  function replaceAvatar(img){
    if (img.src.includes("avatar_male.png") || img.src.includes("avatar_female.png")) {
      img.src = storeLogo;
      if (img.dataset) img.dataset.src = storeLogo;
      img.alt = "لوجو المتجر";
      img.style.objectFit = "cover";      // يخليها تاخد مساحة الأفاتار مظبوط
      img.style.borderRadius = "50%";     // دايرة
      img.style.backgroundColor = "#fff"; // خلفية ورا اللوجو
    }
  }

  // استبدال كل الموجود
  document.querySelectorAll('.testimonial__avatar img').forEach(replaceAvatar);

  // متابعة أي صور جديدة تنضاف (ديناميك)
  const observer = new MutationObserver(mutations => {
    mutations.forEach(m => {
      m.addedNodes.forEach(node => {
        if (node.nodeType === 1) {
          if (node.matches && node.matches('.testimonial__avatar img')) {
            replaceAvatar(node);
          } else if (node.querySelectorAll) {
            node.querySelectorAll('.testimonial__avatar img').forEach(replaceAvatar);
          }
        }
      });
    });
  });
  observer.observe(document.body, { childList: true, subtree: true });
})();


document.addEventListener("DOMContentLoaded", function() {
  function handleDiscountBox() {
    const discountBox = document.querySelector(".angel-discountcoupon.details, .angel-discountcoupon");
    if (!discountBox) return;

    let matchFound = false;

    // نحاول نجيب التصنيف من breadcrumb أو meta
    const breadcrumb = document.querySelector(".breadcrumb, .product-breadcrumb, nav.breadcrumb, .product-meta, .product-categories");
    if (breadcrumb) {
      const links = breadcrumb.querySelectorAll("a, span, h5");
      links.forEach(link => {
        const text = link.textContent.trim();
        const href = link.getAttribute("href") || "";
        if (text.includes("جوال") || text.includes("تابلت") || href.includes("جوال") || href.includes("تابلت")) {
          matchFound = true;
        }
      });
    }

    // لو لسه مش لاقي تصنيف، نجرب اسم المنتج نفسه
    if (!matchFound) {
      const productTitle = document.querySelector("h1, .product-title, #page-main-title");
      const productName = productTitle ? productTitle.textContent.trim() : "";
      if (productName.includes("جوال") || productName.includes("تابلت")) {
        matchFound = true;
      }
    }

    // عرض أو إخفاء بناء على النتيجة
    if (document.body.classList.contains("product-single") && matchFound) {
      discountBox.style.display = "block";
    } else {
      discountBox.style.display = "none";
    }

    // تعبئة الكوبون
    const couponInput = document.getElementById("coupon-value");
    if (couponInput) couponInput.value = "SUL25";
  }

  // تشغيل بعد تحميل الصفحة
  setTimeout(handleDiscountBox, 800);

  // ملاحظة أي تغييرات ديناميكية
  const observer = new MutationObserver(() => handleDiscountBox());
  observer.observe(document.body, { childList: true, subtree: true });
});