script.js

// ==========================================================================
// LASKA Website JavaScript
// Single, clean, working script for all pages
// ==========================================================================

(function() {
    'use strict';
    
    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSite);
    } else {
        initSite();
    }
    
    function initSite() {
        console.log('LASKA Website Initialized');
        
        // Initialize all features
        setupMobileMenu();
        setupCart();
        setupSlideshow();
        setupSeasonalNavigation();
        setupAddToCartButtons();
        setupProductFiltering();
        setupContactForm();
        setupImageErrorHandling();
        
        // Update cart badge on all pages
        updateCartBadge();
    }
    
    // ==================== MOBILE MENU ====================
    function setupMobileMenu() {
        const menuToggle = document.getElementById('menu-toggle');
        const mobileNav = document.getElementById('mobile-nav');
        
        if (!menuToggle || !mobileNav) return;
        
        menuToggle.addEventListener('click', function(e) {
            e.stopPropagation();
            const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true';
            
            menuToggle.setAttribute('aria-expanded', !isExpanded);
            mobileNav.classList.toggle('active');
            document.body.style.overflow = mobileNav.classList.contains('active') ? 'hidden' : '';
            
            // Change icon
            menuToggle.textContent = mobileNav.classList.contains('active') ? '✕' : '☰';
        });
        
        // Close menu when clicking links
        const mobileLinks = mobileNav.querySelectorAll('a');
        mobileLinks.forEach(link => {
            link.addEventListener('click', () => {
                mobileNav.classList.remove('active');
                menuToggle.setAttribute('aria-expanded', 'false');
                document.body.style.overflow = '';
                menuToggle.textContent = '☰';
            });
        });
        
        // Close menu when clicking outside
        document.addEventListener('click', function(e) {
            if (mobileNav.classList.contains('active') && 
                !mobileNav.contains(e.target) && 
                !menuToggle.contains(e.target)) {
                mobileNav.classList.remove('active');
                menuToggle.setAttribute('aria-expanded', 'false');
                document.body.style.overflow = '';
                menuToggle.textContent = '☰';
            }
        });
    }
    
    // ==================== CART FUNCTIONALITY ====================
    function setupCart() {
        // Get or create cart in localStorage
        let cart = JSON.parse(localStorage.getItem('laska-cart')) || [];
        
        // Save cart to localStorage
        function saveCart() {
            localStorage.setItem('laska-cart', JSON.stringify(cart));
            updateCartBadge();
        }
        
        // Add item to cart
        window.addToCart = function(product) {
            // Check if product already exists
            const existingIndex = cart.findIndex(item => 
                item.id === product.id && 
                item.size === product.size && 
                item.color === product.color
            );
            
            if (existingIndex > -1) {
                cart[existingIndex].quantity += product.quantity;
            } else {
                cart.push(product);
            }
            
            saveCart();
            
            // Show feedback
            showNotification('Added to cart!', 'success');
        };
        
        // Remove item from cart
        window.removeFromCart = function(index) {
            cart.splice(index, 1);
            saveCart();
            
            // If on cart page, refresh display
            if (window.location.pathname.includes('cart.html')) {
                renderCartPage();
            }
        };
        
        // Update quantity
        window.updateQuantity = function(index, change) {
            cart[index].quantity += change;
            
            // Remove if quantity is 0
            if (cart[index].quantity <= 0) {
                cart.splice(index, 1);
            }
            
            saveCart();
            
            // If on cart page, refresh display
            if (window.location.pathname.includes('cart.html')) {
                renderCartPage();
            }
        };
        
        // Clear cart
        window.clearCart = function() {
            if (confirm('Are you sure you want to clear your cart?')) {
                cart = [];
                saveCart();
                
                // If on cart page, refresh display
                if (window.location.pathname.includes('cart.html')) {
                    renderCartPage();
                }
            }
        };
        
        // Render cart page
        function renderCartPage() {
            const cartItemsContainer = document.querySelector('.cart-items');
            const orderSummary = document.querySelector('.order-summary');
            const emptyCart = document.querySelector('.empty-cart');
            
            if (!cartItemsContainer) return;
            
            // Show empty cart message if no items
            if (cart.length === 0) {
                if (emptyCart) emptyCart.classList.remove('hidden');
                cartItemsContainer.innerHTML = '';
                if (orderSummary) orderSummary.classList.add('hidden');
                return;
            }
            
            // Hide empty cart message
            if (emptyCart) emptyCart.classList.add('hidden');
            if (orderSummary) orderSummary.classList.remove('hidden');
            
            // Calculate totals
            let subtotal = 0;
            let shipping = 9.95;
            let tax = 0;
            
            // Clear container and render items
            cartItemsContainer.innerHTML = '';
            
            cart.forEach((item, index) => {
                const price = parseFloat(item.price.replace('$', '')) || 0;
                const itemTotal = price * item.quantity;
                subtotal += itemTotal;
                
                const cartItem = document.createElement('div');
                cartItem.className = 'cart-item';
                cartItem.innerHTML = `
                    <img src="${item.image || 'https://placehold.co/300x400/c4a78a/1a1a1a?text=Product'}" 
                         alt="${item.name}" 
                         class="item-image">
                    <div class="item-details">
                        <h3 class="item-name">${item.name}</h3>
                        <p class="item-price">${item.price}</p>
                        <div class="item-options">
                            ${item.size ? `<span class="item-option">Size: ${item.size}</span>` : ''}
                            ${item.color ? `<span class="item-option">Color: ${item.color}</span>` : ''}
                        </div>
                        <div class="item-controls">
                            <div class="quantity-control">
                                <button class="quantity-btn minus-btn" onclick="updateQuantity(${index}, -1)">-</button>
                                <input type="text" class="quantity-input" value="${item.quantity}" readonly>
                                <button class="quantity-btn plus-btn" onclick="updateQuantity(${index}, 1)">+</button>
                            </div>
                            <button class="remove-btn" onclick="removeFromCart(${index})">Remove</button>
                        </div>
                    </div>
                `;
                cartItemsContainer.appendChild(cartItem);
            });
            
            // Calculate tax and total
            tax = subtotal * 0.08; // 8% tax
            const total = subtotal + shipping + tax;
            
            // Update order summary
            if (orderSummary) {
                const summaryHTML = `
                    <h2 class="summary-title">Order Summary</h2>
                    <div class="summary-row">
                        <span>Subtotal (${cart.reduce((sum, item) => sum + item.quantity, 0)} items)</span>
                        <span>$${subtotal.toFixed(2)}</span>
                    </div>
                    <div class="summary-row">
                        <span>Shipping</span>
                        <span>$${shipping.toFixed(2)}</span>
                    </div>
                    <div class="summary-row">
                        <span>Tax</span>
                        <span>$${tax.toFixed(2)}</span>
                    </div>
                    <div class="summary-row summary-total">
                        <span>Total</span>
                        <span>$${total.toFixed(2)}</span>
                    </div>
                    <button class="checkout-btn">Proceed to Checkout</button>
                    <a href="collection.html" class="continue-shopping">Continue Shopping</a>
                `;
                orderSummary.innerHTML = summaryHTML;
                
                // Add checkout button event listener
                const checkoutBtn = orderSummary.querySelector('.checkout-btn');
                if (checkoutBtn) {
                    checkoutBtn.addEventListener('click', function() {
                        alert('Checkout functionality would be implemented here.');
                    });
                }
            }
        }
        
        // If on cart page, render it
        if (window.location.pathname.includes('cart.html')) {
            renderCartPage();
        }
    }
    
    // ==================== SLIDESHOW ====================
    function setupSlideshow() {
        const slides = document.querySelectorAll('.slide');
        const dots = document.querySelectorAll('.dot');
        
        if (slides.length === 0) return;
        
        let currentSlide = 0;
        let slideInterval;
        
        function showSlide(index) {
            // Hide all slides
            slides.forEach(slide => slide.classList.remove('active'));
            dots.forEach(dot => dot.classList.remove('active'));
            
            // Show current slide
            slides[index].classList.add('active');
            dots[index].classList.add('active');
            currentSlide = index;
        }
        
        function nextSlide() {
            let next = currentSlide + 1;
            if (next >= slides.length) next = 0;
            showSlide(next);
        }
        
        function prevSlide() {
            let prev = currentSlide - 1;
            if (prev < 0) prev = slides.length - 1;
            showSlide(prev);
        }
        
        // Initialize first slide
        showSlide(0);
        
        // Set up automatic slideshow
        slideInterval = setInterval(nextSlide, 5000);
        
        // Pause on hover
        const slideshow = document.querySelector('.slideshow');
        if (slideshow) {
            slideshow.addEventListener('mouseenter', () => clearInterval(slideInterval));
            slideshow.addEventListener('mouseleave', () => {
                slideInterval = setInterval(nextSlide, 5000);
            });
        }
        
        // Set up dots navigation
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                clearInterval(slideInterval);
                showSlide(index);
                slideInterval = setInterval(nextSlide, 5000);
            });
        });
        
        // Add navigation arrows if they exist
        const prevBtn = document.querySelector('.slider-prev');
        const nextBtn = document.querySelector('.slider-next');
        
        if (prevBtn) {
            prevBtn.addEventListener('click', () => {
                clearInterval(slideInterval);
                prevSlide();
                slideInterval = setInterval(nextSlide, 5000);
            });
        }
        
        if (nextBtn) {
            nextBtn.addEventListener('click', () => {
                clearInterval(slideInterval);
                nextSlide();
                slideInterval = setInterval(nextSlide, 5000);
            });
        }
    }
    
    // ==================== SEASONAL NAVIGATION ====================
    function setupSeasonalNavigation() {
        const seasonButtons = document.querySelectorAll('.season-btn');
        const seasonContents = document.querySelectorAll('.season-content');
        
        if (seasonButtons.length === 0) return;
        
        seasonButtons.forEach(button => {
            button.addEventListener('click', function() {
                // Remove active class from all buttons
                seasonButtons.forEach(btn => btn.classList.remove('active'));
                
                // Add active class to clicked button
                this.classList.add('active');
                
                // Get season from data attribute
                const season = this.getAttribute('data-season');
                
                // Hide all season contents
                seasonContents.forEach(content => {
                    content.classList.remove('active');
                });
                
                // Show selected season content
                const selectedContent = document.getElementById(season + '-collection');
                if (selectedContent) {
                    selectedContent.classList.add('active');
                    
                    // Smooth scroll to collection
                    setTimeout(() => {
                        selectedContent.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }, 100);
                }
            });
        });
    }
    
    // ==================== PRODUCT FILTERING ====================
    function setupProductFiltering() {
        const filterButtons = document.querySelectorAll('.filter-btn');
        const productCards = document.querySelectorAll('.product-card');
        
        if (filterButtons.length === 0) return;
        
        filterButtons.forEach(button => {
            button.addEventListener('click', function() {
                // Remove active class from all buttons
                filterButtons.forEach(btn => btn.classList.remove('active'));
                
                // Add active class to clicked button
                this.classList.add('active');
                
                // Get filter from data attribute
                const filter = this.getAttribute('data-filter');
                
                // Filter products
                productCards.forEach(card => {
                    if (filter === 'all' || card.getAttribute('data-category') === filter) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        });
    }
    
    // ==================== ADD TO CART BUTTONS ====================
    function setupAddToCartButtons() {
        const addToCartButtons = document.querySelectorAll('.product-btn:not(.checkout-btn)');
        
        addToCartButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                
                // Get product info from the card
                const card = this.closest('.product-card');
                if (!card) return;
                
                const productName = card.querySelector('.product-name')?.textContent || 'Product';
                const productPrice = card.querySelector('.product-price')?.textContent || '$0.00';
                const productImage = card.querySelector('.product-image')?.src || '';
                
                // Create product object
                const product = {
                    id: Date.now() + Math.random().toString(36).substr(2, 9),
                    name: productName.trim(),
                    price: productPrice.trim(),
                    image: productImage,
                    quantity: 1,
                    size: 'M', // Default size
                    color: 'Default' // Default color
                };
                
                // Add to cart
                addToCart(product);
                
                // Visual feedback
                const originalText = this.textContent;
                this.textContent = '✓ Added';
                this.style.backgroundColor = '#10b981';
                this.style.color = 'white';
                
                setTimeout(() => {
                    this.textContent = originalText;
                    this.style.backgroundColor = '';
                    this.style.color = '';
                }, 2000);
            });
        });
    }
    
    // ==================== CONTACT FORM ====================
    function setupContactForm() {
        const contactForm = document.getElementById('contact-form');
        if (!contactForm) return;
        
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form data
            const formData = new FormData(this);
            const formObject = {};
            formData.forEach((value, key) => {
                formObject[key] = value;
            });
            
            // Simple validation
            if (!formObject.email || !formObject.message) {
                alert('Please fill in all required fields.');
                return;
            }
            
            // Disable submit button
            const submitBtn = this.querySelector('button[type="submit"]');
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.textContent = 'Sending...';
            }
            
            // Simulate form submission
            setTimeout(() => {
                // Show success message
                showNotification('Message sent successfully! We\'ll get back to you soon.', 'success');
                
                // Reset form
                contactForm.reset();
                
                // Re-enable submit button
                if (submitBtn) {
                    submitBtn.disabled = false;
                    submitBtn.textContent = 'Send Message';
                }
            }, 1500);
        });
    }
    
    // ==================== IMAGE ERROR HANDLING ====================
    function setupImageErrorHandling() {
        const images = document.querySelectorAll('img');
        
        images.forEach(img => {
            img.addEventListener('error', function() {
                // Determine context for better placeholder
                let placeholderText = 'Image';
                if (this.closest('.product-card')) {
                    placeholderText = 'Product';
                } else if (this.closest('.slide')) {
                    placeholderText = 'Slide';
                }
                
                // Use placeholder service
                this.src = `https://placehold.co/400x533/f5f5f5/333?text=${placeholderText}+Image`;
                this.alt = 'Image not available';
            });
        });
    }
    
    // ==================== UTILITY FUNCTIONS ====================
    function updateCartBadge() {
        const cart = JSON.parse(localStorage.getItem('laska-cart')) || [];
        const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
        
        // Update all cart badges
        const cartBadges = document.querySelectorAll('.cart-badge, .cart-count');
        cartBadges.forEach(badge => {
            badge.textContent = totalItems;
            badge.style.display = totalItems > 0 ? 'flex' : 'none';
        });
    }
    
    function showNotification(message, type = 'info') {
        // Create notification element
        const notification = document.createElement('div');
        notification.className = `notification ${type}`;
        notification.innerHTML = `
            <span>${message}</span>
            <button class="notification-close">&times;</button>
        `;
        
        // Add styles
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 1rem 1.5rem;
            background: ${type === 'success' ? '#10b981' : '#3b82f6'};
            color: white;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 2000;
            display: flex;
            align-items: center;
            gap: 1rem;
            animation: slideIn 0.3s ease;
        `;
        
        // Add close button styles
        notification.querySelector('.notification-close').style.cssText = `
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0;
            margin: 0;
            line-height: 1;
        `;
        
        // Add keyframe animation
        const style = document.createElement('style');
        style.textContent = `
            @keyframes slideIn {
                from { transform: translateX(100%); opacity: 0; }
                to { transform: translateX(0); opacity: 1; }
            }
        `;
        document.head.appendChild(style);
        
        // Add to page
        document.body.appendChild(notification);
        
        // Close button functionality
        notification.querySelector('.notification-close').addEventListener('click', () => {
            notification.style.animation = 'slideOut 0.3s ease';
            setTimeout(() => notification.remove(), 300);
        });
        
        // Auto-remove after 5 seconds
        setTimeout(() => {
            if (notification.parentNode) {
                notification.style.animation = 'slideOut 0.3s ease';
                setTimeout(() => notification.remove(), 300);
            }
        }, 5000);
    }
    
    // Make functions available globally
    window.updateCartBadge = updateCartBadge;
    window.showNotification = showNotification;
})();