/* Add custom Js code below */ 
const whatsappNumber = "+966555586645";
const mainColor = "#6c3428";
/********************/


/**********************************************/

/********* المقارنة******/

(function () {
  const allProducts = [];
  const selectedProducts = { product1: null, product2: null };

  function scrapeProducts() {
    const productCards = document.querySelectorAll(".s-product-card-vertical");
    allProducts.length = 0;
    productCards.forEach((card) => {
      try {
        const id = card.id.replace("s-product-card-id-", "");
        const nameElement =
          card.querySelector(".s-product-card-content h3") ||
          card.querySelector(".s-product-name");
        const name = nameElement ? nameElement.innerText.trim() : "منتج";
        const imageUrl =
          card.querySelector(".s-product-card-image img")?.getAttribute("data-src") ||
          card.querySelector(".s-product-card-image img")?.src ||
          "";
            const priceElement =
          card.querySelector(".s-product-card-price") ||
          card.querySelector(".s-product-price-new")  ;
        let price = priceElement ? priceElement.innerText.trim() : "0 ريال";

        const productUrl = card.querySelector(".s-product-card-entry .s-product-card-image > a")?.href || "#";   
        


        let description = `<a href="${productUrl}" target="_blank">عرض كامل المنتج</a>`;
        description.className = "selected-product-description";

        if (id && name) {
          allProducts.push({ id, name, imageUrl, price, productUrl, description });
        }
      } catch (e) {
        console.error("خطأ في جمع بيانات المنتج:", e);
      }
    });
  }

  function fetchAndDisplayProductDetails(product, slot) {
    const displayContainer = document.querySelector(".compare-products-display");
    const displaySlot = document.createElement("div");
    displaySlot.className = "selected-product-card";
    displaySlot.innerHTML = `
      <img src="${product.imageUrl}" alt="${product.name}" />
      <h4>${product.name}</h4>
      <p class="product-price">${product.price} ريال</p>
      <p>${product.description}</p>
    `;
    displaySlot.setAttribute("data-slot", slot);

    const existingSlot = displayContainer.querySelector(
      `.selected-product-card[data-slot="${slot}"]`
    );
    if (existingSlot) {
      existingSlot.remove();
    }

    if (slot === "product1") {
      displayContainer.prepend(displaySlot);
    } else {
      displayContainer.appendChild(displaySlot);
    }
  }

  function searchProducts(event, resultsList) {
    const query = event.target.value;
    const slot = event.target.dataset.slot;
    resultsList.innerHTML = "";
    if (query.length < 2) return;

    const filteredProducts = allProducts.filter((product) =>
      product.name.toLowerCase().includes(query.toLowerCase())
    );

    if (filteredProducts.length === 0) {
      resultsList.innerHTML = '<li style="padding: 10px;">لا توجد منتجات مطابقة.</li>';
    } else {
      filteredProducts.forEach((product) => {
        const li = document.createElement("li");
        li.className = "compare-result-item";
        li.innerHTML = `
          <img src="${product.imageUrl}" alt="${product.name}" />
          <span>${product.name}</span>
        `;
        li.addEventListener("click", () => {
          selectedProducts[slot] = product;
          fetchAndDisplayProductDetails(product, slot);
          resultsList.innerHTML = "";
          event.target.value = product.name;
        });
        resultsList.appendChild(li);
      });
    }
  }

  function createCompareUI() {
    const floatButton = document.createElement("button");
    floatButton.id = "custom-compare-button";
    floatButton.innerHTML = "قارن ⚖️";
    document.body.appendChild(floatButton);

    const modalOverlay = document.createElement("div");
    modalOverlay.className = "compare-modal-overlay";

    const modalContent = document.createElement("div");
    modalContent.className = "compare-modal-content";
    modalContent.innerHTML = `
      <div class="compare-modal-header">
        <h2>مقارنة المنتجات</h2>
        <button class="compare-close-button">&times;</button>
      </div>
      <div class="compare-search-container">
        <div class="compare-search-box">
          <input type="text" class="compare-search-input" data-slot="product1" placeholder="ابحث عن المنتج الأول...">
          <ul class="compare-results-list"></ul>
        </div>
        <div class="compare-search-box">
          <input type="text" class="compare-search-input" data-slot="product2" placeholder="ابحث عن المنتج الثاني...">
          <ul class="compare-results-list"></ul>
        </div>
      </div>
      <div class="compare-products-display"></div>
    `;

    modalOverlay.appendChild(modalContent);
    document.body.appendChild(modalOverlay);

    floatButton.addEventListener("click", () => {
      modalOverlay.style.display = "flex";
      modalOverlay.classList.add("active");
      document.body.classList.add("no-scroll");
      scrapeProducts();
    });

    modalContent.querySelector(".compare-close-button").addEventListener("click", () => {
      modalOverlay.style.display = "none";
      modalOverlay.classList.remove("active");
      document.body.classList.remove("no-scroll");
    });

    const searchInputs = modalContent.querySelectorAll(".compare-search-input");
    const resultsLists = modalContent.querySelectorAll(".compare-results-list");

    searchInputs[0].addEventListener("input", (e) =>
      searchProducts(e, resultsLists[0])
    );
    searchInputs[1].addEventListener("input", (e) =>
      searchProducts(e, resultsLists[1])
    );
  }

  createCompareUI();
})();

/******************************************************************************/
// import fontawesome libirary for get 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);

// 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-box-open"></i></div>
   
   <div class="banrerr" dir="rtl">عروض مستمرة<i class="fa-solid fa-percent"></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-headset"></i></div>
       
        
       
       
    

       <!-- Repeat the same items for continuous scroll -->
       <div class="banrerr" dir="rtl">منتجات عالية الجودة <i class="fa-solid fa-box-open"></i></div>
       
       <div class="banrerr" dir="rtl">عروض مستمرة<i class="fa-solid fa-percent"></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-headset"></i></div>
       
       
       
       
    
   </div>
