script.js

// DOM Elements
const productCards = document.querySelectorAll('.product-card');
const quantityInput = document.querySelector('.quantity-input input');
const quantityBtns = document.querySelectorAll('.quantity-btn');
const discountInput = document.querySelector('.discount-input input');
const applyBtn = document.querySelector('.apply-btn');
const basePriceElement = document.querySelector('.base-price');
const volumeDiscountElement = document.querySelector('.volume-discount');
const codeDiscountElement = document.querySelector('.code-discount');
const totalPriceElement = document.querySelector('.total-price');
const totalSavingsElement = document.querySelector('.total-savings');
const discountRateElement = document.querySelector('.discount-rate');
const chartContainer = document.querySelector('.chart-container');

// Product Data
const products = {
    basic: {
        name: 'Basic',
        price: 29.99,
        icon: 'fa-solid fa-box',
        description: 'Perfect for small businesses'
    },
    pro: {
        name: 'Pro',
        price: 49.99,
        icon: 'fa-solid fa-rocket',
        description: 'Ideal for growing companies'
    },
    enterprise: {
        name: 'Enterprise',
        price: 99.99,
        icon: 'fa-solid fa-building',
        description: 'For large organizations'
    }
};

// Discount Codes
const discountCodes = {
    'WELCOME10': 10,
    'SUMMER20': 20,
    'SPECIAL25': 25
};

// Volume Discount Tiers
const volumeDiscounts = [
    { quantity: 5, discount: 5 },
    { quantity: 10, discount: 10 },
    { quantity: 20, discount: 15 },
    { quantity: 50, discount: 20 }
];

// State
let selectedProduct = 'basic';
let quantity = 1;
let appliedDiscountCode = null;
let chart = null;

// Initialize Calculator
function initCalculator() {
    // Set initial product selection
    selectProduct('basic');
    
    // Initialize quantity
    updateQuantity(1);
    
    // Initialize chart
    initChart();
    
    // Add event listeners
    addEventListeners();
    
    // Update calculations
    updateCalculations();
}

// Select Product
function selectProduct(productId) {
    // Remove selected class from all cards
    productCards.forEach(card => card.classList.remove('selected'));
    
    // Add selected class to chosen card
    const selectedCard = document.querySelector(`[data-product="${productId}"]`);
    if (selectedCard) {
        selectedCard.classList.add('selected');
    }
    
    // Update selected product
    selectedProduct = productId;
    
    // Update calculations
    updateCalculations();
}

// Update Quantity
function updateQuantity(newQuantity) {
    quantity = Math.max(1, Math.min(100, newQuantity));
    if (quantityInput) {
        quantityInput.value = quantity;
    }
    updateCalculations();
}

// Apply Discount Code
function applyDiscountCode() {
    const code = discountInput.value.trim().toUpperCase();
    
    if (discountCodes[code]) {
        appliedDiscountCode = code;
        discountInput.classList.remove('error');
        updateCalculations();
    } else {
        appliedDiscountCode = null;
        discountInput.classList.add('error');
    }
}

// Calculate Volume Discount
function calculateVolumeDiscount() {
    let discount = 0;
    
    for (const tier of volumeDiscounts) {
        if (quantity >= tier.quantity) {
            discount = tier.discount;
        }
    }
    
    return discount;
}

// Update Calculations
function updateCalculations() {
    const basePrice = products[selectedProduct].price * quantity;
    const volumeDiscount = calculateVolumeDiscount();
    const volumeDiscountAmount = (basePrice * volumeDiscount) / 100;
    const codeDiscount = appliedDiscountCode ? discountCodes[appliedDiscountCode] : 0;
    const codeDiscountAmount = (basePrice * codeDiscount) / 100;
    const totalPrice = basePrice - volumeDiscountAmount - codeDiscountAmount;
    const totalSavings = volumeDiscountAmount + codeDiscountAmount;
    const totalDiscountRate = ((volumeDiscount + codeDiscount) / 100) * 100;
    
    // Update UI
    if (basePriceElement) basePriceElement.textContent = `$${basePrice.toFixed(2)}`;
    if (volumeDiscountElement) volumeDiscountElement.textContent = `-$${volumeDiscountAmount.toFixed(2)} (${volumeDiscount}%)`;
    if (codeDiscountElement) codeDiscountElement.textContent = appliedDiscountCode ? `-$${codeDiscountAmount.toFixed(2)} (${codeDiscount}%)` : '-$0.00 (0%)';
    if (totalPriceElement) totalPriceElement.textContent = `$${totalPrice.toFixed(2)}`;
    if (totalSavingsElement) totalSavingsElement.textContent = `$${totalSavings.toFixed(2)}`;
    if (discountRateElement) discountRateElement.textContent = `${totalDiscountRate.toFixed(1)}%`;
    
    // Update chart
    updateChart();
}

// Initialize Chart
function initChart() {
    if (!chartContainer) return;
    
    const ctx = document.createElement('canvas');
    chartContainer.appendChild(ctx);
    
    chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Basic', 'Pro', 'Enterprise'],
            datasets: [{
                label: 'Price per Unit',
                data: [
                    products.basic.price,
                    products.pro.price,
                    products.enterprise.price
                ],
                backgroundColor: [
                    'rgba(74, 144, 226, 0.8)',
                    'rgba(80, 200, 120, 0.8)',
                    'rgba(245, 166, 35, 0.8)'
                ],
                borderColor: [
                    'rgba(74, 144, 226, 1)',
                    'rgba(80, 200, 120, 1)',
                    'rgba(245, 166, 35, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Price ($)'
                    }
                }
            },
            plugins: {
                title: {
                    display: true,
                    text: 'Price Comparison by Package'
                }
            }
        }
    });
}

// Update Chart
function updateChart() {
    if (!chart) return;
    
    const volumeDiscount = calculateVolumeDiscount();
    const codeDiscount = appliedDiscountCode ? discountCodes[appliedDiscountCode] : 0;
    const totalDiscount = volumeDiscount + codeDiscount;
    
    const discountedPrices = {
        basic: products.basic.price * (1 - totalDiscount / 100),
        pro: products.pro.price * (1 - totalDiscount / 100),
        enterprise: products.enterprise.price * (1 - totalDiscount / 100)
    };
    
    chart.data.datasets[0].data = [
        discountedPrices.basic,
        discountedPrices.pro,
        discountedPrices.enterprise
    ];
    
    chart.update();
}

// Add Event Listeners
function addEventListeners() {
    // Product selection
    productCards.forEach(card => {
        card.addEventListener('click', () => {
            selectProduct(card.dataset.product);
        });
    });
    
    // Quantity buttons
    quantityBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const change = btn.dataset.action === 'increase' ? 1 : -1;
            updateQuantity(quantity + change);
        });
    });
    
    // Quantity input
    if (quantityInput) {
        quantityInput.addEventListener('change', () => {
            updateQuantity(parseInt(quantityInput.value) || 1);
        });
    }
    
    // Apply discount code
    if (applyBtn) {
        applyBtn.addEventListener('click', applyDiscountCode);
    }
    
    // Enter key for discount code
    if (discountInput) {
        discountInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                applyDiscountCode();
            }
        });
    }
}

// Initialize calculator when DOM is loaded
document.addEventListener('DOMContentLoaded', initCalculator);