<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Log Activities</title>
  <style>
    /* CSS Styles */
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      padding: 0;
    }
    
    h3 {
      text-align: center;
      margin-bottom: 20px;
    }
    
    #logTable {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }

    #logTable th, #logTable td {
      border: 1px solid #ddd;
      padding: 8px;
    }

    #logTable th {
      background-color: #1a9ef6;
      text-align: left;
    }

    #logTable tbody tr:nth-child(even) {
      background-color: #f9f9f9;
    }

    #logTable tbody tr:hover {
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
  <h3>Log Activities</h3>
  <table id="logTable">
    <thead>
      <tr>
        <th>Date and Time</th>
        <th>Order No</th>
        <th>Amount</th>
        
        <th>Action</th>
        <th>Taken By</th>
        <th>Waiter</th>
      </tr>
    </thead>
    <tbody>
      <!-- Log activities will be dynamically inserted here -->
    </tbody>
  </table>

  <script>
    // JavaScript
    const fetchLogs = async () => {
      try {
        const response = await fetch('/api/cafeorder/log-activity'); // Adjust the URL to match your backend endpoint
        const data = await response.json();

        if (data.success) {
          const logTableBody = document.querySelector('#logTable tbody');
          logTableBody.innerHTML = ''; // Clear existing rows

          data.logs.forEach(log => {
            const row = logTableBody.insertRow();
            const dateCell = row.insertCell();
            const orderNoCell = row.insertCell();
            const paidAmountCell = row.insertCell();
            const actionCell = row.insertCell();
            const usernameCell = row.insertCell();
            const waiternameCell = row.insertCell();

            // Populate cells with data
            dateCell.textContent = new Date(log.timestamp).toLocaleString();
            orderNoCell.textContent = log.orderId?.orderNo || 'N/A'; // Fallback to 'N/A' if orderNo is undefined
            paidAmountCell.textContent = log.paidAmount||'N/A'; // Fallback to
            actionCell.textContent = log.action;
            usernameCell.textContent = log.userId?.username || 'N/A'; // Fallback to 'N/A' if username is undefined
      
            waiternameCell.textContent = log.waiterName || 'N/A'; // Fallback to 'N/A' if username is undefined
          });
        } else {
          console.error('Failed to fetch logs:', data.message);
        }
      } catch (error) {
        console.error('Error fetching logs:', error);
      }
    };

    // Fetch logs when the page loads
    document.addEventListener('DOMContentLoaded', fetchLogs);
  </script>
</body>
</html>
