js/cart.js

// ========================================
// CART PAGE LOGIC
// ========================================
let promoApplied = null;

document.addEventListener('DOMContentLoaded', () => {
    renderCartPage();
    document.getElementById('promoBtn').addEventListener('click', handlePromo);
    document.getElementById('promoInput').addEventListener('keydown', e => { if (e.key === 'Enter') handlePromo(); });
    document.addEventListener('cartUpdated', renderCartPage);
});

function renderCartPage() {
    const cart = getCart();
    const cartContent = document.getElementById('cartContent');
    const emptyCart = document.getElementById('emptyCart');

    if (cart.length === 0) {
        cartContent.style.display = 'none';
        emptyCart.style.display = 'block';
        return;
    }
    cartContent.style.display = '';
    emptyCart.style.display = 'none';

    const itemsContainer = document.getElementById('cartItems');
    itemsContainer.innerHTML = '';

    cart.forEach(item => {
        const product = getProductById(item.productId);
        if (!product) return;
        const colorName = COLORS_MAP[item.color]?.name || item.color;

        const el = document.createElement('div');
        el.className = 'cart-item';
        el.innerHTML = `
      <div class="cart-item-image">
        <img src="${product.images[0]}" alt="${product.name}">
      </div>
      <div>
        <div class="cart-item-name">${product.name}</div>
        <div class="cart-item-meta">O'lcham: ${item.size} | Rang: ${colorName}</div>
        <div class="cart-item-price">${formatPrice(product.price)}</div>
        <div style="margin-top:0.75rem;display:flex;align-items:center;gap:1rem;">
          <div class="qty-control">
            <button class="qty-btn" data-action="minus" data-id="${item.productId}" data-size="${item.size}" data-color="${item.color}">−</button>
            <span class="qty-value">${item.quantity}</span>
            <button class="qty-btn" data-action="plus" data-id="${item.productId}" data-size="${item.size}" data-color="${item.color}">+</button>
          </div>
          <button class="cart-item-remove" data-id="${item.productId}" data-size="${item.size}" data-color="${item.color}">O'chirish</button>
        </div>
      </div>
      <div style="text-align:right;font-weight:600;font-size:1.1rem;">
        ${formatPrice(product.price * item.quantity)}
      </div>
    `;
        itemsContainer.appendChild(el);
    });

    // Event delegation for qty buttons and remove
    itemsContainer.querySelectorAll('.qty-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const { id, size, color, action } = btn.dataset;
            const item = cart.find(i => i.productId == id && i.size === size && i.color === color);
            if (!item) return;
            const newQty = action === 'plus' ? item.quantity + 1 : item.quantity - 1;
            updateCartQty(parseInt(id), size, color, newQty);
        });
    });

    itemsContainer.querySelectorAll('.cart-item-remove').forEach(btn => {
        btn.addEventListener('click', () => {
            const { id, size, color } = btn.dataset;
            removeFromCart(parseInt(id), size, color);
            showToast('O\'chirildi', 'Mahsulot savatchadan olib tashlandi', 'info');
        });
    });

    updateSummary();
}

function updateSummary() {
    const totals = getCartTotal();
    let promoDiscount = 0;

    if (promoApplied && promoApplied.type === 'percent') {
        promoDiscount = Math.round(totals.subtotal * promoApplied.discount / 100);
    }

    document.getElementById('sumSubtotal').textContent = formatPrice(totals.subtotal);
    document.getElementById('sumDiscount').textContent = totals.discount + promoDiscount > 0 ? '-' + formatPrice(totals.discount + promoDiscount) : '0 so\'m';
    document.getElementById('sumTotal').textContent = formatPrice(totals.total - promoDiscount);
}

function handlePromo() {
    const code = document.getElementById('promoInput').value.trim();
    if (!code) return;
    const result = applyPromo(code);
    const msg = document.getElementById('promoMsg');
    if (result.valid) {
        promoApplied = result;
        msg.innerHTML = `<span style="color:var(--clr-success)">✓ ${result.desc} qo'llanildi</span>`;
        updateSummary();
    } else {
        msg.innerHTML = `<span style="color:var(--clr-error)">✗ ${result.message}</span>`;
    }
}