/* Add custom Js code below */

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


  // إضافة الشريط إلى بداية جسم الصفحة
  document.body.prepend(discountBanner);

  // إضافة الأنماط (CSS) باستخدام JavaScript
  const style = document.createElement("style");
  style.innerHTML = `
    #discount-banner {
      width: 100%;
      background-color: #E94F4F; /* لون الخلفية */
      color: #fff;
      height:35px; /* لون النص */
      font-size: 16px; /* حجم النص */
      font-weight: bold;
      text-align: center;
      overflow: hidden; /* لإخفاء النص عند الخروج */
      white-space: nowrap;
      padding: 10px 0;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      position: absolute; /* تثبيت الشريط أعلى الصفحة */
      top: 0;
      z-index: 1000;
    }

    #discount-banner p {
      display: inline-block;
      animation: scroll-text 20s linear infinite; /* الحركة */
    }

    @keyframes scroll-text {
      0% {
        transform: translateX(125%); /* يبدأ من خارج الشاشة يمينًا */
      }
      100% {
        transform: translateX(-125%); /* ينتهي خارج الشاشة يسارًا */
      }
    }
  `;
  document.head.appendChild(style);

  // تعديل الـ body أو header لتجنب تغطية الشريط
  const header = document.querySelector("header"); // حدد الـ header إذا كان موجودًا
  const bannerHeight = discountBanner.offsetHeight; // ارتفاع الشريط

  if (header) {
    // إذا كان هناك header، أضف margin-top
    header.style.marginTop = `${bannerHeight}px`;
  } else {
    // إذا لم يكن هناك header، أضف padding-top إلى body
    document.body.style.paddingTop = `${bannerHeight}px`;
  }
});



//navigation menu slider


document.addEventListener("DOMContentLoaded", () => {
  const header = document.querySelector("header");
  const menuSlider = document.createElement("div");
  menuSlider.classList.add("menu-slider");

  menuSlider.innerHTML = `
    <div class="slider-wrapper">
      <div class="slider-item"><a href="https://teraa-sa.com/%D8%AC%D9%85%D9%8A%D8%B9-%D8%A7%D9%84%D8%B9%D8%A8%D8%A7%D9%8A%D8%A7%D8%AA/c1221930751">جميع العبايات</a></div>
      <div class="slider-item"><a href="https://teraa-sa.com/%D8%A7%D9%84%D8%A7%D9%83%D8%AB%D8%B1-%D9%85%D8%A8%D9%8A%D8%B9%D8%A7/c1222255355">الأكثر مبيعا</a></div>
      <div class="slider-item"><a href="https://teraa-sa.com/%D8%AA%D8%AE%D9%81%D9%8A%D8%B6%D8%A7%D8%AA-%D8%A7%D9%84%D8%B4%D8%AA%D8%A7%D8%A1/c2071414964">تخفيضات الشتاء </a></div>
      <div class="slider-item"><a href="https://teraa-sa.com/%D8%B9%D8%A8%D8%A7%D9%8A%D8%A7%D8%AA-%D9%85%D8%B7%D8%B1%D8%B2%D8%A9/c712107217">عبايات مطرزة </a></div>
      <div class="slider-item"><a href="https://teraa-sa.com/%D8%B9%D8%A8%D8%A7%D9%8A%D8%A7%D8%AA-%D8%B3%D8%A7%D8%AF%D8%A9/c1047442177">عبايات سادة</a></div>
      <div class="slider-item"><a href="https://teraa-sa.com/%D9%86%D9%82%D8%A7%D8%A8%D8%A7%D8%AA-%D9%88%D8%B7%D8%B1%D8%AD/c128617559"> طرح ونقابات </a></div>
      
  `;

  header.insertAdjacentElement("afterend", menuSlider);

  const sliderWrapper = document.querySelector(".slider-wrapper");
  let isDown = false;
  let startX;
  let scrollLeft;

  sliderWrapper.addEventListener("mousedown", (e) => {
    isDown = true;
    sliderWrapper.classList.add("active");
    startX = e.pageX - sliderWrapper.offsetLeft;
    scrollLeft = sliderWrapper.scrollLeft;
  });

  sliderWrapper.addEventListener("mouseleave", () => {
    isDown = false;
    sliderWrapper.classList.remove("active");
  });

  sliderWrapper.addEventListener("mouseup", () => {
    isDown = false;
    sliderWrapper.classList.remove("active");
  });

  sliderWrapper.addEventListener("mousemove", (e) => {
    if (!isDown) return;
    e.preventDefault();
    const x = e.pageX - sliderWrapper.offsetLeft;
    const walk = (x - startX) * 3; 
    sliderWrapper.scrollLeft = scrollLeft - walk;
  });
});


//شريط إظهار عدد زوار الموقع فى الوقت الحالى

