/* Add custom Js code below */ 
document.addEventListener('DOMContentLoaded', function() {
const formElement = document.querySelector('form.product-form'); // تحديد العنصر الذي يحتوي على النموذج
const productDescription = document.querySelector('.product__description'); // تحديد العنصر الذي يحتوي على الوصف
// التأكد من وجود العنصرين في DOM
if (formElement && productDescription) {
// نقل العنصر بالكامل إلى أعلى العنصر الذي يحتوي على الوصف
productDescription.parentNode.insertBefore(formElement, productDescription);
}
});
document.addEventListener("DOMContentLoaded", function () {
// ترجمة عنوان "روابط مهمة"
const elements = document.querySelectorAll("h3");
elements.forEach(function (element) {
if (element.textContent.trim() === "روابط مهمة") {
element.textContent = "Important Links";
}
});
// ترجمة نص حقوق الطبع
const copyrightText = document.querySelector(".text-sm.copyright-text.uppercase .text-gray-400");
if (copyrightText) {
copyrightText.innerHTML = 'All rights reserved | 2024 <a href="https://abeeralwllan.com/ar" class="hover:text-primary" target="_blank" rel="noreferrer">Abeer.Line</a>';
} else {
console.error("Element with the specified class not found.");
}
// ترجمة عنوان الصفحة والخيارات
const pageMainTitle = document.getElementById("page-main-title");
if (pageMainTitle) {
pageMainTitle.innerHTML = '<span>6</span> Products';
}
const label = document.querySelector('label[for="product-filter"]');
if (label) {
label.textContent = "Sort By";
}
const selectOptions = document.querySelectorAll('#product-filter option');
if (selectOptions.length > 0) {
selectOptions.forEach(option => {
switch (option.value) {
case "ourSuggest":
option.textContent = "Our Suggestions";
break;
case "bestSell":
option.textContent = "Best Sellers";
break;
case "topRated":
option.textContent = "Top Rated";
break;
case "priceFromTopToLow":
option.textContent = "Price: High to Low";
break;
case "priceFromLowToTop":
option.textContent = "Price: Low to High";
break;
}
});
}
// ترجمة الرابط "الرئيسية"
const breadcrumbItem = document.querySelector(".s-breadcrumb-item a");
if (breadcrumbItem && breadcrumbItem.textContent.trim() === "الرئيسية") {
breadcrumbItem.textContent = "Home";
} else {
console.error("Breadcrumb item with text 'الرئيسية' not found.");
}
// ترجمة "Contact Us"
const contactsTitle = document.querySelector(".s-contacts-title");
if (contactsTitle) {
contactsTitle.textContent = "Contact Us";
} else {
console.error("Element with class 's-contacts-title' not found.");
}
});
document.addEventListener("DOMContentLoaded", function () {
const labelElement = document.querySelector('label[for="options[1573933875]"]');
if (labelElement) {
// ترجمة النصوص داخل العلامة <b>
const boldText = labelElement.querySelector("b");
if (boldText) {
boldText.innerHTML = 'Size<span> * </span>';
}
// ترجمة النصوص داخل العلامة <small>
const smallText = labelElement.querySelector("small");
if (smallText) {
smallText.textContent = "Choose";
}
} else {
console.error('Label element with for="options[1573933875]" not found.');
}
});
document.addEventListener("DOMContentLoaded", function () {
// ترجمة القائمة المنسدلة "اختر"
const selectElement = document.querySelector('select[name="options[1573933875]"]');
if (selectElement) {
const options = selectElement.querySelectorAll("option");
options.forEach(option => {
if (option.textContent.trim() === "اختر") {
option.textContent = "Choose"; // ترجمة الخيار الافتراضي
}
});
}
// ترجمة النص "السعر"
const priceElement = document.querySelector("b.block");
if (priceElement && priceElement.textContent.trim() === "السعر") {
priceElement.textContent = "Price"; // ترجمة السعر
}
// ترجمة النص "الكمية"
const quantityLabel = document.querySelector('label.form-label.text-[14px]');
if (quantityLabel && quantityLabel.textContent.trim() === "الكمية") {
quantityLabel.textContent = "Quantity"; // ترجمة الكمية
}
});

document.addEventListener("DOMContentLoaded", function() {
    // استهداف عنصر السورتينج
    var sortingElement = document.querySelector('#product-filter');

    // التحقق إذا كان العنصر موجودًا
    if (sortingElement) {
        // إظهار عنصر السورتينج
        sortingElement.style.display = 'block';

        // إذا كان الحاوية نفسها مخفية أيضًا
        var parentContainer = sortingElement.closest('.flex');
        if (parentContainer) {
            parentContainer.style.display = 'flex';
        }
    }
});

       

   