</div>
`;

// Insert the banSwiper as the first element in the body
document.body.insertAdjacentHTML('afterbegin', banSwiperHTML);
/*************************/
  // تغيير نصوص جهات الاتصال
  setTimeout(() => {
    const whats = document.querySelector('.s-contacts-list-vertical > div:nth-of-type(1) a > span:nth-of-type(2)');
    if (whats) whats.textContent = "جوال";
    
   /* const phonee = document.querySelector('.s-contacts-list-vertical > div:nth-of-type(2) a > span:nth-of-type(2)');
    console.log(phonee);
    if (phonee) phonee.textContent = "جوال";*/
    
    

    

   

    // تحسين أنماط جهات الاتصال
    const contactsList = document.querySelector('.s-contacts-list-vertical');
    if (contactsList) {
      contactsList.style.flexDirection = 'row';
      contactsList.style.justifyContent = 'center';
      contactsList.style.gap = '15px';
      contactsList.style.alignItems = 'center';
      contactsList.style.marginRight = "-16px";
    }

    const contactSlot = document.querySelector('#contact-slot');
    if (contactSlot) {
      contactSlot.style.backgroundColor = 'transparent';
      contactSlot.style.padding = '0 20px 0 0';
      contactSlot.style.borderRadius = '.375rem';
      contactSlot.style.display = 'flex';
      contactSlot.style.justifyContent = 'center';
      contactSlot.style.alignItems = 'center';
    }

    const contactItems = document.querySelectorAll('.s-contacts-item');
    contactItems.forEach(item => {
      item.style.display = 'flex';
      item.style.flexDirection = 'column';
      item.style.alignItems = 'center';
      item.style.gap = '10px';
    });

    const contactIcons = document.querySelectorAll('.s-contacts-icon');
    contactIcons.forEach(icon => {
      icon.style.marginRight = 'auto';
      icon.style.marginLeft = 'auto';
      icon.style.border = 'none';
      icon.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
      icon.style.transform = 'perspective(500px) rotateY(10deg)';
      icon.style.transition = 'transform 0.3s, box-shadow 0.3s';
      icon.style.width = '50px';
      icon.style.height = '50px';
      icon.style.borderRadius = '50%';
      icon.style.backgroundColor = '#EEEEEE';
    });

    contactIcons.forEach(icon => {
      icon.addEventListener('mouseover', () => {
        icon.style.transform = 'perspective(500px) rotateY(20deg)';
        icon.style.boxShadow = '0 8px 16px rgba(0, 0, 0, 0.3)';
      });

      icon.addEventListener('mouseout', () => {
        icon.style.transform = 'perspective(500px) rotateY(10deg)';
        icon.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
      });
    });
  }, 1100);
/*************************/
/*************************/
/*************************/

function waitForElement(selector, callback) {
  const interval = setInterval(() => {
    const el = document.querySelector(selector);
    if (el) {
      clearInterval(interval);
      callback(el);
    }
  }, 300);
}

waitForElement(".store-footer__inner .container > div:first-child", function (targetElement) {
  
  const wrapper = document.createElement("div");
  wrapper.style.margin = "10px auto";
  wrapper.style.textAlign = "center";

  const title = document.createElement("h3");
  title.textContent = "كن أول من يعرف!";
  title.style.color = mainColor;
  title.style.marginBottom = "10px";

  const desc = document.createElement("p");
  desc.textContent = "اشترك بنشرتنا البريدية ليصلك كل جديد.";
  desc.style.color = mainColor;
  desc.style.marginBottom = "15px";

  const formWrapper = document.createElement("div");
  formWrapper.style.display = "flex";
  formWrapper.style.justifyContent = "center";
  formWrapper.style.flexWrap = "nowrap";
  formWrapper.style.flexDirection = "row-reverse";

  const emailInput = document.createElement("input");
  emailInput.type = "email";
  emailInput.placeholder = "ادخل البريد الإلكتروني";
  emailInput.style.padding = "10px";
  emailInput.style.border = "1px solid #ccc";
  emailInput.style.borderRadius = "0 5px 5px 0";
  emailInput.style.width = "200px";
  emailInput.style.maxWidth = "90%";

  const button = document.createElement("button");
  button.textContent = "اشترك";
  button.style.padding = "10px 20px";
  button.style.border = "none";
  button.style.cursor = "pointer";
  button.style.backgroundColor = mainColor;
  button.style.color = "#fff";
  button.style.borderRadius = "5px 0 0 5px";

  button.addEventListener("click", function () {
    const email = emailInput.value.trim();
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!email) {
      alert("من فضلك أدخل بريدك الإلكتروني.");
      return;
    }

    if (!emailRegex.test(email)) {
      alert("البريد الإلكتروني غير صحيح.");
      return;
    }

    
    const mailtoLink = `mailto:aldlhmr1@gmail.com?subject=الاشتراك في النشرة البريدية&body=البريد الإلكتروني: ${encodeURIComponent(email)}`;
    window.location.href = mailtoLink;
  }); 
  




  formWrapper.appendChild(button);
  formWrapper.appendChild(emailInput);
  wrapper.appendChild(title);
  wrapper.appendChild(desc);
  wrapper.appendChild(formWrapper);

  targetElement.insertAdjacentElement("afterend", wrapper);
});
/*************************/
/*************************/
/**************************/
/*start share product link*/

setTimeout(function () {
  document.querySelectorAll(".s-product-card-image").forEach(function (card) {
    const link = card.querySelector("a")?.href;
    if (!link) return;

    const wrapper = document.createElement("div");
    wrapper.style.position = "absolute";
    wrapper.style.bottom = "10px";
    wrapper.style.left = "16px";
    wrapper.style.display = "flex";
    wrapper.style.flexDirection = "column";
    wrapper.style.alignItems = "flex-start";
    wrapper.style.gap = "6px";

    const shareIcon = document.createElement("div");
    shareIcon.innerHTML = `
      <svg xmlns="http://www.w3.org/2000/svg" fill="#333" viewBox="0 0 24 24" width="24" height="24">
        <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a2.5 2.5 0 000-1.4l7.05-4.11A2.5 2.5 0 0018 7.91a2.5 2.5 0 100-5 2.5 2.5 0 00-2.44 3.09L8.5 10.91a2.5 2.5 0 100 2.18l7.06 4.1a2.5 2.5 0 002.44 3.09 2.5 2.5 0 100-5z"/>
      </svg>
    `;
    shareIcon.style.background = "#ffffff";
    shareIcon.style.borderRadius = "50%";
    shareIcon.style.width = "40px";
    shareIcon.style.height = "40px";
    shareIcon.style.display = "flex";
    shareIcon.style.alignItems = "center";
    shareIcon.style.justifyContent = "center";
    shareIcon.style.cursor = "pointer";
    shareIcon.style.boxShadow = "0 0 6px rgba(0,0,0,0.2)";
    shareIcon.style.transition = "0.3s";
    shareIcon.style.position = "relative";

    const hoverText = document.createElement("div");
    hoverText.textContent = "شارك المنتج عبر...";
    hoverText.style.position = "absolute";
    hoverText.style.bottom = "45px";
    hoverText.style.left = "0";
    hoverText.style.background = "#fff";
    hoverText.style.padding = "4px 8px";
    hoverText.style.borderRadius = "4px";
    hoverText.style.boxShadow = "0 0 5px rgba(0,0,0,0.2)";
    hoverText.style.fontSize = "12px";
    hoverText.style.display = "none";
    hoverText.style.whiteSpace = "nowrap";
    hoverText.style.pointerEvents = "none";

    shareIcon.addEventListener("mouseenter", () => {
      hoverText.style.display = "block";
    });
    shareIcon.addEventListener("click", () => {
      hoverText.style.display = "none";
    });
    shareIcon.addEventListener("mouseleave", () => {
      hoverText.style.display = "none";
    });

    shareIcon.appendChild(hoverText);

    const shareOptions = document.createElement("div");
    shareOptions.className = "shareOptions";
    shareOptions.style.display = "none";
    shareOptions.style.flexDirection = "row";
    shareOptions.style.gap = "8px";
    shareOptions.style.background = "#fff";
    shareOptions.style.padding = "6px 8px";
    shareOptions.style.borderRadius = "8px";
    shareOptions.style.boxShadow = "0 0 6px rgba(0,0,0,0.15)";

    const messageText = "نرشح لك هذا المنتج و متأكدين من أنه سينال إعجابك%0A";

    const platforms = [
      {
        title: "نسخ الرابط",
        action: () => {
          navigator.clipboard.writeText(link);
          alert("تم نسخ الرابط!");
        },
        svg: `<svg xmlns="http://www.w3.org/2000/svg" fill="#555" viewBox="0 0 24 24" width="20" height="20"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 1H4a2 2 0 0 0-2 2v12h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z"/></svg>`
      },
      {
        title: "واتساب",
        url: `https://wa.me/?text=${messageText}${encodeURIComponent(link)}`,
        svg: `<svg xmlns="http://www.w3.org/2000/svg" fill="#25D366" viewBox="0 0 24 24" width="20" height="20"><path d="M20.52 3.48A11.9 11.9 0 0 0 12 .5C6.05.5 1.1 5.45 1.1 11.4c0 2.01.53 3.97 1.53 5.7L.5 23.5l6.63-2.03a11.78 11.78 0 0 0 5.9 1.5c5.95 0 10.9-4.95 10.9-10.9 0-3.02-1.18-5.83-3.41-7.57zM12 21.1c-1.88 0-3.7-.5-5.3-1.45l-.38-.22-3.95 1.21 1.2-3.82-.25-.39A8.6 8.6 0 0 1 3.4 11.4c0-4.77 3.88-8.65 8.65-8.65 2.31 0 4.48.9 6.11 2.53A8.6 8.6 0 0 1 20.7 11.4c0 4.77-3.88 8.65-8.65 8.65z"/><path d="M17.3 14.1c-.3-.15-1.77-.87-2.05-.97-.28-.1-.48-.15-.68.15-.2.3-.76.97-.93 1.17-.17.2-.34.22-.63.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.34.45-.51.15-.17.2-.28.3-.47.1-.19.05-.35-.03-.5-.08-.15-.68-1.64-.93-2.25-.24-.6-.49-.52-.68-.53-.18-.01-.39-.01-.6-.01-.2 0-.52.07-.79.34-.27.27-1.05 1.03-1.05 2.5 0 1.47 1.08 2.9 1.23 3.1.15.2 2.12 3.38 5.14 4.73 3.03 1.35 3.03.9 3.57.84.54-.06 1.76-.72 2.01-1.42.25-.7.25-1.3.18-1.42-.07-.12-.26-.19-.56-.34z"/></svg>`
      },
      {
        title: "إيميل",
        url: `mailto:?subject=رابط منتج&body=${messageText}${encodeURIComponent(link)}`,
        svg: `<svg xmlns="http://www.w3.org/2000/svg" fill="#EA4335" viewBox="0 0 24 24" width="20" height="20"><path fill="none" d="M0 0h24v24H0z"/><path d="M20 4H4a2 2 0 0 0-2 2v.01L12 13l10-6.99V6a2 2 0 0 0-2-2zM2 8.5v9.5c0 1.1.9 2 2 2h16a2 2 0 0 0 2-2V8.5l-10 7-10-7z"/></svg>`
      },
    ];

    platforms.forEach((platform) => {
      const a = document.createElement(platform.url ? "a" : "div");

      if (platform.url) {
        a.href = platform.url;
        a.target = "_blank";
      } else {
        a.style.cursor = "pointer";
        a.addEventListener("click", platform.action);
      }

      a.title = platform.title;
      a.innerHTML = platform.svg;
      a.style.width = "36px";
      a.style.height = "36px";
      a.style.display = "flex";
      a.style.alignItems = "center";
      a.style.justifyContent = "center";
      a.style.borderRadius = "50%";
      a.style.background = "#f5f5f5";
      a.style.boxShadow = "0 0 4px rgba(0,0,0,0.1)";
      a.style.transition = "0.3s";
      a.addEventListener("mouseover", () => {
        a.style.background = "#e0e0e0";
      });
      a.addEventListener("mouseout", () => {
        a.style.background = "#f5f5f5";
      });

      shareOptions.appendChild(a);
    });

    shareIcon.addEventListener("click", function (e) {
      e.stopPropagation();
      shareOptions.style.display =
        shareOptions.style.display === "none" ? "flex" : "none";
    });

    document.addEventListener("click", function () {
      shareOptions.style.display = "none";
    });

    wrapper.appendChild(shareOptions);
    wrapper.appendChild(shareIcon);
    card.style.position = "relative";
    card.appendChild(wrapper);
  });
}, 2500);



/*end share product link*/
/***************************/
/*************************/
setTimeout(function () {
  // إنشاء البوب أب في الصفحة
  let modal = document.createElement("div");
  modal.id = "productModal";
  modal.className = "modal";
  modal.innerHTML = `
    <div class="modal-content">
      <div class="modal-header">
        <span>عرض المنتج</span>
        <button class="close-btn" onclick="closeProductPopup()">×</button>
      </div>
      <div class="modal-body">
        <iframe id="productIframe" src=""></iframe>
      </div>
    </div>
  `;
  document.body.appendChild(modal);

  // إضافة أيقونة العين لكل الكروت
  document.querySelectorAll("custom-salla-product-card").forEach(card => {
      let imgContainer = card.querySelector(".s-product-card-image");
      if (imgContainer && !imgContainer.querySelector(".eye-icon")) {
          let eye = document.createElement("span");
          eye.className = "eye-icon";
          eye.innerHTML = '<i class="fa-solid fa-eye"></i>';
          eye.onclick = function() {
              let productLink = card.querySelector(".s-product-card-image a")?.href;
              if (productLink) openProductPopup(productLink);
          };
          imgContainer.style.position = "relative";
          imgContainer.appendChild(eye);
      }
  });

  // فتح البوب أب
  window.openProductPopup = function (url) {
      document.getElementById("productIframe").src = url;
      document.getElementById("productModal").style.display = "block";

      // محاولة إخفاء الهيدر والفوتر لو نفس الدومين
      document.getElementById("productIframe").onload = function() {
          try {
              let iframeDoc = this.contentDocument || this.contentWindow.document;
              iframeDoc.querySelectorAll("header, .breadcrumbs , salla-products-slider , footer").forEach(el => el.style.display = "none");
          } catch (e) {
              console.warn("لا يمكن تعديل محتوى iframe من دومين مختلف");
          }
      };
  };

  // غلق البوب أب
  window.closeProductPopup = function () {
      document.getElementById("productModal").style.display = "none";
      document.getElementById("productIframe").src = "";
  };
}, 2600); // تأخير التنفيذ ثانية واحدة

/*************************/
/*************************/
/************************/
const logoImg = document.querySelector("a.navbar-brand img");
    const logoLink = document.querySelector("a.navbar-brand");
    
    logoLink.href = logoImg.src;
    logoLink.target = "_blank";
    logoImg.title = "اضغط هنا لفتح اللوقو";
