// ==================== Main ====================
// ========== Custom WhatsApp Icon ==========
waIcon = document.createElement('div');
waIcon.className = 'float-wa';
waIcon.innerHTML = `
  <a href='https://${location.host}/whatsapp/send' class="sicon-whatsapp2" target="_blank">
    <span>يا هلا👋 عندك سؤال؟ تواصل معنا</span>
  </a>
`;
const waIconBtn = document.createElement('button');
waIconBtn.className = 'hide-msg-btn sicon-cancel';
waIconBtn.onclick = () => waIcon.classList.add('hidden-msg');
waIcon.append(waIconBtn);
const prodOptCont = document.querySelector('.page-container.product-has-options .main-content')
prodOptCont ? prodOptCont.append(waIcon) : document.body.append(waIcon);

// ==================== Product Page ====================
if (document.body.classList.contains('product-single')) {
  const desc = document.querySelector('.article--main');
  // ========== Sort Sections ==========
  const sortCont = document.createElement('div');
  sortCont.className ='sort-cont';
  const elementOrder = ['.main-link', '.product__description + div:has(> a)', 'div:has(>salla-installment)'];
  elementOrder.forEach(classSelc => {
    const e = document.querySelector(classSelc);
    if (e) sortCont.append(e);
  });
  desc ? document.getElementById('product-details-tab').after(sortCont) : document.getElementById('single-product-form').before(sortCont);
  // ========== Read More ==========
  if (desc && desc.clientHeight > 320) {
    document.querySelector('.product__description').style.display = 'none';
    desc.classList.add('read-more-close');
    const readMoreWrap = document.createElement('div');
    readMoreWrap.className = 'read-more-wrap';
    const readMoreBtn = document.createElement('button');
    readMoreBtn.className = 'read-more-btn';
    readMoreBtn.textContent = 'قراءة المزيد';
    readMoreWrap.append(readMoreBtn);
    desc.after(readMoreWrap);
    readMoreBtn.onclick = function () {
      readMoreWrap.style.display = 'none';
      desc.classList.remove('read-more-close');
    }
  }
  // ========== Custom special Offer ==========
  if (document.getElementById("similar-slider")) {
    const productTitle = document.querySelector("h1").textContent;
    const specialProducts = {
      1: {
        mainProduct: "داش كام شاومي 70mai A810 4K ",
        relatedProducts: ["وصلة وقوف لداش كام شاومي A810", "كرت ذاكرة 128 جيجا للداش كام من Lexar", "خدمة تركيب الداش كام"],
        offerName: "ملحقات",
        offerTit: "ملحقات يتم طلبها مع المنتج!",
        offerSubTit: ""
      },
      2: {
        mainProduct: "داش كام فيوفو بثلاث كاميرات 4K A139 PRO ",
        relatedProducts: ["وصلة الوقوف داش كام فيوفو A139", "كرت ذاكرة 128 جيجا للداش كام من Lexar", "خدمة تركيب الداش كام"],
        offerName: "ملحقات",
        offerTit: "ملحقات يتم طلبها مع المنتج!",
        offerSubTit: ""
      },
      3: {
        mainProduct: "داش كام Z60 4K بث مباشر 4G ",
        relatedProducts: ["وصلة وقوف ل Z60 DDPAI", "كرت ذاكرة 128 جيجا للداش كام من Lexar", "خدمة تركيب الداش كام"],
        offerName: "ملحقات",
        offerTit: "ملحقات يتم طلبها مع المنتج!",
        offerSubTit: ""
      },
      4: {
        mainProduct: "داش كام شاومي Z50 4K من DDPAI ",
        relatedProducts: ["وصلة وقوف داش كام DDPAI", "كرت ذاكرة 128 جيجا للداش كام من Lexar", "خدمة تركيب الداش كام"],
        offerName: "ملحقات",
        offerTit: "ملحقات يتم طلبها مع المنتج!",
        offerSubTit: ""
      },
      5: {
        mainProduct: "داش كام شاومي Z40 2K من DDPAI ",
        relatedProducts: ["وصلة وقوف داش كام DDPAI", "كرت ذاكرة 128 جيجا للداش كام من Lexar", "خدمة تركيب الداش كام"],
        offerName: "ملحقات",
        offerTit: "ملحقات يتم طلبها مع المنتج!",
        offerSubTit: ""
      },
      6: {
        mainProduct: "داش كام فيوفو Viofo A229 Pro 4K ",
        relatedProducts: ["باكج داش كام فيوفو A229 PRO مع التركيب والملحقات", "وصلة الوقوف داش كام فيوفو A229 Pro", "كرت ذاكرة 128 جيجا للداش كام من Lexar", "خدمة تركيب الداش كام"],
        offerName: "باكجات",
        offerTit: "تستطيع طلب الخدمة الكاملة التي تشمل ملحقات الجهاز مع خدمة التركيب للمنتج !",
        offerSubTit: ""
      },
      7: {
        mainProduct: "داش كام فيوفو  VIOFO A129 Pro 4K ",
        relatedProducts: ["باكج داش كام فيوفو A129 PRO مع التركيب والملحقات", "وصلة الوقوف داش كام فيوفو A129", "كرت ذاكرة 128 جيجا للداش كام من Lexar", "خدمة تركيب الداش كام"],
        offerName: "باكجات",
        offerTit: "تستطيع طلب الخدمة الكاملة التي تشمل ملحقات الجهاز مع خدمة التركيب للمنتج !",
        offerSubTit: ""
      },
      8: {
        mainProduct: "داش كام ازدوم AZDOME M300S 4K ",
        relatedProducts: ["باكج داش كام ازدوم M300S 4K مع التركيب والملحقات", "وصلة وقوف داش كام ازدوم AZDOME M300S & M301 HW03L", "كرت ذاكرة 128 جيجا للداش كام من Lexar", "خدمة تركيب الداش كام"],
        offerName: "باكجات",
        offerTit: "تستطيع طلب الخدمة الكاملة التي تشمل ملحقات الجهاز مع خدمة التركيب للمنتج !",
        offerSubTit: ""
      },
      9: {
        mainProduct: "داش كام جيمي لمراقبة السيارة عن بعد JC450 Pro 4G ",
        relatedProducts: ["باكج داش كام جيمي لمراقبة السيارة عن بعد JC450 PRO مع التركيب والملحقات"],
        offerName: "باكجات",
        offerTit: "تستطيع طلب الخدمة الكاملة التي تشمل ملحقات الجهاز مع خدمة التركيب للمنتج !",
        offerSubTit: ""
      },
    }

    let allRelatedProducts;
    const allRelatedProductsInt = setInterval(() => {
      allRelatedProducts = [...document.querySelectorAll("#similar-slider .s-product-card-entry")];
      if (allRelatedProducts.length) {
        clearInterval(allRelatedProductsInt);
        let offerName, offerTit, offerSubTit;
        let offerSectionProducts = [];
        for (let sp in specialProducts) {
          if (specialProducts[sp].mainProduct === productTitle) {
            offerName = specialProducts[sp].offerName;
            offerTit = specialProducts[sp].offerTit;
            offerSubTit = specialProducts[sp].offerSubTit;
            specialProducts[sp].relatedProducts.forEach(p => {
              allRelatedProducts.forEach(rp => {
                if (rp.querySelector('.s-product-card-content-title a').textContent.trim() === p) {
                  allRelatedProducts.splice(allRelatedProducts.indexOf(rp), 1)
                  offerSectionProducts.push(rp);
                }
              });
            });
          }
        }

        if (offerSectionProducts.length) {
      
      
          const parent = document.querySelector('.main-content');
        
          const sallaOffer = document.createElement('salla-offer');
          sallaOffer.className = 'hydrated';
        
          parent.append(sallaOffer);
        
        
          const sallaOfferWrapper = document.createElement('div');
          sallaOfferWrapper.className = 's-offer-wrapper';
        
          sallaOffer.append(sallaOfferWrapper);
        
        
          const sallaOfferBadge = document.createElement('p');
          sallaOfferBadge.className = 's-offer-corner-badge';
          sallaOfferBadge.textContent = offerName;
        
          sallaOfferWrapper.append(sallaOfferBadge);
        
        
          const sallaOfferSlider = document.createElement('salla-slider');
          sallaOfferSlider.id = 'offer-slider';
          sallaOfferSlider.className = 'cus s-slider-wrapper carousel-slider s-slider-horizontal';
          sallaOfferSlider.direction = 'rtl';
          if (offerSubTit) {
            sallaOfferSlider.blockTitle = ' ';
            sallaOfferSlider.blockSubtitle = offerSubTit;
          }
          if (offerTit) sallaOfferSlider.blockTitle = offerTit;

          sallaOfferWrapper.append(sallaOfferSlider);
          
          let offerSwiper;
          const offerSwiperInt = setInterval(() => {
            offerSwiper = sallaOfferSlider.querySelector('.swiper-wrapper');
            if (offerSwiper) {
              clearInterval(offerSwiperInt);
              for (let i = 0; i < offerSectionProducts.length; i++) {
                const sallaOfferSlide = document.createElement('div');
                sallaOfferSlide.className ='s-offer-slide-one-fourth swiper-slide';
                sallaOfferSlide.role = 'group';
                sallaOfferSlide.ariaLabel = `${i+1} / ${offerSectionProducts.length}`;
                sallaOfferSlide.append(offerSectionProducts[i]);
                offerSwiper.append(sallaOfferSlide);
              }
              document.querySelector('.s-products-slider-slider').update();
            }
          })
        
      
      
        }
      }
    });
  }
}

// ==================== Home Page ====================
// ========== Categories ==========
// ===== Center categories =====
document.querySelectorAll('.s-block--categories').forEach(e => {
  if (e.querySelectorAll('.swiper-slide').length <= 3) e.classList.add('cen-categories')
});