// إنشاء التوب بار باستخدام JavaScript
const topBar = document.createElement('div');
topBar.style.position = 'fixed';
topBar.style.top = '0';
topBar.style.left = '0';
topBar.style.width = '100%';
topBar.style.backgroundColor = '#fbd4d7';  // تغيير اللون إلى اللون الوردي المطفي
topBar.style.color = '#333';  // جعل النص باللون الأسود المطفي
topBar.style.textAlign = 'center';
topBar.style.padding = '6px 0';  // تقليل الارتفاع
topBar.style.zIndex = '9999';
topBar.style.display = 'flex';
topBar.style.justifyContent = 'center';
topBar.style.alignItems = 'center';
topBar.style.boxSizing = 'border-box';  // التأكد من عدم التداخل مع المحتوى العلوي
document.body.appendChild(topBar);

// إنشاء محتوى التوب بار
const topBarContent = document.createElement('div');
topBarContent.style.display = 'inline-block';
topBarContent.style.fontSize = '20px';  // زيادة حجم النص قليلاً
topBarContent.style.fontWeight = 'bold';  // زيادة سمك الخط
topBarContent.style.fontStyle = 'italic';  // جعل النص بخط مائل
topBar.appendChild(topBarContent);

// إضافة النص المتحرك
topBarContent.innerHTML = `
    <span class="first-text">Hurry Up ,, </span>
    <span class="discount" style="font-weight: bold;">50% Discount</span>
`;

// إضافة الزر
const orderNowBtn = document.createElement('button');
orderNowBtn.textContent = 'Order Now';
orderNowBtn.style.marginTop = '10px';
orderNowBtn.style.padding = '5px 15px';  // تقليل حجم الزر
orderNowBtn.style.backgroundColor = 'transparent';  // إزالة الخلفية
orderNowBtn.style.color = '#333';  // تغيير النص إلى اللون الأسود المطفي
orderNowBtn.style.border = 'none';
orderNowBtn.style.cursor = 'pointer';
orderNowBtn.style.fontSize = '20px';  // نفس حجم النص
orderNowBtn.style.borderBottom = '2px solid white';  // فقط خط تحت الزر
orderNowBtn.addEventListener('mouseover', () => {
    orderNowBtn.style.borderBottom = '2px solid #f44336';  // تغيير لون الخط عند المرور
});
orderNowBtn.addEventListener('mouseleave', () => {
    orderNowBtn.style.borderBottom = '2px solid white';  // العودة للون الأبيض عند ترك الزر
});
orderNowBtn.onclick = () => {
    window.location.href = 'https://abeeralwllan.com/ar/50/c298822658';
};
topBar.appendChild(orderNowBtn);

// إضافة علامة "x" لإغلاق التوب بار
const closeButton = document.createElement('button');
closeButton.textContent = '×';  // علامة الإغلاق (x)
closeButton.style.position = 'absolute';
closeButton.style.top = '5px';
closeButton.style.right = '10px';
closeButton.style.background = 'transparent';
closeButton.style.color = '#333';  // نفس لون الجملة
closeButton.style.border = 'none';
closeButton.style.fontSize = '30px';
closeButton.style.cursor = 'pointer';
closeButton.addEventListener('click', () => {
    topBar.style.display = 'none';  // إخفاء التوب بار عند الضغط على "x"
});
topBar.appendChild(closeButton);

// إضافة التأثيرات المتحركة لكلمة "50% Discount" فقط
const discountElement = document.querySelector('.discount');
discountElement.style.animation = 'flashColor 2s infinite alternate';  // تومض بين الأحمر والأبيض ببطء

// إضافة CSS من خلال JavaScript (لإضافة الـ @keyframes)
const style = document.createElement('style');
style.innerHTML = `
    @keyframes flashColor {
        0% {
            color: white;
        }
        50% {
            color: red;
        }
        100% {
            color: white;
        }
    }

    /* Media Query لتقليل حجم النص والزر على الشاشات الصغيرة */
    @media (max-width: 600px) {
        .first-text, .discount, .order-now {
            font-size: 14px;  /* تقليل حجم النص داخل التوب بار */
        }

        orderNowBtn {
            font-size: 14px;  /* تقليل حجم الزر على الشاشات الصغيرة */
        }

        topBar {
            padding: 4px 0;  /* تقليل المسافة بين التوب بار والنص على الشاشات الصغيرة */
        }

        /* تقليل المسافة بين التوب بار والهيدر على الموبايل */
        header {
            margin-top: 5px;  /* تحديد المسافة بين التوب بار والهيدر */
        }
    }
`;
document.head.appendChild(style);

// إضافة هامش (padding-top) إلى الـ body لضمان أن الهيدر لا يتداخل مع التوب بار
document.body.style.paddingTop = '58px';  // تقليل المسافة بين التوب بار والهيدر/* Add custom Js code below */







