/* Add custom Js code below */ 
/* Add custom Js code below */ 
///////////////////////////////////////////////////////
document.addEventListener("DOMContentLoaded", function() {
    const sections = document.querySelectorAll('section');

    function checkVisibility() {
        sections.forEach(section => {
            const position = section.getBoundingClientRect();
            if (position.top < window.innerHeight && position.bottom >= 0) {
                section.classList.add('visible');
            } else {
                section.classList.remove('visible');
            }
        });
    }

    window.addEventListener("scroll", checkVisibility);
    checkVisibility(); // Check on load
});





/* Add custom Js code below */ 
document.querySelectorAll('a[href=""], a[href="#"]').forEach(link => {
    link.addEventListener('click', event => {
        event.preventDefault();  
    });
});

document.addEventListener("DOMContentLoaded", function () {
    const sections = document.querySelectorAll("section");
  
    function checkVisibility() {
      sections.forEach((section) => {
        const position = section.getBoundingClientRect();
        if (position.top < window.innerHeight && position.bottom >= 0) {
          section.classList.add("visible");
        } else {
          section.classList.remove("visible");
        }
      });
    }
  
   
  
    // Create the WhatsApp button container
    var whatsappFloat = document.createElement('div');
    whatsappFloat.className = 'whatsapp-float';
  
    // Create the WhatsApp popup container
    var whatsappPopup = document.createElement('div');
    whatsappPopup.className = 'whatsapp-popup';
    whatsappPopup.style.display = 'none'; // Initially hidden
  
    // Create the popup content with avatar, text, input, and button
    var popupContent = `
      <div class="popup-header">
        <div class="avatar-container">
          <img src="https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg" alt="Avatar" class="avatar-img">
          <span class="support-text">الدعم الفني</span>
        </div>
        <button class="close-popup">×</button>
      </div>
      <div class="popup-body">
        <p>مرحباً بك، نحن متواجدون لخدمتك</p>
        <p>برجاء كتابة رسالتك:</p>
        <input type="text" id="whatsapp-message" placeholder="اكتب رسالتك هنا" style="width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px;">
        <button id="send-whatsapp" class="whatsapp-button">إرسال</button>
        <div class="adfaz-container">
          <a href="https://adfaz.sa/" target="_blank" class="adfaz-link">
            <img src="https://i.ibb.co/P4YVDmW/Black-Gold-White-Luxury-Royal-Crown-Logo.png" alt="Adfaz" class="adfaz-img">
            <span class="adfaz-text">برمجة وتطوير أدفاز</span>
          </a>
        </div>
      </div>
    `;
  
    whatsappPopup.innerHTML = popupContent;
  
    // Append the popup to the container
    whatsappFloat.appendChild(whatsappPopup);
  
    // Create the WhatsApp icon
    var whatsappIcon = new Image();
    whatsappIcon.src = 'https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg';
    whatsappIcon.alt = 'WhatsApp';
    whatsappIcon.className = 'whatsapp-icon';
  
    // Append the icon to the container
    whatsappFloat.appendChild(whatsappIcon);
  
    // Append the WhatsApp button to the body
    document.body.appendChild(whatsappFloat);
  
    // Add CSS styles dynamically
    var style = document.createElement('style');
    style.innerHTML = `
    .whatsapp-float {
      position: fixed;
      bottom: 120px;
      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: 90px;
      left: 20px;
      width: 300px;
      background-color: #f0f0f0;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      padding: 15px;
      z-index: 101;
    }
  
    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    .avatar-container {
      display: flex;
      align-items: center;
    }
  
    .avatar-img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
    }
  
    .support-text {
      font-size: 16px;
      font-weight: bold;
    }
  
    .close-popup {
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
    }
  
    .popup-body {
    }
  
    .whatsapp-button {
      display: block;
      width: 100%;
      text-align: center;
      background-color: #25d366;
      color: white;
      padding: 10px 15px;
      border-radius: 5px;
      text-decoration: none;
      margin-top: 10px;
    }
  
    .whatsapp-button:hover {
      background-color: #1ebe55;
    }
  
    .adfaz-container {
      display: flex;
      align-items: center;
    }
  
    .adfaz-link {
      display: flex;
      text-decoration: none;
      color: black;
    }
  
    .adfaz-img {
        width: 30px;
        height: 30px;
        margin-left: 3px;
    }
  
    .adfaz-text {
      font-size: 12px;
    }
    `;
    document.head.appendChild(style);
  
    // Toggle the popup when the icon is clicked
    whatsappIcon.addEventListener('click', function() {
      const isVisible = whatsappPopup.style.display === 'block';
      whatsappPopup.style.display = isVisible ? 'none' : 'block';
    });
  
    // Close the popup when the close button is clicked
    const closePopupButton = document.querySelector('.close-popup');
    if (closePopupButton) {
      closePopupButton.addEventListener('click', function() {
        whatsappPopup.style.display = 'none';
      });
    }
  
    // Send the message to WhatsApp
    document.getElementById('send-whatsapp').addEventListener('click', function() {
      var message = document.getElementById('whatsapp-message').value;
      if (message.trim().length > 0) {
        var whatsappLink = `https://wa.me/+966540964787?text=${encodeURIComponent(message)}`;
        window.open(whatsappLink, '_blank');
      } else {
        alert('يرجى كتابة رسالة قبل الإرسال.');
      }
    });
  });


