/* Add custom Js code below */ 
* Close the opened script to be able to link external files in the head */
</script>

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js" integrity="sha256-FZsW7H2V5X9TGinSjjwYJ419Xka27I8XPDmWryGlWtw=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" integrity="sha256-5uKiXEwbaQh9cgd2/5Vp6WmMnsUr3VZZw0a8rKnOKNU=" crossorigin="anonymous">


<script>

// =============== HELPER FUNCTIONS =============== 

const moveOrNewElement = (element, parent, newPosition, classes=[]) => {
  if (parent) {
    if (element) {
      newPosition.after(element);
    } else {
      element = document.createElement('div');
      parent.insertBefore(element, newPosition);
    }
  }
  return element;
};
const changeInnerText = (element, newText) => {
  const lang = document.documentElement.getAttribute('lang');
  if (element && newText[lang]) {
    element.innerText = newText[lang];
  }
  return element
};
const createWrapper = (element, classes = []) => {
  if (element) {
    const wrapperClasses = classes.length > 0 ? ` class="${classes.join(' ')}"` : '';
    element.outerHTML = `<div${wrapperClasses}>${element.outerHTML}</div>`;
  }
  return element
};
const createBannerInfo = (text, link, banner) => {
  const bannerInfo = `
    <div class="info">
      <h2 class="pt-2">${text}</h2>
      <a href="${link}">
        تسوق الآن
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none" style="display: initial;">
          <path d="M10.2847 8.56921L6 12.5692L10.2847 16.5692M18 12.5692H6.12" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </a>
    </div>`;

  if (banner) {
    banner.insertAdjacentHTML("afterend", bannerInfo);
  } else {
    return bannerInfo;
  }
};

const carts = document.querySelectorAll('.product-block .btn--add-to-cart');
if (carts){
Array.from(carts).map((cart) => {
  moveOrNewElement(cart, cart.parentElement.parentElement, cart.parentElement.parentElement.lastElementChild);
});
}

/*check this line*/
const stars = document.querySelectorAll('.testimonial-entry .testimonial-entry__rate');
if (stars){
Array.from(stars).map((star) => {
  moveOrNewElement(star, star.parentElement , star.parentElement.children[0].children[1]);
});
}
moveOrNewElement(document.querySelector('.footer .store-about').parentElement.children[1], document.querySelector('.footer .store-contact-info'), document.querySelector('.footer .store-contact-info').children[1])

const bannerSec = document.querySelectorAll('.home-block.home-block--fixed-banner')
if(bannerSec ){
  createBannerInfo('اوتلت', 'https://salla.sa/mansorah/redirect/categories/825781843', bannerSec[2]);
  createBannerInfo('اللباد', 'https://salla.sa/mansorah/redirect/categories/850047864', bannerSec[3]);
  createBannerInfo('المراتب', 'https://salla.sa/mansorah/redirect/categories/2001086356', bannerSec[4]);
  createBannerInfo('مناشف وأرواب', 'https://salla.sa/mansorah/redirect/categories/2052938631', bannerSec[5]);
  createBannerInfo('وسائد', 'https://salla.sa/mansorah/redirect/categories/181922130', bannerSec[6]);
  createBannerInfo('عوازل حماية', 'https://salla.sa/mansorah/redirect/categories/571483565', bannerSec[7]);
}

let featTitle = document.querySelector('.home-block--store-features')
if(featTitle){
createWrapper(changeInnerText(moveOrNewElement(null, featTitle, featTitle.children[0]), { 'ar': 'لماذا مفارش منصورة', 'en': 'Why Mansoura Beddings' }), ['text-center', 'feat-section'])
}