// Size Chart
document.addEventListener("DOMContentLoaded", function () {
  // إنشاء نافذة منبثقة (Modal)
  var modal = document.createElement("div");
  modal.id = "sizeChartModal";
  modal.style.display = "none";  // نافذة منبثقة مخفية بشكل افتراضي
  modal.style.position = "fixed";
  modal.style.zIndex = "9999"; // اجعل الـ z-index أعلى من الهيدر
  modal.style.left = "0";
  modal.style.top = "0";
  modal.style.width = "100%";
  modal.style.height = "100%";
  modal.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
  modal.style.paddingTop = "60px";

  // إنشاء محتوى النافذة
  var modalContent = document.createElement("div");
  modalContent.classList.add("modal-content");
  modalContent.style.position = "relative"; // استخدام relative لتثبيت العنصر داخل النافذة
  modalContent.style.top = "50%"; // تحديد المسافة من الأعلى
  modalContent.style.left = "50%"; // تحديد المسافة من اليسار
  modalContent.style.transform = "translate(-50%, -50%)"; // لجعل العنصر في المنتصف تمامًا
  modalContent.style.backgroundColor = "#fff";
  modalContent.style.padding = "20px";
  modalContent.style.border = "1px solid #888";
  modalContent.style.width = "80%"; // يمكن تعديل الحجم بحسب الحاجة
  modalContent.style.maxWidth = "400px"; // الحد الأقصى للعرض
  modalContent.style.zIndex = "10000"; // ضمان ظهور النافذة فوق العناصر الأخرى

  // إضافة صورة إلى محتوى النافذة
  var img = document.createElement("img");
  img.id = "sizeChartImage"; // تعيين معرف للصورة
  img.alt = "Size Chart";
  img.style.display = "block";
  img.style.margin = "0 auto"; // محاذاة الصورة في المنتصف
  img.style.maxWidth = "100%"; // التأكد من أن الصورة لا تتجاوز عرض النافذة
  img.style.height = "auto"; // الحفاظ على نسبة العرض إلى الارتفاع
  modalContent.appendChild(img);

  // إضافة زر الإغلاق (علامة "×")
  var closeBtn = document.createElement("span");
  closeBtn.classList.add("close-btn");
  closeBtn.innerHTML = "&times;"; // علامة "×"
  closeBtn.style.color = "#fff";
  closeBtn.style.position = "absolute";
  closeBtn.style.top = "10px";
  closeBtn.style.right = "10px";
  closeBtn.style.fontSize = "28px";
  closeBtn.style.fontWeight = "bold";
  closeBtn.style.cursor = "pointer";
  closeBtn.style.padding = "5px"; // إضافة بعض المساحة حول زر الإغلاق
  closeBtn.style.borderRadius = "50%"; // جعله دائري
  closeBtn.style.backgroundColor = "#000"; // جعل الخلفية سوداء
  closeBtn.addEventListener("mouseover", function() {
    closeBtn.style.backgroundColor = "#444"; // تغيير اللون عند المرور
  });
  closeBtn.addEventListener("mouseout", function() {
    closeBtn.style.backgroundColor = "#000"; // إعادة اللون الطبيعي
  });

  // إضافة زر الإغلاق إلى محتوى النافذة
  modalContent.appendChild(closeBtn);
  modal.appendChild(modalContent);
  document.body.appendChild(modal);

  // البحث عن جميع الروابط في الصفحة تحتوي على "Size Chart"
  var sizeChartLinks = document.querySelectorAll('a'); // استهداف جميع الروابط في الصفحة

  sizeChartLinks.forEach(function(sizeChartLink) {
    // التحقق إذا كان الرابط يحتوي على النص "Size Chart"
    if (sizeChartLink.textContent.toLowerCase().includes("size chart")) {
      // تحويل الرابط إلى زر بتنسيق معين
      sizeChartLink.style.display = "inline-block"; // عرض الرابط ككتلة
      sizeChartLink.style.backgroundColor = "#333"; // الخلفية الرمادي الغامق
      sizeChartLink.style.color = "#fbd4d7"; // النص باللون الجديد (#fbd4d7)
      sizeChartLink.style.padding = "10px 20px"; // إضافة padding للزر
      sizeChartLink.style.borderRadius = "5px"; // حواف دائرية للزر
      sizeChartLink.style.textAlign = "center"; // محاذاة النص في الوسط
      sizeChartLink.style.textDecoration = "none"; // إزالة التسطير
      sizeChartLink.style.fontWeight = "bold"; // جعل النص عريض

      // عند الضغط على الرابط، افتح النافذة المنبثقة
      sizeChartLink.addEventListener("click", function (event) {
        event.preventDefault(); // منع الانتقال إلى الرابط
        var imageUrl = sizeChartLink.href; // الحصول على رابط الصورة من href
        img.src = imageUrl; // تعيين رابط الصورة في النافذة المنبثقة
        modal.style.display = "block"; // عرض النافذة
      });
    }
  });

  // عند الضغط على زر الإغلاق، أغلق النافذة
  closeBtn.addEventListener("click", function () {
    modal.style.display = "none"; // إخفاء النافذة
  });

  // عند الضغط خارج النافذة المنبثقة، أغلقها
  window.addEventListener("click", function (event) {
    if (event.target == modal) {
      modal.style.display = "none"; // إخفاء النافذة
    }
  });

  // إضافة تحسينات لتصغير الصورة على سطح المكتب باستخدام media queries
  var style = document.createElement('style');
  style.innerHTML = `
    @media screen and (min-width: 1024px) {
      #sizeChartImage {
        max-width: 80%; /* تصغير الصورة على سطح المكتب */
      }
    }
  `;
  document.head.appendChild(style);
});