{% extends "base.html" %}

{% load static %}

{% block title %}Winkel{% endblock %}

{% block content %}
<script>
    let sum_33 = 0
    let sum_55 = 0
    let total_sum = 0

    function input_changed() {
        sum_33 = Number(document.getElementById(`amount_33`).value) * 25;
        sum_50 = Number(document.getElementById(`amount_50`).value) * 30;

        let total_field_33 = document.getElementById(`sum_33`);
        total_field_33.innerText = sum_33;
        let total_field_50 = document.getElementById(`sum_50`);
        total_field_50.innerText = sum_50;


        let total_sum = document.getElementById(`total_sum`);
        total_sum.innerText = sum_33 + sum_50;
    }
</script>

<form class="cart" action="{% url 'winkel' %}" method='post'>
    {% csrf_token %}
    <div class="leftcell buy_button_cell">
        <button class="buy_button" style="font-size:95%">Bestel</button>
    </div>
    <div class="total_quantity">
    </div>
    <div class="rightcell total_price">
        <span class="bold equals">=</span><span> €</span>
        <span id="total_sum">0</span>
    </div>


    <div class="leftcell"><img class="photo" src="{% static 'mate33.jpg' %}"></div>
    <div class="midcell">
        <span class="quantity">
            <input id="amount_33" name="amount_33" type="number" value="0" placeholder="0" onfocus="this.placeholder=''"
                onblur="this.placeholder='0'" oninput="input_changed()">
        </span>
        <span>x</span>
        <span class="unit_price">€25</span>
    </div>
    <div class="rightcell price">
        <span class="bold equals">=</span>€
        <span id="sum_33">0</span>
    </div>


    <div class="leftcell"><img class="photo" src="{% static 'mate50.jpeg' %}"></div>
    <div class="midcell">
        <span class="quantity">
            <input id="amount_50" name="amount_50" type="number" value="0" placeholder="0" onfocus="this.placeholder=''"
                onblur="this.placeholder='0'" oninput="input_changed()">
        </span>
        <span>x</span>
        <span class="unit_price">€30</span>
    </div>
    <div class="rightcell price">
        <span class="bold equals">=</span>€
        <span id="sum_50">0</span>
    </div>
</form>
{% endblock %}