/*****************/



/**********************************************/
/**********************************************/
document.addEventListener("DOMContentLoaded", function () {
  // تحقق من حالة تشغيل الأنيميشن والبوب-أب في Local Storage
  var animationShown = localStorage.getItem("animationShown");

  // إذا لم يتم عرض الأنيميشن والبوب-أب من قبل
  if (!animationShown) {
    localStorage.setItem("animationShown", "true"); // تعيين الحالة لتجنب التشغيل مرة أخرى

    // الكود الخاص بأنيميشن الطائرة
    if (window.location.pathname === "/") {
      // إنشاء الخلفية الذهبية
      var goldenBackground = document.createElement("div");
      goldenBackground.style.position = "fixed";
      goldenBackground.style.top = "0";
      goldenBackground.style.left = "0";
      goldenBackground.style.width = "100%";
      goldenBackground.style.height = "100%";
      goldenBackground.style.backgroundColor = "#fff9f0";
      goldenBackground.style.zIndex = "999";
      goldenBackground.style.transition = "opacity 1s";

      // إنشاء أيقونة الطائرة
      var airplane = document.createElement("div");
      airplane.innerHTML = `
        <svg version="1.1" width="60px" height="70px" viewBox="0 0 60 70">
          <defs>
            <filter id="f1" x="0" y="0">
              <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
            </filter>
          </defs>
          <g id="airplane">
            <path fill="#695515" d="M0.677,20.977l4.355,1.631c0.281,0.104,0.579,0.162,0.88,0.16l9.76-0.004L30.46,41.58c0.27,0.34,0.679,0.545,1.112,0.541
            h1.87c0.992,0,1.676-0.992,1.322-1.918l-6.643-17.439l6.914,0.002l6.038,6.037c0.265,0.266,0.624,0.412,0.999,0.418l1.013-0.004
            c1.004-0.002,1.684-1.012,1.312-1.938l-2.911-7.277l2.912-7.278c0.372-0.928-0.313-1.941-1.313-1.938h1.017
            c-0.375,0-0.732,0.15-0.996,0.414l-6.039,6.039h-6.915l6.646-17.443c0.354-0.926-0.33-1.916-1.321-1.914l-1.87-0.004
            c-0.439,0.004-0.843,0.203-1.112,0.543L15.677,17.24l-9.765-0.002c-0.3,0.002-0.597,0.055-0.879,0.16L0.678,19.03
            C-0.225,19.36-0.228,20.637,0.677,20.977z" transform="translate(44,0) rotate(90 0 0)" />
          </g>
          <g id="shadow" transform="scale(.9)">
            <path fill="#695515" fill-opacity="0.3" d="M0.677,20.977l4.355,1.631c0.281,0.104,0.579,0.162,0.88,0.16l9.76-0.004L30.46,41.58c0.27,0.34,0.679,0.545,1.112,0.541
                h1.87c0.992,0,1.676-0.992,1.322-1.918l-6.643-17.439l6.914,0.002l6.038,6.037c0.265,0.266,0.624,0.412,0.999,0.418l1.013-0.004
                c1.004-0.002,1.684-1.012,1.312-1.938l-2.911-7.277l2.912-7.278c0.372-0.928-0.313-1.941-1.313-1.938h1.017
                c-0.375,0-0.732,0.15-0.996,0.414l-6.039,6.039h-6.915l6.646-17.443c0.354-0.926-0.33-1.916-1.321-1.914l-1.87-0.004
                c-0.439,0.004-0.843,0.203-1.112,0.543L15.677,17.24l-9.765-0.002c-0.3,0.002-0.597,0.055-0.879,0.16L0.678,19.03
                C-0.225,19.36-0.228,20.637,0.677,20.977z" transform="translate(64,30) rotate(90 0 0)" filter="url(#f1)" />
          </g>
        </svg>
      `;
      airplane.style.position = "absolute";
      airplane.style.bottom = "0";
      airplane.style.left = "50%";
      airplane.style.transform = "translateX(-50%)";
      airplane.style.zIndex = "2000";

      // إضافة الطائرة والخلفية إلى الصفحة
      goldenBackground.appendChild(airplane);
      document.body.appendChild(goldenBackground);

      // تشغيل أنيميشن الطائرة
      var airplaneAnimation = airplane.animate(
        [
          { transform: "translate(-50%, 0)" },
          { transform: "translate(-50%, -100vh)" },
        ],
        {
          duration: 3000,
          easing: "ease-in-out",
          fill: "forwards",
        }
      );

      // عند انتهاء أنيميشن الطائرة
      airplaneAnimation.onfinish = function () {
        goldenBackground.style.opacity = "0";
        setTimeout(function () {
          goldenBackground.remove();
        }, 1000); // يتماشى مع وقت الانتقال

        // الآن قم بعرض البوب-أب
        createWelcomeCard();
      };
    }

    // دالة لإنشاء بطاقة الترحيب
    function createWelcomeCard() {
      var popup = document.createElement("div");
      popup.id = "welcomePopup";
      popup.style.position = "fixed";
      popup.style.top = "50%";
      popup.style.left = "50%";
      popup.style.transform = "translate(-50%, -50%)";
      popup.style.padding = "0 0 10px 0";
      popup.style.backgroundColor = "white";
      popup.style.borderRadius = "10px";
      popup.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.1)";
      popup.style.zIndex = "1000";
      popup.style.textAlign = "center";
      popup.style.width = "300px";
      

      var img = document.createElement("img");
      img.src = logoImg.src;
      img.style.width = "170px";
      img.style.height = "auto";
      img.style.margin = "10px auto";

      var heading = document.createElement("h3");
      heading.innerText = "مرحبًا بك في متجرنا و ندعوك لتستمتع بتجربة التسوق معنا ";
      heading.style.marginBottom = "15px";

      var button = document.createElement("button");
      button.innerText = "استكشف عالمنا";
      button.style.padding = "10px 20px";
      button.style.marginBottom = "25px";
      button.style.backgroundColor = mainColor;
      button.style.color = "white";
      button.style.borderRadius = "7px";
      button.addEventListener("click", function () {
        popup.remove();
      });

      popup.appendChild(img);
      popup.appendChild(heading);
      popup.appendChild(button);
      document.body.appendChild(popup);
    }
  }
});




