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

    // التحقق إذا كانت الصفحة الرئيسية فقط
    if (window.location.pathname !== "/") return;

    const items = [  
        { name: "منتجات شتوية", url: "https://lyara-ksa.com/منتجات-شتويه/c1031018385", img: "https://cdn.salla.sa/VqoNzW/20c480cf-8938-4e30-8802-43bcfd811b11-989.97493734336x1000-Us5yqZzCNiri2H3jqO6oBSvRUqCCbilYdsxoOExA.jpg" },  
        { name: "هدايا رجالية", url: "https://lyara-ksa.com/هدايا-رجاليه/c256980626", img: "https://cdn.salla.sa/VqoNzW/86327a25-9538-4311-a971-1443c97b4e7d-962.40601503759x1000-CPv2DVQ9aBbRdHzt294JIVXtKScyf3O8UKcrWEfQ.jpg" },  
        { name: "هدايا نسائية", url: "https://lyara-ksa.com/هدايا-نسائيه/c723219612", img: "https://cdn.salla.sa/VqoNzW/7ec20939-4593-4a33-a84b-e2560aca671a-929.82456140351x1000-NIUHET08e8T0n60tHkPo6VG5WzykiUR7IB4dVRUv.jpg" },  
        { name: "اكسسوارات السياره", url: "https://lyara-ksa.com/اكسسوارات-السياره/c81892253", img: "https://cdn.salla.sa/VqoNzW/d271cc7d-ffad-4412-aea7-4b5082a127a5-979.94987468672x1000-cG2ytkuPmtH3fPLEIJ3UX17xXys1lKOdfPSeWwvH.jpg" },  
        { name: "ازياء الاطفال", url: "https://lyara-ksa.com/ازياء-اطفال/c548131231", img: "https://cdn.salla.sa/VqoNzW/6c245c79-74c1-4c39-bfe4-c6cf3a7b4b50-1000x904.7619047619-ked4elaQj2AVE60F3UIpMEZXHlBX7WhgCKT5r7h5.jpg" },  
        { name: "مباخر بالاسماء", url: "https://lyara-ksa.com/مباخر-بالاسماء/c1456386718", img: "https://cdn.salla.sa/VqoNzW/1131dd67-a5e1-4ee3-ab4f-36d9c4b94c47-1000x908.88382687927-x9Gte7ceSIn25kvJhdLbSstaPSFiUgW3F7v8dSCd.jpg" }  
    ];  

    const container = document.createElement("div");  
    container.className = "quick-menu-icons-wrapper";  

    const title = document.createElement("h2");  
    title.className = "quick-menu-title";  
    title.textContent = "تسوق حسب الأقسام";  
    container.appendChild(title);  

    const menu = document.createElement("div");  
    menu.className = "quick-menu-icons";  

    let html = `<div class="menu-scroll">`;  

    items.forEach(item => {  
        html += `  
            <a href="${item.url}" class="menu-item">  
                <img src="${item.img}" alt="${item.name}">  
                <span>${item.name}</span>  
            </a>  
        `;  
    });  

    html += `</div>`;  
    menu.innerHTML = html;  
    container.appendChild(menu);  

    const firstSlider = document.querySelector(".home-slider, .s-main-slider, .s-slider-block") || document.body.firstElementChild;
    firstSlider.insertAdjacentElement("afterend", container);

});

// ============================
// 💬 زر واتساب العائم
// ============================
document.addEventListener("DOMContentLoaded", function () {
  if (!document.getElementById("whatsapp-button")) {
    const wa = document.createElement("a");
    wa.href = "https://wa.me/966543907505?text=مرحباً%20أريد%20المساعدة";
    wa.id = "whatsapp-button";
    wa.target = "_blank";
    wa.rel = "noopener";

    const icon = document.createElement("img");
    icon.src = "https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg";
    icon.alt = "WhatsApp";

    const text = document.createElement("span");
    text.textContent = "خدمة العملاء";

    wa.appendChild(icon);
    wa.appendChild(text);
    document.body.appendChild(wa);

    const style = document.createElement("style");
    style.textContent = `
      #whatsapp-button {
        position: fixed;
        bottom: 20px;
        left: 20px;
        background: #25d366;
        color: white;
        padding: 8px 12px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        text-decoration: none;
        z-index: 9999;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        font-weight: bold;
      }
      #whatsapp-button img {
        width: 24px;
        margin-right: 6px;
      }
      #whatsapp-button span {
        font-size: 14px;
        white-space: nowrap;
      }
    `;
    document.head.appendChild(style);
  }
});

