{% extends 'base.html' %}
{% load i18n template_tools widget_tweaks %}

{% block head %}
    {{ block.super }}

    {% include "cms/includes/orderable-inline-head.html" %}
    <script type="text/javascript">
        // `inlines.js` expects a `django` object with a `jQuery` key.
        window.django = {jQuery: $};
    </script>
    <script type="text/javascript" src="{{ STATIC_URL }}common/js/inlines.js"></script>
{% endblock %}

{% block subtitle %}
    {% if object.pk %}
	    {% trans 'Edit question' %}
    {% else %}
        {% trans 'New question' %}
    {% endif %}
{% endblock %}

{% block actions %}
    <a href="{{ workshop.get_detail_url }}" class="btn btn-default">
        {% trans 'Back to the list of questions' %}
    </a>
{% endblock %}

{% block main %}
    <form action="{% if object.pk %}{{ workshopstepquestion.get_edit_url }}{% else %}{% url 'workshops:step-question-create' workshop_uuid=workshop.pk %}{% endif %}"
          method="post" id="workshop-question-form">{% csrf_token %}
        {{ answers_formset.management_form }}
        <div class="panel panel-default">
            <div class="panel-body">
                {% if form.errors or choices_formset.errors %}
                    <div class="alert alert-danger">
                        {% trans 'Please correct errors below.' %}
                        {% if form.non_field_errors %}
                            {{ form.non_field_errors }}
                        {% endif %}
                    </div>
                {% endif %}
                {% include 'cms/extras/form.html' with display='block' %}
                <h4>{% trans 'Answers' %}</h4>
                {% if answers_formset.non_field_errors %}
                    <div class="alert alert-danger">
                        {{ answers_formset.non_field_errors }}
                    </div>
                {% endif %}
                <div class="workshop-question-answers orderable-inline">
                    {% for answer_form in answers_formset %}
                        {% reducespaces %}
                        <div class="
                                orderable-entry
                                inline-choice
                                form-inline
                                {% if forloop.last %}empty-form last-related{% endif %}"
                             id="{{ answers_formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}">
                            {% endreducespaces %}
                            <div class="answer-item">
                                <span class="inline_label"></span>
                                {% for field in answer_form.hidden_fields %}
                                    {{ field }}
                                {% endfor %}
                                <div class="btn btn-default btn-valid">
                                    {% render_field answer_form.is_correct %}
                                    <i class="fa fa-check"></i>
                                </div>
                                <span class="form-group {% if answer_form.label.errors %}has-error{% endif %}">
                                    {% render_field answer_form.label class+='form-control' style="width:850px" placeholder=answer_form.label.label autocomplete="off" %}
                                </span>
                                <div class="input-group">
                                    {% render_field answer_form.points class+='form-control' style="width:60px" %}
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button">
                                            {{ answer_form.points.label }}
                                        </button>
                                    </span>
                                </div>
                                {% if answer_form.instance and answer_form.instance.pk %}
                                    <span class="delete btn btn-sm btn-danger">
                                        {{ answer_form.DELETE.label }} {{ answer_form.DELETE }}
                                    </span>
                                {% endif %}
                            </div>
                            {% for field in answer_form.visible_fields %}{% if field.name != 'DELETE' %}
                                {% if field.errors %}
                                    <div class="alert alert-danger">
                                        {{ field.label }}: {{ field.errors }}
                                    </div>
                                {% endif %}
                            {% endif %}{% endfor %}
                        </div>
                    {% endfor %}
                </div>
            </div>
            <div class="panel-footer clearfix">
                <a class="btn btn-default pull-left" href="{{ workshop.get_detail_url }}">{% trans 'Cancel' %}</a>
                <div class="pull-right">
                    <input class="btn btn-primary" type="submit" value="{% trans 'Confirm' %}" />
                    {% if not object.pk %}
                        <input class="btn btn-primary" type="submit" value="{% trans 'Confirm and add a new question' %}" name="_addanother"/>
                    {% endif %}
                </div>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.inline-choice').stackedFormset({
                prefix: '{{ answers_formset.prefix }}',
                softDeletion: true,  // Handles the deletion of existing choices, and dynamically
                // created ones the same way.
                addCssClass: 'add-row', // To make the "Add another answer" link looks like a button.
                addText: '{% trans 'New answer' %}', // Text of the "Add another answer" button.
                deleteText: "<i class='fa fa-remove'></i>"
            });
            // Manually add the classes to transform the "Add another answer" into a button
            $('.add-row').children('a').addClass('btn btn btn-primary');

            // Handle the click on the "is correct" button
            var handleIsCorrect = function($button) {
                var isChecked = $button.children('input').is(':checked');
                $button.toggleClass('btn-success', !isChecked);
                $button.children('input').prop('checked', !isChecked);
            };

            // Click on the button element
            $('.workshop-question-answers').on('click', '.btn-valid', function(){
                handleIsCorrect($(this));
            });

            // Change event on the checkbox element
            $('.workshop-question-answers').on('change', '.btn input[type="checkbox"]', function(){
                handleIsCorrect($(this).parent('.btn'));
            });

            $('.workshop-question-answers .btn-valid').each(function(){
                if ($(this).children('input').is(':checked')) {
                    $(this).addClass('btn-success')
                }
            });
            
            // Disable the "all or nothing" option if multiple choices is not checked
            var $isMultipleChoices = $('#id_is_multiple_choices'),
                $isAllOrNothing = $('#id_is_all_or_nothing');
            
            var disableOrEnableFields = function() {
                var isMultipleChoicesIsChecked = $isMultipleChoices.is(':checked');
                
                $isAllOrNothing.prop('disabled', !isMultipleChoicesIsChecked);
                
                if (!isMultipleChoicesIsChecked) {
                    $isAllOrNothing.prop('checked', false);
                }
            };
            
            $isMultipleChoices.change(disableOrEnableFields);
            disableOrEnableFields();
        });
    </script>
{% endblock %}