<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart - XYZ Deals</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
<style>
  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; padding: 0; background: #e0e5e9; color: #333; display: flex; justify-content: center; }
  .app-container { max-width: 450px; width: 100%; background: #ffffff; min-height: 100vh; box-shadow: 0 0 20px rgba(0,0,0,0.1); overflow-x: hidden; }
  .header { background: #000; color: #fff; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
  .header h1 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: 1px; flex-grow: 1; text-align: center; }
  .back-btn { color: #fff; text-decoration: none; font-size: 14px; font-weight: bold; }
  
  .content-section { padding: 20px; }
  .cart-item { position: relative; display: flex; gap: 15px; background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 15px; border: 1px solid #eee; align-items: center;}
  .cart-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; }
  .cart-details { display: flex; flex-direction: column; justify-content: center; padding-right: 20px; }
  .cart-title { font-size: 15px; font-weight: 800; margin: 0 0 5px 0; line-height: 1.2; }
  .cart-price { font-size: 15px; color: #52c41a; font-weight: 700; margin: 0; }
  
  .remove-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 18px; color: #999; cursor: pointer; padding: 5px; line-height: 1; }
  .remove-btn:hover { color: #ff4d4f; }
  
  .empty-cart-msg { display: none; text-align: center; padding: 30px 15px; color: #666; font-size: 16px; font-weight: bold; background: #f8f9fa; border-radius: 8px; margin-bottom: 20px; border: 1px dashed #ccc; }
  .total-row { display: flex; justify-content: space-between; font-size: 18px; font-weight: 800; padding: 15px 0; border-top: 2px solid #eee; margin-bottom: 20px; color: #111;}
  
  .cta-btn { display: block; width: 100%; background: #1890ff; color: #fff; border: none; padding: 18px 0; border-radius: 8px; font-weight: 800; font-size: 16px; text-decoration: none; text-align: center; cursor: pointer; margin-bottom: 12px; box-sizing: border-box; }
  .cta-btn.cart { background: #52c41a; font-size: 18px; box-shadow: 0 4px 15px rgba(82,196,26,0.3); animation: pulse 2s infinite;}
  .cta-btn.alt { background: #333; }
  @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }
  
  .site-footer { background: #111; color: #888; padding: 30px 15px; text-align: center; font-size: 12px; margin-top: auto; }
</style>
</head>
<body>
  <div class="app-container" style="display: flex; flex-direction: column;">
    <div class="header">
      <a href="index.html" class="back-btn">&#8592; Back</a>
      <h1>YOUR CART</h1>
      <div style="width: 45px;"></div>
    </div>

    <div class="content-section">
      <!-- Container where items will load dynamically -->
      <div id="cartItemsContainer"></div>
      
      <div class="empty-cart-msg" id="emptyMsg">
        Your cart is empty.
      </div>

      <div class="total-row">
        <span>Subtotal</span>
        <span id="cartTotal">Rs. --</span>
      </div>

      <a href="checkout.html" id="proceedBtn" class="cta-btn cart">Proceed to Checkout &#10140;</a>
      <a href="index.html" class="cta-btn alt">Add more products</a>
    </div>

    <footer class="site-footer">&copy; 2026 XYZ Deals. All rights reserved.</footer>
  </div>

  <script>
    // READ MEMORY
    let cart = JSON.parse(localStorage.getItem('xyz_cart')) || [];

    if (cart.length === 0) {
      showEmptyCart();
    } else {
      Papa.parse("xyzdeals_catalog.csv", {
        download: true,
        header: true,
        complete: function(results) {
          const validProducts = results.data.filter(row => row.Title);
          let container = document.getElementById('cartItemsContainer');
          let total = 0;
          
          cart.forEach(id => {
            const product = validProducts[id];
            if (product) {
              let priceStr = product['Final_Selling_Price'] ? product['Final_Selling_Price'].replace(/[^0-9]/g, '') : '299';
              let price = parseInt(priceStr) || 299;
              total += price;
              
              const div = document.createElement('div');
              div.className = 'cart-item';
              div.innerHTML = `
                <button class="remove-btn" onclick="removeItem('${id}')">&#10005;</button>
                <img src="${product['Image URL'] || 'https://placehold.co/100x100'}" alt="Product">
                <div class="cart-details">
                  <h4 class="cart-title">${product.Title}</h4>
                  <p class="cart-price">Rs. ${price}</p>
                </div>
              `;
              container.appendChild(div);
            }
          });
          document.getElementById('cartTotal').innerText = 'Rs. ' + total;
        }
      });
    }

    function removeItem(idToRemove) {
      let currentCart = JSON.parse(localStorage.getItem('xyz_cart')) || [];
      currentCart = currentCart.filter(id => id !== String(idToRemove));
      localStorage.setItem('xyz_cart', JSON.stringify(currentCart));
      
      // Reload page to refresh the total and list
      location.reload(); 
    }

    function showEmptyCart() {
      document.getElementById('emptyMsg').style.display = 'block';
      document.getElementById('cartTotal').innerText = 'Rs. 0';
      const proceedBtn = document.getElementById('proceedBtn');
      proceedBtn.style.background = '#ccc';
      proceedBtn.style.boxShadow = 'none';
      proceedBtn.style.animation = 'none';
      proceedBtn.style.pointerEvents = 'none';
      proceedBtn.innerText = 'Cart is Empty';
    }
  </script>
</body>
</html>