{% extends "core/base.jinja" %}
{% from "core/macros.jinja" import user_mini_profile, user_subscription %}


{% macro add_product(id, content, class="") %}
<form method="post" action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}" class="{{ class }}">
    {% csrf_token %}
    <input type="hidden" name="action" value="add_product">
    <button type="submit" name="product_id" value="{{ id }}"> {{ content|safe }} </button>
</form>
{% endmacro %}

{% macro del_product(id, content, class="") %}
<form method="post" action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}" class="{{ class }}">
    {% csrf_token %}
    <input type="hidden" name="action" value="del_product">
    <button type="submit" name="product_id" value="{{ id }}"> {{ content }} </button>
</form>
{% endmacro %}

{% block title %}
{{ counter }}
{% endblock %}

{% block content %}
<h4 id="click_interface">{{ counter }}</h4>

<div id="user_info">
    <h5>{% trans %}Customer{% endtrans %}</h5>
    {{ user_mini_profile(customer.user) }}
    {{ user_subscription(customer.user) }}
    <p>{% trans %}Amount: {% endtrans %}{{ customer.amount }} €</p>
    <form method="post" action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}">
        {% csrf_token %}
        <input type="hidden" name="action" value="add_student_card">
        {% trans %}Add a student card{% endtrans %}
        <input type="input" name="student_card_uid" />
        {% if request.session['not_valid_student_card_uid'] %}
            <p><strong>{% trans %}This is not a valid student card UID{% endtrans %}</strong></p>
        {% endif %}
        <input type="submit" value="{% trans %}Go{% endtrans %}" />
    </form>
    <h6>{% trans %}Registered cards{% endtrans %}</h6>
    {% if customer.student_cards.exists() %}
        <ul>
            {% for card in customer.student_cards.all() %}
                <li>{{ card.uid }}</li>
            {% endfor %}
        </ul>
    {% else %}
        {% trans %}No card registered{% endtrans %}
    {% endif %}
</div>
<div id="bar_ui">
    <h5>{% trans %}Selling{% endtrans %}</h5>
    <div>
        <div class="important">
            {% if request.session['too_young'] %}
            <p><strong>{% trans %}Too young for that product{% endtrans %}</strong></p>
            {% endif %}
            {% if request.session['not_allowed'] %}
            <p><strong>{% trans %}Not allowed for that product{% endtrans %}</strong></p>
            {% endif %}
            {% if request.session['no_age'] %}
            <p><strong>{% trans %}No date of birth provided{% endtrans %}</strong></p>
            {% endif %}
            {% if request.session['not_enough'] %}
            <p><strong>{% trans %}Not enough money{% endtrans %}</strong></p>
            {% endif %}
        </div>
        <form method="post" action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}">
            {% csrf_token %}
            <input type="hidden" name="action" value="code">
            <input type="input" name="code" value="" class="focus" id="code_field"/>
            <input type="submit" value="{% trans %}Go{% endtrans %}" />
        </form>
        <p>{% trans %}Basket: {% endtrans %}</p>
        <ul>
            {% for id,infos in request.session['basket']|dictsort %}
            {% set product = counter.products.filter(id=id).first() %}
            {% set s = infos['qty'] * infos['price'] / 100 %}
            <li>{{ del_product(id, '-', "inline") }} {{ infos['qty'] + infos['bonus_qty'] }} {{ add_product(id, '+', "inline") }}
            {{ product.name }}: {{ "%0.2f"|format(s) }} €
            {% if infos['bonus_qty'] %}
                P
            {% endif %}
            </li>
            {% endfor %}
        </ul>
        <p><strong>{% trans %}Total: {% endtrans %}{{ "%0.2f"|format(basket_total) }} €</strong></p>
        <div class="important">
            {% if request.session['too_young'] %}
            <p><strong>{% trans %}Too young for that product{% endtrans %}</strong></p>
            {% endif %}
            {% if request.session['not_allowed'] %}
            <p><strong>{% trans %}Not allowed for that product{% endtrans %}</strong></p>
            {% endif %}
            {% if request.session['no_age'] %}
            <p><strong>{% trans %}No date of birth provided{% endtrans %}</strong></p>
            {% endif %}
            {% if request.session['not_enough'] %}
            <p><strong>{% trans %}Not enough money{% endtrans %}</strong></p>
            {% endif %}
        </div>
        <form method="post" action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}">
            {% csrf_token %}
            <input type="hidden" name="action" value="finish">
            <input type="submit" value="{% trans %}Finish{% endtrans %}" />
        </form>
        <form method="post" action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}">
            {% csrf_token %}
            <input type="hidden" name="action" value="cancel">
            <input type="submit" value="{% trans %}Cancel{% endtrans %}" />
        </form>
    </div>
    {% if counter.type == 'BAR' %}
    <h5>{% trans %}Refilling{% endtrans %}</h5>
    <div>
        <form method="post" action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}">
            {% csrf_token %}
            {{ refill_form.as_p() }}
            <input type="hidden" name="action" value="refill">
            <input type="submit" value="{% trans %}Go{% endtrans %}" />
        </form>
    </div>
    {% endif %}
</div>
<div id="products">
    <ul>
        {% for category in categories.keys() -%}
        <li><a href="#cat_{{ category|slugify }}">{{ category }}</a></li>
        {%- endfor %}
    </ul>
    {% for category in categories.keys() -%}
    <div id="cat_{{ category|slugify }}">
        <h5>{{ category }}</h5>
        {% for p in categories[category] -%}
            {% set file = None %}
            {% if p.icon %}
                {% set file = p.icon.url %}
            {% else %}
                {% set file = static('core/img/na.gif') %}
            {% endif %}
            {% set prod = '<strong>%s</strong><hr><img src="%s" /><span>%s €<br>%s</span>' % (p.name, file, p.selling_price, p.code) %}
                {{ add_product(p.id, prod, "form_button") }}
        {%- endfor %}
    </div>
    {%- endfor %}
</div>

{% endblock %}

{% block script %}
<script>
document.getElementById("click_interface").scrollIntoView();
</script>
{{ super() }}
<script>
$( function() {
    var products = [
    {% for p in products -%}
        {
            value: "{{ p.code }}",
            label: "{{ p.name }}",
            tags: "{{ p.code }} {{ p.name }}",
        },
    {%- endfor %}
    ];
    var quantity = "";
    var search = "";
    var pattern = /^(\d+x)?(.*)/i;
    $( "#code_field" ).autocomplete({
        select: function (event, ui) {
            event.preventDefault();
            $("#code_field").val(quantity + ui.item.value);
        },
        focus: function (event, ui) {
            event.preventDefault();
            $("#code_field").val(quantity + ui.item.value);
        },
        source: function( request, response ) {
            var res = pattern.exec(request.term);
            quantity = res[1] || "";
            search = res[2];
            var matcher = new RegExp( $.ui.autocomplete.escapeRegex( search ), "i" );
            response($.grep( products, function( value ) {
                value = value.tags;
                return matcher.test( value );
            }));
        },
    });
});
$( function() {
    $("#bar_ui").accordion({
        heightStyle: "content",
        activate: function(event, ui){
            $(".focus").focus();
        }
        });
    $("#products").tabs();
    $("#code_field").focus();
});
</script>
{% endblock %}