/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

function custom_auto_slide_js() {
    ?>
    <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        function initAutoSlide() {
            const slider = document.querySelector('.Auto-Slide'); // class slider của bạn
            if (!slider) {
                setTimeout(initAutoSlide, 200); // chờ slider load
                return;
            }

            const slides = slider.querySelectorAll('.ux-slide');
            if (slides.length === 0) return;

            let currentIndex = 0;
            const delay = 3000; // thời gian mỗi slide (ms)
            const transitionTime = 500; // thời gian fade (ms)
            let interval;

            // Thiết lập style slider
            slider.style.position = 'relative';
            slides.forEach((slide, i) => {
                slide.style.position = 'absolute';
                slide.style.top = '0';
                slide.style.left = '0';
                slide.style.width = '100%';
                slide.style.opacity = (i === 0) ? '1' : '0';
                slide.style.transition = `opacity ${transitionTime}ms ease-in-out`;
            });

            function showSlide(index) {
                slides.forEach((slide, i) => {
                    slide.style.opacity = (i === index) ? '1' : '0';
                    slide.style.zIndex = (i === index) ? '1' : '0';
                });
            }

            function startSlider() {
                interval = setInterval(() => {
                    currentIndex++;
                    if (currentIndex >= slides.length) currentIndex = 0;
                    showSlide(currentIndex);
                    updateDots();
                }, delay);
            }

            function stopSlider() {
                clearInterval(interval);
            }

            // Tạo navigation dots
            const dotsContainer = document.createElement('div');
            dotsContainer.style.position = 'absolute';
            dotsContainer.style.bottom = '10px';
            dotsContainer.style.left = '50%';
            dotsContainer.style.transform = 'translateX(-50%)';
            dotsContainer.style.display = 'flex';
            dotsContainer.style.gap = '8px';
            dotsContainer.style.zIndex = '10';

            slides.forEach((_, i) => {
                const dot = document.createElement('span');
                dot.style.width = '12px';
                dot.style.height = '12px';
                dot.style.borderRadius = '50%';
                dot.style.background = (i === 0) ? '#fff' : 'rgba(255,255,255,0.5)';
                dot.style.cursor = 'pointer';
                dot.addEventListener('click', () => {
                    currentIndex = i;
                    showSlide(currentIndex);
                    updateDots();
                    stopSlider();
                    startSlider();
                });
                dotsContainer.appendChild(dot);
            });

            function updateDots() {
                dotsContainer.childNodes.forEach((dot, i) => {
                    dot.style.background = (i === currentIndex) ? '#fff' : 'rgba(255,255,255,0.5)';
                });
            }

            slider.appendChild(dotsContainer);

            // Tạo navigation arrows
            const createArrow = (direction) => {
                const arrow = document.createElement('div');
                arrow.innerHTML = direction === 'left' ? '&#10094;' : '&#10095;';
                arrow.style.position = 'absolute';
                arrow.style.top = '50%';
                arrow.style.transform = 'translateY(-50%)';
                arrow.style[direction] = '10px';
                arrow.style.fontSize = '30px';
                arrow.style.color = '#fff';
                arrow.style.cursor = 'pointer';
                arrow.style.userSelect = 'none';
                arrow.style.zIndex = '10';
                arrow.addEventListener('click', () => {
                    currentIndex += (direction === 'left' ? -1 : 1);
                    if (currentIndex < 0) currentIndex = slides.length - 1;
                    if (currentIndex >= slides.length) currentIndex = 0;
                    showSlide(currentIndex);
                    updateDots();
                });
                slider.appendChild(arrow);
            };

            createArrow('left');
            createArrow('right');

            // Pause khi hover chuột
            slider.addEventListener('mouseenter', stopSlider);
            slider.addEventListener('mouseleave', startSlider);

            // Khởi chạy slider
            startSlider();
        }

        initAutoSlide();
    });
    </script>
    <?php
}
add_action('wp_footer', 'custom_auto_slide_js');