<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>101 Distributors - Manager</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
    <link rel="stylesheet" href="/css/style.css">

</head>
<body>
<header> 
  <nav class="container d-flex justify-content-between">
      <div class="logo">
          <img src="https://www.101distributorsga.com/images/header/logo.png" alt="101 Distributors Logo">
      </div>
      <ul class="d-flex align-items-center">
          <li><a href="/home">Home</a></li>
          <li><a href="/gallery">Gallery</a></li>
          <li><a href="/about">About us</a></li>
          <li><a href="/contact">Contact</a></li>
      </ul>
  </nav>
</header>
<div class="main-content">
    <main>
        <h1 class="text-center mb-4">Current Orders</h1>
        <div class="container">
          <table class="table table-dark table-bordered table-hover">
            <thead>
              <tr>
                <th>Store Name</th>
                <th>Order List</th>
                <th>Action</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              <% orders.forEach(order => { %>
                <tr>
                  <td><%= order.storeName %></td>
                  <td>
                    <% if (Array.isArray(order.orderList)) { %>
                      <table> <!-- Nested table to display orderList -->
                        <thead>
                          <tr>
                            <th>Item Name</th>
                            <th>Item Quantity</th>
                          </tr>
                        </thead>
                        <tbody>
                          <% order.orderList.forEach(item => { %>
                            <tr>
                              <td><%= item.itemName %></td>
                              <td><%= item.itemQuantity %></td>
                            </tr>
                          <% }); %>
                        </tbody>
                      </table>
                    <% } else { %>
                      <!-- Handle the case when orderList is not an array -->
                      <%= order.orderList %>
                    <% } %>
                  </td>
                  <td>
                    <button onclick="printOrder('<%= order.storeName %>', '<%= JSON.stringify(order.orderList) %>')">Print</button> |
                    <form action="/orders/delete/<%= order._id %>" method="post" style="display:inline;">
                      <button type="submit">Delete</button>
                    </form>
                    <!-- Add the code for sending order status here -->
                  </td>
                  <td>
                    <select onchange="updateOrderStatus('<%= order._id %>', this.value)">
                      <option value="New" <%= order.status === "New" ? 'selected' : '' %>>New</option>
                      <option value="In Progress" <%= order.status === "In Progress" ? 'selected' : '' %>>In Progress</option>
                      <option value="New" <%= order.status === "New" ? 'selected' : '' %>>Completed</option>
                    </select>
                  </td>
                </tr>
              <% }); %>
            </tbody>
          </table>
        </div>
      </main>
      
      
    <footer>
      <p>Copyright &copy; 2023 101 Distributors</p>
      <img src="https://github.com/VikAsNeHrA1/Order-Management-app/blob/main/views/footer.png?raw=true" alt="Footer Image" class="footer-image" id="footer-image">
  </footer>
   <script>

function printOrder(storeName, orderList) {
  const printWindow = window.open('', '_blank');
  printWindow.document.write('<html><head><title> Print Order </title></head><body>');
  printWindow.document.write('<h1>Order for ' + storeName + '</h1>');

  // Parse the JSON orderList
  const items = JSON.parse(orderList);

  if (Array.isArray(items)) {
    printWindow.document.write('<table>');
    printWindow.document.write('<thead><tr><th> Item Name </th><th> Item Quantity </th></tr></thead>');
    printWindow.document.write('<tbody>');

    items.forEach(item => {
      printWindow.document.write('<tr><td>' + item.itemName + '</td><td>' + item.itemQuantity + '</td></tr>');
    });

    printWindow.document.write('</tbody></table>');
  } else {
    printWindow.document.write('<p>' + orderList + '</p>');
  }

  printWindow.document.write('</body></html>');
  printWindow.document.close();
  printWindow.print();
}


      function updateOrderStatus(orderId, newStatus) {
    fetch(`/orders/update/${orderId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ status: newStatus })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        if (!data.success) {
            alert('Error updating order status');
        }
       
        location.reload();
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

  


   </script>
  


</body>
</html>

