/* Add custom JS code below */ 
<!--
  ════════════════════════════════════════════════════════
  مجمع دنت الطبي — شريط الشراء الثابت (Sticky Bar)
  يُضاف في: لوحة التحكم ← المظهر ← HTML مخصص ← قبل </body>
  ════════════════════════════════════════════════════════
  عدّلي:
    WHATSAPP_NUMBER  ← رقم الواتساب
    SCROLL_OFFSET    ← كم بيكسل نتمرير قبل ما يظهر
  ════════════════════════════════════════════════════════
-->
<div class="dent-sticky" id="dentStickyBar">

  <!-- اسم المنتج — بيتجلب تلقائياً من الصفحة -->
  <span class="dent-sticky__name" id="dentStickyName">جاري التحميل...</span>

  <!-- السعر — بيتجلب تلقائياً -->
  <span class="dent-sticky__price" id="dentStickyPrice"></span>

  <!-- زر أضف للسلة -->
  <button class="dent-sticky__btn-cart" id="dentStickyCart" onclick="dentAddToCart()">
    <span class="dent-sticky__icon">🛒</span>
    أضف للسلة
  </button>

  <!-- زر واتساب -->
  <a class="dent-sticky__btn-wa"
     id="dentStickyWA"
     href="https://wa.me/966509919924?text=أريد الاستفسار عن هذا المنتج"
     target="_blank"
     rel="noopener">
    <span class="dent-sticky__icon">💬</span>
    واتساب
  </a>

</div>

<script>
(function () {
  /* ── إعدادات ── */
  var WHATSAPP_NUMBER = '966509919924';
  var SCROLL_OFFSET   = 300; /* px — متى يظهر الشريط */

  var bar     = document.getElementById('dentStickyBar');
  var nameEl  = document.getElementById('dentStickyName');
  var priceEl = document.getElementById('dentStickyPrice');
  var waBtn   = document.getElementById('dentStickyWA');

  /* ── جلب اسم المنتج من الصفحة ── */
  function getProductName() {
    var selectors = ['h1', '.product__title', '.product-name',
                     '[class*="product_title"]', '[class*="product-name"]'];
    for (var i = 0; i < selectors.length; i++) {
      var el = document.querySelector(selectors[i]);
      if (el && el.textContent.trim()) {
        return el.textContent.trim().substring(0, 60);
      }
    }
    return '';
  }

  /* ── جلب السعر من الصفحة ── */
  function getProductPrice() {
    var selectors = ['.product__price', '.product-price', '[class*="price__current"]',
                     '[class*="product_price"]', '.price--sale .price-item--sale',
                     '[class*="price"]:not([class*="old"]):not([class*="compare"])'];
    for (var i = 0; i < selectors.length; i++) {
      var el = document.querySelector(selectors[i]);
      if (el && el.textContent.trim()) {
        return el.textContent.trim().replace(/\s+/g,' ');
      }
    }
    return '';
  }

  /* ── جلب رابط الصفحة للواتساب ── */
  function updateWALink(name) {
    var msg = 'أريد الاستفسار عن: ' + name + ' — ' + window.location.href;
    waBtn.href = 'https://wa.me/' + WHATSAPP_NUMBER + '?text=' + encodeURIComponent(msg);
  }

  /* ── تعبئة البيانات ── */
  function populate() {
    var name  = getProductName();
    var price = getProductPrice();
    if (name)  { nameEl.textContent  = name; updateWALink(name); }
    if (price) { priceEl.textContent = price; }
  }

  /* ── إضافة للسلة من زر الشريط ── */
  window.dentAddToCart = function () {
    /* يحاول يضغط زر السلة الأصلي في الصفحة */
    var selectors = [
      'form[action*="cart"] button[type="submit"]',
      'button[name="add"]',
      '[class*="add-to-cart"]',
      '[class*="addToCart"]',
      'form .btn-add-to-cart',
      '.s-add-to-cart-btn'
    ];
    for (var i = 0; i < selectors.length; i++) {
      var btn = document.querySelector(selectors[i]);
      if (btn) { btn.click(); return; }
    }
    /* fallback — يروح لأعلى الصفحة */
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  /* ── إظهار / إخفاء عند التمرير ── */
  var visible = false;
  function onScroll() {
    var scrolled = window.pageYOffset || document.documentElement.scrollTop;
    if (scrolled > SCROLL_OFFSET && !visible) {
      bar.classList.add('dent-sticky--visible');
      visible = true;
    } else if (scrolled <= SCROLL_OFFSET && visible) {
      bar.classList.remove('dent-sticky--visible');
      visible = false;
    }
  }

  /* ── تشغيل ── */
  populate();
  window.addEventListener('scroll', onScroll, { passive: true });

  /* إعادة تعبئة البيانات بعد ثانيتين (في حالة الصفحة بتتحمل ببطء) */
  setTimeout(populate, 2000);

})();
</script>