<header>
    <a id="logo" href="/"><img src='/images/logo.png' alt="SKINFT"></a>
    <% if (!locals.user) { %> <a href='/register' class='headButton'>Register</a> <a href='/login' class='headButton'>Login</a> <% } %>
    <% if (locals.user) { %> <a href='/logout' class='headButton'>Logout</a> <% } %>
    <% if (locals.admin) { %> <a href='/new-item' class='headButton'>Add item</a> <a href='/admin' class='headButton'>Admin page</a> <% } %>

    <% if (locals.user) { %> <span class='headButton'><%= "Welcome, " + user %> <% } %></span>
    <% if (locals.user && !locals.admin) { %> <button id="buttonOpen">Cart</button> <% } %>
</header>


<div id="cart">
    <div id="cartTop">
        <h1 id="h1cart">Cart</h1>
        <table>
            <thead>
            <tr>
                <th>Name</th>
                <th>Image</th>
                <th>Price</th>
                <th>Available</th>
                <th></th>
            </tr>
            </thead>
            <tbody id='tbody'>

            </tbody>
        </table>
    </div>
    <div id="cartBot">
        <a id='total'></a>
        <button class="botButton" id="buttonClose">Close</button>
        <button class="botButton" id="buttonOrder">Order</button>
        <button class="botButton" id="buttonRefresh">Refresh</button>
    </div>
</div>
<script>
    const close = $('#buttonClose');
    const open = $('#buttonOpen');
    const order = $('#buttonOrder');
    const refresh = $('#buttonRefresh');
    const cart = $('#cart');
    const tbody = $('#tbody');
    const total = $('#total');
    let haveAll = false;

    function update() {
        $.get( '/cart', function(data) {
            if (data === 'fail') {
                return;
            }
            order.prop( "disabled", true );
            tbody.html('');
            let sum = 0;
            haveAll = true;
            for (const item of data) {
                if (item.status) {
                    sum += item.priceUsd;
                } else {
                    haveAll = false;
                }
                tbody.append($('<tr>')
                        .append($('<td>', {
                            text: item.name
                        }))
                        .append($('<td>')
                        .append($('<img>', {
                            class: 'miniThumb',
                            src: 'data:image/png;base64,' + item.thumbnail
                        })))
                        .append($('<td>', {
                            class: 'price-tag',
                            text: 'USD: ' + item.priceUsd + '$'
                        }))
                        .append($('<td>', {
                            text: item.status ? 'yes' : 'no'
                        }))
                        .append($('<td>')
                        .append($('<button>', {
                            text: 'remove'
                        })
                        .click( () => remove(item.name) )
                        )));
            }
            if (!haveAll || !data.length) {
                order.prop( "disabled", true );
            } else {
                order.prop( "disabled", false );
            }
            total.html('Total: ' + sum + '$');
        });
    }

    function remove(itemName) {
        $.ajax({
        type: "POST",
        url: "/remove-item/" + itemName,
        data: null,
        success: function(html){ 
                update();
        }
        });
    }

    cart.hide();
    close.click(function () {
        cart.hide('fast');
    });
    open.click(function () {
        cart.show('fast');
    });
    refresh.click(function () {
        update();
    });
    order.click(function () { 
        $.ajax({
        type: "POST",
        url: "/place-order",
        data: null,
        success: function(html){ 
                alert(html);
        }
        });
    });
    update();
</script>