<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pizzroni - Orders</title>
    <link rel="stylesheet" href="/css/app.css" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      rel="shortcut icon"
      href="/img/others/pizza.png"
      type="image/x-icon"
    />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body style="background-color: white">
    <nav class="navbar">
      <a href="/"
        ><img
          src="/img/others/Pizzroni Logo.png"
          alt=""
          width="150px"
          class="logo"
          style="filter: brightness(0)"
      /></a>
      <a href="/" class="Home black-style" style="color: black">Home</a>
      <a href="/offers" class="Offers black-style" style="color: black"
        >Offers</a
      >
      <% if(user) { %>
      <a href="/customer/orders" class="Orders black-style" style="color: black"
        >Orders</a
      >
      <form
        id="logout"
        action="/logout"
        method="POST"
        class="Login black-style"
      >
        <a
          onclick="document.getElementById('logout').submit()"
          href="#"
          style="color: black"
          class="Login"
          >Logout</a
        >
      </form>
      <% } else { %>
      <a href="" class="Orders black-style" style="color: black">Register</a>
      <a href="/login" class="Login black-style" style="color: black">Login</a>
      <% } %>
      <div class="cart black-style">
        <a href="/cart"
          ><img src="/img/others/cart_2.png" width="25px" alt=""
        /></a>
      </div>
    </nav>
    <section class="orders light-section">
      <div class="order_container mx-20 pt-12">
          <h1 class="font-bold text-lg mb-4">All orders</h1>
          <% if(messages.success) { %>
          <div id="success-alert" class="flex items-center bg-green-500 text-white text-sm font-bold px-4 py-3"
              role="alert">
              <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                  <path
                      d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z" />
              </svg>
              <p><%= messages.success %></p>
          </div>
          <% } %>
          <table class="w-full table-auto bg-white">
              <thead>
                  <tr>
                      <th class="px-4 py-2 text-left">Orders</th>
                      <th class="px-4 py-2 text-left">Phone</th>
                      <th class="px-4 py-2 text-left">Address</th>
                      <th class="px-4 py-2 text-left">Time</th>
                  </tr>
              </thead>
              <tbody>
                  <% if(orders.length) { %>
                  <% orders.forEach((order) => { %>
                  <tr>
                      <td class="border px-4 py-2">
                          <a class="link" title="click to track order" href="/customer/orders/<%= order._id %>"><%= order._id %></a>
                      </td>
                      <td class="border px-4 py-2">
                          <%= order.phone %>
                      </td>
                      <td class="border px-4 py-2">
                          <%= order.address %>
                      </td>
                      <td class="border px-4 py-2">
                          <%= moment(order.createdAt).format('hh:mm A') %>
                      </td>
                  </tr>
                  <% }) %>
                  <% } else { %>
                  <tr>
                      <td class="p-4"><span>No orders found!</span></td>
                  </tr>
                  <% } %>
              </tbody>
          </table>
      </div>
  </section>
  </body>
  <script src="/socket.io/socket.io.js"></script>
  <script src="../../js/app.js"></script>
</html>
