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

{% block content %}

{% load thumbnail %}
<div class="physics">
    <h1>Exam: {{ exam.name }}</h1>
    This exam has {{question_number}} questions.

    <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><button><a href="{% url 'anatomy:exam_take' pk=exam.pk sk=0 %}">Click here to start</a></button></p>-->
    This exam will be available to take <a href="{% url 'physics:exam_take' pk=exam.pk %}">here</a> (when active).

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

        <li>
            {{ question.stem }}
            <ol type="a" class="abcde">
        <li>
            {{ question.a }}: {{ question.a_answer }}
        </li>
        <li>
            {{ question.b }}: {{ question.b_answer }}
        </li>
        <li>
            {{ question.c }}: {{ question.c_answer }}
        </li>
        <li>
            {{ question.d }}: {{ question.d_answer }}
        </li>
        <li>
            {{ question.e }}: {{ question.e_answer }}
        </li>
        </ol>
            Category: {{ question.category }}, <a href="{% url 'physics:question_detail' pk=question.pk %}">View</a> <a href="{% url 'admin:physics_question_change' question.id %}">Edit</a>

        </li>
        {% endfor %}
    </ol>
    {% endautoescape %}

</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 'physics: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 'physics: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]');
                })
        })
    });
</script>
{% endblock %}