script.js

document.addEventListener('DOMContentLoaded', function() {
    // Initialize the cart badge from localStorage
    updateCartBadge();
    
    // Set current year in footer
    const yearElement = document.getElementById('current-year');
    if (yearElement) {
        yearElement.textContent = new Date().getFullYear();
    }
    
    // Mobile menu toggle
    setupMobileMenu();
    
    // Cart functionality
    setupCartFunctionality();
    
    // Product detail buttons
    setupProductDetailButtons();
    
    // Auth functionality
    setupAuthFunctionality();
});

// Global click handler for all interactions
document.addEventListener('click', function(e) {
    // Cart icon click handler
    if (e.target.classList.contains('cart-icon') || e.target.closest('.cart-icon')) {
        e.preventDefault();
        showCart();
        return;
    }
    
    // View details click handler
    if (e.target.classList.contains('view-details')) {
        handleViewDetailsClick(e.target);
        return;
    }
});

// Handler for view details button click
function handleViewDetailsClick(button) {
    const productCard = button.closest('.product-card');
    const productName = productCard.querySelector('.product-title').textContent;
    const productCategory = productCard.querySelector('.product-category').textContent;
    const productImage = productCard.querySelector('.product-img img').src;
    
    // Get price (handle both regular and sale prices)
    let productPrice;
    if (productCard.querySelector('.price-container')) {
        // This is a sale item
        productPrice = productCard.querySelector('.product-price').textContent;
        var originalPrice = productCard.querySelector('.product-original-price').textContent;
    } else {
        productPrice = productCard.querySelector('.product-price').textContent;
        var originalPrice = null;
    }
    
    showProductDetails(productName, productCategory, productImage, productPrice, originalPrice);
}

// Mobile menu toggle
function setupMobileMenu() {
    const menuToggle = document.getElementById('menuToggle');
    const navLinks = document.getElementById('navLinks');
    
    if (menuToggle && navLinks) {
        menuToggle.addEventListener('click', function() {
            navLinks.classList.toggle('active');
            // Change icon based on menu state
            if (navLinks.classList.contains('active')) {
                menuToggle.innerHTML = '<i class="fas fa-times"></i>';
            } else {
                menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
            }
        });
        
        // Close menu when clicking outside
        document.addEventListener('click', function(e) {
            if (!e.target.closest('.navbar') && navLinks.classList.contains('active')) {
                navLinks.classList.remove('active');
                menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
            }
        });
        
        // Close menu when clicking a link
        const mobileLinks = navLinks.querySelectorAll('a');
        mobileLinks.forEach(link => {
            link.addEventListener('click', function() {
                if (window.innerWidth <= 768) {
                    navLinks.classList.remove('active');
                    menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
                }
            });
        });
    }
}

// Cart functionality
function setupCartFunctionality() {
    // Add to cart buttons
    const addToCartButtons = document.querySelectorAll('.add-to-cart');
    
    addToCartButtons.forEach(button => {
        button.addEventListener('click', function() {
            const productCard = this.closest('.product-card');
            const productName = productCard.querySelector('.product-title').textContent;
            let productPrice;
            
          // Check if this is a sale item with discounted price
if (productCard.querySelector('.price-container')) {
    productPrice = parseFloat(productCard.querySelector('.product-price').textContent.replace('₹', '').replace(/,/g, ''));
} else {
    productPrice = parseFloat(productCard.querySelector('.product-price').textContent.replace('₹', '').replace(/,/g, ''));
}

const productImage = productCard.querySelector('.product-img img').src;

addToCart(productName, productPrice, productImage);
        });        
    });
}

// Product detail functionality
function setupProductDetailButtons() {
    const viewDetailsButtons = document.querySelectorAll('.view-details');
    
    viewDetailsButtons.forEach(button => {
        button.addEventListener('click', function() {
            handleViewDetailsClick(this);
        });
    });
}

