{% extends "events/event_detail.html" %}{% load i18n humanize thumbnail %}

{% block title %}Hanchans: {{ event.name }}{% endblock %}

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

{% block maincontent %}
<h2 class="grid_12">{% trans 'Edit Hanchans' %}</h2>

<form method="post" action="" id="eventhanchan_form">
  {% csrf_token %}
  {{ formset.management_form }}

  {% for form in formset %}
  <fieldset class="hanchan">
    {% for hidden in form.hidden_fields %} {{ hidden }} {% endfor %}
    <p>
      <label for="id_{{ form.start.html_name }}_0" class="field_name {{ form.start.css_classes }}">{{ form.start.label }}:</label>
      {{ form.start }}
      {{ form.start.errors }}
    </p>
    <table>
      <thead>
      <tr>
        <th>{{form.player1.label}}</th>
        <th>{{form.player2.label}}</th>
        <th>{{form.player3.label}}</th>
        <th>{{form.player4.label}}</th>
      </tr>
      </thead>
      <tr>
        <td>{{ form.player1 }}</td>
        <td>{{ form.player2 }}</td>
        <td>{{ form.player3 }}</td>
        <td>{{ form.player4 }}</td>
      </tr>
      <tr>
        <td>{{ form.player1_input_score }}</td>
        <td>{{ form.player2_input_score }}</td>
        <td>{{ form.player3_input_score }}</td>
        <td>{{ form.player4_input_score }}</td>
      </tr>
    </table>

    <p>
      <label class="field_name {{ form.comment.css_classes }}">{% trans 'Total' %}:</label>
      <input type="number" value="0" name="total_score" disabled>
      <label>{% trans 'Difference' %}:</label>
      <span class="difference"></span>
    </p>


    <p><label for="id_{{ form.comment.html_name }}" class="field_name {{ form.comment.css_classes }}">{{ form.comment.label }}:</label>
      {{ form.comment  }}
      {{ form.comment.errors }}
    </p>
    {% if form.instance.pk %}
    <p>
      <label for="id_{{ form.DELETE.html_name }}" class="field_name {{ form.DELETE.css_classes }}">{{ form.DELETE.label }}:</label>
      {{ form.DELETE }} {{form.DELETE.help_text}}
      {{ form.DELETE.errors }}
    </p>
    {% endif %}
    {% if form.non_field_errors %}
    <p> {{ form.non_field_errors }}</p>
    {% endif %}
  </fieldset>
  {% endfor %}
</form>
<script type="text/javascript">
  function autofill(row) {
    row.find("input[id$='start_0']").val('{{ event.start|date:"SHORT_DATE_FORMAT"}}');
    row.find("input[id$='start_1']").val('{{ event.start|time:'TIME_FORMAT'}}');
  }

  function recalculate_score(element) {
    var difference = 100000
    var total = 0;
    score_fields = $(element).closest('fieldset').find('input[name$="input_score"]')
    total_field = $(element).closest('fieldset').find('input[name$="total_score"]')
    difference_field = $(element).closest('fieldset').find('span[class="difference"]')
    score_fields.each(function() {total += Number($(this).val());});
    total_field.val(total)

    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_field.text(differnence_text)
}

  $(function() {
    $('.hanchan').formset({
      prefix: '{{ formset.prefix }}',
      added: autofill,
      addText: '<span class="fa fa-plus-circle"></span> {% trans 'Add Hanchan' %}',
      addCssClass: 'button',
      deleteText:'<span class="fa fa-trash"></span> {% trans 'Delete Hanchan' %}',
      deleteCssClass: 'button'
    });
  })
  $('input[name$="_input_score"]').change(function() {recalculate_score(this);});
  $('input[name$="_input_score"]').keyup(function() {recalculate_score(this);});
  $('input[name$="total_score"]').each(function() {recalculate_score(this);});
</script>
{% endblock %}

{% block comments %}{% endblock %}

{% block buttonbar %}
    <a class="button" href="{% url 'event-hanchan-list' event.pk %}"><span class="fa fa-undo"></span> {% trans 'back' %}</a>
    <button type="submit" form="eventhanchan_form"><span class="fa fa-hdd-o"></span> {% trans 'save' %}</button>
{% endblock %}