/************************************************/

  (function () {
  const socialItems = [
    { label: 'واتساب', link: 'https://wa.me/966555586645', icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="24" height="24" viewBox="0 0 32 32"><path d="M27.281 4.65c-2.994-3-6.975-4.65-11.219-4.65-8.738 0-15.85 7.112-15.85 15.856 0 2.794 0.731 5.525 2.119 7.925l-2.25 8.219 8.406-2.206c2.319 1.262 4.925 1.931 7.575 1.931h0.006c0 0 0 0 0 0 8.738 0 15.856-7.113 15.856-15.856 0-4.238-1.65-8.219-4.644-11.219zM16.069 29.050v0c-2.369 0-4.688-0.637-6.713-1.837l-0.481-0.288-4.987 1.306 1.331-4.863-0.313-0.5c-1.325-2.094-2.019-4.519-2.019-7.012 0-7.269 5.912-13.181 13.188-13.181 3.519 0 6.831 1.375 9.319 3.862 2.488 2.494 3.856 5.8 3.856 9.325-0.006 7.275-5.919 13.188-13.181 13.188zM23.294 19.175c-0.394-0.2-2.344-1.156-2.706-1.288s-0.625-0.2-0.894 0.2c-0.262 0.394-1.025 1.288-1.256 1.556-0.231 0.262-0.462 0.3-0.856 0.1s-1.675-0.619-3.188-1.969c-1.175-1.050-1.975-2.35-2.206-2.744s-0.025-0.613 0.175-0.806c0.181-0.175 0.394-0.463 0.594-0.694s0.262-0.394 0.394-0.662c0.131-0.262 0.069-0.494-0.031-0.694s-0.894-2.15-1.219-2.944c-0.319-0.775-0.65-0.669-0.894-0.681-0.231-0.012-0.494-0.012-0.756-0.012s-0.694 0.1-1.056 0.494c-0.363 0.394-1.387 1.356-1.387 3.306s1.419 3.831 1.619 4.1c0.2 0.262 2.794 4.269 6.769 5.981 0.944 0.406 1.681 0.65 2.256 0.837 0.95 0.3 1.813 0.256 2.494 0.156 0.762-0.113 2.344-0.956 2.675-1.881s0.331-1.719 0.231-1.881c-0.094-0.175-0.356-0.275-0.756-0.475z"/></svg>` },

    { label: 'جوال', link: 'tel:966555586645', icon: `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="white" width="24" height="24" viewBox="0 0 32 32">

<path d="M15.053 27.613c0.133 0.12 0.28 0.213 0.44 0.28s0.333 0.107 0.507 0.107c0.36 0 0.693-0.135 0.947-0.387 0.12-0.135 0.213-0.28 0.28-0.44 0.080-0.16 0.107-0.333 0.107-0.507 0-0.347-0.147-0.695-0.387-0.947-0.507-0.493-1.387-0.493-1.893 0-0.12 0.12-0.213 0.267-0.28 0.44-0.067 0.16-0.107 0.333-0.107 0.507s0.040 0.347 0.107 0.507 0.16 0.305 0.28 0.44zM24 0h-16c-2.205 0-4 1.795-4 4v24c0 2.205 1.795 4 4 4h16c2.205 0 4-1.795 4-4v-24c0-2.205-1.795-4-4-4zM25.333 28c0 0.736-0.599 1.333-1.333 1.333h-16c-0.735 0-1.333-0.597-1.333-1.333v-4h18.667zM25.333 21.333h-18.667v-17.333c0-0.735 0.599-1.333 1.333-1.333h16c0.735 0 1.333 0.599 1.333 1.333z"></path>
</svg>` },

    { label: 'هاتف', link: 'tel:555586645', icon: `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="white" width="24" height="24" viewBox="0 0 32 32">

<path d="M30.823 21.713l-3.883-3.883c-1.569-1.568-4.12-1.568-5.689 0l-2.568 2.568c-3.063-1.499-5.583-4.019-7.081-7.083l2.568-2.567c0.759-0.76 1.177-1.771 1.177-2.845s-0.419-2.084-1.179-2.844l-3.881-3.881c-1.52-1.521-4.171-1.521-5.689 0l-1.845 1.847c-2.22 2.219-3.183 5.407-2.573 8.527 1.98 10.144 10.125 18.292 20.269 20.271 0.616 0.121 1.236 0.18 1.849 0.18 2.492 0 4.896-0.972 6.677-2.752l1.847-1.847c1.568-1.571 1.568-4.121 0.001-5.691zM28.936 25.517l-1.845 1.847c-1.592 1.592-3.883 2.283-6.132 1.841-9.089-1.776-16.388-9.075-18.163-18.165-0.439-2.247 0.249-4.539 1.841-6.129l1.847-1.847c0.256-0.257 0.596-0.397 0.959-0.397s0.703 0.14 0.959 0.397l3.883 3.883c0.256 0.256 0.397 0.596 0.397 0.959s-0.141 0.703-0.397 0.96l-3.22 3.217c-0.383 0.384-0.496 0.959-0.287 1.457 1.813 4.339 5.343 7.868 9.683 9.684 0.497 0.207 1.073 0.095 1.457-0.288l3.22-3.22c0.529-0.529 1.389-0.528 1.917 0l3.881 3.883c0.528 0.529 0.528 1.389 0 1.919z"></path>
</svg>` },

    { label: 'ايميل', link: 'mailto:aldlhmr1@gmail.com', icon: `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="white" width="24" height="24" viewBox="0 0 32 32">

<path d="M28 2.667h-24c-2.205 0-4 1.795-4 4v18.667c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-18.667c0-2.205-1.795-4-4-4zM29.333 25.333c0 0.735-0.599 1.333-1.333 1.333h-24c-0.735 0-1.333-0.599-1.333-1.333v-12.685l10.54 4.865c0.888 0.409 1.84 0.613 2.793 0.613s1.907-0.204 2.793-0.615l10.54-4.864zM29.333 9.711l-11.657 5.38c-1.065 0.492-2.288 0.492-3.353 0l-11.656-5.38v-3.044c0-0.735 0.599-1.333 1.333-1.333h24c0.735 0 1.333 0.599 1.333 1.333z"></path>
</svg>` }
  ];

  const container = document.createElement('div');
  container.id = 'social-fab';

  const toggleButton = document.createElement('div');
  toggleButton.id = 'fab-button';
  toggleButton.innerHTML = `
    <span id="fab-open">💬</span>
    <span id="fab-close" style="display:none;font-size: 30px;">X</span>
  `;
  container.appendChild(toggleButton);

  const iconsWrapper = document.createElement('div');
  iconsWrapper.id = 'fab-icons';

  socialItems.forEach((item, index) => {
    const icon = document.createElement('div');
    icon.className = 'fab-icon';
    icon.innerHTML = item.icon;
    icon.setAttribute('data-label', item.label);
    icon.style.transitionDelay = `${index * 100}ms`;
    icon.onclick = () => window.open(item.link, '_blank');
    iconsWrapper.appendChild(icon);
  });

  container.appendChild(iconsWrapper);
  document.body.appendChild(container);

  const style = document.createElement('style');
  style.innerHTML = `
    #social-fab {
      position: fixed;
      bottom: 80px;
      right: 20px;
      z-index: 9999;
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      gap: 10px;
      font-family: Arial;
    }

    #fab-button {
      background: #333;
      color: white;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-size: 24px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    #fab-icons {
      display: none;
      
    }

    #fab-icons.show {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .fab-icon {
      width: 48px;
      height: 48px;
      background: #555;
      margin-bottom: 5px;
      border-radius: 50%;
      border: 1px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.4s ease;
    }

    #fab-icons.show .fab-icon {
      opacity: 1;
      transform: translateY(0);
    }

    .fab-icon:hover::after {
      content: attr(data-label);
      position: absolute;
      right: 55px;
      background: #555;
      color: #fff;
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 13px;
      white-space: nowrap;
    }
  `;
  document.head.appendChild(style);

  let opened = false;
  toggleButton.onclick = () => {
    opened = !opened;
    document.getElementById('fab-open').style.display = opened ? 'none' : 'inline';
    document.getElementById('fab-close').style.display = opened ? 'inline' : 'none';
    iconsWrapper.classList.toggle('show');
  };
})();



/**********************************************/
document.querySelectorAll('a[href=""], a[href="#"]').forEach(link => {
    link.addEventListener('click', event => {
        event.preventDefault();  
    });
});
/***********************************************/
// create scrollIcon 
const scrollIcon = document.createElement("div");
scrollIcon.id = "scroll-icon";
scrollIcon.style.position = "fixed";
scrollIcon.style.bottom = "20px";
scrollIcon.style.left = "20px";
scrollIcon.style.width = "50px";
scrollIcon.style.height = "50px";
scrollIcon.style.display = "none"; // initailly hidden
scrollIcon.style.alignItems = "center";
scrollIcon.style.justifyContent = "center";
scrollIcon.style.cursor = "pointer";
scrollIcon.style.zIndex = "1000";

// create svg circle
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("class", "progress-circle");
svg.setAttribute("viewBox", "0 0 36 36");
svg.style.width = "100%";
svg.style.height = "100%";
svg.style.transform = "rotate(-90deg)";


// create circle background
const circleBg = document.createElementNS("http://www.w3.org/2000/svg", "path");
circleBg.setAttribute("class", "circle-bg");
circleBg.setAttribute(
  "d",
  "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
);
circleBg.setAttribute("fill", "none");
circleBg.setAttribute("stroke", "#ccc");
circleBg.setAttribute("stroke-width", "3.8");

// create the moved circle
const circle = document.createElementNS("http://www.w3.org/2000/svg", "path");
circle.setAttribute("class", "circle");
circle.setAttribute(
  "d",
  "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
);
circle.setAttribute("fill", "none");
circle.setAttribute("stroke", mainColor);
circle.setAttribute("stroke-width", "3.8");
circle.setAttribute("stroke-linecap", "round");
circle.style.transition = "stroke-dasharray 0.3s ease";



// add elements to svg
svg.appendChild(circleBg);
svg.appendChild(circle);

// create arrow
const arrow = document.createElement("div");
arrow.textContent = "↑";
arrow.style.position = "absolute";
arrow.style.fontSize = "22px";
arrow.style.fontWeight = "bold";
arrow.style.color = mainColor;
arrow.style.pointerEvents = "none";



// add svg , arrow to scrollTcon
scrollIcon.appendChild(svg);
scrollIcon.appendChild(arrow);

// add scrollTcon to page
document.body.appendChild(scrollIcon);

// add events
window.addEventListener("scroll", () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scrollPercentage = (scrollTop / scrollHeight) * 100;

  // update circle background
  circle.style.strokeDasharray = `${scrollPercentage}, 100`;

  // hide or display scrollIcon based on scrollTop 
 if (scrollTop > 250) {
    scrollIcon.style.display = "flex";
  } else {
    scrollIcon.style.display = "none";
  }

});

 


// back to top when click the icon
scrollIcon.addEventListener("click", () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
});
/*********************************************/

const whatsappFloat = document.createElement("div");
whatsappFloat.className = "whatsapp-float";

const whatsappPopup = document.createElement("div");
whatsappPopup.className = "whatsapp-popup";
whatsappPopup.style.display = "none";
whatsappPopup.innerHTML = `
  <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" loading="lazy">
      <span class="support-text">الدعم الفني</span>
    </div>
    <button class="close-popup">×</button>
  </div>
  <div class="chat-body" id="chat-body"></div>
  <div class="chat-footer">
    <input type="text" id="whatsapp-message" placeholder="اكتب رسالتك هنا" class="chat-input">
    <button id="send-whatsapp" class="whatsapp-button">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px">
        <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
      </svg>
    </button>
  </div>`;

whatsappFloat.appendChild(whatsappPopup);

const whatsappIcon = document.createElement("img");
whatsappIcon.src =
  "https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg";
whatsappIcon.alt = "WhatsApp";
whatsappIcon.className = "whatsapp-icon";
whatsappIcon.setAttribute("loading", "lazy");
whatsappFloat.appendChild(whatsappIcon);
document.body.appendChild(whatsappFloat);


// إضافة النمط
const style = document.createElement("style");
style.innerHTML = `
.whatsapp-float { position: fixed; bottom: 80px; left: 20px; z-index: 100; }
.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: 145px; left: 20px; width: 300px; background-color: #f0f0f0; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 0; z-index: 101; display: flex; flex-direction: column; overflow: hidden; }
.popup-header { display: flex; justify-content: space-between; align-items: center; background-color: var(--main-color); color: white; padding: 10px; }
.avatar-container { display: flex; align-items: center; }
.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; color: white; cursor: pointer; }
.chat-body { flex-grow: 1; padding: 10px; background-color: #e5ddd5; overflow-y: auto; max-height: 300px; }
.chat-message { margin-bottom: 10px; display: flex; }
.chat-message.sent { justify-content: flex-end; }
.chat-message p { max-width: 70%; padding: 10px; border-radius: 10px; background-color: #dcf8c6; margin: 0; }
.chat-footer { display: flex; align-items: center; padding: 10px; background-color: white; border-top: 1px solid #ccc; }
.chat-input { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 20px; margin-right: 10px; width: 87%; }
.whatsapp-button { background-color: var(--main-color); color: white; padding: 5px; border-radius: 50%; border: none; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease-in-out; margin-right: 4px; }
.whatsapp-button:hover { transform: scale(1.1); }
#product-details { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 350px; background: #ffffff; padding: 25px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); z-index: 102; display: none; font-family: 'Arial', sans-serif; border: 1px solid #eee; }
#product-details.show { display: block; }
#product-details h3 { margin: 0 0 20px; font-size: 22px; color: #333; text-align: center; font-weight: bold; }
#product-details input, #product-details textarea, #product-details input[type="file"] { width: 100%; margin: 10px 0; padding: 12px; border: 1px solid #e0e0e0; border-radius: 10px; font-size: 14px; background-color: #f9f9f9; transition: border-color 0.3s ease, box-shadow 0.3s ease; box-sizing: border-box; }
#product-details input:focus, #product-details textarea:focus, #product-details input[type="file"]:focus { border-color: #25D366; box-shadow: 0 0 6px rgba(37, 211, 102, 0.2); outline: none; }
#product-details textarea { resize: none; height: 80px; }
#product-details input[type="file"] { padding: 10px; background-color: #fff; cursor: pointer; }
#product-details .button-container { display: flex; justify-content: space-between; margin-top: 15px; }
#product-details button { width: 48%; padding: 12px; border: none; border-radius: 10px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; }
#submitProductDetails { background-color: #25D366; color: white; }
#submitProductDetails:hover { background-color: #20b858; transform: translateY(-2px); }
#cancelProductDetails { background-color: #ff4444; color: white; }
#cancelProductDetails:hover { background-color: #e03e3e; transform: translateY(-2px); }
@media (max-width: 480px) { #product-details { width: 300px; padding: 15px; } #product-details h3 { font-size: 18px; margin-bottom: 12px; } #product-details input, #product-details textarea, #product-details input[type="file"] { padding: 8px; font-size: 12px; margin: 6px 0; } #product-details textarea { height: 50px; } #product-details button { padding: 8px; font-size: 13px; } }
.active .payment-icons{
  opacity: 1;
}
`;
document.head.appendChild(style);

whatsappIcon.addEventListener("click", () => {
  whatsappPopup.style.display =
    whatsappPopup.style.display === "none" ? "block" : "none";
  if (whatsappPopup.style.display === "block") {
    const chatBody = document.getElementById("chat-body");
    chatBody.innerHTML =
      '<div class="chat-message"><p>أهلاً بك! نحن موجودون بخدمتك<br>في حال تحتاج نوفر لك منتج معين أرسل رقم "1"<br>وفي حال أردت شيئاً آخر أرسل لنا وراح نساعدك بإذن الله</p></div>';
    chatBody.scrollTop = chatBody.scrollHeight;
  }
});

document.querySelector(".close-popup").addEventListener("click", () => {
  whatsappPopup.style.display = "none";
});

function getReply(message) {
  message = message.toLowerCase().trim();
  if (message === "1") {
    showProductForm();
    return null;
  } else if (message.includes("السلام عليكم")) {
    return "وعليكم السلام ورحمة الله وبركاته! كيف يمكنني مساعدتك اليوم؟ 🤗";
  } else if (message.includes("مرحبا")) {
    return "مرحبًا بك! 🌟 كيف يمكنني أن أكون في خدمتك؟";
  }
  return "شكرًا لرسالتك! سأقوم بتوجيهك إلى الدعم الفني.";
}

document.getElementById("send-whatsapp").addEventListener("click", sendMessage);
document
  .getElementById("whatsapp-message")
  .addEventListener("keypress", (event) => {
    if (event.key === "Enter") sendMessage();
  });

function sendMessage() {
  const message = document.getElementById("whatsapp-message").value.trim();
  if (!message) {
    alert("يرجى كتابة رسالة قبل الإرسال.");
    return;
  }

  const chatBody = document.getElementById("chat-body");
  chatBody.innerHTML += `<div class="chat-message sent"><p>${message}</p></div>`;
  chatBody.scrollTop = chatBody.scrollHeight;
  document.getElementById("whatsapp-message").value = "";

  chatBody.innerHTML += '<div class="chat-message"><p>...</p></div>';
  chatBody.scrollTop = chatBody.scrollHeight;

  setTimeout(() => {
    chatBody.lastChild.remove();
    const reply = getReply(message);
    if (reply) {
      chatBody.innerHTML += `<div class="chat-message"><p>${reply}</p></div>`;
      chatBody.scrollTop = chatBody.scrollHeight;
      if (message !== "1") {
        setTimeout(() => {
          whatsappPopup.style.display = "none";
          chatBody.innerHTML = "";
          window.location.href = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(
            message
          )}`;
        }, 2000);
      }
    }
  }, 1000);
}

