script.js

// Product Management System

// Initialize localStorage with dummy data if empty
function initializeProducts() {
    if (!localStorage.getItem('products')) {
        const dummyProducts = [
            {
                id: 1,
                name: 'Wireless Earbuds',
                category: 'Electronics',
                price: 108,
                desc: 'Compact wireless earbuds delivering crisp audio and seamless Bluetooth connectivity. With long-lasting battery life and noise-isolating design, they offer an immersive listening experience whether you\'re working out, commuting, or relaxing.',
                image: 'headphones',
                stock: 320
            },
            {
                id: 2,
                name: 'Yoga Mat',
                category: 'Fitness',
                price: 30,
                desc: 'A durable, non-slip yoga mat designed for stability and comfort. Its cushioned surface supports your joints during stretching, balance training, and high-intensity workouts. Lightweight and easy to carry, perfect for home practice or studio sessions.',
                image: 'yoga',
                stock: 19
            },
            {
                id: 3,
                name: 'Leather Backpack',
                category: 'Accessories',
                price: 64,
                desc: 'A stylish genuine-leather backpack crafted for everyday use. Featuring multiple compartments for organized storage, it combines durability, elegance, and practicality. Ideal for work, travel, or casual outings.',
                image: 'backpack',
                stock: 45
            }
        ];
        localStorage.setItem('products', JSON.stringify(dummyProducts));
    }
}

// Get all products from localStorage
function getProducts() {
    const products = localStorage.getItem('products');
    return products ? JSON.parse(products) : [];
}

// Save products to localStorage
function saveProducts(products) {
    localStorage.setItem('products', JSON.stringify(products));
}

// Get product icon SVG based on type
function getProductIcon(imageType) {
    const icons = {
        headphones: `<svg viewBox="0 0 24 24" fill="white">
            <path d="M12 3C7.58 3 4 6.58 4 11v6c0 1.1.9 2 2 2h2v-8H6v-1c0-3.31 2.69-6 6-6s6 2.69 6 6v1h-2v8h2c1.1 0 2-.9 2-2v-6c0-4.42-3.58-8-8-8z"/>
        </svg>`,
        yoga: `<svg viewBox="0 0 24 24" fill="white">
            <path d="M3 19h18v2H3v-2zm17-5.5h-4v-3h4v3zm-10 0H6v-3h4v3zM13 5.08c.4.11.79.23 1.16.43l2.13-2.13 1.41 1.41-2.13 2.13c.2.37.32.76.43 1.16h3v2h-3c-.11.4-.23.79-.43 1.16l2.13 2.13-1.41 1.41-2.13-2.13c-.37.2-.76.32-1.16.43v3h-2v-3c-.4-.11-.79-.23-1.16-.43L7.71 13.79 6.3 12.38l2.13-2.13c-.2-.37-.32-.76-.43-1.16h-3v-2h3c.11-.4.23-.79.43-1.16L6.3 3.8l1.41-1.41 2.13 2.13c.37-.2.76-.32 1.16-.43v-3h2v3z"/>
        </svg>`,
        backpack: `<svg viewBox="0 0 24 24" fill="white">
            <path d="M20 8h-3V6c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6h6v2H9V6zm11 14H4v-3h16v3zm0-5H4v-5h3v1.5c0 .28.22.5.5.5s.5-.22.5-.5V10h8v1.5c0 .28.22.5.5.5s.5-.22.5-.5V10h3v5z"/>
        </svg>`,
        default: `<svg viewBox="0 0 24 24" fill="white">
            <path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z"/>
        </svg>`
    };
    return icons[imageType] || icons.default;
}

