document.addEventListener("DOMContentLoaded", function () {
  const slider = document.querySelector("div.flex.whitespace-nowrap.gap-4.items-center.product-price.product-price-top.my-1");

  if (!slider) return;

  const giftBanner = document.createElement("div");
  giftBanner.className = "gift-banner";
  giftBanner.innerText = "🎁 طرحة + نقاب مجاناً";

  slider.appendChild(giftBanner); // ✅ يضيفه داخل السلايدر وتحت الصور مباشرة
});



document.addEventListener('DOMContentLoaded', function () {
    const target = document.querySelector("#single-product-details > div > div.tabs-wrapper");

    if (target) {
        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>
        `;

        target.insertAdjacentHTML('afterend', html);

        const moveSallaPayments = setInterval(() => {
            const paymentSection = document.querySelector("div.main-content.mob\\:container.w-full.md\\:w-1\\/2.md\\:pb-16 > form > section.s-block.s-block--payment.container.details.\\!py-4");
            const paymentContentContainer = document.querySelector('#payment-content');

            if (paymentSection && paymentContentContainer) {
                paymentContentContainer.appendChild(paymentSection);
                paymentSection.classList.remove('hidden');
                paymentSection.style.display = 'block';
                clearInterval(moveSallaPayments);
            }
        }, 300);
    }
});
// فقط واحد يفتح وقت الضغط
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');
            }
        });
    }
});



/* عرض السلة
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(); // أول تحميل
}); */