/* Add custom Js code below */ 
// الأسئلة الشائعة  الصفحة الفرعية
const showFAQsPage = () => {
    if (window.location.pathname.includes('XzDOw')) {
        var cont = document.querySelector("article");
        var output = ""
        var content = ""
        var flag = false
        var flagcount = 0
        for (let i = 0; i < cont.children.length; i++) {
            if (cont.children[i].innerHTML.includes("strong")) {
                if (flagcount > 0) {
                    if (flag === true) {
                        output = output + `<div class="accordion-content">${content}</div>`
                        content = ""
                    }
                }
                output = output + `<button class="accordion">${cont.children[i].innerHTML}</button>`
                flagcount++
            } else {
                if (cont.children[i].innerHTML.includes("br") || cont.children[i].innerHTML.includes("h1")) {
                    continue;
                } else {
                    if (flagcount === 0) {
                        continue
                    }
                    content = content + `<p> ${cont.children[i].innerHTML} </p>`
                    flag = true
                }
            }

        }
        document.querySelector("article").innerHTML = output
    }
}

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 showOurStory = () => {
    const storyDiv = document.createElement("div");
    storyDiv.classList.add('story-div')
    storyDiv.classList.add('container')
    const details = document.createElement("div");
    details.innerHTML = `
        <img src="https://imgur.com/aTWAXFt.png"" alt="" >
        <h2> عطور كافالير </h2>
        <p>
            روّاد في صناعة العطور الفاخرة،  نقدم تجربة عطرية ساحرة تجمع بين الفن والجمال ندمجها في عطر واحد يعكس الأناقة والتميز. 
        </p>
        <a href="https://cavalierperfumes.com/%D9%85%D9%86-%D9%86%D8%AD%D9%86/page-2027414665"_blank" class="btn"> 
 قصتنا الاستثنائية </a>
    `
    storyDiv.appendChild(details);
    const storeCenter = document.querySelector('.s-block:last-of-type')
    if (storeCenter) {
        storeCenter.after(storyDiv)
    }
}

/* #### ####  عن المتجر   ###### ###### */
const updateProductsTitle = () => {
    const first = document.querySelector('.s-block:nth-of-type(2) div h2')
    if (first) {
        const p = document.createElement("p");
        p.innerText =  ``
        first.appendChild(p)     
    }
    
    const second = document.querySelector('.s-block:nth-of-type(3) .s-block__title h2')
    if (second) {
        const p = document.createElement("p");
        p.innerText = ``
        second.appendChild(p)
    }
    
    const third = document.querySelector('.s-block:nth-of-type(6) .s-block__title  h2')
    if (third) {
        const p = document.createElement("p");
        p.innerText = ``
        third.appendChild(p)     
    }
}

window.addEventListener('load', () => {
    showOurStory();
    updateProductsTitle();
    showFAQsPage();
})

/* #### ####   الهيدر الخاص   ###### ###### */
const newHeader = () => {
    const nav = document.createElement("div");
    nav.classList.add('nav-div')
    const details = document.createElement("div");    
    const lang = document.querySelector('html').lang

    details.innerHTML = `
    <ul>
        <li> <a href="#"  id="nav-search" 
            onclick="salla.event.dispatch('search::open')">
            ${lang == 'en' ? 'SEARCH' : 'ابحث'}
            </a>
        </li>
        <li> <a href="https://cavalierperfumes.com/%D8%A7%D9%84%D8%A3%D9%83%D8%AB%D8%B1-%D9%85%D8%A8%D9%8A%D8%B9%D8%A7/c755825461">
        ${lang == 'en' ? 'EXPLORE' : 'اطلب الان'}  
        </a></li>
        <li> <a href="#" id="nav-shop">
        ${lang == 'en' ? 'SHOP' : 'تعرف أكثر'}
        </a> </li>
    </ul>
    `
    nav.appendChild(details);
    const header = document.querySelector('.store-header .header-components .container')
    if (header) {
        header.appendChild(nav)
    }
    const navShop = document.querySelector('#nav-shop')
    const menuBtn = document.querySelector('.mburger.mburger--collapse')
    if (navShop) {
        navShop.onclick = function (e) {
            menuBtn.click()
        }
    }
       
}

const changeSliderLink = () => {
    const sliderLink = document.querySelector('.s-block--slider-with-bg  a.s-slider-block__display-all')
    sliderLink ? sliderLink.href =   `https://cavalierperfumes.com/%D8%A7%D9%84%D8%A3%D9%83%D8%AB%D8%B1-%D9%85%D8%A8%D9%8A%D8%B9%D8%A7/c755825461` : ''   
}

window.addEventListener('load', () => {
    newHeader();
    setTimeout(() => {
        changeSliderLink()
    }, 3000);
})
const swiper = document.querySelector("#default-home-slider-0").querySelector("#default-home-slider-0")

swiper.autoPlay= false