function showProductForm() {
  whatsappPopup.style.display = "none";
  const productDetails = document.createElement("div");
  productDetails.id = "product-details";
  productDetails.innerHTML = `
    <h3>أرغب بترشيح منتج</h3>
    <input type="text" id="productName" placeholder="اسم المنتج">
    <input type="text" id="customerName" placeholder="اسمك">
    <input type="text" id="productLink" placeholder="رابط المنتج (اختياري)">
    <div class="button-container">
      <button id="submitProductDetails">إرسال</button>
      <button id="cancelProductDetails">إلغاء</button>
    </div>
  `;
  document.body.appendChild(productDetails);
  productDetails.classList.add("show");

  document
    .getElementById("cancelProductDetails")
    .addEventListener("click", () => {
      productDetails.classList.remove("show");
      document.body.removeChild(productDetails);
      whatsappPopup.style.display = "block";
    });

  document
    .getElementById("submitProductDetails")
    .addEventListener("click", () => {
      const productName = document.getElementById("productName").value;
      const customerName = document.getElementById("customerName").value;
      const productLink = document.getElementById("productLink").value;

      if (productName && customerName) {
        const message = `السلام عليكم، أنا أبحث عن منتج بهذه المواصفات\nاسم المنتج: ${productName}\nاسم العميل: ${customerName}\nرابط المنتج: ${
          productLink || "غير متوفر"
        }`;
        window.location.href = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(
          message
        )}`;
        productDetails.classList.remove("show");
        document.body.removeChild(productDetails);
      } else {
        alert("يرجى إدخال اسم المنتج واسمك للمتابعة.");
      }
    });
}

/**********************/



/************************/


/************************/



/*************************/
// الاسئلة الشائعة
// common questions
document.addEventListener("DOMContentLoaded", () => {
    if (!document.body.classList.contains("index")) return;
  const faqSection = document.createElement("section");
  faqSection.className = "faqSection";
  faqSection.id = "faq-section";
  Object.assign(faqSection.style, {
    backgroundColor: "#ccc",
    padding: "2rem",
    margin: "2rem auto",
    width: "90%",
    maxWidth: "1200px",
    borderRadius: "10px",
    boxShadow: "0 4px 10px rgba(0, 0, 0, 0.1)",
    fontFamily: "Arial, sans-serif",
  });

  const faqTitle = document.createElement("h2");
  faqTitle.innerText = "الأسئلة الشائعة";
  Object.assign(faqTitle.style, {
    textAlign: "center",
    color: "#fff",
    marginBottom: "1.5rem",
    fontSize: "1.8rem",
    fontWeight: "bold",
    borderBottom: "2px solid #eee",
    paddingBottom: "10px",
  });
  faqSection.appendChild(faqTitle);

  const faqData = [
    {
      question: "ما هي خيارات الدفع المتوفرة؟",
      answer:
        "يمكنك الدفع باستخدام مدى، البطاقات الائتمانية، Apple Pay، Stc Pay.",
    },
    {
      question: "كم يستغرق توصيل الطلب؟",
      answer: "عادةً ما يتم توصيل الطلبات خلال 7 - 14 يوم عمل.",
    },
    {
      question: "هل يمكنني استرجاع المنتجات؟",
      answer:
        "نعم، يمكنك استرجاع المنتجات خلال 7 أيام من استلامها وفقًا لسياسة الإرجاع.",
    },
  ];

  const questionsArray = [];
  const answersArray = [];

  faqData.forEach(({ question, answer }) => {
    const questionContainer = document.createElement("div");
    Object.assign(questionContainer.style, {
      marginBottom: "15px",
      borderBottom: "1px solid #ddd",
      paddingBottom: "0.5rem",
      overflow: "hidden",
      transition: "all 0.3s ease-in-out",
    });

    const questionEl = document.createElement("h3");
    questionEl.innerHTML = `➕ ${question}`;
    Object.assign(questionEl.style, {
      cursor: "pointer",
      margin: "0",
      padding: "12px",
      backgroundColor: "#f9f9f9",
      borderRadius: "5px",
      fontSize: "16px",
      color: "#333",
      transition: "background 0.3s",
    });

    questionEl.addEventListener(
      "mouseenter",
      () => (questionEl.style.backgroundColor = "#eee")
    );
    questionEl.addEventListener(
      "mouseleave",
      () => (questionEl.style.backgroundColor = "#f9f9f9")
    );

    const answerEl = document.createElement("p");
    answerEl.innerText = answer;
    Object.assign(answerEl.style, {
      display: "none",
      marginTop: "0.5rem",
      color: "#555",
      fontSize: "15px",
      padding: "10px",
      background: "#f1f1f1",
      borderRadius: "5px",
      opacity: "0",
      transition: "opacity 0.3s ease-in-out",
    });

    questionEl.addEventListener("click", () => {
      answersArray.forEach((ans, idx) => {
        if (ans !== answerEl) {
          ans.style.display = "none";
          ans.style.opacity = "0";
          questionsArray[idx].innerHTML = `➕ ${faqData[idx].question}`;
        }
      });

      const isVisible = answerEl.style.display === "block";
      answerEl.style.display = isVisible ? "none" : "block";
      setTimeout(() => (answerEl.style.opacity = isVisible ? "0" : "1"), 10);
      questionEl.innerHTML = isVisible ? `➕ ${question}` : `➖ ${question}`;
    });

    questionsArray.push(questionEl);
    answersArray.push(answerEl);

    questionContainer.appendChild(questionEl);
    questionContainer.appendChild(answerEl);
    faqSection.appendChild(questionContainer);
  });

  const footer = document.querySelector(".index footer");
  if (footer) footer.parentNode.insertBefore(faqSection, footer);
});

/**************************************/

//add Real icon in cart page

setTimeout(() => {
let cartElement = document.querySelector("body.cart .s-cart-summary-total");

 cartElement.innerText = cartElement.innerText.replace(" ر.س", "");
 
 let cartIcon = document.createElement("i");
cartIcon.classList.add("sicon-sar"); 
cartIcon.style.margin = "0 5px"


cartElement.prepend(cartIcon);

}, 1000);
/*******************/


if (document.body.classList.contains("index")) {

    
        const features = [
            {
                title: "جودة عالية",
                description: "منتجاتنا موثوقة وذات جودة عالية.",
                gif: "https://i.ibb.co/Jtnhq4d/5758be28d489ce0b4149bf58b95912f0.gif"
            },
            {
                title: "شحن سريع",
                description: "نوفر لك توصيل سريع للطلبات.",
                gif: "https://i.ibb.co/ZgfYptB/9326a26fbcb4ea2f2dee5aea0d84839b.gif"
            },
            {
                title: "خدمة 24 ساعة",
                description: "دعم فني على مدار الساعة لخدمتك.",
                gif: "https://i.ibb.co/n8mgW2w/c15e51cd69be74555ea6f95b3606f608.gif"
            },
            {
                title: "مدفوعات آمنة",
                description: "نوفر لك خيارات دفع آمنة.",
                gif: "https://i.ibb.co/0YKGrPT/c4b3a7bb626a5157be7cd1e858df5320.gif"
            }
        ];
    
        const mainDiv = document.createElement("section");
        mainDiv.classList.add("mainDiv");
    
        const featHeading = document.createElement("h2");
        featHeading.classList.add("featHeading");
        featHeading.textContent = "لماذا تختار متجرنا ؟";
        mainDiv.appendChild(featHeading);
    
        const container = document.createElement("div");
        container.classList.add("features-container");
        mainDiv.appendChild(container);
    
        
        
        features.forEach(feature => {
            const featureDiv = document.createElement("div");
            featureDiv.classList.add("feature-item");
            
            const img = document.createElement("img");
            img.src = feature.gif;
            img.alt = feature.title;
            
            const title = document.createElement("h3");
            title.textContent = feature.title;
            
            const desc = document.createElement("p");
            desc.textContent = feature.description;
            
            featureDiv.appendChild(img);
            featureDiv.appendChild(title);
            featureDiv.appendChild(desc);
            container.appendChild(featureDiv);
        });
        
         const footer = document.querySelector(".index footer");
  if (footer) {
  footer.parentNode.insertBefore(mainDiv, footer);
};
    
    

 }  
 /**************************/
 
//add features
document.addEventListener("DOMContentLoaded", () => {
    if (!document.body.classList.contains("index")) return;

  const style = document.createElement("style");
  style.innerHTML = `
    .features-section { background: transparent; padding: 20px 20px; max-width: 90%; margin: 30px auto -30px auto; text-align: center; width: 100%; }
    .features-section h2 { font-size: 2em; margin-bottom: 20px; color: black; }
    .features-container { display: flex; align-items: center; justify-content: center; gap: 20px; }
    @media(max-width: 991px) { .features-container { flex-direction: column; } }
    .feature { background: white; color: black; padding: 20px; border-radius: 10px; width: 300px; font-size: 16px; font-weight: bold; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: center; position: relative; overflow: hidden; cursor: pointer; overflow: visible; }
    .feature-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--main-color); color: white; display: flex; align-items: center; justify-content: center; border-radius: 10px; opacity: 0; transform: scale(0.8); transition: opacity 0.3s ease, transform 0.3s ease; }
    .feature:hover .feature-hover { opacity: 1; transform: scale(1); }
    .payment-icons { display: flex; justify-content: center; gap: 15px; margin-top: 15px; opacity: 0; transition: opacity 0.3s ease; position: absolute; top: 60px; left: 0; }
    .payment-icons img { width: 50px; height: 50px; border-radius: 20%; background: white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 5px; }
    .payment-icons img:hover { transform: translateY(-7px); }
    .feature.active .payment-icons { opacity: 1; }
  `;
  document.head.appendChild(style);

  const section = document.createElement("section");
  section.className = "features-section";
  section.innerHTML = `
    <h2>مميزات المتجر</h2>
    <div class="features-container">
      <div class="feature">🛡️ حماية مضمونة<div class="feature-hover">🔒 نضمن لك حماية بياناتك وخصوصيتك</div></div>
      <div class="feature">🎁 عروض مميزة<div class="feature-hover">💥 عروض وخصومات حصرية طوال العام</div></div>
      <div class="feature">🌟 رضا العملاء<div class="feature-hover">👍 تقييمات إيجابية من عملائنا في مختلف المناطق</div>
        <div class="payment-icons">
          <img src="https://cdn.salla.network/images/payment/google_pay_mini.png" loading="lazy">
          <img src="https://cdn.salla.network/images/payment/apple_pay_mini.png" loading="lazy">
          <img src="https://cdn.salla.network/images/payment/stc_pay_mini.png" loading="lazy">
          <img src="https://cdn.salla.network/images/payment/credit_card_mini.png" loading="lazy">
          <img src="https://cdn.salla.network/images/payment/mada_mini.png" loading="lazy">
        </div>
      </div>
    </div>
  `;

  const footer = document.querySelector(".index footer");
  if (footer && footer.parentNode)
    footer.parentNode.insertBefore(section, footer);
  else document.body.appendChild(section);

  document.querySelectorAll(".feature")[2].addEventListener("click", (e) => {
    e.target.classList.toggle("active");
  });
});
 
 /******************************/
document.addEventListener("DOMContentLoaded", function () {
    if (!document.body.classList.contains("index")) return;

    // Load external CSS
    const styles = `
        @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
        @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css');
        @import url('https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css');
       `;
    const styleSheet = document.createElement("style");
    styleSheet.type = "text/css";
    styleSheet.innerText = styles;
    document.head.appendChild(styleSheet);

    // Create testimonial slider container
    const section = document.createElement("section");
    section.className = "customers-reviews";
    section.innerHTML = `
        <div class="container">
          <h2>ماذا قالوا عن متجرنا ؟</h2>
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    `;
         const footer = document.querySelector(".index footer");
  if (footer) {
  footer.parentNode.insertBefore(section, footer);
};


    // Testimonials data
    const testimonials = [
        { img: "https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp", name: "عبدالله القحطاني", text: "الخدمة ممتازة وتعامل راقٍ، سعيد جدًا بالتجربة وسأكررها بالتأكيد!" },
        { img: "https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp", name: "فهد العتيبي", text: "منتجات عالية الجودة وسرعة في التوصيل، أنصح الجميع بالتعامل معهم." },
        { img: "https://cdn.salla.sa/form-builder/ZyVHHa7UyP76mOyYttTmTmN71ZNJxq8hbEgQGRYt.webp", name: "مي الزهراني", text: "تجربة سلسة من الطلب حتى الاستلام، مرونة عالية وخدمة ولا أروع." },
        { img: "https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp", name: "سعود الدوسري", text: "تعامل احترافي ودقة في التفاصيل، أشكر الفريق على المصداقية." },
        { img: "https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp", name: "محمد الشهري", text: "تجربة رائعة من البداية للنهاية، الدعم الفني متعاون جدًا أنصح بتجربتهم!" },
        { img: "https://cdn.salla.sa/form-builder/ZyVHHa7UyP76mOyYttTmTmN71ZNJxq8hbEgQGRYt.webp", name: "لمى السبيعي", text: "أحببت دقة المواعيد والتواصل الواضح، أنصح كل شخص بتجربة خدماتهم!" },
        { img: "https://cdn.salla.sa/form-builder/PdSFEbUJkatQQn67696gIXAjUOryG6pJC8X0bJ6h.webp", name: "ماجد الزهراني", text: "أحببت دقة المواعيد والاحترافية في العمل، تجربة تسوّق ممتعة!" },
        { img: "https://cdn.salla.sa/form-builder/ZyVHHa7UyP76mOyYttTmTmN71ZNJxq8hbEgQGRYt.webp", name: "فاطمة القحطاني", text: "خدمة عملاء أكثر من رائعة، تجاوب سريع واحترام للعميل، أكيد راح أطلب مرة ثانية!" },
        { img: "https://cdn.salla.sa/form-builder/ZyVHHa7UyP76mOyYttTmTmN71ZNJxq8hbEgQGRYt.webp", name: "هدى الدوسري", text: "توصيل سريع والمنتجات مطابقة للوصف، تجربة تسوق ممتعة وسهلة!" }
    ];

    const wrapper = section.querySelector(".swiper-wrapper");
    testimonials.forEach(({ img, name, text }) => {
        const slide = document.createElement("div");
        slide.className = "swiper-slide";
        slide.innerHTML = `
            <div class="card">
                <img src="${img}" alt="${name}">
                <div class="stars">★★★★★</div>
                <p>${text}</p>
                <h3>${name}</h3>
            </div>
        `;
        wrapper.appendChild(slide);
    });

    // Load Swiper JS
    const script = document.createElement("script");
    script.src = "https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js";
    script.onload = function () {
        new Swiper(".mySwiper", {
            slidesPerView: 1,
            spaceBetween: 30,
            slidesPerGroup: 1,
            loop: true,
            breakpoints: {
                480: { slidesPerView: 2, spaceBetween: 40 },
                640: { slidesPerView: 3, spaceBetween: 50 }
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev"
            },
            autoplay: {
                delay: 2000
            }
        });
    };
    document.body.appendChild(script);
}); 

/*************************************/
/***********************************************************************/
document.addEventListener("DOMContentLoaded", function () {
  // إنشاء السيكشن
  const countdownSection = document.createElement("section");
  countdownSection.className = "countdown-section";
  countdownSection.innerHTML = `
    <h2>🔥 الحق عروضنا 🔥</h2>
    <div class="countdown-timer">
      <div class="countdown-box">
        <span id="days">00</span>
        <div class="countdown-label">يوم</div>
      </div>
      <div class="countdown-box">
        <span id="hours">00</span>
        <div class="countdown-label">ساعة</div>
      </div>
      <div class="countdown-box">
        <span id="minutes">00</span>
        <div class="countdown-label">دقيقة</div>
      </div>
      <div class="countdown-box">
        <span id="seconds">00</span>
        <div class="countdown-label">ثانية</div>
      </div>
    </div>
    <div class="sales-div">
      <a class="sales-link" href="https://luxy-ksa.shop/offers">اكتشف العروض</a>
    </div>
    <div class="countdown-progress">
      <div class="countdown-progress-bar"></div>
    </div>
  `;

  // إدراج السيكشن بعد أول سيكشن في الصفحة الرئيسية
  const firstSection = document.querySelector("body.index section:first-of-type");
  if (firstSection) {
    firstSection.insertAdjacentElement("afterend", countdownSection);
  }

  // تحديد وقت النهاية من localStorage أو إنشاؤه
  let targetDate;
  if (localStorage.getItem("countdownEnd")) {
    targetDate = new Date(localStorage.getItem("countdownEnd"));
  } else {
    const startDate = new Date();
    targetDate = new Date(startDate.getTime() + (30 * 24 * 60 * 60 * 1000)); // بعد 30 يوم
    localStorage.setItem("countdownEnd", targetDate);
  }

  const totalTime = targetDate.getTime() - new Date().getTime();

  function updateCountdown() {
    const now = new Date().getTime();
    const distance = targetDate.getTime() - now;

    if (distance <= 0) {
      document.querySelector(".countdown-section h2").textContent = "انتهى العرض!";
      document.querySelector(".countdown-timer").style.display = "none";
      document.querySelector(".countdown-progress").style.display = "none";
      localStorage.removeItem("countdownEnd"); // نحذف التاريخ عند الانتهاء
      return;
    }

    // حساب القيم
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // عرض القيم
    document.getElementById("days").textContent = days;
    document.getElementById("hours").textContent = String(hours).padStart(2, '0');
    document.getElementById("minutes").textContent = String(minutes).padStart(2, '0');
    document.getElementById("seconds").textContent = String(seconds).padStart(2, '0');

    // تحديث شريط التقدم
    const progressPercent = (distance / totalTime) * 100;
    document.querySelector(".countdown-progress-bar").style.width = progressPercent + "%";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
});


/*********************************************************************************************/
/************************************/
//category slider
// بيانات الصور والروابط
const sliderData = [
  {
    image: "https://cdn.salla.sa/form-builder/AZ8KkixD6C1XxiQkCmqqZEpUmdSCWFsky4iZkWoE.png",
    link: "https://luxy-ksa.shop/%D9%85%D9%84%D8%A7%D8%A8%D8%B3-%D9%86%D8%B3%D8%A7%D8%A6%D9%8A%D8%A9/c1339399513"
  },
  {
    image: "https://cdn.salla.sa/form-builder/4QyRvqNHB8x9HJpwjv6z8c71VAyImFgMmlYh2TrV.png",
    link: "https://luxy-ksa.shop/%D8%A7%D8%AD%D8%B0%D9%8A%D8%A9-%D9%86%D8%B3%D8%A7%D8%A6%D9%8A%D8%A9/c1306283695"
  },
  {
    image: "https://cdn.salla.sa/form-builder/4mggWimCiUF9gW2sVq4YCNehBTHO48Fa5J4kS6Yg.png",
    link: "https://luxy-ksa.shop/%D9%85%D9%84%D8%A7%D8%A8%D8%B3-%D8%A3%D8%B7%D9%81%D8%A7%D9%84/c1945579438"
  },
  {
    image: "https://cdn.salla.sa/form-builder/Xfwj5zIvXNoCxYFpmqN83EO0HPvi2C7ye1FY9KQN.png",
    link: "https://luxy-ksa.shop/%D8%A7%D8%AD%D8%B0%D9%8A%D8%A9-%D8%A3%D8%B7%D9%81%D8%A7%D9%84/c1770491049"
  },
  {
    image: "https://cdn.salla.sa/form-builder/xft5rnn3rCBWf7RbS5xZZH0n87BzjXeisywg9QkP.png",
    link: "https://luxy-ksa.shop/%D9%85%D9%84%D8%A7%D8%A8%D8%B3-%D8%B1%D8%AC%D8%A7%D9%84/c1414390188"
  } ,
  {
    image: "https://cdn.salla.sa/form-builder/jYqqeUifyl8pdQhbiB689Dw7dUf3Hm4SoohZpDNm.png",
    link: "https://luxy-ksa.shop/%D8%A7%D8%AD%D8%B0%D9%8A%D8%A9-%D8%B1%D8%AC%D8%A7%D9%84/c532245928"
  }
];

// إنشاء عناصر السلايدر
const catSliderSection = document.createElement("section");
catSliderSection.className = "category-slider";

const catTitle = document.createElement("h2");
catTitle.className = "cat-title";
catTitle.textContent = " تصفح اقسامنا المختلفة";
catSliderSection.appendChild(catTitle);


const parentDiv = document.createElement("div");
parentDiv.className = "parent";

const sliderContainer = document.createElement("div");
sliderContainer.className = "slider-container";

const slideNumberDiv = document.createElement("div");
slideNumberDiv.id = "slide-number";
slideNumberDiv.className = "slide-number";
sliderContainer.appendChild(slideNumberDiv);

// إنشاء الصور كرابط <a> يحتوي <img>
sliderData.forEach((item, index) => {
  const link = document.createElement("a");
  link.href = item.link;

  const img = document.createElement("img");
  img.src = item.image;
  img.alt = `Slide ${index + 1}`;
  img.decoding = "async";

  link.appendChild(img);
  sliderContainer.appendChild(link);
});

const controls = document.createElement("div");
controls.className = "slider-controls";

const prev = document.createElement("span");
prev.id = "prev";
prev.className = "prev";
prev.textContent = "السابق";

const indicators = document.createElement("span");
indicators.id = "indicators";
indicators.className = "indicators";

const next = document.createElement("span");
next.id = "next";
next.className = "next";
next.textContent = "التالي";

controls.appendChild(prev);
controls.appendChild(indicators);
controls.appendChild(next);

parentDiv.appendChild(sliderContainer);
parentDiv.appendChild(controls);
catSliderSection.appendChild(parentDiv);

// إدراج السيكشن بعد أول section
const firstSection = document.querySelector("body.index section:first-of-type");
firstSection.insertAdjacentElement("afterend", catSliderSection);

// ----- التحكم في السلايدر -----

const sliderImages = Array.from(sliderContainer.querySelectorAll("a img"));
let currentSlide = 1;
const slidesCount = sliderImages.length;
const slideNumberElement = slideNumberDiv;

next.onclick = nextSlide;
prev.onclick = prevSlide;

let autoSlide = setInterval(nextSlide, 3000);

sliderContainer.addEventListener("mouseover", () => clearInterval(autoSlide));
sliderContainer.addEventListener("mouseout", () => {
  autoSlide = setInterval(nextSlide, 3000);
});

// إنشاء المؤشرات
const paginationUl = document.createElement("ul");
paginationUl.id = "pagination-ul";

sliderData.forEach((_, i) => {
  const li = document.createElement("li");
  li.setAttribute("data-index", i + 1);
  li.textContent = i + 1;
  paginationUl.appendChild(li);
});

indicators.appendChild(paginationUl);

const paginationsBullets = Array.from(paginationUl.querySelectorAll("li"));

paginationsBullets.forEach((bullet) => {
  bullet.onclick = function () {
    currentSlide = parseInt(this.getAttribute("data-index"));
    theChecker();
  };
});

function nextSlide() {
  if (currentSlide >= slidesCount) {
    currentSlide = 1;
  } else {
    currentSlide++;
  }
  theChecker();
}

function prevSlide() {
  if (currentSlide <= 1) {
    return;
  }
  currentSlide--;
  theChecker();
}

function theChecker() {
  slideNumberElement.textContent = `Slide #${currentSlide} of ${slidesCount}`;
  removeAllActive();

  sliderImages[currentSlide - 1].classList.add("active");
  paginationsBullets[currentSlide - 1].classList.add("active");

  prev.classList.toggle("disabled", currentSlide === 1);
  next.classList.toggle("disabled", currentSlide === slidesCount);
}

