

<!DOCTYPE html><html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Admin Panel - Kigali Core Trading</title>
  <style>
    body { font-family: Arial; padding: 20px; background: #f5f; }
    h1 { color: yellow; }
    table { width: 100%; border-collapse: collapse; background: #fff; }
    th, td { border: 1px solid #ccc; padding: 10px; text-align: left; }
    th { background-color: #e0ffe0; }
    button { padding: 5px 10px; }
  </style>
</head>
<body>
  <h1>Admin Panel - Orders</h1>
  <table id="orderTable">
    <thead>
      <tr>
        <th>Order ID</th>
        <th>Product</th>
        <th>Price</th>
        <th>Status</th>
        <th>Update</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>  <script>
    async function fetchOrders() {
      const res = await fetch('http://localhost:5000/api/orders');
      const orders = await res.json();
      const tbody = document.querySelector('#orderTable tbody');
      tbody.innerHTML = '';
      orders.forEach(order => {
        tbody.innerHTML += `
          <tr>
            <td>${order.id}</td>
            <td>${order.product}</td>
            <td>${order.price} RWF</td>
            <td><input type="text" value="${order.status}" id="status-${order.id}" /></td>
            <td><button onclick="updateStatus(${order.id})">Save</button></td>
          </tr>
        `;
      });
    }

    async function updateStatus(id) {
      const newStatus = document.getElementById(`status-${id}`).value;
      await fetch(`http://localhost:5000/api/orders/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status: newStatus })
      });
      alert('Status updated');
      fetchOrders();
    }

    fetchOrders();
  </script></body>
</html>