document.addEventListener("DOMContentLoaded", () => {
    // إنشاء عنصر الحاوية الرئيسي
    const faqSection = document.createElement("section");
    faqSection.id = "faq-section";
    faqSection.style.cssText = `
        background-color: #f6dbd0;
        padding: 2rem;
        margin: 2rem auto;
        width: 90%;
        max-width: 900px;
        border-radius: 15px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    `;

    // إضافة عنوان القسم
    const faqTitle = document.createElement("h2");
    faqTitle.innerText = "الأسئلة الشائعة";
    faqTitle.style.cssText = `
        text-align: center;
        color:#ffffff;
        margin-bottom: 2rem;
        font-size: 2rem;
        font-weight: 700;
        border-bottom: 2px solid #36404A;
        padding-bottom: 0.5rem;
    `;
    faqSection.appendChild(faqTitle);

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

    // إنشاء حاوية للأسئلة
    const faqContainer = document.createElement("div");
    faqContainer.style.cssText = `
        display: flex;
        flex-direction: column;
        gap: 1rem;
    `;
    faqSection.appendChild(faqContainer);

    // إنشاء الأسئلة والإجابات بتصميم بطاقات
    faqData.forEach(({ question, answer }, index) => {
        const faqItem = document.createElement("div");
        faqItem.className = `faq-item-${index}`;
        faqItem.style.cssText = `
            background-color: #ffffff;
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.3s ease;
        `;

        const questionHeader = document.createElement("div");
        questionHeader.style.cssText = `
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background-color:#fffff;
            cursor: pointer;
            color: #000000;
            font-size: 1.1rem;
            font-weight: 600;
        `;

        const questionText = document.createElement("span");
        questionText.innerText = question;

        const toggleIcon = document.createElement("span");
        toggleIcon.innerText = "+";
        toggleIcon.style.cssText = `
            font-size: 1.5rem;
            transition: transform 0.3s ease;
        `;

        questionHeader.appendChild(questionText);
        questionHeader.appendChild(toggleIcon);
        faqItem.appendChild(questionHeader);

        const answerContent = document.createElement("div");
        answerContent.style.cssText = `
            padding: 0 1rem 1rem 1rem;
            color: #000000;
            font-size: 1rem;
            display: none;
            background-color: #fff;
        `;
        answerContent.innerText = answer;
        faqItem.appendChild(answerContent);

        // إضافة تفاعل النقر
        questionHeader.addEventListener("click", () => {
            const isOpen = answerContent.style.display === "block";
            answerContent.style.display = isOpen ? "none" : "block";
            toggleIcon.innerText = isOpen ? "+" : "-";
            toggleIcon.style.transform = isOpen ? "rotate(0deg)" : "rotate(45deg)";
            faqItem.style.boxShadow = isOpen ? "0 6px 12px rgba(0, 0, 0, 0.1)" : "0 10px 20px rgba(0, 0, 0, 0.2)";
        });

        faqContainer.appendChild(faqItem);
    });

    // إضافة القسم قبل الفوتر
    const footer = document.querySelector("footer");
    if (footer) {
        footer.parentNode.insertBefore(faqSection, footer);
    } else {
        document.body.appendChild(faqSection); // كبديل إذا لم يوجد فوتر
    }
});












/////////////////////////////////////////////////


function enhanceCards() {
    const cards = document.querySelectorAll('.s-product-card-entry');
    if (cards.length === 0) return;

    cards.forEach((card, index) => {
        if (card.querySelector('.product-rating')) return;

        // نجوم التقييم
        const stars = document.createElement('div');
        stars.className = 'product-rating';
        const rating = Math.floor(Math.random() * 2) + 4;
        for (let i = 0; i < 5; i++) {
            const star = document.createElement('span');
            star.innerHTML = i < rating ? '★' : '☆';
            stars.appendChild(star);
        }
        stars.style.color = '#FFD700';
        stars.style.fontSize = '18px';
        stars.style.margin = '6px 0';
        card.querySelector('.s-product-card-content-main')?.appendChild(stars);

        // بادج (جديد أو خصم)
        const badge = document.createElement('div');
        badge.className = 'product-badge';
        badge.textContent = index % 2 === 0 ? 'جديد' : 'خصم 20%';
        badge.style.cssText = `
           position: absolute;
            top: 8px;
            right: 8px;
            background-color: #8b2d3f;
            color: white;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: bold;
            z-index: 10;
            display:none;
            
            
        `;
        card.style.position = 'relative';
        card.appendChild(badge);
    });
}

let tryCount = 0;
const interval = setInterval(() => {
    enhanceCards();
    tryCount++;
    if (tryCount > 10) clearInterval(interval);
}, 1000)