/* Add custom JS code below */ 
salla.product.fetch({
    source: 'categories',
    source_value: [CATEGORY_ID]
})<div id="itqan-course-tabs">
    <button class="course-tab course-1">دورة المحادثة</button>
    <button class="course-tab course-2">دورة القواعد</button>
    <button class="course-tab course-3">دورة الكتابة</button>
    <button class="course-tab course-4">دورة القراءة</button>
    <button class="course-tab course-5">دورة الاستماع</button>
    <button class="course-tab course-6">دورة STEP</button>
</div>

<script>
(function () {
  // كل كلاس مربوط بعنوان القسم المطلوب التمرير إليه في الصفحة
  var courseMap = {
    'course-1': 'دورة المحادثة',
    'course-2': 'دورة القواعد',
    'course-3': 'دورة الكتابة',
    'course-4': 'دورة القراءة',
    'course-5': 'دورة الاستماع',
    'course-6': 'دورة STEP'
  };

  function initTabs() {
    var wrap = document.getElementById('itqan-course-tabs');
    if (!wrap) return;

    var tabs = wrap.querySelectorAll('.course-tab');

    tabs.forEach(function (tab) {
      tab.addEventListener('click', function () {
        // تفعيل التبويب المضغوط فقط
        tabs.forEach(function (t) { t.classList.remove('active'); });
        tab.classList.add('active');

        // تحديد اسم الدورة بناءً على الكلاس (course-1 ... course-6)
        var key = Array.from(tab.classList).find(function (c) {
          return courseMap.hasOwnProperty(c);
        });
        var text = courseMap[key];
        if (!text) return;

        // البحث عن قسم بنفس العنوان في الصفحة
        var candidates = document.querySelectorAll(
          'h1, h2, h3, h4, .s-block-title, .product-slider-title, .section-title, .title'
        );
        var target = null;
        candidates.forEach(function (el) {
          if (!target && el.textContent && el.textContent.trim() === text) {
            target = el;
          }
        });

        if (target) {
          var section = target.closest('section') || target.closest('[class*="s-block"]') || target;
          section.scrollIntoView({ behavior: 'smooth', block: 'start' });
        } else {
          if (window.salla && salla.notify) {
            salla.notify.info('هذه الدورة قريباً بإذن الله 🌟');
          } else {
            alert('هذه الدورة قريباً بإذن الله 🌟');
          }
        }
      });
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initTabs);
  } else {
    initTabs();
  }
})();
</script>