document.addEventListener("DOMContentLoaded", () => {
  const descriptionContainer = document.querySelector(".main-content");
  if (!descriptionContainer) {
    console.error("لم يتم العثور على العنصر .main-content");
    return;
  }

 
  const visitorBar = document.createElement("div");
  visitorBar.classList.add("visitor-bar");

 
  const randomVisitors = Math.floor(Math.random() * (250 - 100 + 1)) + 100;

  visitorBar.innerHTML = `
    <div style="background-color:yellow; margin-top:10px; margin-bottom:10px; border-radius:10px; padding:0px 15px 0px" class="visitor-count">
     <p><strong>يشاهد المنتج الان </strong> <strong style="color:rgb(88, 214, 72)">${randomVisitors} </strong><strong>شخص</strong> الكمية محدودة جدا</p>
    </div>
  `;

  // إضافة الشريط بعد العنصر الذي يحتوي على وصف المنتج (أو تحت العنصر المناسب)
  const targetElement = descriptionContainer.querySelector(".ql-direction-rtl"); // تأكد من الكلاس أو العنصر الذي تريد أن تضيف تحته
  if (targetElement) {
    targetElement.insertAdjacentElement("afterend", visitorBar);
  } else {
    console.error("لم يتم العثور على العنصر .product-details");
  }
});

// أعرفى مقاسك

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

  const descriptionContainer = document.querySelector(".main-content"); 
  if (!descriptionContainer) {
    console.error("لم يتم العثور على العنصر .product-description");
    return;
  }


  const linkContainer = document.createElement("div");
  linkContainer.classList.add("size-guide-link"); 

  linkContainer.innerHTML = `
    <p style="color:#c78c33; margin-top:10px; text-decoration: underline;"><a href="https://teraa-sa.com/%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D9%85%D9%82%D8%A7%D8%B3%D8%A7%D8%AA/page-1687256968" target="_blank">أعرفي مقاسك بالضغط هنا</a></p>
  `;

const firstElement = descriptionContainer.querySelector(".visitor-bar"); // استهداف أول فقرة أو عنصر معين
  firstElement.insertAdjacentElement("beforebegin", linkContainer);});


// شريط إظهار عدد زوار الموقع فى الوقت الحالى فى الصفحة الرئيسية فقط

document.addEventListener("DOMContentLoaded", () => {
  // إضافة شيفرة CSS ديناميكيًا
  const style = document.createElement("style");
  style.innerHTML = `
    .VisitorsCounter {
      position: fixed;
      background-color: #8c7c52;
      padding: 10px 15px 10px 15px;
      border-radius: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 15px;
      z-index: 99999;
      min-width: 195px;
      bottom: 20px;
      left: 30px;
    }
    .VisitorsCounter .circlecontainer {
      width: 50px;
      height: 50px;
      position: relative;
    }
    .VisitorsCounter .circlecontainer .circle {
      width: 100%;
      height: 100%;
      background-color: #5ede6b;
      position: absolute;
      border-radius: 50%;
      animation: ripple-animation 1.8s infinite ease-out;
    }
    .VisitorsCounter .circlecontainer .circle1 {
      animation-delay: 0s;
    }
    .VisitorsCounter .circlecontainer .circle2 {
      animation-delay: 600ms;
    }
    .VisitorsCounter .circlecontainer .circle3 {
      animation-delay: 1200ms;
    }
    .VisitorsCounter .textVisitorsCounter {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
    }
    .VisitorsCounter .textVisitorsCounter h4 {
      font-weight: 600;
      font-size: 24px;
      margin-bottom: 0;
    }
    .VisitorsCounter .textVisitorsCounter p {
      margin-bottom: 0;
      font-size: 20px;
      font-weight: 400;
    }
    @keyframes ripple-animation {
      0% {
        transform: scale(0.1);
        opacity: 1;
      }
      100% {
        transform: scale(1);
        opacity: 0;
      }
    }
    @media (max-width: 767px) {
        .VisitorsCounter {
          border-radius: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 15px;
          z-index: 99999;
          width : 170px;
          bottom: 20px;
          left: 20px;
        }
        .VisitorsCounter .circlecontainer{
          width: 30px;
          height: 30px;
        }
         
        .VisitorsCounter .textVisitorsCounter h4       
        {
          font-size: 15px;
        }
        .VisitorsCounter .textVisitorsCounter p{
        font-size: 15px;
        }
        }

      @media (max-width: 992px) {
        .VisitorsCounter .textVisitorsCounter {
          gap: 7px;
        }
        .VisitorsCounter .textVisitorsCounter h4 {
          font-size: 15px;
        }
        .VisitorsCounter .textVisitorsCounter h4 {
          font-size: 15px;
        }
      }
  `;
  document.head.appendChild(style);

  // إنشاء عنصر الزوار
  const element = `
    <div class="VisitorsCounter">
      <div class="circlecontainer">
        <div class="circle circle1" style="background-color: #F1F3EE"></div>
        <div class="circle circle2" style="background-color: #F1F3EE"></div>
        <div class="circle circle3" style="background-color: #F1F3EE"></div>
      </div>
      <div class="textVisitorsCounter computer-responseve">
        <h4 id="visitorH4" style="color: #ffffff">151</h4>
        <p style="color: #ffffff">زائر نشط الان </p>
      </div>
    </div>
  `;

  // تحديد مكان الإضافة
 // التحقق إذا كانت الصفحة الرئيسية
if (window.location.pathname === "/" || document.body.classList.contains("home")) {
  const footer = document.querySelector(".store-footer");
  if (footer) {
    footer.insertAdjacentHTML("beforebegin", element);

    // إعداد رقم الزوار العشوائي
    function randomNum(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
    }

    const visitorNumber = document.getElementById("visitorH4");
    if (visitorNumber) {
      visitorNumber.innerText = randomNum(100, 300);
    }
  } else {
    console.error("لم يتم العثور على العنصر store-footer.");
  }
}

});



