/* Add custom Js styles below */ 
/* Add custom JS styles below */
document.querySelector("body > div.app-inner.flex.flex-col.min-h-full > header > div.main-nav-container.shadow-default.bg-white > div > div > div .flex.items-center.justify-end").innerHTML+=
` <button class="header-btn" onclick="salla.event.dispatch('search::open')">
<i class="header-btn__icon"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
<title>search</title>
<path d="M30.276 28.391l-7.576-7.576c1.644-2.053 2.633-4.652 2.633-7.481 0-6.616-5.384-12-12-12s-12 5.384-12 12 5.384 12 12 12c2.829 0 5.428-0.989 7.481-2.633l7.576 7.576c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885zM13.333 22.667c-5.147 0-9.333-4.187-9.333-9.333s4.187-9.333 9.333-9.333 9.333 4.187 9.333 9.333-4.187 9.333-9.333 9.333z"></path>
</svg></i>
</button>
`;

document.addEventListener('DOMContentLoaded', () => {
    // ======================
    // زر العودة للأعلى
    // ======================
    const scrollToTopBtn = document.createElement('button');
    scrollToTopBtn.id = 'scroll-to-top-btn';
    scrollToTopBtn.innerHTML = '↑'; // أيقونة العودة للأعلى
    scrollToTopBtn.setAttribute('aria-label', 'العودة لأعلى الصفحة');
    scrollToTopBtn.style.display = 'none';
    scrollToTopBtn.style.position = 'fixed';
    scrollToTopBtn.style.bottom = '40px';
    scrollToTopBtn.style.right = '40px';
    scrollToTopBtn.style.padding = '10px 15px';
    scrollToTopBtn.style.backgroundColor = '#ff6600';
    scrollToTopBtn.style.color = '#fff';
    scrollToTopBtn.style.border = 'none';
    scrollToTopBtn.style.borderRadius = '5px';
    scrollToTopBtn.style.cursor = 'pointer';
    scrollToTopBtn.style.zIndex = '9999';
    document.body.appendChild(scrollToTopBtn);

    window.addEventListener('scroll', () => {
        if (window.scrollY > 300) {
            scrollToTopBtn.style.display = 'block';
        } else {
            scrollToTopBtn.style.display = 'none';
        }
    });

    scrollToTopBtn.addEventListener('click', () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });

    // ======================
    // Slider / Carousel
    // ======================
    try {
        const slides = document.querySelectorAll('.slider .slide');
        if(slides.length > 0){
            let current = 0;
            slides.forEach((slide, index) => {
                if(index !== 0) slide.classList.remove('active');
                else slide.classList.add('active');
            });

            setInterval(() => {
                slides[current].classList.remove('active');
                current = (current + 1) % slides.length;
                slides[current].classList.add('active');
            }, 4000);
        }
    } catch (error) {
        console.error('Slider error:', error);
    }
});