function updateTotal(amount) {
    total_el = document.getElementById('total')
    total = parseFloat(total_el.innerText)
    total += amount
    total_el.innerText = total.toFixed(2)
}

function renderBasketItem(uid, name) {
    return '<button id="basketitem_' + uid + '"' +
                   'onclick="delProduct(' + uid + ')">' +
                       '1 x ' + name +
           '</button>'
}

function addProduct(uid) {
    // This is the hidden input element inside the form. We'll use this DOM
    // element to keep informations about the product, such as the name,
    // the price and the value inside the 'data-' tag.
    form_el = document.getElementById('prod_' + uid)
    basket = document.getElementById('basket')
    basket_el = document.getElementById('basketitem_' + uid)

    form_el.value = parseInt(form_el.value) + 1

    // If there is not a button for the given product inside the basket
    // div we'll create it.
    if (basket_el === null) {
        basket.innerHTML += renderBasketItem(uid, form_el.dataset.name)
    } else {
        // Otherwise we'll just update it.
        console.log(form_el.value)
        new_text = form_el.value + ' x ' + form_el.dataset.name
        basket_el.innerText = new_text
    }

    updateTotal(parseFloat(form_el.dataset.price))
}

function delProduct(uid) {
    form_el = document.getElementById('prod_' + uid)
    basket = document.getElementById('basket')
    basket_el = document.getElementById('basketitem_' + uid)

    form_el.value = parseInt(form_el.value) - 1

    if (form_el.value == 0) {
        basket.removeChild(basket_el)
    } else {
        new_text = form_el.value + ' x ' + form_el.dataset.name
        basket_el.innerText = new_text
    }

    updateTotal(parseFloat(-form_el.dataset.price))
}