{% extends 'leprikon/base.html' %}
{% load i18n cms_tags leprikon_tags sekizai_tags %}

{% block content %}

<h1>{% block title %}{{ title }}{% endblock %}</h1>

{% if form.instance.subject.full %}
    <div class="alert alert-warning" role="alert">
        {% blocktrans with subject_type=form.instance.subject.subject_type.name_genitiv %}The capacity of this {{ subject_type }} has already been filled. You may register anyway, but the registration may not be approved. We will inform You.{% endblocktrans %}
    </div>
{% endif %}

{% if form.errors %}
    <div class="alert alert-danger" role="alert">{% trans 'Please correct the highlighted errors below.' %}</div>
{% endif %}
{% for error in form.non_field_errors %}
    <div class="alert alert-danger" role="alert">{{ error }}</div>
{% endfor %}

<form action="" method="post" class="form-horizontal">{% csrf_token %}

    <h3>{% trans 'Price' %}</h3>
    {% if form.subject_variant %}
    <div class="form-group {{ form.subject_variant.css_classes }}">
        <label class="control-label col-md-3">
            {{ form.subject_variant.label }}
        </label>
        <div class="col-md-9{% if form.subject_variant.errors %} alert alert-danger{% endif %}">
            {% for variant in form.instance.subject.all_variants %}
                <div class="row select">
                    <div class="col-md-1 right">
                        <input class="form-control" data-type="ChoiceField"
                               {% if variant.id == form.subject_variant.value|add:0 %}checked="checked"{% endif %}
                               id="{{ form.subject_variant.id_for_label }}_{{ variant.id }}"
                               name="{{ form.subject_variant.html_name }}" value="{{ variant.id }}" type="radio">
                    </div>
                    <div class="col-md-11">
                        <label class="form-control" style="font-weight:normal" for="{{ form.subject_variant.id_for_label }}_{{ variant.id }}">
                            <strong>{{ variant.name }}</strong><br/>
                        </label>
                        {{ variant.description | safe }}
                    </div>
                </div>
            {% endfor %}
            
            {% for error in form.subject_variant.errors %}
                <div>{{ error }}</div>
            {% endfor %}

            {% if form.subject_variant.help_text %}
                <span class="help-block">{{ form.subject_variant.help_text | safe }}</span>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <div class="form-group">
        <label class="control-label col-md-3">{% trans 'Price' %}</label>
        <div class="col-md-9">
            <label class="form-control" style="font-weight:normal">
                <span id="price">
                {% if form.subject_variant.value %}
                    {% for variant in form.instance.subject.all_variants %}
                        {% if variant.id == form.subject_variant.value|add:0 %}{{ variant.price | currency }}{% endif %}
                    {% endfor %}
                {% else %}
                    {{ form.instance.subject.price | currency }}
                {% endif %}
                </span>
                {% if form.instance.subject.course.school_year_division.period_name %}
                / {{ form.instance.subject.course.school_year_division.period_name }}
                {% endif %}
            </label>
        </div>
    </div>

    {% if form.email_form %}
    <h3>{% trans 'User' %}</h3>
    {% include 'leprikon/form_item.html' with item=form.email_form.email %}
    {% endif %}

    <h3>{% trans 'Participant' %}</h3>
    {% if form.participants %}
    {% include 'leprikon/form_item.html' with item=form.participant_select_form.participant %}
    {% else %}
    <input type="hidden" name="participant_select-participant" value="new"/>
    {% endif %}

    {% include 'leprikon/form_item.html' with item=form.participant_first_name %}
    {% include 'leprikon/form_item.html' with item=form.participant_last_name %}
    {% include 'leprikon/form_item.html' with item=form.participant_birth_num %}
    {% include 'leprikon/form_item.html' with item=form.participant_age_group %}
    {% include 'leprikon/form_item.html' with item=form.participant_street %}
    {% include 'leprikon/form_item.html' with item=form.participant_city %}
    {% include 'leprikon/form_item.html' with item=form.participant_postal_code %}
    {% include 'leprikon/form_item.html' with item=form.participant_citizenship %}
    <div id="participant_contact" class="hidden">
        {% include 'leprikon/form_item.html' with item=form.participant_phone %}
        {% include 'leprikon/form_item.html' with item=form.participant_email %}
    </div>
    <div id="participant_school_details" class="hidden">
        {% include 'leprikon/form_item.html' with item=form.participant_school %}
        <div id="participant_school_other" class="hidden">
            {% include 'leprikon/form_item.html' with item=form.participant_school_other %}
        </div>
        {% include 'leprikon/form_item.html' with item=form.participant_school_class %}
    </div>
    {% include 'leprikon/form_item.html' with item=form.participant_health %}
    {% for item in form.questions_form %}
        {% include 'leprikon/form_item.html' %}
    {% endfor %}

    <h3>{% trans 'Parents' %}</h3>

    <div id="parent1_switch">
        {% include 'leprikon/form_item.html' with item=form.has_parent1 %}
    </div>
    <div id="parent1_form"{% if not form.has_parent1.value %} class="hidden"{% endif %}>
        {% if form.parents %}
        {% include 'leprikon/form_item.html' with item=form.parent1_select_form.parent %}
        {% else %}
        <input type="hidden" name="parent1_select-parent" value="new"/>
        {% endif %}
        {% include 'leprikon/form_item.html' with item=form.parent1_first_name %}
        {% include 'leprikon/form_item.html' with item=form.parent1_last_name %}
        {% include 'leprikon/form_item.html' with item=form.parent1_street %}
        {% include 'leprikon/form_item.html' with item=form.parent1_city %}
        {% include 'leprikon/form_item.html' with item=form.parent1_postal_code %}
        {% include 'leprikon/form_item.html' with item=form.parent1_phone %}
        {% include 'leprikon/form_item.html' with item=form.parent1_email %}
    </div>

    {% include 'leprikon/form_item.html' with item=form.has_parent2 %}
    <div id="parent2_form"{% if not form.has_parent2.value %} class="hidden"{% endif %}>
        {% if form.parents %}
        {% include 'leprikon/form_item.html' with item=form.parent2_select_form.parent %}
        {% else %}
        <input type="hidden" name="parent2_select-parent" value="new"/>
        {% endif %}
        {% include 'leprikon/form_item.html' with item=form.parent2_first_name %}
        {% include 'leprikon/form_item.html' with item=form.parent2_last_name %}
        {% include 'leprikon/form_item.html' with item=form.parent2_street %}
        {% include 'leprikon/form_item.html' with item=form.parent2_city %}
        {% include 'leprikon/form_item.html' with item=form.parent2_postal_code %}
        {% include 'leprikon/form_item.html' with item=form.parent2_phone %}
        {% include 'leprikon/form_item.html' with item=form.parent2_email %}
    </div>

    {% for agreement_form in form.agreement_forms %}
        {% if agreement_form.agreement.heading %}
            <h3>{{ agreement_form.agreement.heading }}</h3>
        {% endif %}

        {{ agreement_form.agreement.agreement|safe }}

        {% for item in agreement_form %}
            {% include 'leprikon/form_item_checkbox.html' %}
        {% endfor %}
    {% endfor %}

    <!-- SUBMIT -->
    <div class="form-group">
        <div class="col-md-9 col-md-offset-3">
            <button class="btn btn-primary" type="submit">{{ submit_label }}</button>
            {% if back_url %}
            <a class="btn btn-default" href="{{ back_url }}">{{ back_label }}</a>
            {% endif %}
        </div>
    </div>
