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

  if (priceDiv && target) {
    target.appendChild(priceDiv);
  }
});



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

  if (target) {
    const html = `
      <div id="custom-product-details" class="space-y-4 mt-6">
        <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>

        <details class="accordion-group">
          <summary class="accordion-title">💳 خيارات الدفع</summary>
          <div class="accordion-content" id="payment-content"></div>
        </details>
      </div>
    `;

    target.insertAdjacentHTML('afterend', html);

    // نقل قسم الدفع salla-payments بعد توفره
    const movePayments = setInterval(() => {
      const sallaPayments = document.querySelector("salla-payments");
      const paymentContent = document.querySelector("#payment-content");

      if (sallaPayments && paymentContent) {
        paymentContent.appendChild(sallaPayments);
        sallaPayments.classList.remove("hidden");
        sallaPayments.style.display = "block";
        clearInterval(movePayments);
      }
    }, 300);
  }

  // تفعيل ميزة فتح قسم واحد فقط بالـ accordion
  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', function () {
  // نحاول نلقط السعر من أكثر من عنصر محتمل
  const priceContainer =
    document.querySelector('.product-price') ||
    document.querySelector('div.price.my-1');

  if (!priceContainer) return;

  const badge = document.createElement('div');
  badge.className = 'simple-purchase-info';
  badge.innerHTML = `<span class="blinking-text">🎁 نقاب + طرحة هدية</span>`;

  priceContainer.insertAdjacentElement('afterend', badge);
});





document.addEventListener("DOMContentLoaded", function () {
  const visitorBox = document.createElement("div");
  visitorBox.className = "custom-live-counter";

  const count = Math.floor(Math.random() * (124 - 54 + 1)) + 54;

  visitorBox.innerHTML = `
    <div class="circle"></div>
    <p>يشاهد الصفحة الآن <strong>${count}</strong> شخص</p>
  `;

  document.body.appendChild(visitorBox);

  // أظهر العنصر بعد تحميل الصفحة
  setTimeout(() => {
    visitorBox.classList.add("show");
  }, 500); // يظهر بعد نصف ثانية

  // أخفِ العنصر بعد 3 ثوانٍ
  setTimeout(() => {
    visitorBox.classList.remove("show");
  }, 4500);
});