{% extends 'longs/exams.html' %}

{% block content %}

{% load thumbnail %}
<div class="longs">
    <a href="{% url 'admin:longs_exam_change' exam.id %}" title="Edit the Exam using the admin interface">Admin Edit</a>
    <h1>Exam: {{ exam.name }}</h1>
    This exam has {{question_number}} questions. Time limit: {{exam.time_limit}} seconds.<br/>
    Exam mode: {{ exam.exam_mode }}

    <div class="parent-help" title="Click to enable / disable the exam">
        Exam active: <input type="checkbox" id="exam-active-switch" {% if exam.active %}checked{% endif %}> <span
            class="help-text">[When checked the exam will be available to take in the test system]</span>
    </div>
    <div class="parent-help" title="Click to enable / disable the exam results">
        Publish results: <input type="checkbox" id="exam-publish-results-switch" {% if exam.publish_results %}checked{% endif %}> <span class="help-text">[When checked the exam results will be available on this site]</span>
    </div>
    <p><a href="{% url 'longs:mark_overview' pk=exam.pk %}"><button>Mark exam</button></a></p>

    <ol id="full-question-list" class="sortable">
        {% for question in questions.all %}

        <li data-question_pk={{question.pk}}>
            Description: {{ question.description}}
            <br />
            History: {{ question.history}}
            <br />
            {% for series in question.series.all %}
            <div class="series-block">
                Series {{forloop.counter0 }}:<br />
                {{series.get_block}}
            </div>
            {% endfor %}
            <div>
                Author(s): {{question.get_authors}}
            </div>
            <div>
                <a href="{% url 'longs:exam_question_detail' exam.id forloop.counter0 %}"
                    title="View the question">View</a> <a href="{% url 'longs:long_update' question.id %}"
                    title="Edit the question">Edit</a>
            </div>
        </li>
        {% endfor %}
    </ol>
    <a href="{% url 'longs:exam_json' pk=exam.pk %}">JSON</a>
    <a href="{% url 'longs:exam_json_recreate' pk=exam.pk %}">Refresh JSON cache</a>
    <button id='button-open-access'>Make questions open access</button>
    <button id='button-closed-access'>Make questions closed access</button>
    <button id='button-edit-order'>Edit exam order</button>

</div>
<script type="text/javascript">
    $(document).ready(function () {
        // send request to change the is_private state on customSwitches toggle
        $("#exam-active-switch").on("change", function () {
            $.ajax({
                url: "{% url 'longs:exam_toggle_active' pk=exam.pk %}",
                data: {
                    csrfmiddlewaretoken: "{{ csrf_token }}",
                    active: this.checked // true if checked else false
                },
                type: "POST",
                dataType: "json",
            })
                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                .done(function (data) {
                    console.log(data);

                    if (data.status == "success") {
                        toastr.info('Exam state changed.')
                    }
                    // show some message according to the response. 
                    // For eg. A message box showing that the status has been changed
                })
                .always(function () {
                    console.log('[Done]');
                })
        })
        $("#exam-publish-results-switch").on("change", function () {
            $.ajax({
                url: "{% url 'longs:exam_toggle_results_published' pk=exam.pk %}",
                data: {
                    csrfmiddlewaretoken: "{{ csrf_token }}",
                    publish_results: this.checked // true if checked else false
                },
                type: "POST",
                dataType: "json",
            })
                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                .done(function (data) {
                    console.log(data);

                    if (data.status == "success") {
                        toastr.info('Publish results state changed.')
                    }
                    // show some message according to the response. 
                    // For eg. A message box showing that the status has been changed
                })
                .always(function () {
                    console.log('[Done]');
                })
        })
        $("#button-open-access").click(function () {
            $.ajax({
                url: "{% url 'longs:exam_json_edit' pk=exam.pk %}",
                data: {
                    csrfmiddlewaretoken: "{{ csrf_token }}",
                    set_open_access: true,
                },
                type: "POST",
                dataType: "json",
            })
                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                .done(function (data) {
                    console.log(data);

                    if (data.status == "success") {
                        toastr.info('Question access state changed.')
                    }
                })
                .always(function () {
                    console.log('[Done]');
                })
        })
        $("#button-closed-access").click(function () {
            $.ajax({
                url: "{% url 'longs:exam_json_edit' pk=exam.pk %}",
                data: {
                    csrfmiddlewaretoken: "{{ csrf_token }}",
                    set_open_access: false,
                },
                type: "POST",
                dataType: "json",
            })
                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                .done(function (data) {
                    console.log(data);

                    if (data.status == "success") {
                        toastr.info('Question access state changed.')
                    }
                })
                .always(function () {
                    console.log('[Done]');
                })
        })
        $("#button-edit-order").click(function () {
            $(this).remove();
            sortable('.sortable');

            $("#full-question-list").append($("<button>Save exam order</button>").click(() => {
            new_order = [];
            $("#full-question-list li").each((n, el) => {
                new_order.push(el.dataset.question_pk)
            })
            $.ajax({
                url: "{% url 'longs:exam_json_edit' pk=exam.pk %}",
                data: {
                    csrfmiddlewaretoken: "{{ csrf_token }}",
                    set_exam_order: JSON.stringify(new_order),
                },
                type: "POST",
                dataType: "json",
            })
                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                .done(function (data) {
                    console.log(data);

                    if (data.status == "success") {
                    toastr.info('Exam order changed.')
                    }
                })
                .always(function () {
                    console.log('[Done]');
                })
            }));
        });
    });
</script>
{% endblock %}