/* Add custom JS code below */

// 1. إضافة زر الفوتر السفلي
(function() {
    var devContainer = document.createElement('div');
    devContainer.className = 'custom-footer-dev';
    devContainer.style.backgroundColor = '#fff';
    devContainer.style.textAlign = 'center';
    devContainer.style.padding = '15px 0';
    devContainer.style.width = '100%';
    devContainer.style.clear = 'both';

    var devLink = document.createElement('a');
    devLink.href = 'https://linktr.ee/AL_Zaiem';
    devLink.target = '_blank';
    devLink.rel = 'noopener noreferrer';
    devLink.innerText = 'برمجة وتطوير ALzaiem';
    
    devLink.style.color = '#ffffff';
    devLink.style.backgroundColor = '#d7ae5d';
    devLink.style.textDecoration = 'none';
    devLink.style.fontSize = '14px';
    devLink.style.fontWeight = 'bold';
    devLink.style.padding = '8px 20px';
    devLink.style.borderRadius = '5px';
    devLink.style.display = 'inline-block';
    devLink.style.transition = 'all 0.3s ease';

    devLink.onmouseover = function() {
        this.style.backgroundColor = '#ffffff';
        this.style.color = '#034192';
    };
    devLink.onmouseout = function() {
        this.style.backgroundColor = '#034192';
        this.style.color = '#ffffff';
    }; 

    devContainer.appendChild(devLink);
    document.body.appendChild(devContainer);
})();

// 2. نافذة الواتساب العائمة
document.addEventListener("DOMContentLoaded", function() {
    const whatsappFloat = document.createElement('div');
    whatsappFloat.className = 'whatsapp-float';
    whatsappFloat.innerHTML = `
    <div class="whatsapp-popup" style="display: none;">
      <div class="popup-header">
        <div class="avatar-container">
          <img src="https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg" alt="Avatar" class="avatar-img">
          <span class="support-text">الدعم الفني</span>
        </div>
        <button class="close-popup">×</button>
      </div>
      <div class="popup-body">
        <p>مرحباً بك، نحن متواجدون لخدمتك</p>
        <p>برجاء ارسال رقم:</p>
        <ul class="options-list">
          <li>1- لتتبع الطلب</li>
          <li>2- مشكلة</li>
          <li>3- استفسار</li>
        </ul>
        <a href="https://api.whatsapp.com/send?phone=966555007499" target="_blank" rel="noopener noreferrer" class="whatsapp-button">تواصل معنا</a>
        <div class="ALZaiem-container">
            <span class="ALZaiem-text">برمجة وتطوير ALZaiem</span>
        </div>
      </div>
    </div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp" class="whatsapp-icon">`;

    document.body.appendChild(whatsappFloat);

    const whatsappStyle = document.createElement('style');
    whatsappStyle.textContent = `
    .whatsapp-float {
      position: fixed;
      bottom: 20px;
      left: 20px;
      z-index: 999999 !important;
      direction: rtl;
    }
    .whatsapp-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      transition: transform 0.3s ease-in-out;
    }
    .whatsapp-icon:hover {
      transform: scale(1.1);
    }
    .whatsapp-popup {
      position: fixed;
      bottom: 90px;
      left: 20px;
      background: linear-gradient(135deg, #075e54, #128c7e);
      width: 280px;
      padding: 15px;
      color: white;
      z-index: 999999 !important;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
      font-family: sans-serif;
    }
    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(255,255,255,0.2);
      padding-bottom: 8px;
      margin-bottom: 10px;
    }
    .avatar-container {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .avatar-img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      object-fit: cover;
    }
    .support-text {
      font-weight: bold;
      font-size: 14px;
    }
    .close-popup {
      background: none;
      border: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
      line-height: 1;
    }
    .popup-body p {
      margin: 5px 0;
      font-size: 13px;
    }
    .options-list {
      list-style: none;
      padding: 0;
      margin: 10px 0;
      font-size: 13px;
    }
    .options-list li {
      margin-bottom: 5px;
    }
    .whatsapp-button {
      display: block;
      background-color: #25d366;
      color: white;
      text-align: center;
      padding: 8px;
      border-radius: 5px;
      text-decoration: none;
      font-weight: bold;
      margin-top: 10px;
      transition: background 0.2s;
    }
    .whatsapp-button:hover {
      background-color: #20ba5a;
    }
    `;
    document.head.appendChild(whatsappStyle);

    const icon = whatsappFloat.querySelector('.whatsapp-icon');
    const popup = whatsappFloat.querySelector('.whatsapp-popup');
    const closeBtn = whatsappFloat.querySelector('.close-popup');

    icon.addEventListener('click', function(e) {
      e.stopPropagation();
      popup.style.display = (popup.style.display === 'none' || popup.style.display === '') ? 'block' : 'none';
    });

    closeBtn.addEventListener('click', function(e) {
      e.stopPropagation();
      popup.style.display = 'none';
    });
    
    document.addEventListener('click', function() {
        popup.style.display = 'none';
    });
    popup.addEventListener('click', function(e) {
        e.stopPropagation();
    });
});