function removeAllActive() {
  sliderImages.forEach((img) => img.classList.remove("active"));
  paginationsBullets.forEach((li) => li.classList.remove("active"));
}

theChecker();


/**********************************/

/******************************************************/
/******************************************************/
/******************************************************/



/******************************************************/
/******************************************************/
/******************************************************/

/*********************************/



/******************************************/


/*********************************************************************************/


 
 
 /*********************************/

// lazy loading

document.addEventListener("DOMContentLoaded", () => {
  const style = document.createElement("style");
  style.textContent = `
    section { opacity: 0; transform: translateY(60px) scale(0.75); transition: all 1s cubic-bezier(0.25, 1, 0.5, 1); will-change: opacity, transform; }
    section.appear { opacity: 1; transform: translateY(0) scale(1); }
  `;
  document.head.appendChild(style);

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) entry.target.classList.add("appear");
        else {
          entry.target.classList.remove("appear");
          entry.target.style.animation = "none";
          entry.target.offsetHeight;
          entry.target.style.animation = "";
        }
      });
    },
    { threshold: 0.1 }
  );

  document.querySelectorAll("section").forEach((el) => observer.observe(el));

  const blockObserver = new MutationObserver(() => {
    document
      .querySelectorAll("section:not(.appear)")
      .forEach((el) => observer.observe(el));
  });
  blockObserver.observe(document.body, { childList: true, subtree: true });
});

