<!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>GhostKitchen</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
    <main>
        <div class="container">
            <div>
                <h3>
                    GhostKitchen App
                </h3>
            </div>
            <div class="p-4">
                <div class="display-4">
                    Update current Order:
                </div>
                <hr />
                <div class="col-4">
                    <form action="/user/orders/update/" method="POST">
                        <div class="display-6 text-capitalize">
                            <%= orderDetails.meal_info.name %>
                        </div>
                        <br />
                        <div class="lead">
                            <%= orderDetails.meal_info.desc %>
                        </div>
                        <br />
                        <div>
                            <label for="pickup-select" style="font-weight: bold;">Quantity</label>
                            <select class="form-control" id="quantity-select" name="quantity">
                                <% for (let i=1; i<=20; i++) {%>
                                    <option value="<%= i %>" <% if(i===orderDetails.order_quantity) { %> selected <% } %>>
                                            <%= i %>
                                    </option>
                                    <% } %>
                            </select>
                        </div>
                        <br />
                        <div>
                            <label for="pickup-select" style="font-weight: bold;">Pickup Type</label>
                            <select class="form-control" id="pickup-select" name="pickupID">
                                <% for (const f of pickups) {%>
                                    <option value="<%= f.id %>" <% if(f.id===orderDetails.pickup.id) { %> selected <% }
                                            %>>
                                            <%= f.type %>
                                    </option>
                                    <% } %>
                            </select>
                        </div>
                        <br />
                        <button type="submit" class="btn btn-primary" style="width: 100%;" name="orderID"
                            value="<%= orderDetails._id %>">Update
                        </button>
                    </form>
                </div>
            </div>
    </main>
</body>

</html>