// شريط إظهار عدد زوار الموقع فى الوقت الحالى فى الصفحات كلها ماعدا الصفحة الرئيسية فقط

document.addEventListener("DOMContentLoaded", () => {
  // إضافة شيفرة CSS ديناميكيًا
  const style = document.createElement("style");
  style.innerHTML = `
    .VisitorsCounters {
      position: fixed;
      background-color: #8c7c52;
      padding: 10px 15px 10px 15px;
      border-radius: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 15px;
      z-index: 99999;
      min-width: 195px;
      bottom: 20px;
      left: 30px;
    }
    .VisitorsCounters .circlecontainers {
      width: 50px;
      height: 50px;
      position: relative;
    }
    .VisitorsCounters .circlecontainers .circles {
      width: 100%;
      height: 100%;
      background-color: #8c7c52;
      position: absolute;
      border-radius: 50%;
      animation: ripple-animation 1.8s infinite ease-out;
    }
    .VisitorsCounters .circlecontainers .circle4 {
      animation-delay: 0s;
    }
    .VisitorsCounters .circlecontainers .circle5 {
      animation-delay: 600ms;
    }
    .VisitorsCounters .circlecontainers .circle6 {
      animation-delay: 1200ms;
    }
    .VisitorsCounters .textVisitorsCounters {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
    }
    .VisitorsCounters .textVisitorsCounters h4 {
      font-weight: 600;
      font-size: 24px;
      margin-bottom: 0;
    }
    .VisitorsCounters .textVisitorsCounters p {
      margin-bottom: 0;
      font-size: 20px;
      font-weight: 400;
    }
    @keyframes ripple-animation {
      0% {
        transform: scale(0.1);
        opacity: 1;
      }
      100% {
        transform: scale(1);
        opacity: 0;
      }
    }
    @media (max-width: 1200px) {
        .VisitorsCounters {
          border-radius: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 15px;
          z-index: 99999;
          width : 180px;
          bottom: 110px;
          left: 20px;
        }
        .VisitorsCounters .circlecontainers{
          width: 40px;
          height: 40px;
        }
         
        .VisitorsCounters .textVisitorsCounters h4       
        {
          font-size: 15px;
        }
        .VisitorsCounters .textVisitorsCounters p{
        font-size: 15px;
        }
        }

      @media (max-width: 992px) {
        .VisitorsCounters .textVisitorsCounters{
          gap: 7px;
        }
        .VisitorsCounters .textVisitorsCounters h4 {
          font-size: 15px;
        }
        .VisitorsCounters .textVisitorsCounters h4 {
          font-size: 15px;
        }
      }
  `;
  document.head.appendChild(style);

  // إنشاء عنصر الزوار
  const element = `
    <div class="VisitorsCounters">
      <div class="circlecontainers">
        <div class="circles circle4" style="background-color: #F1F3EE"></div>
        <div class="circles circle5" style="background-color: #F1F3EE"></div>
        <div class="circles circle6" style="background-color: #F1F3EE"></div>
      </div>
      <div class="textVisitorsCounters computer-responseves">
        <h4 id="visitorH4" style="color: #ffffff">151</h4>
        <p style="color: #ffffff">زائر نشط الان </p>
      </div>
    </div>
  `;

  // تحديد مكان الإضافة
 // التحقق إذا كانت الصفحة الرئيسية
// التحقق إذا لم تكن الصفحة الرئيسية
if (window.location.pathname !== "/" && !document.body.classList.contains("home")) {
  const footer = document.querySelector(".store-footer");
  if (footer) {
    footer.insertAdjacentHTML("beforebegin", element);

    // إعداد رقم الزوار العشوائي
    function randomNum(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
    }

    const visitorNumber = document.getElementById("visitorH4");
    if (visitorNumber) {
      visitorNumber.innerText = randomNum(100, 300);
    }
  } else {
    console.error("لم يتم العثور على العنصر store-footer.");
  }
}


});


// جعل نص حقوق النشر يرتفع للاعلى قليلا لوضع شريط عدد الزوار دون ان يخفية
// التحقق من عرض الشاشة
if (window.matchMedia("(max-width: 1400px)").matches) {
  // استهداف العنصر
  const element = document.querySelector(".opacity-75");

  // التحقق من وجود العنصر
  if (element) {
    // إضافة الهامش السفلي
    element.style.marginBottom = "0px";
  } else {
    console.error("العنصر المطلوب غير موجود.");
  }
}
const copRight = document.querySelector(".copyrights ");
 const goservLink = `
        <a style="color: #00000"; href="https://goserv-ksa.com">صنع بحب في جو سيرف</a>`;
 copRight.insertAdjacentHTML("beforeend", goservLink);