// assets/js/main.js
document.addEventListener('DOMContentLoaded', function() {
    // Initialize AOS
    AOS.init({
        duration: 800,
        easing: 'ease-in-out',
        once: true,
        mirror: false
    });

    // Header Scroll Effect
    window.addEventListener('scroll', function() {
        if (window.scrollY > 100) {
            document.querySelector('.header').classList.add('scrolled');
            document.querySelector('.back-to-top').classList.add('show');
        } else {
            document.querySelector('.header').classList.remove('scrolled');
            document.querySelector('.back-to-top').classList.remove('show');
        }
    });

    // Mobile Menu Toggle
    const mobileToggle = document.querySelector('.mobile-toggle');
    const navMenu = document.querySelector('.nav-menu');
    
    if (mobileToggle) {
        mobileToggle.addEventListener('click', function() {
            navMenu.classList.toggle('active');
            this.querySelector('i').classList.toggle('fa-bars');
            this.querySelector('i').classList.toggle('fa-times');
        });
    }

    // Mobile Dropdown Toggle
    const hasDropdown = document.querySelectorAll('.has-dropdown');
    hasDropdown.forEach(item => {
        item.addEventListener('click', function(e) {
            if (window.innerWidth < 992) {
                e.preventDefault();
                this.classList.toggle('dropdown-open');
            }
        });
    });

    // Hero Slider
    const heroSlides = document.querySelectorAll('.hero-slide');
    const heroDots = document.querySelectorAll('.hero-dot');
    let currentSlide = 0;
    let heroSlideInterval;

    function showSlide(index) {
        heroSlides.forEach(slide => slide.classList.remove('active'));
        heroDots.forEach(dot => dot.classList.remove('active'));
        
        if (heroSlides[index]) {
            heroSlides[index].classList.add('active');
            heroDots[index].classList.add('active');
            currentSlide = index;
        }
    }

    function nextSlide() {
        if (heroSlides.length > 0) {
            currentSlide = (currentSlide + 1) % heroSlides.length;
            showSlide(currentSlide);
        }
    }

    function startSlideInterval() {
        if (heroSlides.length > 1) {
            heroSlideInterval = setInterval(nextSlide, 5000);
        }
    }

    if (heroDots.length > 0) {
        heroDots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                clearInterval(heroSlideInterval);
                showSlide(index);
                startSlideInterval();
            });
        });
    }

    startSlideInterval();

    // Product Tabs
    const productTabs = document.querySelectorAll('.product-tab');
    const productCards = document.querySelectorAll('.product-card');
    
    if (productTabs.length > 0) {
        productTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                productTabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                
                const category = tab.getAttribute('data-category');
                
                productCards.forEach(card => {
                    if (category === 'all') {
                        card.style.display = 'block';
                    } else {
                        if (card.getAttribute('data-category') === category) {
                            card.style.display = 'block';
                        } else {
                            card.style.display = 'none';
                        }
                    }
                });
            });
        });
    }

    // Testimonial Slider
    const testimonialSlides = document.querySelectorAll('.testimonial-slide');
    const testimonialPrev = document.querySelector('.testimonial-prev');
    const testimonialNext = document.querySelector('.testimonial-next');
    let currentTestimonial = 0;
    
    function showTestimonial(index) {
        if (testimonialSlides.length > 0) {
            testimonialSlides.forEach(slide => slide.classList.remove('active'));
            testimonialSlides[index].classList.add('active');
            currentTestimonial = index;
        }
    }
    
    if (testimonialPrev && testimonialNext) {
        testimonialPrev.addEventListener('click', () => {
            if (testimonialSlides.length > 0) {
                currentTestimonial = (currentTestimonial - 1 + testimonialSlides.length) % testimonialSlides.length;
                showTestimonial(currentTestimonial);
            }
        });
        
        testimonialNext.addEventListener('click', () => {
            if (testimonialSlides.length > 0) {
                currentTestimonial = (currentTestimonial + 1) % testimonialSlides.length;
                showTestimonial(currentTestimonial);
            }
        });
        
        // Auto change testimonial every 8 seconds
        if (testimonialSlides.length > 1) {
            setInterval(() => {
                currentTestimonial = (currentTestimonial + 1) % testimonialSlides.length;
                showTestimonial(currentTestimonial);
            }, 8000);
        }
    }

    // FAQ Accordion
    const faqItems = document.querySelectorAll('.faq-item');
    faqItems.forEach(item => {
        const question = item.querySelector('.faq-question');
        question.addEventListener('click', () => {
            if(item.classList.contains('active')) {
                item.classList.remove('active');
            } else {
                faqItems.forEach(i => i.classList.remove('active'));
                item.classList.add('active');
            }
        });
    });

    // Counter Animation
    const counters = document.querySelectorAll('.counter-number');
    
    function startCounting() {
        counters.forEach(counter => {
            const target = parseInt(counter.getAttribute('data-count'));
            const duration = 2000; // 2 seconds
            const increment = target / (duration / 20); // Update every 20ms
            let current = 0;
            
            const updateCounter = () => {
                current += increment;
                if (current < target) {
                    counter.textContent = Math.floor(current);
                    setTimeout(updateCounter, 20);
                } else {
                    counter.textContent = target;
                }
            };
            
            updateCounter();
        });
    }

    // Start counting when the counters section is in view
    const counterSection = document.querySelector('.counters');
    if (counterSection) {
        const observer = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting) {
                startCounting();
                observer.disconnect();
            }
        });
        
        observer.observe(counterSection);
    }

    // Product Quick View
    const quickViewButtons = document.querySelectorAll('.product-quickview');
    const productModal = document.getElementById('productModal');
    const closeProductModal = document.getElementById('closeProductModal');
    
    if (quickViewButtons.length > 0 && productModal && closeProductModal) {
        quickViewButtons.forEach(button => {
            button.addEventListener('click', function() {
                const productId = this.getAttribute('data-product-id');
                
                // AJAX request to get product details
                fetch(`api/product_modal.php?id=${productId}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            const product = data.product;
                            
                            // Update modal content with product details
                            const mainImage = document.querySelector('.product-modal-main-image');
                            const thumbs = document.querySelector('.product-modal-thumbs');
                            const details = document.querySelector('.product-modal-details');
                            
                            // Set main image
                            mainImage.innerHTML = `<img src="${product.image}" alt="${product.title}">`;
                            
                            // Set thumbnails
                            let thumbsHTML = '';
                            if (product.gallery && product.gallery.length > 0) {
                                thumbsHTML = `<div class="product-modal-thumb active"><img src="${product.image}" alt="${product.title}"></div>`;
                                product.gallery.forEach(img => {
                                    thumbsHTML += `<div class="product-modal-thumb"><img src="${img}" alt="${product.title}"></div>`;
                                });
                            } else {
                                thumbsHTML = `<div class="product-modal-thumb active"><img src="${product.image}" alt="${product.title}"></div>`;
                            }
                            thumbs.innerHTML = thumbsHTML;
                            
                            // Set product details
                            let specificationsHTML = '';
                            if (product.specifications) {
                                for (const [key, value] of Object.entries(product.specifications)) {
                                    specificationsHTML += `
                                    <div class="product-meta-item">
                                        <div class="product-meta-label">${key}:</div>
                                        <div>${value}</div>
                                    </div>
                                    `;
                                }
                            }
                            
                            details.innerHTML = `
                                <h2 class="product-modal-title">${product.title}</h2>
                                <div class="product-modal-category">${product.category_name}</div>
                                <div class="product-modal-price">
                                    ${product.price_formatted}
                                    ${product.old_price ? `<span class="product-modal-old-price">${product.old_price_formatted}</span>` : ''}
                                </div>
                                <div class="product-modal-description">
                                    <p>${product.short_description}</p>
                                </div>
                                <div class="product-modal-meta">
                                    ${specificationsHTML}
                                    <div class="product-meta-item">
                                        <div class="product-meta-label">Stok Durumu:</div>
                                        <div>${product.stock > 0 ? 'Stokta' : 'Stokta Yok'}</div>
                                    </div>
                                </div>
                                <div class="product-modal-actions">
                                    <a href="product.php?id=${product.id}" class="btn">Ürün Detayları</a>
                                    <a href="contact.php" class="btn btn-outlined">İletişime Geç</a>
                                </div>
                            `;
                            
                            // Add click event to thumbnails
                            const thumbnails = document.querySelectorAll('.product-modal-thumb');
                            thumbnails.forEach(thumb => {
                                thumb.addEventListener('click', function() {
                                    thumbnails.forEach(t => t.classList.remove('active'));
                                    this.classList.add('active');
                                    const thumbImage = this.querySelector('img').src;
                                    mainImage.querySelector('img').src = thumbImage;
                                });
                            });
                            
                            // Show the modal
                            productModal.classList.add('open');
                            document.body.style.overflow = 'hidden';
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching product data:', error);
                    });
            });
        });
        
        closeProductModal.addEventListener('click', function() {
            productModal.classList.remove('open');
            document.body.style.overflow = '';
        });
    }

    // Video Modal
    const videoButton = document.getElementById('about-video-play');
    const videoModal = document.getElementById('videoModal');
    const closeVideoModal = document.getElementById('closeVideoModal');
    const videoIframe = document.querySelector('.video-container iframe');
    
    if (videoButton && videoModal && closeVideoModal && videoIframe) {
        videoButton.addEventListener('click', function() {
            // Set video src (example YouTube video)
            videoIframe.src = 'https://www.youtube.com/embed/YOUR_VIDEO_ID?autoplay=1';
            // Show the modal
            videoModal.classList.add('open');
            document.body.style.overflow = 'hidden';
        });
        
        closeVideoModal.addEventListener('click', function() {
            // Stop video playback
            videoIframe.src = '';
            // Hide the modal
            videoModal.classList.remove('open');
            document.body.style.overflow = '';
        });
    }

    // Close modals when clicking outside
    window.addEventListener('click', function(e) {
        if (e.target === productModal) {
            productModal.classList.remove('open');
            document.body.style.overflow = '';
        }
        if (e.target === videoModal) {
            videoIframe.src = '';
            videoModal.classList.remove('open');
            document.body.style.overflow = '';
        }
    });

    // Back to Top Button
    const backToTop = document.querySelector('.back-to-top');
    if (backToTop) {
        backToTop.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    }
});