// slider 
const addSplideSlider = () => {
  const destinationSection = document.querySelector(
    ".home-block:nth-of-type(7)"
  );
  if (destinationSection) {
    const section = document.createElement("section");
    section.classList.add('slider-container')
    section.innerHTML = `
    <h2 class="text-2xl text-center font-[700] pb-3 ">قسم المفارش</h2>
    <section class="splideSection">
      <div class="splide__track">
        <ul class="splide__list">
                        <li class="splide__slide">
  <div>
    <a href="#">
      <img
        class="loaded"
        data-src="https://cdn.salla.sa/form-builder/wkZKYODk9FwEqEL2CD4ilxccO43Hap1GJ8BDfsvQ.png"
        alt=""
        src="https://cdn.salla.sa/form-builder/wkZKYODk9FwEqEL2CD4ilxccO43Hap1GJ8BDfsvQ.png"
      />
    </a>
    ${createBannerInfo("مفارش عرائس", "https://salla.sa/mansorah/redirect/categories/1956719032")}
  </div>
</li>
<li class="splide__slide">
  <div>
    <a href="https://salla.sa/mansorah/redirect/categories/1224731582">
      <img class="loaded" data-src="https://cdn.salla.sa/form-builder/JREtHf5YHvNjrW7j4oI54X90OFyqLBRpFJk0K4Ms.png" alt="" src="https://cdn.salla.sa/form-builder/JREtHf5YHvNjrW7j4oI54X90OFyqLBRpFJk0K4Ms.png">
    </a>
    ${createBannerInfo("مفارش الشتوية", "https://salla.sa/mansorah/redirect/categories/1224731582")}
  </div>
</li>
<li class="splide__slide">
  <div>
    <a href="https://salla.sa/mansorah/redirect/categories/449055423">
      <img class="loaded" data-src="https://cdn.salla.sa/form-builder/l3mtmn8d7buR6gqI2eBZAI8CTRLsoHnA9Sip8bZN.png" alt="" src="https://cdn.salla.sa/form-builder/l3mtmn8d7buR6gqI2eBZAI8CTRLsoHnA9Sip8bZN.png">
    </a>
    ${createBannerInfo("مفارش أطفال", "https://salla.sa/mansorah/redirect/categories/449055423")}
  </div>
</li>
<li class="splide__slide">
  <div>
    <a href="https://salla.sa/mansorah/redirect/categories/2131938493">
       <img class="loaded" data-src="https://cdn.salla.sa/form-builder/LndxDhbhzAUpsBmXM2exNoDOjXhjKBRC8Gyz4Cwu.png" alt="" src="https://cdn.salla.sa/form-builder/LndxDhbhzAUpsBmXM2exNoDOjXhjKBRC8Gyz4Cwu.png">
    </a>
    ${createBannerInfo("مفارش الصيفية", "https://salla.sa/mansorah/redirect/categories/2131938493")}
  </div>
</li>
<li class="splide__slide">
  <div>
    <a href="https://salla.sa/mansorah/redirect/categories/758492604">
       <img class="loaded" data-src="https://cdn.salla.sa/form-builder/yIcf1PQA4YM1XotYuRnk0iw41E8rSN11DJ6Qvhbc.png" alt="" src="https://cdn.salla.sa/form-builder/yIcf1PQA4YM1XotYuRnk0iw41E8rSN11DJ6Qvhbc.png">
    </a>
    ${createBannerInfo("مفارش فندقية", "https://salla.sa/mansorah/redirect/categories/758492604")}
  </div>
</li>
        </ul>
      </div>
      </section>
    `;
    destinationSection.before(section);

    const options = {
     type: "loop",
      direction: "rtl",
      perPage: 3,
      perMove:1,
      updateOnMove: true,
      autoplay: true,
      pagination: true,
      focus  : 'center',
      gap: "2em",
      padding: {
        right: "5%",
        left: "5%",
      },
      arrows: false,
      breakpoints: {
        720: {
          perPage: 1,
          gap: "1em",
          padding: {
            right: "20%",
            left: "20%",
          },
        },
      },
    };
    
    const splide = new Splide(document.querySelector(".splideSection"), options);
    splide.mount();

  }
};

document.addEventListener("DOMContentLoaded", () => {
  const isHomePage = window.location.pathname === "/";

  if (isHomePage) {
    addSplideSlider();
  }
});