/*****************************/


/************************************************/
/************************************************/
/************************************************/


/*********************************************************/
/*********************************************************/
/*********************************************************/
 
 /************************************/
 
 (function () {
    if (window.innerWidth > 991) {
        document.addEventListener('contextmenu', (e) => e.preventDefault());
        document.addEventListener('keydown', (e) => {
            if (e.key === 'F12' || 
                (e.ctrlKey && e.shiftKey && (e.key === 'I' || e.key === 'J')) || 
                (e.ctrlKey && e.key === 'U')) {
                e.preventDefault();
                return false;
            }
        });

        const detectDevTools = () => {
            const threshold = 150;
            if (window.outerWidth && window.innerWidth && (window.outerWidth - window.innerWidth > threshold || window.outerHeight - window.innerHeight > threshold)) {
                console.log("DevTools detected");
                // window.location.href = 'about:blank';  // قم بتعطيله للاختبار
            }
        };

        const detectDebugger = () => {
            const start = new Date().getTime();
            // debugger; // قم بتعطيله للاختبار
            const end = new Date().getTime();
            if (end - start > 100) {
                console.log("Debugger detected");
                // window.location.href = 'about:blank';  // قم بتعطيله للاختبار
            }
        };

        const startDetection = () => {
            setInterval(() => {
                detectDevTools();
                detectDebugger();
            }, 500); 
        };

        window.onload = () => {
            detectDevTools();
            detectDebugger();
            startDetection();
        };
    }
})();
/************************************/

// إعدادات الثيمات
const themes = [
  { name: "أساسي", color: "var(--col-back)", class: "default" },

  { name: "ثانوي", color: "#ecd0c9", class: "dark" },
];

/**  اعدادات الثيم*/



