document.addEventListener("DOMContentLoaded", function () {

  // كود TikTok Pixel كامل داخل متغير
  const pixelCode = `
    <!-- TikTok Pixel Code Start -->
    <script>
    !function (w, d, t) {
      w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie","holdConsent","revokeConsent","grantConsent"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(
      var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var r="https://analytics.tiktok.com/i18n/pixel/events.js",o=n&&n.partner;ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=r,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};n=document.createElement("script")
      ;n.type="text/javascript",n.async=!0,n.src=r+"?sdkid="+e+"&lib="+t;e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(n,e)};
    
      ttq.load('D4EOGDRC77U2TCIL619G');
      ttq.page();
    }(window, document, 'ttq');
    </script>
    <!-- TikTok Pixel Code End -->
  `;

  // إنشاء div مؤقت يحتوي على الكود
  const container = document.createElement("div");
  container.innerHTML = pixelCode;

  // إضافة الكود لآخر الـ body
  document.body.appendChild(container);

});
const footer = document.querySelector('.store-footer');
const wavesContainer = document.createElement('div');
wavesContainer.innerHTML = `
  <div class="wave" id="wave1"></div>
  <div class="wave" id="wave2"></div>
  <div class="wave" id="wave3"></div>
  <div class="wave" id="wave4"></div>
`;
wavesContainer.classList.add('waves');
footer.insertBefore(wavesContainer, footer.firstChild);

function handleScroll() {
   const elements = document.querySelectorAll('.banner--fixed img');

   elements.forEach(element => {
      const rect = element.getBoundingClientRect();

      // إذا العنصر ظهر في نافذة المتصفح
      if (rect.top <= window.innerHeight && rect.bottom >= 0) {
         // هنضيف الكلاس visible لتشغيل تأثير الـ Bounce و Zoom
         if (!element.classList.contains('visible')) {
            element.classList.add('visible');
         }
      } else {
         // لو العنصر مش ظاهر، نشيل الكلاس visible علشان التأثير يتكرر لما يظهر تاني
         if (element.classList.contains('visible')) {
            element.classList.remove('visible');
         }
      }
   });
}

window.addEventListener('scroll', handleScroll);
handleScroll(); // لتنفيذ التأثير أول مرة عند تحميل الصفحة


function handleScroll2() {
   const elements = document.querySelectorAll('salla-slider.photos-slider');

   elements.forEach(element => {
      const rect = element.getBoundingClientRect();

      // إذا العنصر ظهر في نافذة المتصفح (مرة واحدة فقط)
      if (rect.top <= window.innerHeight && rect.bottom >= 0) {
         if (!element.classList.contains('visible')) {
            element.classList.add('visible'); // إضافة الكلاس ليحصل التأثير
         }
      }
   });
}

window.addEventListener('scroll', handleScroll2);
handleScroll2(); // لتنفيذ التأثير عند تحميل الصفحة


function handleScroll3() {
   const elements = document.querySelectorAll('.lazy__bg');

   elements.forEach(element => {
      const rect = element.getBoundingClientRect();

      // إذا العنصر ظهر في نافذة المتصفح
      if (rect.top <= window.innerHeight && rect.bottom >= 0) {
         // هنضيف الكلاس visible لتشغيل تأثير الـ Bounce و Zoom
         if (!element.classList.contains('visible')) {
            element.classList.add('visible');
         }
      } else {
         // لو العنصر مش ظاهر، نشيل الكلاس visible علشان التأثير يتكرر لما يظهر تاني
         if (element.classList.contains('visible')) {
            element.classList.remove('visible');
         }
      }
   });
}

window.addEventListener('scroll', handleScroll3);
handleScroll3(); // لتنفيذ التأثير أول مرة عند تحميل الصفحة

