/* Add custom Js code below */ 
const feats = document.querySelector('section.s-block.s-block--features.container')
const contact = document.createElement('section')
contact.innerHTML = `<div class="flex justify-center items-center" style="padding: 4rem 0.5rem 2.5rem;"><div class="contact p-3 px-6 bg-black text-white rounded-full text-center"><a href="https://wa.me/966503826727" target="_blank" class="text-center font-bold">تواصل معنا لخدمتك بشكل أسرع</a></div></div>`
const featHead = document.createElement('div')
featHead.innerHTML = `<h2 class="text-center">مميزات متجرنا</h2><p class="text-center pb-8">رحلة استثنائية في عالم المجوهرات</p>`
if(feats){
  feats.before(contact)
  feats.children[0].before(featHead)
}
const productPage = document.querySelector('.product-single .product-form')
const productBanner = document.createElement('section')
productBanner.innerHTML = `
  <div class="banner banner--fixed overflow-hidden py-4"><img src="https://cdn.salla.sa/form-builder/6SUK9UwWbIsjgVrmGUBikmZVOstyW8yKrsemHsF6.jpg" loading="lazy"</div>`


function showProductPageDetails() {
    var faqsDiv = document.createElement("div");
    faqsDiv.className = "description-div product-accordion";
    var brandsList = document.createElement("div");
    
    var packet = document.createElement("div");
    setTimeout(() => {
        const proName = document.querySelector('.product-single h1.text-xl').textContent

        console.log('start', proName)

      
        if (proName.includes("قلادة")) {
                packet.innerHTML = '<button class="accordion">لمعرفة دليل مقاسات السلاسل اضغط هنا</button><p class="accordion-content"><img src="https://cdn.salla.sa/DGOOl/F5WhbUVCB6POmVMkIz0VC6jifzwR2PU3WQ78J4vs.jpg"></p>';
                brandsList.appendChild(packet)
            } else if (proName.includes("خاتم")){
                packet.innerHTML = '<button class="accordion">لمعرفة دليل مقاسات الخواتم اضغط هنا</button><p class="accordion-content"><img src="https://cdn.salla.sa/DGOOl/k7X8zgNYvLnojxIzZs1ddCdBe0ZmT1vGc4M5f4Mz.jpg"></p>';
                brandsList.appendChild(packet)
            }
    }, 2000); 
        faqsDiv.appendChild(brandsList);

    if (productPage) {
        productPage.after(faqsDiv)
        faqsDiv.after(productBanner);

    }
}



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 = 'max-content';
                        }

                        // })
                    }

                    ;
                }
            });
    }
}

;

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

    , 2000);

document.addEventListener("DOMContentLoaded", ()=> {
        const product=document.querySelector('.product-single');
        if(product) {
            showProductPageDetails();
        }
    })