// =================== 7. بانر الطرحة والنقاب ===================
  const metaElements = document.querySelectorAll('meta[property="product:category"]');
  const targetCategories = ["جميع العبايات"];
  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-details");

  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>جميع مدن المملكة: 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 () {
  // توليد رقم عشوائي بين 94 و 174
  var min = 194, max = 274;
  var randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;

  // الحصول على اسم المنتج من العنوان (h1)
  var productNameElement = document.querySelector('h1.da-tm');
  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", () => {
  if (!location.pathname.includes("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-amount="400" data-label="5%"></div>
        <div class="step" data-amount="600" data-label="10%"></div>
        <div class="step" data-amount="1000" data-label="15%"></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 getCartTotal() {
    const subTotalEl = document.querySelector("#sub-total");
    if (!subTotalEl) return 0;
    const text = subTotalEl.textContent.replace(/[^\d.]/g, "");
    return parseFloat(text) || 0;
  }

  function updateSteps() {
    const totalAmount = getCartTotal();

    let progress = 0;
    steps.forEach((step, index) => {
      const required = parseInt(step.dataset.amount);
      if (totalAmount >= 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 (totalAmount < 400) {
      msg = `أضيفي منتجات بقيمة <span class="highlight">${400 - totalAmount}</span> ريال لتحصلي على خصم 5٪ 🎁`;
    } else if (totalAmount < 600) {
      msg = `خصمك الآن 5٪ — أضيفي <span class="highlight">${600 - totalAmount}</span> ريال لتحصلي على خصم 10٪ 🔥`;
    } else if (totalAmount < 1000) {
      msg = `خصمك الآن 10٪ — أضيفي <span class="highlight">${1000 - totalAmount}</span> ريال لتحصلي على خصم 15٪ ✨`;
    } else {
      msg = `🎉 خصمك الآن 15٪ — استمتعي بالتوفير الإضافي!`;
    }

    if (msg !== lastMessage) {
      messageBox.innerHTML = msg; // ✅ لعرض الوسوم
      lastMessage = msg;
    }
  }

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

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