document.addEventListener('DOMContentLoaded', function () {
  const elementToMove = 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");
  const referenceElement = 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.sticky.top-20.w-full.lg\\:w-96.lg\\:ms-8 > div.shadow-default.bg-white.da-bgg.p-3.xs\\:p-7.rounded-md.mb-5.relative.transition-height.duration-1000");
  
  if (elementToMove && referenceElement && referenceElement.parentNode) {
    referenceElement.parentNode.insertBefore(elementToMove, referenceElement.nextSibling);
    console.log("✅ تم نقل العنصر أسفل البوكس المحدد بنجاح");
  } else {
    console.warn("⚠️ لم يتم العثور على أحد العناصر المطلوبة");
  }
});


// =================== 7. بانر الطرحة والنقاب ===================
  const metaElements = document.querySelectorAll('meta[property="product:category"]');
const targetCategories = [
  "اختيارات الشتاء",
  "إيليت كوليكشن",
  "عبايات بـ95 ريال"
];

  const foundCategory = Array.from(metaElements).some(meta =>
    targetCategories.some(cat => meta.content.includes(cat))
  );
  if (foundCategory) {
    const offerTarget = document.querySelector(
      "div.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 target = document.querySelector("#product-tabs-options");

  if (target) {
    const html = `
      <div class="accordion-wrapper">
        <div class="accordion-group">
        <div class="accordion-title icon-gold-warranty"> الضمان الذهبي</div>
        <div class="accordion-content">
<p><strong> لأننا واثقون من جودة كل غرزة في عباياتنا… وفرنا لك الضمان الذهبي ✨</strong></p>
<p>✔️ يغطي أي خلل في القماش أو الخياطة.</p>
<p>🔄 في حال وجود مشكلة، نتكفّل كاملًا بالاستبدال على حسابنا.</p>
<p><strong> راحتك مضمونة مع كل طلب</strong</p>
        </div>
      </div>
        <div class="accordion-group">
          <div class="accordion-title icon-size"> جدول المقاسات</div>
          <div class="accordion-content">
            <div style="overflow-x:auto">
              <table>
                <thead>
                  <tr>
                    <th>المقاس</th>
                    <th>طول العباية (إنش)</th>
                    <th>العرض (إنش)</th>
                    <th>الكم (إنش)</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>
        </div>

        <div class="accordion-group">
          <div class="accordion-title icon-shipping"> الشحن والتوصيل</div>
          <div class="accordion-content">
            <p>الرياض، أبها، خميس مشيط: 1 - 2 أيام عمل</p>
            <p>باقي مدن المملكة: 2-4 أيام عمل</p>
            <p>قد تتأثر المدة في الظروف الاستثنائية.</p>
          </div>
        </div>

      </div>
    `;

    target.insertAdjacentHTML('beforeend', html);

    document.querySelectorAll('.accordion-title').forEach(title => {
      title.addEventListener('click', () => {
        const parent = title.closest('.accordion-group');
        const isOpen = parent.classList.contains('open');

        document.querySelectorAll('.accordion-group').forEach(g => g.classList.remove('open'));
        if (!isOpen) parent.classList.add('open');
      });
    });
  }
});



// عداد التايمر في صفحة السلة

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

const submitArea = document.querySelector(".cart-submit-wrap");

if (!submitArea) return;


// إنشاء عنصر المؤقت

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

timerDiv.id = "countdown-timer";

timerDiv.innerHTML = '⌛ السعر محفوظ لك لمدة <span id="countdown">09:45</span> دقيقة <br> أكمِل الطلب قبل انتهاء الوقت!';


// إدراج المؤقت أعلى زر الإتمام

submitArea.parentElement.insertBefore(timerDiv, submitArea);


// بدء العد التنازلي

let timeLeft = 585;

const interval = setInterval(() => {

const display = document.getElementById("countdown");

if (!display) {

clearInterval(interval);

console.warn("❌ عنصر العد التنازلي غير موجود");

return;

}


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);

});








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

const detailsTab = document.querySelector("#product-tabs-options");


if (detailsTab) {

const img = document.createElement("img");

img.src = "https://i.postimg.cc/BQHjcLDV/a.jpg"

img.alt = "تغليف صبايا";

img.classList.add("sabaya-packaging-image");


detailsTab.appendChild(img); // أضف الصورة أسفل تبويب التفاصيل

}
});






// يقوم بالشراء الان
document.addEventListener('DOMContentLoaded', function () {
  // توليد رقم عشوائي بين 94 و 174
  var min = 194, max = 274;
  var randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;

  // الحصول على اسم المنتج من العنوان (h1)
  var productNameElement = document.querySelector('h1');
  var productName = productNameElement ? productNameElement.textContent.trim() : "هذه العباية";

  // استهداف العنصر أسفل المؤقت
  var target = document.querySelector('#product-tabs-options');

  if (target) {
    var wrapper = document.createElement('div');
    wrapper.className = 'product-views';
    wrapper.innerHTML = `
      <span class="pulse-dot"></span>
      <span><span class="view-count">${randomNumber}</span> عميلة امتلكت ${productName} اليوم</span>    `;
    target.insertAdjacentElement('afterend', wrapper);
  }
});
//صورة المناديل
document.addEventListener("DOMContentLoaded", function () {
  const imgURL = "https://i.postimg.cc/BQHjcLDV/a.jpg";

  function addImage() {
    const container = document.querySelector('.s-product-options-option-container[data-option-id="852752303"]');
    if (container && !container.querySelector(".custom-img-added")) {
      const img = document.createElement("img");
      img.src = imgURL;
      img.alt = "مناديل تنظيف العباية";
      img.className = "custom-img-added";
      img.style.display = "block";
      img.style.borderRadius = "8px";
      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", () => {
  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="5" data-label="20%"></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 < 5) {
      msg = ` وصلك خصم 10٪ وتستاهلين خصم أكبر، أضيفي ${5 - totalQty} منتج ووفّري أكثر 🔥`;
    } else {
      msg = `🔥 خصمك الآن 20٪ — لا تفوتي الفرصة، ووفري أكثر!`;
    }

    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(); // أول تحميل
});