document.addEventListener("DOMContentLoaded", function () {
  // =================== 1. جدول المقاسات والتوصيل ===================
  const tabsTarget = document.querySelector("#product-tabs-details > div");
  if (tabsTarget) {
    const html = `
      <details class="accordion-group">
        <summary class="accordion-title">📏 جدول المقاسات</summary>
        <div class="accordion-content">
          <div style="overflow-x:auto">
            <table style="width:100%; border-collapse: collapse; text-align: center; font-size: 14px;">
              <thead>
                <tr style="background-color: #000; color: #fff;">
                  <th style="padding: 10px;">المقاس</th>
                  <th style="padding: 10px;">طول العباية (إنش)</th>
                  <th style="padding: 10px;">العرض (إنش)</th>
                  <th style="padding: 10px;">الكم (إنش)</th>
                </tr>
              </thead>
              <tbody>
                <tr><td>50</td><td>50</td><td>21</td><td>25</td></tr>
                <tr><td>52</td><td>52</td><td>22</td><td>26</td></tr>
                <tr><td>54</td><td>54</td><td>23</td><td>27</td></tr>
                <tr><td>56</td><td>56</td><td>24</td><td>28</td></tr>
                <tr><td>58</td><td>58</td><td>25</td><td>29</td></tr>
                <tr><td>60</td><td>60</td><td>26</td><td>30</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </details>

      <details class="accordion-group">
        <summary class="accordion-title">🚚 التوصيل والإرجاع</summary>
        <div class="accordion-content">
          <p>أبها، خميس مشيط: 1 - 2 أيام عمل</p>
          <p>باقي مدن المملكة: 2-4 أيام عمل</p>
          <p>الرجاء ملاحظة أنه في ظل ظروف استثنائية، قد يتأثر وقت التوصيل. سيخبركم فريق خدمة العملاء لدينا بأي تأخير قد يحدث.</p>
        </div>
      </details>
    `;
    tabsTarget.insertAdjacentHTML("afterend", html);
  }

  // =================== 2. فتح تفصيلة واحدة ===================
  document.addEventListener("click", function (e) {
    if (e.target.tagName === "SUMMARY" && e.target.closest(".accordion-group")) {
      const current = e.target.closest(".accordion-group");
      document.querySelectorAll(".accordion-group").forEach((item) => {
        if (item !== current && item.hasAttribute("open")) {
          item.removeAttribute("open");
        }
      });
    }
  });


  // =================== 4. عداد صفحة السلة ===================
  const cartTimerTarget = document.querySelector(".cart-submit-wrap");
  if (cartTimerTarget) {
    const timerDiv = document.createElement("div");
    timerDiv.id = "countdown-timer";
    timerDiv.innerHTML = '⌛ السعر محفوظ لك لمدة <span id="countdown">09:52</span> دقيقة <br> أكمِل الطلب قبل انتهاء الوقت!';
    cartTimerTarget.parentElement.insertBefore(timerDiv, cartTimerTarget);

    let timeLeft = 592;
    const interval = setInterval(() => {
      const display = document.getElementById("countdown");
      if (!display) return clearInterval(interval);
      const minutes = Math.floor(timeLeft / 60);
      const seconds = timeLeft % 60;
      display.textContent = `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
      if (timeLeft <= 0) {
        clearInterval(interval);
        timerDiv.innerHTML = "⏳ انتهت المهلة! أعد تحديث الصفحة لإكمال الطلب.";
      }
      timeLeft--;
    }, 1000);
  }
  // =================== 6. يشتري المنتج الآن ===================
  const productOptionsTarget = document.querySelector("#product-tabs-options");
  if (productOptionsTarget) {
    const faLink = document.createElement("link");
    faLink.rel = "stylesheet";
    faLink.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
    document.head.appendChild(faLink);

    const min = 49, max = 94;
    const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
    const wrapper = document.createElement("div");
    wrapper.className = "product-view-wrapper";
    const box = document.createElement("div");
    box.className = "product-view-box";
    box.innerHTML = `<i class="fa fa-eye"></i>يشتري هذا المنتج الآن <span class="view-count">${randomNumber}</span> شخص`;
    wrapper.appendChild(box);
    productOptionsTarget.insertAdjacentElement("afterend", wrapper);
  }

  // =================== 7. بانر الطرحة والنقاب ===================
  const metaElements = document.querySelectorAll('meta[property="product:category"]');
  const targetCategories = ["ديڤا كولكشن", "عبايات بـ 94 ريال"];
  const foundCategory = Array.from(metaElements).some(meta =>
    targetCategories.some(cat => meta.content.includes(cat))
  );
  if (foundCategory) {
    const offerTarget = document.querySelector(
      ".price.my-1"
    );
    if (offerTarget) {
      const banner = document.createElement("div");
      banner.className = "custom-offer-banner";
      banner.innerHTML = "🎁 طرحة + نقاب هدية مع كل عباية!";
      offerTarget.parentNode.insertBefore(banner, offerTarget.nextSibling);
    }
}
});




document.addEventListener("DOMContentLoaded", function () {
  const imgURL = "https://a.top4top.io/p_3531xbbfm1.jpg";

  function addImage() {
    const container = document.querySelector('.s-product-options-option-container[data-option-id="477996444"]');
    if (container && !container.querySelector(".custom-img-added")) {
      const img = document.createElement("img");
      img.src = imgURL;
      img.alt = "مناديل تنظيف العباية";
      img.className = "custom-img-added";
      img.style.maxWidth = "150px";
      img.style.display = "block";
      img.style.margin = "0 auto 10px"; // توسيط الصورة وإضافة مسافة تحتها

      // إدخال الصورة قبل الليبل
      container.prepend(img);
      console.log("✅ تمت إضافة الصورة فوق النص بشكل صحيح");
    }
  }

  // نستخدم MutationObserver لأن العناصر تنرسم متأخر
  const observer = new MutationObserver(() => {
    addImage();
  });
  observer.observe(document.body, { childList: true, subtree: true });
});



document.addEventListener("DOMContentLoaded", function () {
  // نجيب العنصر اللي نبيه ننقله
  var target = document.querySelector(
    "#app > div.app-inner.flex.flex-col.min-h-full > div.container.mt-5 > div.flex.flex-col.items-start.lg\\:flex-row > div.main-content.flex-1.w-full > div"
  );

  // نجيب المكان الجديد (الـ container.mt-5)
  var destination = document.querySelector(
    "#app > div.app-inner.flex.flex-col.min-h-full > div.container.mt-5"
  );

  if (target && destination) {
    destination.appendChild(target); // ينقله لآخر الـ container
  }
});






// إنشاء عنصر الرسالة التوضيحية
document.addEventListener("DOMContentLoaded", () => {
  if (location.pathname !== "/cart") return;

  const container = document.createElement("div");
  container.id = "my-conditional-offer";
  container.innerHTML = `
    <h3>زيدي مشترياتك، ووفّري أكثر 💡</h3>
    <div class="progress-line-wrapper">
      <div class="progress-line-bg"></div>
      <div class="progress-line-fill" id="myOfferFill"></div>
      <div class="steps">
  <div class="step" data-qty="2" data-label="5%"></div>
  <div class="step" data-qty="3" data-label="10%"></div>
  <div class="step" data-qty="6" data-label="25%"></div>
</div>

    </div>
    <div class="discount-message" style="margin-top:10px; font-weight:500;"></div>
    <div class="note">* يُطبق الخصم تلقائيًا</div>
  `;

  const after = document.querySelector("salla-conditional-offer");
  if (after?.parentNode) after.parentNode.insertBefore(container, after.nextSibling);

  const steps = container.querySelectorAll('.step');
  const fill = container.querySelector('#myOfferFill');
  const messageBox = container.querySelector('.discount-message');

  let lastMessage = "";

  function updateSteps() {
    let totalQty = 0;
    const inputs = [...document.querySelectorAll('input[name="quantity"], input.s-quantity-input-input')]
      .filter(input => input.offsetParent !== null); // ✅ تجاهل الحقول المخفية

    inputs.forEach(input => {
      const val = parseInt(input.value);
      if (!isNaN(val)) totalQty += val;
    });

    // تحديث الخط والنقاط
    let progress = 0;
    steps.forEach((step, index) => {
      const required = parseInt(step.dataset.qty);
      if (totalQty >= required) {
        step.classList.add("active");
        progress = ((index + 1) / steps.length) * 100;
      } else {
        step.classList.remove("active");
      }
    });

    if (fill) fill.style.width = `${progress}%`;

    // الرسالة بناءً على الكمية
    let msg = '';
    if (totalQty < 2) {
      msg = `اختاري منتج إضافي واستفيدي من خصم 5٪  وشحن مجاني `;
    } else if (totalQty < 3) {
      msg = ` خصمك الآن 5٪ — باقي لك ${3 - totalQty} منتج للحصول على 10٪!`;          } else if (totalQty < 6) {
      msg = ` وصلك خصم 10٪ وتستاهلين خصم أكبر، أضيفي ${6 - totalQty} منتج ووفّري أكثر 🔥`;
    } else {
      msg = `🔥 خصمك الآن 25٪ — لا تفوتي الفرصة وخذي كل الي بخاطرك!`;
    }

    if (msg !== lastMessage) {
      messageBox.textContent = msg;
      lastMessage = msg;
    }
  }

  // عند الضغط على زر + أو -
  document.body.addEventListener("click", (e) => {
    if (
      e.target.closest('[data-action="increase"]') ||
      e.target.closest('[data-action="decrease"]')
    ) {
      setTimeout(updateSteps, 150);
    }
  });

  // عند التعديل اليدوي
  document.body.addEventListener("input", (e) => {
    if (
      e.target.classList.contains('s-quantity-input-input') ||
      e.target.name === "quantity"
    ) {
      updateSteps();
    }
  });

  // مراقبة DOM
  const cartRoot = document.querySelector(".cart-content") || document;
  if (cartRoot) {
    const observer = new MutationObserver(() => updateSteps());
    observer.observe(cartRoot, { childList: true, subtree: true });
  }

  updateSteps(); // أول تحميل
});