function handleScrollBlur() {
   const elements = document.querySelectorAll('.s-product-card-vertical');

   elements.forEach(element => {
      const rect = element.getBoundingClientRect();

      // التحقق إذا كان العنصر داخل نافذة العرض
      if (rect.top <= window.innerHeight && rect.bottom >= 0) {
         element.classList.add('visible'); // إضافة كلاس التفعيل
      } else {
         element.classList.remove('visible'); // إزالة كلاس التفعيل
      }
   });
}

// تنفيذ الكود عند التمرير
window.addEventListener('scroll', handleScrollBlur);
// استدعاء الوظيفة عند تحميل الصفحة
handleScrollBlur();


// Create scrolling text dynamically
const scrollingDiv = document.createElement('div');
scrollingDiv.className = 'scrolling-text';

const textContent = `
 <span>🔥 خصومات لن تجدها إلا هنا </span>
 <span>💥💵 أسعار تبدأ من المستحيل </span>
 <span>🔥 عروض حصرية تنتظرك الآن</span>
 <span>⏳💰 لا تفوت فرص التوفير اليوم </span>
 <span>🛒💥 عروض حصرية تنتظرك الآن</span>
 `;

scrollingDiv.innerHTML = `
 <div class="text-container">
   ${textContent.repeat(4)}
 </div>
 `;

const sallaSlider = document.querySelector('salla-slider');
if (sallaSlider) {
   sallaSlider.insertAdjacentElement('afterend', scrollingDiv);
}

document.addEventListener("DOMContentLoaded", () => {
   const bannerImages = document.querySelectorAll("salla-slider.photos-slider");
   const bannerObserver = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
         if (entry.isIntersecting) {
            entry.target.classList.add("visible");
            observer.unobserve(entry.target);
         }
      });
   }, {
      threshold: 0.1
   });

   bannerImages.forEach(image => bannerObserver.observe(image));

   const productCards = document.querySelectorAll(".s-product-card-entry");
   const productObserver = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
         if (entry.isIntersecting) {
            entry.target.classList.add("visible");
            observer.unobserve(entry.target);
         }
      });
   }, {
      threshold: 0.1
   });

   productCards.forEach(card => {
      productObserver.observe(card);
   });

   //زرار الطلوع لي فوق
   const backToTopButton = document.createElement("div");
   backToTopButton.id = "backToTop";
   backToTopButton.innerHTML = `
   <div class="icon">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
       <path d="M12 4l-8 8h6v8h4v-8h6z" />
     </svg>
   </div>
   <svg class="circular-chart" viewBox="0 0 36 36">
     <path class="circle-bg" d="M18 2.0845a15.9155 15.9155 0 1 1 0 31.831a15.9155 15.9155 0 1 1 0-31.831" />
     <path class="circle" d="M18 2.0845a15.9155 15.9155 0 1 1 0 31.831a15.9155 15.9155 0 1 1 0-31.831" />
   </svg>`;
   document.body.appendChild(backToTopButton);

   const style = `
   #backToTop {
     position: fixed;
     bottom: 20px;
     right: 20px;
     width: 60px;
     height: 60px;
     display: none;
     z-index: 1000;
   }
   #backToTop .icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 2;
     color: var(--main-color);
   }
   .circular-chart {
     width: 100%;
     height: 100%;
     transform: rotate(-90deg);
   }
   .circle-bg {
     fill: none;
     stroke: transparent;
     stroke-width: 3.8;
   }
   .circle {
     fill: none;
     stroke: var(--main-color);
     stroke-width: 3.8;
     stroke-dasharray: 100, 100;
     stroke-linecap: round;
     transition: stroke-dasharray 0.1s linear;
   }
   #backToTop:hover .icon {
     color: var(--second-color);
   }
 `;

   const styleSheet = document.createElement("style");
   styleSheet.type = "text/css";
   styleSheet.textContent = style;
   document.head.appendChild(styleSheet);

   window.addEventListener("scroll", () => {
      const scrollTop = window.scrollY;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      const scrollPercent = (scrollTop / docHeight) * 100;

      if (scrollPercent > 1) {
         backToTopButton.style.display = "block";
      } else {
         backToTopButton.style.display = "none";
      }

      const circle = document.querySelector(".circle");
      const offset = 100 - scrollPercent;
      circle.style.strokeDasharray = `${scrollPercent}, 100`;
   });

   backToTopButton.addEventListener("click", () => {
      window.scrollTo({
         top: 0,
         behavior: "smooth",
      });
   });
});