// Add product details modal
function showProductDetails(name, category, image, price, originalPrice) {
    // Create modal element
    const modal = document.createElement('div');
    modal.className = 'product-modal';
    
    let priceDisplay = originalPrice ? 
        `<div class="price-container">
            <p class="product-original-price">${originalPrice}</p>
            <p class="product-price">${price}</p>
         </div>` : 
        `<p class="product-price">${price}</p>`;
    
    const modalContent = `
        <div class="product-modal-content">
            <div class="product-modal-header">
                <h3>Product Details</h3>
                <button class="close-product-modal">&times;</button>
            </div>
            <div class="product-modal-body">
                <div class="product-detail-grid">
                    <div class="product-detail-img">
                        <img src="${image}" alt="${name}">
                    </div>
                    <div class="product-detail-info">
                        <h2>${name}</h2>
                        <p class="product-detail-category">${category}</p>
                        ${priceDisplay}
                        <div class="product-detail-description">
                            <h4>Description</h4>
                            <p>Experience exceptional comfort and performance with the ${name}. Designed for optimal support and durability, these shoes feature responsive cushioning and a breathable upper for all-day wear.</p>
                        </div>
                        <div class="product-detail-features">
                            <h4>Features</h4>
                            <ul>
                                <li>Lightweight, responsive cushioning</li>
                                <li>Breathable mesh upper</li>
                                <li>Durable rubber outsole</li>
                                <li>Comfortable padded collar</li>
                                <li>Available in multiple colorways</li>
                            </ul>
                        </div>
                        <div class="product-detail-buttons">
                            <button class="add-to-cart-detail">Add to Cart</button>
                            <select class="size-select">
                                <option value="">Select Size</option>
                                <option value="7">US 7</option>
                                <option value="7.5">US 7.5</option>
                                <option value="8">US 8</option>
                                <option value="8.5">US 8.5</option>
                                <option value="9">US 9</option>
                                <option value="9.5">US 9.5</option>
                                <option value="10">US 10</option>
                                <option value="10.5">US 10.5</option>
                                <option value="11">US 11</option>
                                <option value="11.5">US 11.5</option>
                                <option value="12">US 12</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    modal.innerHTML = modalContent;
    document.body.appendChild(modal);
    
    // Add event listeners
    const closeButton = modal.querySelector('.close-product-modal');
    closeButton.addEventListener('click', function() {
        document.body.removeChild(modal);
    });
    
    // Close when clicking outside modal content
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            document.body.removeChild(modal);
        }
    });
    
    // Add to cart from detail page
    const addToCartButton = modal.querySelector('.add-to-cart-detail');
    addToCartButton.addEventListener('click', function() {
        // Get the price value by removing the $ sign and converting to number
        const priceValue = parseFloat(price.replace('$', ''));
        addToCart(name, priceValue, image);
        document.body.removeChild(modal);
    });
}

// Add item to cart
function addToCart(name, price, image) {
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    
    // Check if item already exists in cart
    const existingItemIndex = cart.findIndex(item => item.name === name);
    
    if (existingItemIndex !== -1) {
        // Item exists, increment quantity
        cart[existingItemIndex].quantity += 1;
    } else {
        // Item doesn't exist, add new item
        cart.push({
            name: name,
            price: price,
            image: image,
            quantity: 1
        });
    }
    
    // Update localStorage and cart badge
    localStorage.setItem('cart', JSON.stringify(cart));
    updateCartBadge();
    
    // Show success message
    showToast(`${name} added to cart!`);
}

// Update cart badge with current quantity
function updateCartBadge(count) {
    const cartBadge = document.getElementById('cartBadge');
    
    if (cartBadge) {
        if (count !== undefined) {
            cartBadge.textContent = count;
        } else {
            const cart = JSON.parse(localStorage.getItem('cart')) || [];
            const itemCount = cart.reduce((total, item) => total + item.quantity, 0);
            cartBadge.textContent = itemCount;
        }
    }
}

// Show cart modal
function showCart() {
    const cart = JSON.parse(localStorage.getItem('cart')) || [];
    
    // Create modal element
    const modal = document.createElement('div');
    modal.className = 'cart-modal';
    
    let cartContent = `
        <div class="cart-modal-content">
            <div class="cart-modal-header">
                <h3>Shopping Cart</h3>
                <button class="close-cart-modal">&times;</button>
            </div>
            <div class="cart-modal-body">
    `;
    
    if (cart.length > 0) {
        cartContent += `<div class="cart-items">`;
        
        let total = 0;
        
        cart.forEach((item, index) => {
            const itemTotal = item.price * item.quantity;
            total += itemTotal;
            
            cartContent += `
                <div class="cart-item" data-index="${index}">
                    <div class="cart-item-img">
                        <img src="${item.image}" alt="${item.name}">
                    </div>
                    <div class="cart-item-details">
                        <h4>${item.name}</h4>
                        <p class="cart-item-price">₹${item.price.toFixed(2)}</p>
                        <div class="cart-quantity">
                            <span class="quantity-btn decrease">-</span>
                            <span class="quantity-value">${item.quantity}</span>
                            <span class="quantity-btn increase">+</span>
                        </div>
                    </div>
                    <div class="cart-item-total">
                        ₹${itemTotal.toFixed(2)}
                    </div>
                    <div class="remove-item">&times;</div>
                </div>
            `;
        });
        
        cartContent += `</div>
            <div class="cart-summary">
                <div class="cart-total">
                    <span>Total:</span>
                    <span>₹${total.toFixed(2)}</span>
                </div>
                <button class="checkout-btn">Proceed to Checkout</button>
            </div>
        `;
    } else {
        cartContent += `<p class="empty-cart">Your cart is empty. Continue shopping to add items.</p>`;
    }
    
    cartContent += `
            </div>
        </div>
    `;
    
    modal.innerHTML = cartContent;
    document.body.appendChild(modal);
    
    // Add event listeners
    const closeButton = modal.querySelector('.close-cart-modal');
    closeButton.addEventListener('click', function() {
        document.body.removeChild(modal);
    });
    
    // Close when clicking outside modal content
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            document.body.removeChild(modal);
        }
    });
    
    // Quantity buttons
    const decreaseButtons = modal.querySelectorAll('.decrease');
    const increaseButtons = modal.querySelectorAll('.increase');
    const removeButtons = modal.querySelectorAll('.remove-item');
    
    decreaseButtons.forEach(button => {
        button.addEventListener('click', function() {
            const cartItem = this.closest('.cart-item');
            const index = parseInt(cartItem.dataset.index);
            
            if (cart[index].quantity > 1) {
                cart[index].quantity -= 1;
                
                // Update display
                cartItem.querySelector('.quantity-value').textContent = cart[index].quantity;
                const itemTotal = cart[index].price * cart[index].quantity;
                cartItem.querySelector('.cart-item-total').textContent = '$' + itemTotal.toFixed(2);
                
                // Update total
                updateCartTotal(modal, cart);
                
                // Update localStorage and badge
                localStorage.setItem('cart', JSON.stringify(cart));
                updateCartBadge();
            }
        });
    });
    
    increaseButtons.forEach(button => {
        button.addEventListener('click', function() {
            const cartItem = this.closest('.cart-item');
            const index = parseInt(cartItem.dataset.index);
            
            cart[index].quantity += 1;
            
            // Update display
            cartItem.querySelector('.quantity-value').textContent = cart[index].quantity;
            const itemTotal = cart[index].price * cart[index].quantity;
            cartItem.querySelector('.cart-item-total').textContent = '$' + itemTotal.toFixed(2);
            
            // Update total
            updateCartTotal(modal, cart);
            
            // Update localStorage and badge
            localStorage.setItem('cart', JSON.stringify(cart));
            updateCartBadge();
        });
    });
    
    removeButtons.forEach(button => {
        button.addEventListener('click', function() {
            const cartItem = this.closest('.cart-item');
            const index = parseInt(cartItem.dataset.index);
            
            // Remove item from cart
            cart.splice(index, 1);
            
            // Update localStorage and badge
            localStorage.setItem('cart', JSON.stringify(cart));
            updateCartBadge();
            
            // Re-render cart modal
            document.body.removeChild(modal);
            showCart();
        });
    });
    
    // Checkout button
    const checkoutButton = modal.querySelector('.checkout-btn');
    if (checkoutButton) {
        checkoutButton.addEventListener('click', function() {
            document.body.removeChild(modal);
            window.location.href = 'payment.html';
        });
    }
}

// Update cart total in modal
function updateCartTotal(modal, cart) {
    const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    modal.querySelector('.cart-total span:last-child').textContent = '$' + total.toFixed(2);
}

// Show toast message
function showToast(message) {
    // Create toast element
    const toast = document.createElement('div');
    toast.className = 'toast';
    toast.textContent = message;
    
    // Add styles inline since we don't have a separate CSS
    toast.style.position = 'fixed';
    toast.style.bottom = '20px';
    toast.style.right = '20px';
    toast.style.backgroundColor = '#f30';
    toast.style.color = '#fff';
    toast.style.padding = '12px 20px';
    toast.style.borderRadius = '5px';
    toast.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
    toast.style.zIndex = '1000';
    toast.style.animation = 'fadeIn 0.3s, fadeOut 0.3s 2.7s';
    toast.style.animationFillMode = 'forwards';
    
    // Add keyframes for animations
    const style = document.createElement('style');
    style.textContent = `
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeOut {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(20px); }
        }
    `;
    document.head.appendChild(style);
    
    // Add to document and remove after timeout
    document.body.appendChild(toast);
    setTimeout(() => {
        document.body.removeChild(toast);
        document.head.removeChild(style);
    }, 3000);
}

// Auth functionality
function setupAuthFunctionality() {
    const userIcon = document.querySelector('.user-icon');
    
    if (userIcon) {
        userIcon.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Check if user is logged in
            const currentUser = JSON.parse(localStorage.getItem('currentUser'));
            
            if (currentUser) {
                showProfileModal(currentUser);
            } else {
                showLoginModal();
            }
        });
    }
}

// Show login modal
function showLoginModal() {
    // Create modal element
    const modal = document.createElement('div');
    modal.id = 'login-modal';
    modal.className = 'login-modal';
    
    const modalContent = `
        <div class="login-modal-content">
            <div class="login-modal-header">
                <h3>My Account</h3>
                <button class="close-login-modal">&times;</button>
            </div>
            <div class="login-modal-body">
                <div class="auth-tabs">
                    <div class="auth-tab active" data-tab="login">Login</div>
                    <div class="auth-tab" data-tab="signup">Sign Up</div>
                </div>
                <div class="auth-form login-form active">
                    <div class="form-group">
                        <label for="login-username">Username</label>
                        <input type="text" id="login-username" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="login-password">Password</label>
                        <input type="password" id="login-password" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="auth-button" id="login-button">Login</button>
                    </div>
                    <div class="form-footer">
                        <a href="#" class="forgot-password">Forgot Password?</a>
                    </div>
                </div>
                <div class="auth-form signup-form">
                    <div class="form-group">
                        <label for="signup-name">Full Name</label>
                        <input type="text" id="signup-name" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="signup-username">Username</label>
                        <input type="text" id="signup-username" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="signup-password">Password</label>
                        <input type="password" id="signup-password" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="auth-button" id="signup-button">Create Account</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    modal.innerHTML = modalContent;
    document.body.appendChild(modal);
    
    // Add event listeners
    const closeButton = modal.querySelector('.close-login-modal');
    closeButton.addEventListener('click', function() {
        document.body.removeChild(modal);
    });
    
    // Close when clicking outside modal content
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            document.body.removeChild(modal);
        }
    });
    
    // Tab switching
    const tabs = modal.querySelectorAll('.auth-tab');
    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            const tabName = this.dataset.tab;
            
            // Update active tab
            modal.querySelectorAll('.auth-tab').forEach(t => t.classList.remove('active'));
            this.classList.add('active');
            
            // Update active form
            modal.querySelectorAll('.auth-form').forEach(form => form.classList.remove('active'));
            modal.querySelector(`.${tabName}-form`).classList.add('active');
        });
    });
    
    // Login functionality
    const loginButton = modal.querySelector('#login-button');
    loginButton.addEventListener('click', function() {
        const username = modal.querySelector('#login-username').value;
        const password = modal.querySelector('#login-password').value;
        
        if (!username || !password) {
            showToast('Please enter both username and password');
            return;
        }
        
        // In a real app, this would validate against a server
        // For demo, we'll check against localStorage
        const users = JSON.parse(localStorage.getItem('users')) || [];
        const user = users.find(u => u.username === username && u.password === password);
        
        if (user) {
            // Store current user (except password)
            const currentUser = {
                name: user.name,
                username: user.username
            };
            localStorage.setItem('currentUser', JSON.stringify(currentUser));
            
            // Close modal and show profile
            document.body.removeChild(modal);
            showToast(`Welcome back, ${user.name}!`);
            
            // Show profile modal
            showProfileModal(currentUser);
        } else {
            showToast('Invalid username or password');
        }
    });
    
    // Signup functionality
    const signupButton = modal.querySelector('#signup-button');
    signupButton.addEventListener('click', function() {
        const name = modal.querySelector('#signup-name').value;
        const username = modal.querySelector('#signup-username').value;
        const password = modal.querySelector('#signup-password').value;
        
        if (!name || !username || !password) {
            showToast('Please fill in all fields');
            return;
        }
        
        // Get existing users
        const users = JSON.parse(localStorage.getItem('users')) || [];
        
        // Check if username already exists
        if (users.some(u => u.username === username)) {
            showToast('Username already exists');
            return;
        }
        
        // Add new user
        users.push({
            name,
            username,
            password
        });
        
        // Store users
        localStorage.setItem('users', JSON.stringify(users));
        
        // Store current user (except password)
        const currentUser = {
            name,
            username
        };
        localStorage.setItem('currentUser', JSON.stringify(currentUser));
        
        // Close modal and show success
        document.body.removeChild(modal);
        showToast('Account created successfully!');
        
        // Show profile modal
        showProfileModal(currentUser);
    });
}