// ============================
// 📦 حجم بطاقات المنتجات
// ============================
document.addEventListener('DOMContentLoaded', function() {
  function fixSlider(containerSelector, perRow) {
    const containers = document.querySelectorAll(containerSelector);
    if (!containers.length) return;

    containers.forEach(container => {
      if (!container.querySelector('.s-product-card-vertical, .s-products-slider-card')) return;
      const slides = container.querySelectorAll('.swiper-slide, .s-products-slider-card');
      slides.forEach(s => {
        s.style.flex = '0 0 ' + (100 / perRow) + '%';
        s.style.maxWidth = (100 / perRow) + '%';
        s.style.boxSizing = 'border-box';
        s.style.padding = '0';
      });

      const wrapper = container.querySelector('.swiper-wrapper');
      if (wrapper) wrapper.style.gap = '0';
    });
  }

  // الصفحة الرئيسية = 3 بطاقات
  if (document.body.classList.contains('home-page')) {
    fixSlider('.s-slider-container', 3);
    fixSlider('.s-products-slider-wrapper', 3);
  }

  // صفحات التصنيفات = 2 بطاقات
  if (document.body.classList.contains('collection-page')) {
    fixSlider('.s-slider-container', 2);
    fixSlider('.s-products-slider-wrapper', 2);
  }

  // عند تغيير حجم الشاشة
  let resizeTimer;
  window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
      const per = (window.innerWidth <= 768) ? 2 : 3;
      fixSlider('.s-slider-container', per);
      fixSlider('.s-products-slider-wrapper', per);
    }, 120);
  });

  // مراقبة تغير DOM (في حال تحميل ديناميكي)
  const observer = new MutationObserver(() => {
    const per = document.body.classList.contains('collection-page')
      ? 2
      : (window.innerWidth <= 768 ? 2 : 3);
    fixSlider('.s-slider-container', per);
    fixSlider('.s-products-slider-wrapper', per);
  });
  observer.observe(document.body, { childList: true, subtree: true });
});

document.addEventListener("DOMContentLoaded", () => {

  function addDiscountBadge() {
    const cards = document.querySelectorAll(".s-product-card-vertical, .s-product-card");

    cards.forEach(card => {
      // منع تكرار الشارة
      if (card.querySelector(".discount-badge")) return;

      const oldPriceEl = card.querySelector("span"); // السعر القديم
      const newPriceEl = card.querySelector("h4");   // السعر الجديد

      if (!oldPriceEl || !newPriceEl) return;

      function arabicToNumber(text) {
        const arabicNumbers = ["٠","١","٢","٣","٤","٥","٦","٧","٨","٩"];
        return parseFloat(text.replace(/[٠-٩]/g, d => arabicNumbers.indexOf(d)));
      }

      const oldPrice = arabicToNumber(oldPriceEl.textContent);
      const newPrice = arabicToNumber(newPriceEl.textContent);

      if (isNaN(oldPrice) || isNaN(newPrice) || oldPrice <= newPrice) return;

      const discount = Math.round(((oldPrice - newPrice) / oldPrice) * 100);

      const badge = document.createElement("span");
      badge.className = "discount-badge";
      badge.textContent = `${discount}%`;

      // إضافة الشارة داخل عنصر الصورة
      const imgContainer = card.querySelector(".s-product-card-image, .s-product-card-gallery") || card;
      imgContainer.style.position = "relative"; // ضروري للتموضع
      imgContainer.appendChild(badge);
    });
  }

  addDiscountBadge();

  // تحديث الشارات ديناميكياً عند إضافة منتجات جديدة
  new MutationObserver(addDiscountBadge).observe(document.body, {
    childList: true,
    subtree: true,
  });

});

// CSS لشارة الخصم أسفل الصورة
const style = document.createElement("style");
style.textContent = `
.discount-badge {
  position: absolute;
  bottom: 0px;           /* من الأسفل بدل top */
  left: 93%;             /* توسيط أفقي */
  transform: translateX(-50%); /* لتوسيط الشارة بالضبط */
  background: red;
  color: white;
  font-weight: bold;
  padding: 1px 1px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 10;
}
`;
document.head.appendChild(style);