let product = document.querySelector('.product-single .page-wrapper')
extractProductDetails = (productDesc) => {
  if (productDesc) {
    const children = Array.from(productDesc.children);
    const startIndex = children.findIndex((child) => {
      const pattern =  /(?:مكونات البكج|محتويات المنتج|مكونات بكج|محتويات بكج|محتويات المفرش|مكونات المنتج|محتويات البكج)/;
      return pattern.test(child.textContent.trim())?child.textContent.trim():""
    });
    if (startIndex !== -1) {
      const newDiv = document.createElement("div");
      children.slice(startIndex).map((child) => {
        if (!child.querySelector("img")) {
          newDiv.appendChild(child);
        }
      });
      return newDiv 
    }
  }
  return null
};

//  عرض صفحات في تفاصيل المنتج
const showProductPageDetails = () => {

    const faqsDiv = document.createElement("div");
    faqsDiv.classList.add('description-div')
    const brandsList = document.createElement("div");
    
    // وصف المنتج
    const productDesc = document.querySelector('.article.article--main.article--product-details')
    let des = document.createElement("div");

        let desTitle = document.createElement("button");
        desTitle.classList.add('accordion')
        desTitle.innerText = "وصف المنتج"
        let desText = document.createElement("p");
        desText.classList.add('accordion-content')

        productDesc ? desText.appendChild(productDesc) : ''

    des.appendChild(desTitle)
    des.appendChild(desText)

 
    const details = document.querySelector('.product-details__info .mb-20')
    
    let det = document.createElement("div");

        let detTitle = document.createElement("button");
        detTitle.classList.add('accordion')
        detTitle.innerText = "تفاصيل المنتج"
        let detText = document.createElement("p");
        detText.classList.add('accordion-content')
        details ? detText.appendChild(details) : ''

    det.appendChild(detTitle)
    det.appendChild(detText)
    
     let contentDesc = extractProductDetails(productDesc)
     let content = document.createElement("div");
        let contTitle = document.createElement("button");
        contTitle.classList.add('accordion')
        contTitle.innerText = "محتويات المنتج"
        let conText = document.createElement("p");
        conText.classList.add('accordion-content')
       
        contentDesc ? conText.appendChild(contentDesc) : ''
    content.appendChild(contTitle)
    content.appendChild(conText)


    brandsList.appendChild(des);
    brandsList.appendChild(det);
    brandsList.appendChild(content);
    faqsDiv.appendChild(brandsList);

    // show in productForm    
    const productForm = document.querySelector('.product-details__info')
    if (productForm) {
        productForm.after(faqsDiv)
    }
    
}

const myfunc = () => {
    const accordionBtns = document.querySelectorAll(".accordion");
    if (accordionBtns) {
        accordionBtns.forEach((accordion) => {
            if (accordion) {
                accordion.onclick = function () {
                    // accordion.addEventListener('click', function () {
                    this.classList.toggle("is-open");
                    let content = this.nextElementSibling;
                    if (content.style.maxHeight) {
                        content.style.maxHeight = null;
                    } else {
                        content.style.maxHeight = content.scrollHeight + "px";
                    }
                    // })                
                }
            }
        })
    }
}

const interval = setInterval(() => {
    myfunc()
}, 2000);


/* ############################################### */
// نقل وصف المنتج تحت أضف للسلة داخل تفاصيل المنتج
const sortProductDetails = () => {
    const productForm = document.querySelector('.product-details__info')
    if (productForm) {
        productForm.setAttribute('style', 'margin-bottom: 15px !important;')
        
        const share = document.querySelector('.product-details__info .share-like-wrapper')
        if (share) {
            const storyDiv = document.createElement("div");
            storyDiv.classList.add('product-details__title')
            storyDiv.appendChild(share)
            productForm.after(storyDiv)
        }
        const pay = document.querySelector('.product-details__info .grid-block.pay-installment')
        pay ? productForm.after(pay) : ''
        
    }
}
window.addEventListener('load', () => {
    sortProductDetails();
    showProductPageDetails();
})

</script>