document.addEventListener('DOMContentLoaded', function() {
  // استهداف الـ slider باستخدام الـ ID الجديد
  const sliderWrapper = document.getElementById('best-offers-2-slider');
  console.log("sliderWrapper: ", sliderWrapper); // تحقق من وجود الـ slider

  if (sliderWrapper) {
    // جعل الـ slider مخفي عند تحميل الصفحة
    sliderWrapper.style.opacity = '0';
    sliderWrapper.style.transform = 'translateX(100%)'; // أو يمكنك استخدام translateX(-100%) حسب الاتجاه

    // دالة للتحقق إذا كان الـ slider في الـ viewport
    function checkSliderInView() {
      const sliderPosition = sliderWrapper.getBoundingClientRect();
      console.log("sliderPosition: ", sliderPosition); // تحقق من موقع الـ slider

      // إذا كان الـ slider داخل الـ viewport، نقوم بجعل الـ slider يظهر تدريجيًا
      if (sliderPosition.top < window.innerHeight && sliderPosition.bottom > 0) {
        sliderWrapper.style.transition = 'transform 1s ease-in-out, opacity 1s ease-in-out';
        sliderWrapper.style.transform = 'translateX(0)';
        sliderWrapper.style.opacity = '1'; // جعل الـ slider مرئي
      }
    }

    // إضافة حدث التمرير للصفحة
    window.addEventListener('scroll', checkSliderInView);

    // التحقق عند تحميل الصفحة
    checkSliderInView();
  } else {
    console.log("الـ slider غير موجود.");
  }
});

const footer = document.querySelector('.store-footer');
const button = document.createElement('button');
button.textContent = 'وسائل التواصل'; 
button.classList.add('more-button');
document.body.appendChild(button);

button.addEventListener('click', function () {
  footer.classList.toggle('visible');
  
  if (footer.classList.contains('visible')) {
    button.textContent = 'اغلاق';
  } else {
    button.textContent = 'عرض المزيد';
  }
});


window.addEventListener('load', function () {
  const navbar = document.querySelector('#mainnav');
  const footer = document.querySelector('.store-footer');

  if (navbar && footer) {
    footer.addEventListener('click', function () {
      navbar.style.opacity = '0';
      navbar.style.visibility = 'hidden';
      navbar.style.transition = 'opacity 0.3s ease, visibility 0.3s ease';
    });
  } else {
    console.error('العناصر #mainnav أو .store-footer غير موجودة في الصفحة!');
  }
});

// ==================== 💬 WHATSAPP CHAT WIDGET ====================
var whatsappFloat = document.createElement('div');
whatsappFloat.className = 'whatsapp-float';

// Create the WhatsApp link container
var whatsappFloat = document.createElement('div');
whatsappFloat.className = 'whatsapp-float';

// Create the WhatsApp link container
var whatsappPopup = document.createElement('div');
whatsappPopup.className = 'whatsapp-popup';
whatsappPopup.style.display = 'none'; // Initially hidden

// Create the popup content with avatar, text, and list of options
var popupContent = `
<div class="popup-header">
  <div class="avatar-container">
    <img src="https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg">
    <span class="support-text">الدعم الفني</span>
  </div>
  <button class="close-popup">×</button>
</div>
<div class="logo-container">
    <a >
      <img src="">
    </a>
  </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://wa.me/+966558717030" target="_blank" class="whatsapp-button">تواصل معنا</a>
  <div class="adfaz-container">
    <a href="https://adfaz.sa/" target="_blank" class="adfaz-link">
      <img src="https://i.ibb.co/P4YVDmW/Black-Gold-White-Luxury-Royal-Crown-Logo.png" alt="Adfaz" class="adfaz-img">
      <span class="adfaz-text">برمجة وتطوير أدفاز</span>
    </a>
  </div>
</div>
`;

whatsappPopup.innerHTML = popupContent;

// Append the popup to the container
whatsappFloat.appendChild(whatsappPopup);

// Create the WhatsApp icon
var whatsappIcon = document.createElement('img');
whatsappIcon.src = 'https://i.postimg.cc/fRRH60Wc/whatsapp-loop.gif';
whatsappIcon.alt = 'WhatsApp';
whatsappIcon.className = 'whatsapp-icon';

// Append the icon to the container
whatsappFloat.appendChild(whatsappIcon);

// Append the WhatsApp button to the body
document.body.appendChild(whatsappFloat);

// Add CSS styles dynamically
var style = document.createElement('style');
style.innerHTML = `
.whatsapp-float {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 100;
}
.logo-container{
  height: 50px;
  margin: auto;
}
.whatsapp-icon {
width: 60px;
height: 60px;
border-radius: 50%;

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(var(--second-color), var(--main-color));
  width: 300px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 15px;
  color: white;
  z-index: 101;
  border-radius: 10px;
}

.popup-header {
  display: flex
;
  justify-content: space-between;
  align-items: center;
}
.adfaz-container {
  display: flex
;
  padding-top: 6px;
  align-items: flex-end;
  justify-content: space-evenly;
}
.avatar-img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}

.support-text {
font-size: 16px;
font-weight: bold;
}

.close-popup {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
}

.popup-body {
}

.options-list {
list-style-type: none;
padding: 0;
margin: 10px 0;
}

.options-list li {
margin-bottom: 5px;
}

.whatsapp-button {
display: block;
width: 100%;
text-align: center;
background-color: #25d366;
color: white;
padding: 10px 15px;
border-radius: 5px;
text-decoration: none;
margin-top: 15px;
}

.whatsapp-button:hover {
background-color: #1ebe55;
}

.adfaz-container {
display: flex;
align-items: center;
}

.adfaz-link {
display: flex;
text-decoration: none;
color: black;
}

.adfaz-img {
  width: 30px;
  height: 30px;
  margin-left: 3px;
}

.adfaz-text {
font-size: 12px;
    color: white;
}
.support-text {
font-size: 16px;
font-weight: bold;
}

`;
document.head.appendChild(style);

// Toggle the popup when the icon is clicked
whatsappIcon.addEventListener('click', function () {
  whatsappPopup.style.display = (whatsappPopup.style.display === 'none') ? 'block' : 'none';
});

// Close the popup when the close button is clicked
document.querySelector('.close-popup').addEventListener('click', function () {
  whatsappPopup.style.display = 'none';
});

// Close the popup when the close button is clicked
document.querySelector('.close-popup').addEventListener('click', function () {
  whatsappPopup.style.display = 'none';
});