<!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 - Cart</title>
    <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>

        <% if(session.cart) { %>
            <div class="order active-container mx-auto w-1/2 py -10">
                <div class="flex items-center border-b border-gray-300 pb-4">
                    <img src="/img/others/cart_2.png" alt="" width="28" />
                    <h1 class="font-bold ml-4 txt-2xl">Order Summary</h1>
                </div>

                <% for( let pizza of Object.values(session.cart.items)) { %>
                    <div class="pizza-list flex items-center my-8">
                        <div>
                            <img class="rounded-lg" width="100" src="/img/menu/<%= pizza.item.image %>" alt="" />
                        </div>
                        <div class="flex-1 ml-4">
                            <h1>
                                <%= pizza.item.name %>
                            </h1>
                            <span>
                                <%= pizza.item.size %>
                            </span>
                        </div>
                        <span class="flex-1">
                            <%= pizza.qty %> Pcs
                        </span>
                        <span class="font-bold text-lg">‚Çπ<%= pizza.item.price %></span>
                    </div>
                    <% } %>
                        <hr />

                        <div class="text-right py-4">
                            <div>
                                <span class="text-lg font-bold">Total Amount:</span>
                                <span class="total-amt text-2xl font-bold ml-2">‚Çπ<%= session.cart.totalprice %></span>
                            </div>
                            <% if(user) { %>
                            <div>
                                <form action="/orders" method="POST" class="mt-12">
                                    <input name="phone" class="border border-gray-400 p-2 w-1/2 mb-4 rounded-sm h-8" type="number"
                                        placeholder="Phone" required=""/>
                                    <input name="address" class="border border-gray-400 p-2 w-1/2 mb-4 rounded-sm h-8" type="text"
                                        placeholder="Address" required=""/>
                                    <div>
                                        <button type="submit" class="OrderNow-btn">Place Order</button>
                                    </div>
                                </form>
                            </div>
                            <% } else { %>
                              <a href="/login"><button type="submit" class="OrderNow-btn mt-10">Login First!</button></a>
                        </div>
                        <% } %>
             </div>
            <% } else { %>
                <p class="cart-heading">
                    <span id="cart-empty">Empty Cart üôÅ</span> <br />
                    You probably haven't ordered a pizza yet. <br />
                    To order a pizza please Add Items or go to the Homepage
                </p>
                <img class="cart-animation" src="/img/cart_animation.svg" alt="" width="410px" />
                <button onclick="document.location='/#menu'" type="button" type="button" id="back-btn">
                    Add Items
                </button>
                <% } %>
    </section>
</body>
<script src="/socket.io/socket.io.js"></script>
<script src="../../js/app.js"></script>
</html>