{% extends "global/Page.html" %}
{% load otree static %}

{% block styles %}
    <style>
        .reset-valid:invalid {
            box-shadow: 0 0 0 white;
        }
    </style>
{% endblock %}

{% block scripts %}
    <script>
        $(function () {
            var charityAmountDiv = $('input[name=charity_amount]').closest('.form-group');
            var charityNameDiv = $('select[name=charity_name]').closest('.form-group');

            charityAmountDiv.hide();
            charityNameDiv.hide();

            $('select[name=charity_decision]').change(function () {
                var charityDecision = $('select[name=charity_decision]').val();
                if (charityDecision === '1') {
                    charityAmountDiv.find('input').prop('required', false);
                    charityAmountDiv.find('input').val('');
                    charityAmountDiv.hide();
                    charityNameDiv.find('select').prop('required', true);
                    charityNameDiv.show();
                } else if (charityDecision === '2') {
                    var charityAmount = $('input[name=charity_amount]');
                    charityAmount.addClass('reset-valid');
                    charityAmount.on('select click', function () {
                        charityAmount.removeClass('reset-valid');
                    });
                    charityAmountDiv.find('input').prop('required', true);
                    charityAmountDiv.show();
                    charityNameDiv.find('select').prop('required', true);
                    charityNameDiv.show();
                } else if (charityDecision === '3') {
                    charityAmountDiv.find('input').prop('required', false);
                    charityAmountDiv.find('input').val('');
                    charityAmountDiv.hide();
                    charityNameDiv.find('select').prop('required', false);
                    charityNameDiv.find('select').val('');
                    charityNameDiv.hide();
                }
            });
        });
    </script>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}

    <div class="wrapper">
        <div class="instructions">
            <p>
                In most games you have accumulated credits. After all the students have participated in the games, 300 of you will be drawn.
                These pupils will be able to either transfer the credits obtained to an NGO of their choice, or to keep 
                the credits and convert them into cultural vouchers (for books, concerts, or others).
            </p>
            <p>
                You acquired {{ total_credits_so_far|floatformat:"-1" }} credit(s) during this session.
            </p>
        </div>
        <div align="center">{% formfields %}</div>

        <button class="otree-btn-next btn btn-primary">Confirm</button>
    </div>

{% endblock %}