// Display products on the main page
function displayProducts() {
    const productsGrid = document.getElementById('productsGrid');
    if (!productsGrid) return;

    const products = getProducts();

    if (products.length === 0) {
        productsGrid.innerHTML = '<p style="color: #4B5563;">No products available. Click "+ Add Product" to add a new product.</p>';
        return;
    }

    productsGrid.innerHTML = products.map(product => `
        <div class="product-card">
            <div class="product-icon">
                ${getProductIcon(product.image)}
            </div>
            <h3 class="product-title">${product.name}</h3>
            <div class="product-details">
                <p><strong>Category:</strong> ${product.category}</p>
                ${product.stock ? `<p><strong>Stock:</strong> ${product.stock}</p>` : ''}
                <p><strong>Price:</strong> $ ${product.price}</p>
            </div>
            <p class="product-desc"><strong>Desc:</strong> ${product.desc}</p>
            <div class="product-actions">
                <button class="btn-edit" onclick="editProduct(${product.id})">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                    </svg>
                </button>
                <button class="btn-delete" onclick="deleteProduct(${product.id})">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
                    </svg>
                </button>
            </div>
        </div>
    `).join('');
}

// Add new product
function addProduct(event) {
    event.preventDefault();

    const form = event.target;
    const formData = new FormData(form);

    const products = getProducts();
    const newId = products.length > 0 ? Math.max(...products.map(p => p.id)) + 1 : 1;

    const newProduct = {
        id: newId,
        name: formData.get('productName'),
        category: formData.get('productCategory'),
        price: parseFloat(formData.get('productPrice')),
        desc: formData.get('productDesc'),
        image: 'default', // Since we're using dummy images, default icon
        stock: Math.floor(Math.random() * 100) + 10 // Random stock for dummy data
    };

    products.push(newProduct);
    saveProducts(products);

    alert('Product added successfully!');
    window.location.href = 'index.html';
}

// Edit product - navigate to update page
function editProduct(id) {
    localStorage.setItem('editProductId', id);
    window.location.href = 'update-product.html';
}

// Load product data for editing
function loadProductForEdit() {
    const productId = localStorage.getItem('editProductId');
    if (!productId) {
        window.location.href = 'index.html';
        return;
    }

    const products = getProducts();
    const product = products.find(p => p.id == productId);

    if (!product) {
        alert('Product not found!');
        window.location.href = 'index.html';
        return;
    }

    // Fill form with product data
    document.getElementById('productId').value = product.id;
    document.getElementById('productName').value = product.name;
    document.getElementById('productCategory').value = product.category;
    document.getElementById('productPrice').value = product.price;
    document.getElementById('productDesc').value = product.desc;
}

// Update product
function updateProduct(event) {
    event.preventDefault();

    const form = event.target;
    const formData = new FormData(form);
    const productId = parseInt(formData.get('productId'));

    const products = getProducts();
    const productIndex = products.findIndex(p => p.id === productId);

    if (productIndex === -1) {
        alert('Product not found!');
        return;
    }

    products[productIndex] = {
        ...products[productIndex],
        name: formData.get('productName'),
        category: formData.get('productCategory'),
        price: parseFloat(formData.get('productPrice')),
        desc: formData.get('productDesc')
    };

    saveProducts(products);
    localStorage.removeItem('editProductId');

    alert('Product updated successfully!');
    window.location.href = 'index.html';
}

// Delete product
function deleteProduct(id) {
    if (!confirm('Are you sure you want to delete this product?')) {
        return;
    }

    const products = getProducts();
    const filteredProducts = products.filter(p => p.id !== id);

    saveProducts(filteredProducts);
    displayProducts();

    alert('Product deleted successfully!');
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    initializeProducts();

    // Check which page we're on and initialize accordingly
    const currentPage = window.location.pathname.split('/').pop();

    if (currentPage === 'index.html' || currentPage === '') {
        displayProducts();
    } else if (currentPage === 'add-product.html') {
        const form = document.getElementById('addProductForm');
        if (form) {
            form.addEventListener('submit', addProduct);
        }
    } else if (currentPage === 'update-product.html') {
        loadProductForEdit();
        const form = document.getElementById('updateProductForm');
        if (form) {
            form.addEventListener('submit', updateProduct);
        }
    }
});