// 3. التمرير التلقائي للبانرات (تم تصحيح الأقواس والمجال)
document.addEventListener("DOMContentLoaded", function () {
    const scrollContainer = document.querySelector('div.grid.md\\:grid-cols-3.two-row-grid, div.grid.md\\:grid-cols-3.grid-flow-row.gap-3');
    
    if (scrollContainer) {
        let scrollSpeed = 2000;
        
        setInterval(() => {
            const firstItem = scrollContainer.querySelector('.banner-entry');
            if (!firstItem) return;
            
            const itemWidth = firstItem.offsetWidth + 10;
            const currentScrollAbs = Math.abs(scrollContainer.scrollLeft);
            const maxScrollLeftAbs = scrollContainer.scrollWidth - scrollContainer.clientWidth;
            
            if (currentScrollAbs >= maxScrollLeftAbs - (itemWidth / 2)) {
                scrollContainer.scrollTo({
                    left: 0,
                    behavior: 'smooth'
                });
            } else {
                scrollContainer.scrollBy({
                    left: -itemWidth,
                    behavior: 'smooth'
                });
            }
        }, scrollSpeed);
    }
});




//+++++

  // 5. شريط كود الخصم الثابت فوق أول سلايدر منتجات (مع أنيميشن الحركة)
(function initCouponBanner() {
  // منع التكرار
  if (document.querySelector('.coupon-promo-banner')) return;

  const couponBanner = document.createElement('div');
  couponBanner.className = 'coupon-promo-banner';
  
  // النص المراد تحريكه (مكرر مرتين لضمان استمرار الحركة)
  const bannerText = `<span>🎁 استخدم كود الخصم: <strong class="code-highlight">ref</strong> للحصول على خصم إضافي!</span>`;

  couponBanner.innerHTML = `
    <div class="moving-coupon-track">
      <div class="moving-coupon-content">${bannerText} ${bannerText}</div>
      <div class="moving-coupon-content">${bannerText} ${bannerText}</div>
    </div>
  `;

  const style = document.createElement('style');
  style.textContent = `
    .coupon-promo-banner {
      width: 100%;
      overflow: hidden;
      background: linear-gradient(135deg, var(--main-color, #111), #333);
      color: #fff;
      padding: 10px 0;
      margin:  0;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      direction: ltr !important; /* لضمان اتجاه حركة الأنيميشن */
      display: flex;
      position: relative;
    }
    .moving-coupon-track {
      display: flex;
      width: max-content;
      animation: couponMarquee 15s linear infinite;
    }
    .moving-coupon-content {
      display: flex;
      justify-content: space-around;
      white-space: nowrap;
      min-width: 100%;
    }
    .coupon-promo-banner span {
      display: inline-flex;
      align-items: center;
      font-size: 14px;
      font-weight: bold;
      padding: 0 30px;
      direction: rtl;
      font-family: inherit;
    }
    .coupon-promo-banner .code-highlight {
      background: #fff;
      color: var(--main-color, #000);
      padding: 2px 8px;
      border-radius: 5px;
      letter-spacing: 1px;
      margin: 0 6px;
      display: inline-block;
      border: 1px dashed var(--main-color, #000);
    }
    @keyframes couponMarquee {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-50%); }
    }
    .coupon-promo-banner:hover .moving-coupon-track {
      animation-play-state: paused;
    }
  `;
  document.head.appendChild(style);

  function fixBannerPosition() {
    // جلب كافة عناصر السلايدر المتواجدة
    const sliders = Array.from(document.querySelectorAll('.s-products-slider-slider'));
    if (sliders.length === 0) return false;

    // فرز العناصر حسب موقعها الرأسي الحقيقي في الشاشة من الأعلى إلى الأسفل
    sliders.sort((a, b) => {
      return a.getBoundingClientRect().top - b.getBoundingClientRect().top;
    });

    const topSlider = sliders[0];

    // إذا كان الشريط موجوداً في مكان خاطئ، قم بنقله للأعلى
    if (topSlider) {
      if (couponBanner.nextElementSibling !== topSlider) {
        topSlider.parentNode.insertBefore(couponBanner, topSlider);
      }
      return true;
    }
    return false;
  }

  // 1. محاولة الإدراج فوراً
  fixBannerPosition();

  // 2. إعادة الفحص والتعادل بعد اكتمال تحميل عناصر الصفحة بالكامل
  window.addEventListener('load', () => {
    setTimeout(fixBannerPosition, 500);
    setTimeout(fixBannerPosition, 1500);
  });

  // 3. مراقبة التغيرات في الـ DOM لضمان بقائه في الأعلى دائماً
  const observer = new MutationObserver(() => {
    fixBannerPosition();
  });

  observer.observe(document.body, { childList: true, subtree: true });
})();