</form>

{% addtoblock "js" %}
{{ form.email_form.media.js }}

<script type="text/javascript">

function getAge(birthNum) {
    birthNum = birthNum.replace("/","");
    y = parseInt(birthNum.substr(0, 2));
    year = (birthNum.length == 10 ? 1900 : 1800) + (y < 54 ? 100 : 0) + y;
    month = parseInt(birthNum.substr(2, 2)) % 50 % 20;
    day = parseInt(birthNum.substr(4, 2));
    today = new Date();
    return today.getFullYear() - year - (new Date(today.getFullYear(), month-1, day) > today ? 1 : 0)
}

var groups_requires_school = {{% for age_group in form.instance.subject.all_age_groups %}
    {{ age_group.id }}: {% if age_group.require_school %}true{% else %}false{% endif %},{% endfor %}
};

function toggle_section(show, section_name) {
    if (show) {
        $('#' + section_name + ' .form-group').addClass('required');
        $('#' + section_name + ' .form-control').attr('required', '');
        $('#' + section_name + '').removeClass('hidden');
    } else {
        $('#' + section_name + ' .form-group').removeClass('required');
        $('#' + section_name + ' .form-control').removeAttr('required');
        $('#' + section_name + '').addClass('hidden');
    }
}

$(document).ready(function() {
    {% if form.subject_variant %}
    /* Show price for selected variant */
    $('input[type=radio][name={{ form.subject_variant.html_name }}]').change(function() {
        {% for variant in form.instance.subject.all_variants %}
        if (this.value == {{ variant.id }}) {
            $('#price').text('{{ variant.price | currency | escapejs }}');
        }{% endfor %}
    });
    {% endif %}

    /* Select participant */
    $('input[type=radio][name=participant_select-participant]').change(function() {
        if (this.value == 'new') {
            $('#id_participant_first_name').val('');
            $('#id_participant_last_name').val('');
            $('#id_participant_birth_num').val('');
            $('#id_participant_age_group').val('');
            $('#id_participant_age_group').trigger('change');
            $('#id_participant_street').val('');
            $('#id_participant_city').val('');
            $('#id_participant_postal_code').val('');
            $('#id_participant_citizenship').val('');
            $('#id_participant_phone').val('');
            $('#id_participant_email').val('');
            $('#id_participant_school').val('');
            $('#id_participant_school').trigger('change');
            $('#id_participant_school_other').val('');
            $('#id_participant_school_class').val('');
            $('#id_participant_health').val('');
        }{% for participant in form.participants %} else if (this.value == {{ participant.id }}) {
            $('#id_participant_first_name').val('{{ participant.first_name | escapejs }}');
            $('#id_participant_last_name').val('{{ participant.last_name | escapejs }}');
            $('#id_participant_birth_num').val('{{ participant.birth_num | escapejs }}').change();
            $('#id_participant_age_group').val('{{ participant.age_group_id }}');
            $('#id_participant_age_group').trigger('change');
            $('#id_participant_street').val('{{ participant.street | escapejs }}');
            $('#id_participant_city').val('{{ participant.city | escapejs }}');
            $('#id_participant_postal_code').val('{{ participant.postal_code | escapejs }}');
            $('#id_participant_citizenship').val('{{ participant.citizenship_id }}');
            $('#id_participant_phone').val('{{ participant.phone | escapejs }}');
            $('#id_participant_email').val('{{ participant.email | escapejs }}');
            $('#id_participant_school').val('{% if participant.school_other %}other{% else %}{{ participant.school_id }}{% endif %}');
            $('#id_participant_school').trigger('change');
            $('#id_participant_school_other').val('{{ participant.school_other | escapejs }}');
            $('#id_participant_school_class').val('{{ participant.school_class | escapejs }}');
            $('#id_participant_health').val('{{ participant.health | escapejs }}');
        }{% endfor %}
    });

    /* Toggle first parent */
    $('#id_has_parent1').change(function() {
        toggle_section(this.checked, 'parent1_form');
    });
    $('#id_has_parent1').trigger('change');

    /* Toggle second parent */
    $('#id_has_parent2').change(function() {
        toggle_section(this.checked, 'parent2_form');
    });
    $('#id_has_parent2').trigger('change');

    /* Select first parent */
    $('input[type=radio][name=parent1_select-parent]').change(function() {
        if (this.value == 'new') {
            $('#id_parent1_first_name').val('');
            $('#id_parent1_last_name').val('');
            $('#id_parent1_street').val('');
            $('#id_parent1_city').val('');
            $('#id_parent1_postal_code').val('');
            $('#id_parent1_phone').val('');
            $('#id_parent1_email').val('');
        }{% for parent in form.parents %} else if (this.value == {{ parent.id }}) {
            $('#id_parent1_first_name').val('{{ parent.first_name | escapejs }}');
            $('#id_parent1_last_name').val('{{ parent.last_name | escapejs }}');
            $('#id_parent1_street').val('{{ parent.street | escapejs }}');
            $('#id_parent1_city').val('{{ parent.city | escapejs }}');
            $('#id_parent1_postal_code').val('{{ parent.postal_code | escapejs }}');
            $('#id_parent1_phone').val('{{ parent.phone | escapejs }}');
            $('#id_parent1_email').val('{{ parent.email | escapejs }}');
        }{% endfor %}
    });

    /* Select second parent */
    $('input[type=radio][name=parent2_select-parent]').change(function() {
        if (this.value == 'new') {
            $('#id_parent2_first_name').val('');
            $('#id_parent2_last_name').val('');
            $('#id_parent2_street').val('');
            $('#id_parent2_city').val('');
            $('#id_parent2_postal_code').val('');
            $('#id_parent2_phone').val('');
            $('#id_parent2_email').val('');
        }{% for parent in form.parents %} else if (this.value == {{ parent.id }}) {
            $('#id_parent2_first_name').val('{{ parent.first_name | escapejs }}');
            $('#id_parent2_last_name').val('{{ parent.last_name | escapejs }}');
            $('#id_parent2_street').val('{{ parent.street | escapejs }}');
            $('#id_parent2_city').val('{{ parent.city | escapejs }}');
            $('#id_parent2_postal_code').val('{{ parent.postal_code | escapejs }}');
            $('#id_parent2_phone').val('{{ parent.phone | escapejs }}');
            $('#id_parent2_email').val('{{ parent.email | escapejs }}');
        }{% endfor %}
    });

    /* Set callbeck on birth number change */
    $('#id_participant_birth_num').change(function() {
        age = getAge(this.value);
        if (isNaN(age)) return;
        if (age < 18) {
            $('#parent1_switch .form-group').addClass('required');
        } else {
            $('#parent1_switch .form-group').removeClass('required');
        }
        toggle_section(age >= 18, 'participant_contact');
    });
    $('#id_participant_birth_num').trigger('change');

    /* Set callbeck on school change */
    $('#id_participant_school').change(function() {
        toggle_section(this.selectedIndex == this.options.length - 1, 'participant_school_other');
    });
    $('#id_participant_school').trigger('change');

    /* Set callbeck on age group change */
    $('#id_participant_age_group').change(function() {
        toggle_section(groups_requires_school[this.value], 'participant_school_details');
        $('#id_participant_school').trigger('change');
    });
    $('#id_participant_age_group').trigger('change');
});

</script>
{% endaddtoblock %}

{% endblock %}
