{% extends "trainings/trainingactivity_base_detail.html" %}

{% load i18n template_tools %}

{% block head %}
    {{ block.super }}
    {% include "cms/includes/orderable-head.html" %}
{% endblock %}

{% block activity_details %}
    {% if object.is_scoring %}
        <p><strong>{% get_verbose_field_name object 'is_score_displayed' %}</strong>: {% if object.is_score_displayed %}{% trans 'Yes' %}{% else %}{% trans 'No' %}{% endif %}</p>
    {% endif %}
    {% if not object.is_live %}
        <p><strong>{% get_verbose_field_name object 'are_questions_mandatory' %}</strong>: {% if object.are_questions_mandatory %}{% trans 'Yes' %}{% else %}{% trans 'No' %}{% endif %}</p>
    {% endif %}
    {% if quiz %}
        <p><strong>{% get_verbose_field_name object 'is_questions_order_random' %}</strong>: {% if object.is_questions_order_random %}{% trans 'Yes' %}{% else %}{% trans 'No' %}{% endif %}</p>
    {% endif %}
    {% if questions %}
        <a href="" class="btn my-btn btn-default" data-toggle="modal" data-target="#questionnaire-preview">
            <i class="fa fa-eye"></i>
            {% blocktrans with questionnaire_type=object.verbose_activity_name %}
            Preview the {{ questionnaire_type }}
            {% endblocktrans %}
        </a>
    {% endif %}
{% endblock %}

{% block activity_contents %}
    <div class="clearfix padded-top">
        <div class="pull-left">
            <h2 class="content-title">{% trans 'Questions' %}</h2>
        </div>
        {% if object.is_editable_by_user %}
            <div class="pull-right">
                <span id="sort-order-save-confirmation"></span>
                <a href="" class="btn my-btn btn-default question-delete-button disabled">
                    <i class="fa fa-trash"></i>
                    {% trans 'Delete the selected questions' %}
                </a>
                <a href="" class="btn my-btn my-btn-red" data-toggle="modal" data-target="#question-create">
                    <i class="fa fa-plus"></i>
                    {% trans 'New question' %}
                </a>
            </div>
        {% endif %}
    </div>
    {% if questions %}
        <form action="{{ object.get_questions_delete_url }}" id="questions-delete-form" method="post">{% csrf_token %}
            <div class="panel panel-default">
                <table class="table table-hover questions-list orderable" data-orderable-post-url="{{ object.get_questions_sort_url }}" data-orderable-message-holder="#sort-order-save-confirmation">
                    {% for question in questions %}
                        <tr class="question-row dialog-box" {% if object.is_editable_by_user %}data-href="{{ question.get_edit_url }}"{% endif %}>
                            {% if object.is_editable_by_user %}
                                <td>
                                    {{ question.sort_order_display|safe }}
                                </td>
                                <td class="question-delete">
                                    <input type="checkbox" name="questions" value="{{ question.id }}" class="question-delete-checkbox">
                                </td>
                            {% endif %}
                            {% if question.image %}
                                <td class="question-img" style="background-image: url( {{ question.image.url }} );">
                                </td>
                            {% else %}
                                <td class="question-img">
                                </td>
                            {% endif %}
                            </td>
                            <td width="70%">
                                {{ question.label }}
                            </td>
                            <td align="right">
                                {% if object.is_scoring and question.question_type != 'open' %}
                                    {{ question.points }} {% trans 'point(s)' %}
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
        </form>
        <div class="modal fade" id="questionnaire-preview">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">{{ object.verbose_activity_name }} ({{ questions|length }} {% trans 'questions' %})</h4>
                    </div>
                    <div class="modal-body clearfix">
                        <ol class="media-list media-list-numbered">
                            {% for question in questions %}
                                <li class="media">
                                    {% if question.image %}
                                        <div class="media-left">
                                            <a href="#">
                                                <img class="media-object" src="{{ question.image.url }}" alt="" style="max-width: 100px; max-height: 100px;">
                                            </a>
                                        </div>
                                    {% endif %}
                                    <div class="media-body clearfix">
                                        <div class="pull-left">
                                            <h4 class="media-heading">
                                                {{ question.label }}
                                            </h4>
                                            <ul class="list-unstyled">
                                            {% for choice in question.choices.non_deleted %}
                                                <li class="answer">
                                                    <span class="correct-flag">
                                                        {% if choice.is_valid %}
                                                            <i class="fa fa-check"></i>
                                                        {% endif %}
                                                    </span>
                                                    {{ choice.label }}
                                                </li>
                                            {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                {% if not forloop.last %}
                                    <hr>
                                {% endif %}
                            {% endfor %}
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        {% if object.is_editable_by_user %}
            <ul class="nav add-item">
                <li>
                    <a href="" class="a-default" data-toggle="modal" data-target="#question-create">
                        <i class="fa fa-plus"></i>
                        {% trans 'New question' %}
                    </a>
                </li>
                <li class="question-delete-button disabled">
                    <a href="" class="a-default">
                        <i class="fa fa-trash"></i>
                        {% trans 'Delete the selected questions' %}
                    </a>
                </li>
            </ul>
        {% endif %}
    {% endif %}
    <div class="modal fade" id="question-create">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{% trans 'New question' %}</h4>
                </div>
                <div class="modal-body clearfix question-types">
                    {% for question_type in object.questions_type_and_create_url %}
                        <div class="activity-item">
                            <a href="{{ question_type.create_url }}" class="dialog-box question-link">
                                <div class="thumbnail activity-thumbnail question-type-thumbnail text-center" style="padding-top: 20px;">
                                    <i class="fa fa-3x
                                    {% if question_type.klass == 'choicesquestion' %}
                                        fa-list-ul
                                    {% elif question_type.klass == 'openquestion' %}
                                        fa-comment
                                    {% elif question_type.klass == 'imagechoicesquestion' %}
                                        fa-image
                                    {% endif %}
                                    "></i>
                                    <div class="caption">{{ question_type.verbose_type }}</div>
                                </div>
                            </a>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            var $deleteCheckboxes = $('.question-delete-checkbox'),
                $deleteButtons = $('.question-delete-button'),
                $deleteForm = $('#questions-delete-form'),
                $questionRows = $('.question-row');

            $deleteCheckboxes.change(function(){
                if ($deleteCheckboxes.filter(':checked').length) {
                    $deleteButtons.removeClass('disabled')
                } else {
                    $deleteButtons.addClass('disabled')
                }
            });

            $deleteButtons.click(function(){
                $deleteForm.submit();
                return false;
            });

            {% if object.is_editable_by_user %}
                $questionRows.css({cursor: 'pointer'});
                $questionRows.find('.question-delete, .sorthandletd').hover(function(){
                    $(this).parent('tr').removeClass('dialog-box');
                }, function(){
                    $(this).parent('tr').addClass('dialog-box');
                });
            {% endif %}
        });
    </script>
{% endblock %}