const jsonInventory = `[
    {"id": 1, "name": "Wireless Headphones", "price": 2500, "stock": 15},
    {"id": 2, "name": "Smart Watch", "price": 5000, "stock": 3},
    {"id": 3, "name": "Gaming Mouse", "price": 1200, "stock": 0},
    {"id": 4, "name": "Laptop Stand", "price": 1800, "stock": 8}
]`;

const config = {
    currencySymbol: "₹",
    discountPercent: 15, // 15% discount for low stock items
    lowStockThreshold: 5
};

const loadBtn = document.getElementById('load-btn');
const container = document.getElementById('product-container');

function updateInventory() {
    const products = JSON.parse(jsonInventory);

    container.innerHTML = '';

    products.forEach(item => {
        let currentPrice = item.price;
        let badgeHTML = '';
        let priceHTML = '';

        if (item.stock === 0) {
            badgeHTML = `<span class="badge out-of-stock">Out of Stock</span>`;
            priceHTML = `<span class="price">${config.currencySymbol}${item.price}</span>`;
        } 
        else if (item.stock < config.lowStockThreshold) {

            const discountAmount = (item.price * config.discountPercent) / 100;
            currentPrice = item.price - discountAmount;

            badgeHTML = `<span class="badge sale">Low Stock Sale - ${config.discountPercent}% OFF</span>`;
            priceHTML = `
                <span class="old-price">${config.currencySymbol}${item.price}</span>
                <span class="price">${config.currencySymbol}${currentPrice.toFixed(0)}</span>
            `;
        } 
        else {
            badgeHTML = `<span class="badge available">In Stock: ${item.stock}</span>`;
            priceHTML = `<span class="price">${config.currencySymbol}${item.price}</span>`;
        }

        const card = document.createElement('div');
        card.className = 'card';
        card.innerHTML = `
            <h3>${item.name}</h3>
            <p>${priceHTML}</p>
            ${badgeHTML}
        `;
        
        container.appendChild(card);
    });
}

loadBtn.addEventListener('click', () => {
    console.log("Loading Inventory...");
    updateInventory();
});