<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; padding: 16px; font-family: system-ui; }
    
    .categories { 
      display: flex; 
      flex-wrap: wrap; 
      gap: 8px;
      margin: 20px 0; 
    }
    
    .category-btn {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      background: #f3f4f6;
    }
    
    .category-btn.active {
      background: #3b82f6;
      color: white;
    }

    .header-controls {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
      padding: 12px;
      background: #f8fafc;
      border-radius: 8px;
    }

    .checkout-btn {
      padding: 12px 24px;
      background: #22c55e;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 1.1em;
    }

    .checkout-btn:hover {
      background: #16a34a;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 16px;
    }
    
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
    }
    
    th { 
      background: #f3f4f6;
      text-align: left;
    }

    .product-img {
      width: 60px;
      height: 60px;
      cursor: pointer;
      vertical-align: top;
    }

    .product-info {
      display: inline-block;
      margin-left: 8px;
    }

    .product-code {
      color: #666;
      font-size: 0.9em;
    }

    .product-price {
      color: #2563eb;
      font-weight: bold;
    }

    .qty-control {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }

    .qty-btn {
      padding: 4px 8px;
      cursor: pointer;
      border: 1px solid #ddd;
      background: #f3f4f6;
      border-radius: 4px;
    }

    .qty-input {
      width: 50px;
      padding: 4px;
      text-align: center;
      border: 1px solid #ddd;
      border-radius: 4px;
    }

    .total {
      font-size: 1.2em;
      font-weight: bold;
    }

    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 1000;
    }

    .modal-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      padding: 16px;
      border-radius: 8px;
      max-width: 90%;
      max-height: 90%;
      overflow-y: auto;
    }

    .modal img {
      max-width: 90vw;
      max-height: 90vh;
      object-fit: contain;
    }

    .checkout-summary {
      background: white;
      padding: 24px;
      border-radius: 8px;
    }

    .order-line {
      font-family: monospace;
      font-size: 1.2em;
      margin-bottom: 16px;
    }

    .total-line {
      font-family: monospace;
      font-size: 1.2em;
      font-weight: bold;
      border-top: 1px solid #eee;
      padding-top: 16px;
    }

    .back-btn {
      margin-bottom: 16px;
      padding: 8px 16px;
      background: #f3f4f6;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    @media (max-width: 480px) {
      body { padding: 8px; }
      .product-img { width: 50px; height: 50px; }
      th, td { padding: 6px; }
      .header-controls {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
      }
      .checkout-btn {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div id="mainPage">
    <div class="header-controls">
      <div class="total">Total: RM <span id="total">0.00</span></div>
      <button class="checkout-btn" onclick="showCheckout()">Checkout</button>
    </div>
    <div class="categories" id="categories"></div>
    <div id="foodList"></div>
  </div>

  <div id="checkoutPage" style="display: none;">
    <button class="back-btn" onclick="backToMain()">← Back to Menu</button>
    <div class="checkout-summary" id="checkoutSummary"></div>
  </div>

  <div id="imageModal" class="modal">
    <div class="modal-content">
      <img id="enlargedImg" src="" alt="">
    </div>
  </div>

  <script>
    const categories = ['Local', 'Western', 'Chinese', 'Japanese', 'Thai', 'Indian', 'Beverages', 'Desserts'];
    const foodItems = {
      Local: [
        { code: 'L1', name: 'Nasi Lemak', price: 8.50, image: 'sushi.jpeg' },
        { code: 'L2', name: 'Roti Canai', price: 2.50, image: 'sushi.jpeg' },
        { code: 'L3', name: 'Char Kuey Teow', price: 7.50, image: 'sushi.jpeg' }
      ],
      Western: [
        { code: 'W1', name: 'Chicken Chop', price: 15.90, image: 'sushi.jpeg' },
        { code: 'W2', name: 'Fish & Chips', price: 18.90, image: 'sushi.jpeg' }
      ],
      Chinese: [
        { code: 'C1', name: 'Kung Pao Chicken', price: 12.90, image: 'sushi.jpeg' },
        { code: 'C2', name: 'Sweet & Sour Fish', price: 16.90, image: 'sushi.jpeg' }
      ],
      Japanese: [
        { code: 'J1', name: 'Sushi Set', price: 25.90, image: 'sushi.jpeg' },
        { code: 'J2', name: 'Ramen', price: 18.90, image: 'sushi.jpeg' }
      ],
      Thai: [
        { code: 'T1', name: 'Tom Yum', price: 16.90, image: 'sushi.jpeg' },
        { code: 'T2', name: 'Pad Thai', price: 14.90, image: 'sushi.jpeg' }
      ],
      Indian: [
        { code: 'I1', name: 'Butter Chicken', price: 15.90, image: 'sushi.jpeg' },
        { code: 'I2', name: 'Biryani', price: 13.90, image: 'sushi.jpeg' }
      ],
      Beverages: [
        { code: 'B1', name: 'Teh Tarik', price: 3.50, image: 'sushi.jpeg' },
        { code: 'B2', name: 'Fresh Juice', price: 6.90, image: 'sushi.jpeg' }
      ],
      Desserts: [
        { code: 'D1', name: 'Cendol', price: 5.90, image: 'sushi.jpeg' },
        { code: 'D2', name: 'Ice Kacang', price: 6.90, image: 'sushi.jpeg' }
      ]
    };

    // Object to store quantities for all items
    const orderQuantities = {};

    // Initialize quantities for all items
    Object.values(foodItems).flat().forEach(item => {
      orderQuantities[item.code] = 0;
    });

    const categoriesDiv = document.getElementById('categories');
    categories.forEach(category => {
      const btn = document.createElement('button');
      btn.textContent = category;
      btn.className = 'category-btn';
      btn.onclick = () => showCategory(category);
      categoriesDiv.appendChild(btn);
    });

    function calculateTotal() {
      return Object.entries(orderQuantities).reduce((total, [code, qty]) => {
        const item = Object.values(foodItems)
          .flat()
          .find(item => item.code === code);
        return total + (qty * item.price);
      }, 0);
    }

    function getAllSelections() {
      return Object.entries(orderQuantities)
        .filter(([_, qty]) => qty > 0)
        .map(([code, qty]) => {
          const item = Object.values(foodItems)
            .flat()
            .find(item => item.code === code);
          return {
            ...item,
            quantity: qty,
            subtotal: qty * item.price
          };
        });
    }

    function showCheckout() {
      const selections = getAllSelections();
      const total = calculateTotal();
      
      if (selections.length === 0) {
        alert('Please select at least one item before checking out.');
        return;
      }

      const orderLine = selections
        .map(item => `${item.code} - ${item.quantity}`)
        .join(', ');

      document.getElementById('checkoutSummary').innerHTML = `
        <div class="order-line">${orderLine}</div>
        <div class="total-line">Total: RM ${total.toFixed(2)}</div>
      `;

      document.getElementById('mainPage').style.display = 'none';
      document.getElementById('checkoutPage').style.display = 'block';
    }

    function backToMain() {
      document.getElementById('mainPage').style.display = 'block';
      document.getElementById('checkoutPage').style.display = 'none';
    }

    function showCategory(category) {
      document.querySelectorAll('.category-btn').forEach(btn => {
        btn.classList.toggle('active', btn.textContent === category);
      });

      const table = `
        <table>
          <thead>
            <tr>
              <th>Product</th>
              <th>Quantity</th>
              <th>Subtotal</th>
            </tr>
          </thead>
          <tbody>
            ${foodItems[category].map(item => `
              <tr>
                <td>
                  <img src="${item.image}" class="product-img" onclick="showModal('${item.image}')" alt="${item.name}">
                  <div class="product-info">
                    <div>${item.name}</div>
                    <div class="product-code">${item.code}</div>
                    <div class="product-price">RM ${item.price.toFixed(2)}</div>
                  </div>
                </td>
                <td>
                  <div class="qty-control">
                    <button class="qty-btn" onclick="updateQty('${item.code}', -1)">-</button>
                    <input type="number" class="qty-input" value="${orderQuantities[item.code]}" 
                           onchange="updateQty('${item.code}', this.value)" id="qty-${item.code}">
                    <button class="qty-btn" onclick="updateQty('${item.code}', 1)">+</button>
                  </div>
                </td>
                <td id="subtotal-${item.code}">RM ${(orderQuantities[item.code] * item.price).toFixed(2)}</td>
              </tr>
            `).join('')}
          </tbody>
        </table>
      `;
      document.getElementById('foodList').innerHTML = table;
    }

    function updateQty(code, change) {
      const input = document.getElementById(`qty-${code}`);
      const currentQty = parseInt(orderQuantities[code]) || 0;
      const newQty = change === 1 || change === -1 ? 
        Math.max(0, currentQty + change) : 
        Math.max(0, parseInt(change) || 0);
      
      orderQuantities[code] = newQty;
      input.value = newQty;
      
      const item = Object.values(foodItems)
        .flat()
        .find(item => item.code === code);
      
      document.getElementById(`subtotal-${code}`).textContent = 
        `RM ${(newQty * item.price).toFixed(2)}`;
      
      document.getElementById('total').textContent = 
        calculateTotal().toFixed(2);
    }

    const modal = document.getElementById('imageModal');
    const enlargedImg = document.getElementById('enlargedImg');

    function showModal(src) {
      modal.style.display = 'block';
      enlargedImg.src = src;
    }

    modal.onclick = () => modal.style.display = 'none';

    // Show initial category
    showCategory(categories[0]);
  </script>
</body>
</html>