document.addEventListener("DOMContentLoaded", function () {
  if (!document.querySelector(".bottom-bar")) {
    // إنشاء الحاوية
    const container = document.createElement("div");
    container.className = "bottom-bar";

    const ul = document.createElement("ul");
    ul.className = "bottom-bar-list";

    // الأزرار مع روابطها الحقيقية
    const buttons = [
      { class: "home", icon: "sicon-house-door", text: "الرئيسية", link: "/" },
      { class: "menu", icon: "sicon-menu", text: "الأقسام", link: "#mobile-menu" },
      { class: "cart", icon: "sicon-shopping-bag", text: "السلة", link: "/cart", countClass: "s-cart-summary-count" },
      { class: "search", icon: "sicon-search", text: "بحث", link: "#search" },
      { class: "login", icon: "sicon-user-circle", text: "الحساب", link: "/profile" }
    ];

    buttons.forEach(btn => {
      const li = document.createElement("li");
      li.className = "bottom-bar-button";

      let countSpan = "";
      if (btn.countClass) {
        countSpan = `<span class="${btn.countClass}">0</span>`;
      }

      li.innerHTML = `<a href="${btn.link}"><i class="${btn.icon}"></i><span>${btn.text}</span>${countSpan}</a>`;
      ul.appendChild(li);
    });

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

    // CSS
    const style = document.createElement("style"); 
    style.textContent = `
      .bottom-bar {
        position: fixed;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        background:  #fff;
        padding: 5px 85px;
        border-radius: 15px;
        display: flex;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        z-index: 99999;
        backdrop-filter: blur(10px);
        transition: opacity .25s ease, visibility .25s ease;
        color:#000;
      }
      .bottom-bar.hidden { opacity: 0; visibility: hidden; }
      .bottom-bar-list { display: flex; flex-direction: row; gap: 30px; margin: 0; padding: 0; list-style: none; }
      .bottom-bar-button a { text-align: center; display: flex; flex-direction: column; align-items: center; text-decoration: none; position: relative; }
      .bottom-bar-button i { font-size: 18px; margin-bottom: 1px; }
      .bottom-bar-button span { font-size: 10px; font-weight: 600; color:#000; }
      .s-cart-summary-count {
        position: absolute;
        top: -4px;
        right: -8px;
        background: red;
        color: white;
        font-size: 10px;
        padding: 2px 5px;
        border-radius: 50%;
      }
      .bottom-bar-button:hover { transform: scale(1.1); transition: transform 0.2s ease; }
    `;
    document.head.appendChild(style);

    // ---------------------
    // تحديث عداد السلة تلقائي
    // ---------------------
    function updateCartCount() {
      const mainCartCount = document.querySelector(".s-cart-summary-count");
      const bottomCartCount = container.querySelector(".s-cart-summary-count");

      if (mainCartCount && bottomCartCount) {
        bottomCartCount.textContent = mainCartCount.textContent;
      }
    }

    setInterval(updateCartCount, 1000);

    // ---------------------
    // إخفاء تلقائي آمن
    // ---------------------
    function toggleBottomBar() {
      const popups = document.querySelectorAll(`
        .active,
        .open,
        .show,
        [aria-expanded="true"],
        [data-angelmodal-open],
        .drawer-open,
        .modal,
        .salla-modal,
        .side-menu,
        #mobile-menu
      `);
       
      let visiblePopup = false;

      popups.forEach(el => {
        if (!el || container.contains(el)) return;
        const style = window.getComputedStyle(el);
        const op = parseFloat(style.opacity || "1");
        if (style.display !== "none" && style.visibility !== "hidden" && op > 0.01 && el.offsetWidth > 0 && el.offsetHeight > 0) {
          visiblePopup = true;
        }
      });

      if (visiblePopup) {
        container.classList.add("hidden");
      } else {
        container.classList.remove("hidden");
      }
    }

    ['click','keyup','mouseover'].forEach(evt => {
      window.addEventListener(evt, toggleBottomBar, { passive:true });
    });

    toggleBottomBar();
    updateCartCount();

    // =====================
    // ✅ تشغيل البحث (الإضافة الوحيدة)
    // =====================
    document.addEventListener("click", function (e) {
      const searchLink = e.target.closest('a[href="#search"]');
      if (!searchLink) return;

      e.preventDefault();

      const realSearchBtn =
        document.querySelector('[data-search-trigger]') ||
        document.querySelector('.s-header-search') ||
        document.querySelector('.header-search-button');

      if (realSearchBtn) {
        realSearchBtn.click();
      }
    });

  }
});