{% extends "manage.html" %}
{% load custom_filters %}
{% block title %} Monitor {% endblock %}
{% block pagetitle %} {{ msg }} {% endblock pagetitle %}

{% block meta %} <meta http-equiv="refresh" content="30"/> {% endblock meta %}


{% block script %}
{% if papers %}
<script src="{{ URL_ROOT }}/static/yaksh/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
    { 
        $("#result-table").tablesorter({sortList: [[5,1]]});
        var papers_length = "{{papers|length}}";
        for (var i=0; i < papers_length; i++){
            var time_left = $("#time_left"+[i]);
            var time = time_left.text();
            var hh   = Math.floor(time / 3600);
            var mm = Math.floor((time - (hh * 3600)) / 60);
            var ss = time - (hh * 3600) - (mm * 60);
            time_left.text(hh + ":" + mm + ":" + ss)
    }
});
</script>
{% endif %}
{% endblock %}

{% block content %}

{# ############################################################### #}
{# This is rendered when we are just viewing exam/monitor #}

{% if course_details %}
    <table id="course-details" class="table table-bordered">
    <tr>
    <th>Courses</th>
    <th> Quizzes </th>
    </tr>

    {% for course in course_details %}
    <tr>
    <td><ul class="list-group">{{course.name}} </td>

    {% if course.get_quizzes %}
    <td>
    {% for quiz in course.get_quizzes %}
     <li class="list-group-item"><a href = "{{URL_ROOT}}/exam/manage/monitor/{{quiz.id}}">
     {{quiz.description}}
     </a></li>
    {% endfor %}
    </td>
    {% else %}
    <td> No quiz</td>
    {% endif %}
    </ul></tr>
    {% endfor %}
    </table>
{% endif %}

{# ############################################################### #}
{# This is rendered when we are just viewing exam/monitor/quiz_num #}
{% if msg != "Monitor" %}
{% if quiz %}
{% if papers %}
<p>Course Name: {{ quiz.course.name }}</p>
<p>Quiz Name: {{ quiz.description }}</p>
<p>Number of papers: {{ papers|length }} </p>
{% completed papers as completed_papers %}
 {# template tag used to get the count of completed papers #}
 <p>Papers completed: <b> {{ completed_papers }} </b></p>

{% inprogress papers as inprogress_papers %}
 {# template tag used to get the count of inprogress papers #}
 <p>Papers in progress:<b>  {{ inprogress_papers }} </b></p>

<p><a href="{{URL_ROOT}}/exam/manage/statistics/question/{{papers.0.question_paper.id}}">Question Statisitics</a></p>
<p>
   <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#csvModal">
       Download CSV <span class="glyphicon glyphicon-save"></span>
   </button></p>
<table id="result-table" class="tablesorter table table table-striped">
    <thead>
    <tr>
    <th> Name </th>
    <th> Username </th>
    <th> Roll number </th>  
    <th> Institute </th>
    <th> Questions answered </th> 
    <th> Marks obtained </th>
    <th> Attempts </th>
    <th> Time Remaining </th>
    <th> Status </th>
    </tr>
    </thead>
    <tbody>
    {% for paper in latest_attempts %}
    <tr> 
        <td> <a href="{{URL_ROOT}}/exam/manage/user_data/{{paper.user.id}}/{{paper.question_paper.id}}">{{ paper.user.get_full_name.title }}</a> </td>
        <td> {{ paper.user.username }} </td>
        <td> {{ paper.user.profile.roll_number }} </td>
        <td> {{ paper.user.profile.institute }} </td>
        <td> {{ paper.get_answered_str }} </td>
        <td> {{ paper.marks_obtained }} </td>
        <td> {{ paper.answers.count }} </td>
        <td id="time_left{{forloop.counter0}}"> {{ paper.time_left }} </td>
        <td>{{ paper.status }}</td>
        </div>
    </tr>
    {% endfor %}
    </tbody>
</table>
{% else %}
<p> No answer papers found for {{ quiz.description }}</p>
{% endif %} {# if papers #}
{% else %}
<h4>No Quiz Found</h4>
{% endif %}
{% endif %}

<!-- CSV Modal -->
<div class="modal fade" id="csvModal" role="dialog">
    <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h3 class="modal-title">Uncheck unwanted columns</h3>
    </div>
    <form action="{{URL_ROOT}}/exam/manage/download_quiz_csv/{{ quiz.course.id }}/{{ quiz.id }}/" method="post">
        {% csrf_token %}
    <div class="modal-body">
        {% for field in csv_fields %}
        <div class="form-check form-check-inline">
          <label class="form-check-label">
              <input class="form-check-input" name="csv_fields" type="checkbox" value="{{ field }}" checked> {{ field }}
          </label>
        </div>
        {% endfor %}
        <b>Select Attempt Number: Default latest attempt</b>
        <select class="form-control" name = "attempt_number">
            {%for attempt_number in attempt_numbers %}
            {% if forloop.last %}
            <option value="{{ attempt_number }}" selected>{{ attempt_number }} (Latest)</option>
            {% else %}
            <option value = "{{ attempt_number }}"> {{ attempt_number }}</option>
            {% endif %}
            {% endfor %}
        </select>
    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-primary"> Download <span class="glyphicon glyphicon-save"></span></button>
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
    </form>
    </div>
    </div>
</div>


{% endblock %}
