<!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 - Track-Order</title>
    <link rel="stylesheet"
    href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
    <link rel="stylesheet" href="/css/app.css" />
    <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">
    <section class="cart-container">
        <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="status">
            <div class="status_container mx-auto my-5">
                <div class="status-box w-full lg:w-2/3 mx-auto">
                    <div class="flex items-center justify-between mb-12">
                        <h1 class="text-xl font-bold">Track delivery status</h1>
                        <h6 class="bg-slate-200 py-1 rounded-full px-4 text-orange-600 text-xs">Tracking ID : <%=
                            orders._id %></h6>
                        <input id="hiddenInput" type="hidden" value="<%= JSON.stringify(orders) %>">
                    </div>
                    <ul>
                        <li class="status_line text-lg pb-16" data-status="order_placed"><span>Order Placed</span>
                        </li>
                        <li class="status_line text-lg pb-16" data-status="confirmed"><span>Order confirmation</span>
                        </li>
                        <li class="status_line text-lg pb-16" data-status="prepared"><span>Preparation</span></li>
                        <li class="status_line text-lg pb-16" data-status="delivered"><span>Out for delivery </span>
                        </li>
                        <li class="status_line text-xl" data-status="completed"><span>Complete</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
</body>
<script src="/socket.io/socket.io.js"></script>
<script src="../../js/app.js"></script>
</html>