document.addEventListener("DOMContentLoaded", function () {
  // إعدادات الخطوط
  const fonts = [
    {
      name: "الأساسي (Marhey)",
      family: "'Marhey', sans-serif",
      import:
        "https://fonts.googleapis.com/css2?family=Marhey:wght@300..700&display=swap",
    },
    {
      name: "Cairo",
      family: "'Cairo', sans-serif",
      import: "https://fonts.googleapis.com/css2?family=Cairo&display=swap",
    },
    {
      name: "Amiri",
      family: "'Amiri', serif",
      import: "https://fonts.googleapis.com/css2?family=Amiri&display=swap",
    },
    {
      name: "Tajawal",
      family: "'Tajawal', sans-serif",
      import: "https://fonts.googleapis.com/css2?family=Tajawal&display=swap",
    },
    {
      name: "Noto Kufi Arabic",
      family: "'Noto Kufi Arabic', sans-serif",
      import:
        "https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic&display=swap",
    },
  ];

  fonts.forEach((f) => {
    if (f.import) {
      const link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = f.import;
      document.head.appendChild(link);
    }
  });

  const settingsBtn = document.createElement("button");
  settingsBtn.innerHTML = "⚙";
  settingsBtn.id = "settings-btn";
  document.body.appendChild(settingsBtn);

  const settingsPanel = document.createElement("div");
  settingsPanel.id = "settings-panel";
  document.body.appendChild(settingsPanel);

  const style = document.createElement("style");
  style.textContent = `
    #settings-btn {
      position: fixed;
      left: 16px;
      top: 30%;
      cursor: pointer;
      z-index: 10;
      font-size: 30px;
      border: none;
      border-radius: 30%;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 12px #0069B5;
      transition: all 0.3s ease;
      transform: translateX(-30px);
      opacity: 0.95;
      color: #fff;
      background-color: var(--main-color);
      border: 2px solid white;
    }
    #settings-btn:hover {
      transform: translateX(0);
      opacity: 1;
    }
    #settings-panel {
      position: fixed;
      left: 72px;
      top: 25%;
      background: var(--main-color);
      border-radius: 14px;
      z-index: 9999;
      box-shadow: 0 5px 10px var(main-color);
      min-width: 360px;
      max-width: 90vw;
      padding: 24px 30px;
      transform: scale(0.9);
      opacity: 0;
      transition: all 0.3s ease;
      pointer-events: none;
      color: #fff;
    }
  @media(max-width:768px) {
      #settings-panel {
      left: 0px;
      min-width: 300px;
      max-width: 90vw;
      }
    }
    #settings-panel.visible {
      transform: scale(1);
      opacity: 1;
      pointer-events: auto;
    }
    .settings-header {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
    }
    .close-btn {
      cursor: pointer;
      font-size: 30px;
    }
    .setting-group {
      margin-bottom: 28px;
    }
    .setting-label {
      font-weight: 700;
      font-size: 17px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .toggle-icon {
      margin-right: 10px;
      font-size: 20px;
      transition: transform 0.3s ease;
    }
    .theme-options, .font-options, .font-size-controls, .translate-container {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s ease, padding 0.5s ease;
      padding-left: 10px;
      border-left: 3px solid #4a6bff;
      margin-top: 12px;
      border-radius: 8px;
      background-color: #f7f9ff;
    }
    .theme-options.open, .font-options.open, .font-size-controls.open, .translate-container.open {
      max-height: 280px;
      padding: 5px;
    }
    .theme-preview, .font-preview {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 11px 15px;
      border-radius: 10px;
      cursor: pointer;
      margin-bottom: 10px;
      font-size: 16px;
      background: #fff;
      color: var(--main-color);
    }
    .theme-preview {
      color: var(--main-color);
    }
    .color-circle {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #ccc;
    }
    .font-size-controls {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .font-size-controls button {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background-color: #4a6bff;
      color: white;
      font-size: 22px;
      cursor: pointer;
    }
    .font-size-display {
      font-size: 18px;
      width: 38px;
      text-align: center;
      font-weight: 700;
      color: #334;
    }
    .reset-size-btn {
      background-color: #888 !important;
      width: 38px;
      font-size: 28px;
    }
  `;
  document.head.appendChild(style);

  settingsPanel.innerHTML = `
    <div class="settings-header">
      <span>إعدادات المتجر</span>
      <span class="close-btn" title="إغلاق الإعدادات">&times;</span>
    </div>

    <div class="setting-group">
      <label class="setting-label" id="theme-label">
        اللون <span class="toggle-icon" id="toggle-theme">+</span>
      </label>
      <div class="theme-options" id="theme-options"></div>
    </div>

    <div class="setting-group">
      <label class="setting-label" id="font-label">
        نوع الخط <span class="toggle-icon" id="toggle-font">+</span>
      </label>
      <div class="font-options" id="font-options"></div>
    </div>

    <div class="setting-group">
      <label class="setting-label" id="font-size-label">
        حجم النص <span class="toggle-icon" id="toggle-font-size">+</span>
      </label>
      <div class="font-size-controls" id="font-size-controls">
        <button id="font-size-decrease">−</button>
        <span class="font-size-display" id="font-size-display">16</span>
        <button id="font-size-increase">+</button>
        <button class="reset-size-btn" id="font-size-reset">×</button>
      </div>
    </div>

    <div class="setting-group">
      <label class="setting-label" id="translate-label">
        الترجمة <span class="toggle-icon" id="toggle-translate">+</span>
      </label>
      <div class="translate-container" id="translate-container"></div>
    </div>
  `;

  const themeOptionsContainer = document.getElementById("theme-options");
  const fontOptionsContainer = document.getElementById("font-options");
  const fontSizeControls = document.getElementById("font-size-controls");
  const fontSizeDisplay = document.getElementById("font-size-display");
  const translateContainer = document.getElementById("translate-container");

  const toggleThemeIcon = document.getElementById("toggle-theme");
  const toggleFontIcon = document.getElementById("toggle-font");
  const toggleFontSizeIcon = document.getElementById("toggle-font-size");
  const toggleTranslateIcon = document.getElementById("toggle-translate");

  function toggleSection(sectionEl, toggleIcon) {
    const isOpen = sectionEl.classList.toggle("open");
    toggleIcon.textContent = isOpen ? "×" : "+";
  }

  document.getElementById("theme-label").addEventListener("click", () => {
    toggleSection(themeOptionsContainer, toggleThemeIcon);
  });
  document.getElementById("font-label").addEventListener("click", () => {
    toggleSection(fontOptionsContainer, toggleFontIcon);
  });
  document.getElementById("font-size-label").addEventListener("click", () => {
    toggleSection(fontSizeControls, toggleFontSizeIcon);
  });
  document.getElementById("translate-label").addEventListener("click", () => {
    toggleSection(translateContainer, toggleTranslateIcon);
    if (!document.getElementById("google_translate_element")) {
      const container = document.createElement("div");
      container.id = "google_translate_element";
      translateContainer.appendChild(container);

      window.googleTranslateElementInit = function () {
        new google.translate.TranslateElement(
          {
            pageLanguage: "ar",
            includedLanguages: "ar,en",
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
          },
          "google_translate_element"
        );
      };

      const script = document.createElement("script");
      script.src =
        "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
      document.body.appendChild(script);
    }
  });

  function selectThemeOption(index) {
    document.querySelectorAll(".theme-preview").forEach((el, i) => {
      el.classList.toggle("selected", i === index);
    });
  }

  themes.forEach((theme, i) => {
    const option = document.createElement("div");
    option.className = "theme-preview";
    option.innerHTML = `<span class="color-circle" style="background: ${theme.color};"></span><span>${theme.name}</span>`;
    option.addEventListener("click", () => {
      applyTheme(theme);
      selectThemeOption(i);
      localStorage.setItem("themeIndex", i);
    });
    themeOptionsContainer.appendChild(option);
  });

  function selectFontOption(index) {
    document.querySelectorAll(".font-preview").forEach((el, i) => {
      el.classList.toggle("selected", i === index);
    });
  }

  fonts.forEach((font, i) => {
    const option = document.createElement("div");
    option.className = "font-preview";
    option.style.fontFamily = font.family;
    option.textContent = font.name;
    option.addEventListener("click", () => {
      applyFont(font);
      selectFontOption(i);
      localStorage.setItem("fontIndex", i);
    });
    fontOptionsContainer.appendChild(option);
  });

  function applyTheme(theme) {
    // إزالة الكلاسات السابقة
    document.body.classList.remove("light", "dark");

    // إضافة الكلاس الجديد فقط إذا لم يكن الثيم أساسي (default)
    if (theme.class !== "default") {
      document.body.classList.add(theme.class);
    }

    // تطبيق لون الخلفية
    if (theme.class === "default") {
      document.documentElement.style.removeProperty("--col-back");
    } else {
      document.documentElement.style.setProperty("--col-back", theme.color);
    }
  }

  function applyFont(font) {
    document.documentElement.style.setProperty("--font-family", font.family);
  }

  const defaultFontSizePx = 16;
  let currentFontSizePx = defaultFontSizePx;

  function applyFontSize(sizePx) {
    const textElements = document.querySelectorAll(
      "body, body *:not(script):not(style):not(link)"
    );
    textElements.forEach((el) => {
      const computedStyle = window.getComputedStyle(el);
      if (computedStyle.fontSize !== "0px") {
        el.style.fontSize = sizePx + "px";
      }
    });
    fontSizeDisplay.textContent = sizePx;
    localStorage.setItem("fontSizePx", sizePx);
  }

  document
    .getElementById("font-size-increase")
    .addEventListener("click", () => {
      currentFontSizePx++;
      applyFontSize(currentFontSizePx);
    });
  document
    .getElementById("font-size-decrease")
    .addEventListener("click", () => {
      if (currentFontSizePx > 10) {
        currentFontSizePx--;
        applyFontSize(currentFontSizePx);
      }
    });
  document.getElementById("font-size-reset").addEventListener("click", () => {
    currentFontSizePx = defaultFontSizePx;
    applyFontSize(currentFontSizePx);
    document.querySelectorAll('[style*="font-size"]').forEach((el) => {
      el.style.fontSize = "";
    });
  });

  function loadPreferences() {
    const savedThemeIndex = localStorage.getItem("themeIndex");
    if (savedThemeIndex !== null && themes[savedThemeIndex]) {
      applyTheme(themes[savedThemeIndex]);
      selectThemeOption(parseInt(savedThemeIndex));
    }

    const savedFontIndex = localStorage.getItem("fontIndex");
    if (savedFontIndex !== null && fonts[savedFontIndex]) {
      applyFont(fonts[savedFontIndex]);
      selectFontOption(parseInt(savedFontIndex));
    }

    const savedFontSize = localStorage.getItem("fontSizePx");
    if (savedFontSize !== null) {
      currentFontSizePx = parseInt(savedFontSize);
      applyFontSize(currentFontSizePx);
    } else {
      applyFontSize(defaultFontSizePx);
    }
  }

  document.querySelector(".close-btn").addEventListener("click", () => {
    settingsPanel.classList.remove("visible");
  });

  settingsBtn.addEventListener("click", function (e) {
    e.stopPropagation();
    settingsPanel.classList.toggle("visible");
  });

  document.addEventListener("click", function (e) {
    if (!settingsPanel.contains(e.target) && e.target !== settingsBtn) {
      settingsPanel.classList.remove("visible");
    }
  });

  loadPreferences();
});