shubraVeil/js/main.js

document.addEventListener('DOMContentLoaded', function() {
    // Mobile Menu Toggle
    const mobileMenuBtn = document.querySelector('.mobile-menu');
    const navLinks = document.querySelector('.nav-links');
    const navbar = document.querySelector('.navbar');

    mobileMenuBtn.addEventListener('click', function() {
        navLinks.classList.toggle('active');
    });

    // Smooth Scrolling for Navigation Links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                const headerOffset = 100;
                const elementPosition = target.getBoundingClientRect().top;
                const offsetPosition = elementPosition - headerOffset;

                window.scrollBy({
                    top: offsetPosition,
                    behavior: 'smooth'
                });
                // Close mobile menu if open
                navLinks.classList.remove('active');
            }
        });
    });

    // تغيير الهيدر عند التمرير
    window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    });

    // إضافة الكلاس عند تحميل الصفحة إذا كنا في منتصف الصفحة
    if (window.scrollY > 50) {
        navbar.classList.add('scrolled');
    }

    // تفعيل الأسئلة الشائعة
    document.querySelectorAll('.faq-question').forEach(question => {
        question.addEventListener('click', () => {
            const faqItem = question.parentElement;
            faqItem.classList.toggle('active');
        });
    });

    // معالجة النشرة البريدية
    document.getElementById('newsletter-form')?.addEventListener('submit', async (e) => {
        e.preventDefault();
        const email = e.target.email.value;
        
        try {
            const response = await fetch('/api/newsletter-subscribe.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ email })
            });
            
            if (response.ok) {
                alert('شكراً لاشتراكك في نشرتنا البريدية!');
                e.target.reset();
            } else {
                throw new Error('حدث خطأ أثناء الاشتراك');
            }
        } catch (error) {
            alert('عذراً، حدث خطأ. يرجى المحاولة مرة أخرى.');
            console.error('Newsletter subscription error:', error);
        }
    });

    // Enhanced Search Functionality
    const searchBar = document.querySelector('.search-bar');
    const searchIcon = document.querySelector('.search-icon');
    const voiceSearchIcon = document.querySelector('.voice-search-icon');
    const searchSuggestions = document.querySelector('.search-suggestions');
    const filterTags = document.querySelectorAll('.filter-tag');
    const searchHistory = document.querySelector('.search-history');

    // Load search history from localStorage
    let searchHistoryItems = JSON.parse(localStorage.getItem('searchHistory') || '[]');
    updateSearchHistory();

    // Search input handler
    let searchTimeout;
    searchBar.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        const query = this.value.trim();
        
        if (query.length > 0) {
            searchIcon.classList.add('searching');
            searchTimeout = setTimeout(() => {
                fetchSearchSuggestions(query);
            }, 300);
        } else {
            searchSuggestions.classList.remove('active');
            searchIcon.classList.remove('searching');
        }
    });

    // Voice search handler
    voiceSearchIcon.addEventListener('click', function() {
        if ('webkitSpeechRecognition' in window) {
            const recognition = new webkitSpeechRecognition();
            recognition.lang = 'ar';
            recognition.continuous = false;
            recognition.interimResults = false;

            recognition.onstart = function() {
                voiceSearchIcon.classList.add('recording');
                searchBar.placeholder = 'جاري الاستماع...';
            };

            recognition.onresult = function(event) {
                const transcript = event.results[0][0].transcript;
                searchBar.value = transcript;
                searchBar.dispatchEvent(new Event('input'));
            };

            recognition.onerror = function() {
                voiceSearchIcon.classList.remove('recording');
                searchBar.placeholder = 'ابحث عن المنتجات...';
            };

            recognition.onend = function() {
                voiceSearchIcon.classList.remove('recording');
                searchBar.placeholder = 'ابحث عن المنتجات...';
            };

            recognition.start();
        } else {
            alert('عذراً، البحث الصوتي غير مدعوم في متصفحك');
        }
    });

    // Filter tags handler
    filterTags.forEach(tag => {
        tag.addEventListener('click', function() {
            this.classList.toggle('active');
            const activeFilters = Array.from(filterTags)
                .filter(tag => tag.classList.contains('active'))
                .map(tag => tag.textContent);
            
            if (activeFilters.length > 0) {
                searchBar.value = activeFilters.join(' ');
                searchBar.dispatchEvent(new Event('input'));
            }
        });
    });

    // Mock function for search suggestions (replace with actual API call)
    async function fetchSearchSuggestions(query) {
        try {
            // Simulate API call delay
            await new Promise(resolve => setTimeout(resolve, 500));
            
            // Mock suggestions (replace with actual API response)
            const suggestions = [
                'زيت اللافندر العطري',
                'زيت الورد العطري',
                'زيت اللوز الثابت',
                'ماء الورد الطبيعي',
                'كريم مرطب طبيعي'
            ].filter(item => item.includes(query));

            // Update suggestions UI
            searchSuggestions.innerHTML = suggestions.map(item => 
                `<div class="suggestion-item">${item}</div>`
            ).join('');
            
            if (suggestions.length > 0) {
                searchSuggestions.classList.add('active');
            } else {
                searchSuggestions.classList.remove('active');
            }

            // Add click handlers to suggestions
            document.querySelectorAll('.suggestion-item').forEach(item => {
                item.addEventListener('click', function() {
                    searchBar.value = this.textContent;
                    addToSearchHistory(this.textContent);
                    searchSuggestions.classList.remove('active');
                    // Trigger search with selected suggestion
                    performSearch(this.textContent);
                });
            });

        } catch (error) {
            console.error('Error fetching suggestions:', error);
        } finally {
            searchIcon.classList.remove('searching');
        }
    }

    // Add to search history
    function addToSearchHistory(query) {
        if (!searchHistoryItems.includes(query)) {
            searchHistoryItems.unshift(query);
            if (searchHistoryItems.length > 5) {
                searchHistoryItems.pop();
            }
            localStorage.setItem('searchHistory', JSON.stringify(searchHistoryItems));
            updateSearchHistory();
        }
    }

    // Update search history UI
    function updateSearchHistory() {
        if (searchHistoryItems.length > 0) {
            const historyHtml = searchHistoryItems
                .map(item => `<span class="history-item">${item}</span>`)
                .join('');
            searchHistory.innerHTML = 'عمليات البحث السابقة: ' + historyHtml;

            // Add click handlers to history items
            document.querySelectorAll('.history-item').forEach(item => {
                item.addEventListener('click', function() {
                    searchBar.value = this.textContent;
                    searchBar.dispatchEvent(new Event('input'));
                });
            });
        } else {
            searchHistory.style.display = 'none';
        }
    }

    // Perform search (replace with actual search implementation)
    function performSearch(query) {
        console.log('Performing search for:', query);
        // Implement actual search functionality here
    }
});