// Additional code block
document.querySelectorAll('a[href=""], a[href="#"]').forEach(link => {
   link.addEventListener('click', event => {
      event.preventDefault();
   });
});
// Select the salla-product-options element
const sallaProductOptions = document.querySelector('salla-product-options');

// Ensure the element exists before proceeding
if (sallaProductOptions) {
   // Create the alert message
   const alertMessage = document.createElement('p');
   alertMessage.textContent = "الرجاء اختيار أحد هذا الاختيارات للتمكن من اتمام الشراء";

   // Apply styles directly to the element
   alertMessage.style.backgroundColor = '#ffdddd';
   alertMessage.style.color = '#a94442';
   alertMessage.style.padding = '15px';
   alertMessage.style.border = '1px solid #a94442';
   alertMessage.style.borderRadius = '5px';
   alertMessage.style.marginBottom = '10px';
   alertMessage.style.fontWeight = 'bold';
   alertMessage.style.textAlign = 'center';

   // Insert the alert message at the beginning of the salla-product-options element
   sallaProductOptions.insertBefore(alertMessage, sallaProductOptions.firstChild);
} else {
   console.error("The 'salla-product-options' element was not found on the page.");
}
// Apply styles directly to the element
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" alt="Avatar" class="avatar-img">
      <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/+966553833105" 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://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg';
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%;
  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(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';
});
/* Add custom Js code below */
// Load FontAwesome for icons
var fontAwesomeLink = document.createElement("link");
fontAwesomeLink.rel = "stylesheet";
fontAwesomeLink.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css";
document.head.appendChild(fontAwesomeLink);

// Google Tag Manager (unchanged)
(function () {
   var script = document.createElement('script');
   script.innerHTML = "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-N36BWD87');";
   document.head.appendChild(script);
})();

// Google Tag Manager NoScript fallback (unchanged)
(function () {
   var noscriptTag = document.createElement('noscript');
   var iframeTag = document.createElement('iframe');
   iframeTag.src = "https://www.googletagmanager.com/ns.html?id=GTM-N36BWD87";
   iframeTag.height = "0";
   iframeTag.width = "0";
   iframeTag.style.display = "none";
   iframeTag.style.visibility = "hidden";
   noscriptTag.appendChild(iframeTag);
   document.body.appendChild(noscriptTag);
})();

// Insert the banner swap (now called banSwiper)
const banSwiperHTML = `
 <div class="banner-swap">
     <div class="bannt">
         <div class="banrerr" dir="rtl">خدمة عملاء ممتازة <i class="fa-solid fa-headset"></i></div>
         <div class="banrerr" dir="rtl">توصيل سريع <i class="fa-solid fa-truck-fast"></i></div>
         <div class="banrerr" dir="rtl">منتجات عالية الجودة <i class="fa-solid fa-box-open"></i></div>
         <div class="banrerr" dir="rtl">دفع آمن <i class="fa-solid fa-lock"></i></div>
         <div class="banrerr" dir="rtl">دعم 24/7 <i class="fa-solid fa-phone-volume"></i></div>
         <div class="banrerr" dir="rtl">أسعار تنافسية <i class="fa-solid fa-tag"></i></div>
 
         <!-- Repeat the same items for continuous scroll -->
         <div class="banrerr" dir="rtl">خدمة عملاء ممتازة <i class="fa-solid fa-headset"></i></div>
         <div class="banrerr" dir="rtl">توصيل سريع <i class="fa-solid fa-truck-fast"></i></div>
         <div class="banrerr" dir="rtl">منتجات عالية الجودة <i class="fa-solid fa-box-open"></i></div>
         <div class="banrerr" dir="rtl">دفع آمن <i class="fa-solid fa-lock"></i></div>
         <div class="banrerr" dir="rtl">دعم 24/7 <i class="fa-solid fa-phone-volume"></i></div>
         <div class="banrerr" dir="rtl">أسعار تنافسية <i class="fa-solid fa-tag"></i></div>
     </div>
 </div>
 `;