// Show profile modal
function showProfileModal(user) {
    // Create modal element
    const modal = document.createElement('div');
    modal.id = 'profile-modal';
    modal.className = 'profile-modal';
    
    const modalContent = `
        <div class="profile-modal-content">
            <div class="profile-modal-header">
                <h3>My Profile</h3>
                <button class="close-profile-modal">&times;</button>
            </div>
            <div class="profile-modal-body">
                <div class="profile-info">
                    <div class="profile-avatar">
                        <i class="fas fa-user-circle"></i>
                    </div>
                    <h3>${user.name}</h3>
                    <p>${user.username}</p>
                </div>
                <div class="profile-details">
                    <button id="logout-button" class="btn btn-dark">Logout</button>
                </div>
            </div>
        </div>
    `;
    
    modal.innerHTML = modalContent;
    document.body.appendChild(modal);
    
    // Add event listeners
    const closeButton = modal.querySelector('.close-profile-modal');
    closeButton.addEventListener('click', function() {
        document.body.removeChild(modal);
    });
    
    // Close when clicking outside modal content
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            document.body.removeChild(modal);
        }
    });
    
    // Logout functionality
    const logoutButton = modal.querySelector('#logout-button');
    logoutButton.addEventListener('click', function() {
        // Remove current user
        localStorage.removeItem('currentUser');
        
        // Close modal and show message
        document.body.removeChild(modal);
        showToast('Logged out successfully');
    });
}

// Function to handle checkout button
function goToCheckout() {
    window.location.href = 'payment.html';
}