{% extends "events/event_detail.html" %}
{% load i18n comments fieldset_extras %}

{% block title %}{% if hanchan.id %}{% trans "Edit Hanchan" %}{% else %}{% trans "Add Hanchan" %}{% endif %}{% endblock %}

{% block extra_head %}
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.min.js"></script>
{% endblock %}

{% block maincontent %}
{% for error in form.non_field_errors %}<p class="error">{{error}}</p>{% endfor %}
<form class="grid_12" method="post"><fieldset>
    {% csrf_token %}
    <legend>{% if hanchan.id %}{% trans "Edit Hanchan" %}{% else %}{% trans "Add Hanchan" %}{% endif %}</legend>
    {% get_fieldset "start" from form as event_formset %}
    <table>
        <thead><tr>
            <th width="25%">{% trans 'Player' %}</th>
            <th width="25%">{% trans 'Score' %}</th>
            <th width="50%">{% trans 'Comment' %}</th>
        </tr></thead>
        <tbody>
        {% with event_formset as form %}{% include "form.html" %} {% endwith %}
        <tr>
            <td>{{ form.player1 }} {% if form.player1.errors %}{{ form.player1.errors }}{% endif %}</td>
            <td>{{ form.player1_input_score}}</td>
            <td>
                {{ form.instance.player1_comment}}
                {% if form.player1_input_score.errors %}{{ form.player1_input_score.errors }}{% endif %}
            </td>
        </tr>
        <tr>
            <td>{{ form.player2 }} {% if form.player2.errors %}{{ form.player2.errors }}{% endif %}</td>
            <td>{{ form.player2_input_score}}</td>
            <td>
                {{ form.instance.player2_comment }}
                {% if form.player2_input_score.errors %}{{ form.player2_input_score.errors }}{% endif %}
            </td>
        </tr>
        <tr>
            <td>{{ form.player3 }} {% if form.player3.errors %}{{ form.player3.errors }}{% endif %}</td>
            <td>{{ form.player3_input_score}}</td>
            <td>
                {{ form.instance.player3_comment }}
                {% if form.player3_input_score.errors %}{{ form.player3_input_score.errors }}{% endif %}
            </td>
        </tr>
        <tr>
            <td>{{ form.player4 }} {% if form.player4.errors %}{{ form.player4.errors }}{% endif %}</td>
            <td>{{ form.player4_input_score}}</td>
            <td>
                {{ form.instance.player4_comment }}
                {% if form.player4_input_score.errors %}{{ form.player4_input_score.errors }}{% endif %}
            </td>
        </tr>
    </tbody>
    <tfoot><tr>
        <td>{% trans 'Total' %}</td>
        <td><input type="number" value="0" id="total" disabled></td>
        <td><span id="difference"></span></td>
    </tr></tfoot>
    </table>
    {% if perms.mahjong_ranking.change_hanchan %}
        {% get_fieldset "comment, confirmed" from form as hanchan_formset %}
    {% else %}
        {% get_fieldset "comment" from form as hanchan_formset %}
    {% endif %}
    {% with hanchan_formset as form %}{% include "form.html" %} {% endwith %}

    <p class="buttonbar">
        <a href="{% url 'event-hanchan-list' event.pk %}" class="button"><span class="fa fa-undo"></span> {% trans 'back' %}</a>
        <button type="submit"><span class="fa fa-hdd-o"></span> {% trans 'save' %}</button>
    </p>
</fieldset></form>
<script type="text/javascript">
function recalculate_values(element) {
    var total = 0
    $('input[name$="_input_score"]').each(function() {total += Number($(this).val());});
    $('#total').val(total)

    var difference = 100000 - total
    if (difference > 0) {
        differnence_text = difference + ' offen'
    } else if (difference < 0) {
        differnence_text = (0 - difference) + ' zu viel'
    } else {
        differnence_text = 'Ok'
    }
    $('#difference').text(differnence_text)
}
$("#id_start_1").focus();
$('input[name$="_input_score"]').keyup(function() {recalculate_values(this);});
$('input[name$="_input_score"]').change(function() {recalculate_values(this);});
</script>
{% endblock %}

{% block comments %}{% endblock %}
{% block buttonbar %}{% endblock %}