// Insert the banSwiper as the first element in the body
document.body.insertAdjacentHTML('afterbegin', banSwiperHTML);
// Create the loader div element
const loaderDiv = document.createElement('div');
loaderDiv.id = 'loaderr';
loaderDiv.style.zIndex = '999';

// Create the 'everything' div
const everythingDiv = document.createElement('div');
everythingDiv.className = 'everything';

// Create the 'loading-container' div
const loadingContainerDiv = document.createElement('div');
loadingContainerDiv.className = 'loading-container';

// Create the SVG element for the cart icon
const svgElement = `
<svg viewBox="0 0 240 240" height="240" width="240" class="marwan">
	<circle stroke-linecap="round" stroke-dashoffset="-330" stroke-dasharray="0 660" stroke-width="20" stroke="#000" fill="none" r="105" cy="120" cx="120" class="loader-ring loader-ring-a"></circle>
	<circle stroke-linecap="round" stroke-dashoffset="-110" stroke-dasharray="0 220" stroke-width="20" stroke="#000" fill="none" r="35" cy="120" cx="120" class="loader-ring loader-ring-b"></circle>
	<circle stroke-linecap="round" stroke-dasharray="0 440" stroke-width="20" stroke="#000" fill="none" r="70" cy="120" cx="85" class="loader-ring loader-ring-c"></circle>
	<circle stroke-linecap="round" stroke-dasharray="0 440" stroke-width="20" stroke="#000" fill="none" r="70" cy="120" cx="155" class="loader-ring loader-ring-d"></circle>
</svg>
`;

// Create the loading text div
// Create the 'loading-text' div and set the text content
const loadingTextDiv = document.createElement('div');

// Append the SVG and loading text div to the loading container
loadingContainerDiv.innerHTML = svgElement;

// Append the loading container to the everything div
everythingDiv.appendChild(loadingContainerDiv);

// Append the everything div to the loader div
loaderDiv.appendChild(everythingDiv);

// Finally, append the loader div to the body
document.body.appendChild(loaderDiv);
y
// Finally, append the loader div to the body



document.addEventListener("DOMContentLoaded", function () {
    // 🔹 الوظيفة العامة لإضافة وإزالة الكلاس عند ظهور العنصر
    function handleVisibility(elements, className) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting && !entry.target.classList.contains(className)) {
                    entry.target.classList.add(className);
                } else if (!entry.isIntersecting) {
                    entry.target.classList.remove(className);
                    resetAnimation(entry.target);
                }
            });
        }, { threshold: 0.1 });

        elements.forEach((element) => observer.observe(element));
    }

    // 🔹 إعادة ضبط الأنيميشن
    function resetAnimation(element) {
        element.style.animation = "none";
        element.offsetHeight; // تحفيز إعادة التحميل (Reflow)
        element.style.animation = null;
    }

    // ✅ تشغيل التأثيرات على العناصر الموجودة عند تحميل الصفحة
    handleVisibility(document.querySelectorAll(".slide--cat-entry img, .s-block"), "appear");

handleVisibility(document.querySelectorAll("#mainnav li a, #mobile-menu a, .s-slider-block__title h2"), "typing-animation");
    handleVisibility(document.querySelectorAll(".s-products-slider-card"), "show");

    // ✅ مراقبة المتجر وإضافة التأثيرات لأي عناصر جديدة تُضاف لاحقًا
    const storeObserver = new MutationObserver(() => {
        console.log("📌 تم إضافة عناصر جديدة إلى المتجر...");
        handleVisibility(document.querySelectorAll(".s-products-slider-card"), "show");
    });

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