Untitled

<html>
    <head>
        <title>Poxim Lanches - Mesa 01</title>
        <meta name="viewport" content="width=device-width, intial-scale=1">
    </head>
    <style>
        .menu-title {
            width: 50%;
        }
        .row, .menu-item, .orders-row {
            display: flex;
        }
        .menu-item-name, .menu-item-price {
            flex: 1 1 auto;
        }
        .menu-item-price {
            text-align: left;
        }
        .menu-item-name {
            width: 85%;
        }
        .menu-item-qt-button {
            margin-top: 15px;
            border-radius: 50%;
            height: 90%;
        }
        .order {
            border: 1px solid grey;
            border-radius: 10px;
            padding: 10px 15px;
            margin-right: 10px;
        }
    </style>
    <body>
        <div class="row" id="header-row">
            <h1 class="menu-title">Poxim Lanches</h1>
        </div>
        <hr>
        <div class="menu-item" id="poxim-burger">
            <p class="menu-item-name">Poxim Burguer</p>
            <p class="menu-item-price">R$15,00</p>
            <button class="menu-item-qt-button" onclick="changeItemQuantity(-1, 'poxim-burger-qt', 15)">-</button>
            <p class="menu-item-qt" id="poxim-burger-qt">0</p>
            <button class="menu-item-qt-button" onclick="changeItemQuantity(+1, 'poxim-burger-qt', 15)">+</button>
        </div>
        <div class="menu-item" id="fries">
            <p class="menu-item-name">Batatas Fritas</p>
            <p class="menu-item-price">R$7,00</p>
            <button class="menu-item-qt-button" onclick="changeItemQuantity(-1, 'fries-qt', 7)">-</button>
            <p class="menu-item-qt" id="fries-qt">0</p>
            <button class="menu-item-qt-button" onclick="changeItemQuantity(1, 'fries-qt', 7)">+</button>
        </div>
        <div class="menu-item" id="dern-shake">
            <p class="menu-item-name">Dern Shake</p>
            <p class="menu-item-price">R$9,00</p>
            <button class="menu-item-qt-button" onclick="changeItemQuantity(-1, 'dern-shake-qt', 9)">-</button>
            <p class="menu-item-qt" id="dern-shake-qt">0</p>
            <button class="menu-item-qt-button" onclick="changeItemQuantity(1, 'dern-shake-qt', 9)">+</button>
        </div>
        <div class="menu-item" id="avocado-juice">
            <p class="menu-item-name">Suco de Abacate</p>
            <p class="menu-item-price">R$4,00</p>
            <button class="menu-item-qt-button" onclick="changeItemQuantity(-1, 'avocado-juice-qt', 4)">-</button>
            <p class="menu-item-qt" id="avocado-juice-qt">0</p>
            <button class="menu-item-qt-button" onclick="changeItemQuantity(1, 'avocado-juice-qt', 4)">+</button>
        </div>
        <div class="menu-item" id="total">
            <p class="menu-item-name">Total</p>
            <p class="menu-item-price" id="total-price">R$0,00</p>
            <button class="order-button">Pedir</button>
        </div>
        <hr>
        <h2>Seus pedidos - Mesa #01</h2>
        <div class="orders-row">
            <div class="order">
                <p>Pedido #01</p>
                <p>2x Batatas Fritas</p>
                <p>1x Dern Shake</p>
                <p><strong>R$23,00</strong></p>
            </div>
            <div class="order">
                <p>Pedido #02</p>
                <p>1x Poxim Burger</p>
            </div>
        </div>
    </body>
    <script>
        let totalSpent = 0;
        let currentOrderValue = 0;
        let ordersMade = 0;
        let tableId = 0;

        function changeItemQuantity(delta, itemId, itemPrice) {
            let qt = +document.body.getElementById(itemId).innerHTML;

            if (qt + delta >= 0) {
                currentOrderValue += delta * itemPrice;
                document.body.getElementById('total-price').innerHTML = `R$${currentOrderValue},00`
                qt += delta;
            }

            document.body.getElementById(itemId).innerHTML = qt;
        }

        function makeOrderObject() {
            let numOfBurgers = +document.body.getElementById('poxim-burger-qt').innerHTML;
            let numOfFries = +document.body.getElementById('fries-qt').innerHTML;
            let numOfShakes = +document.body.getElementById('dern-shake-qt').innerHTML;
            let numOfJuices = +document.body.getElementById('juice-qt').innerHTML;

            return {
                table: tableId,
                order: ordersMade + 1,
                burgers: numOfBurgers,
                fries: numOfFries,
                shakes: numOfShakes,
                juices: numOfJuices
            };
        }

        function createOrdersDiv() {
            let ordersDiv = document.createElement('div');
            ordersDiv.setAttribute('class', 'orders-row');
            document.body.getElementById("orders-row").replaceChild(ordersDiv);
        }

        function makeOrderCard(orderObject) {
            let card = document.createElement('div');
            card.setAttribute('class', 'order');

            let header = document.createElement('p');
            header.innerHTML = `Pedido #0${orderObject[orderId]}`;


        }

        async function order() {
            totalSpent += currentOrderValue;
            currentOrderValue = 0;

            let obj = makeOrderObject();

            let response = await fetch('/order', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                },
                body: obj
            });

            let result = await response.json();
            alert(result.message);

            if (ordersMade == 0) {
                createOrdersDiv();
            }

            ordersMade++;

            documet.body.getElementById('orders-row').insert
        }
    </script>
</html>