{% extends "manage.html" %}

{% block title %} Design Question Paper {% endblock title %}

{% block subtitle %} Design Question Paper {% endblock %}

{% block css %}
    <link rel="stylesheet" media="all" type="text/css" href="{{ URL_ROOT }}/static/yaksh/css/question_paper_creation.css" />
<style>
select
{
    width:auto;
}
</style>
{% endblock %}

{% block script %}
    <script src="{{ URL_ROOT }}/static/yaksh/js/jquery-1.9.1.min.js"></script>
    <script src="{{ URL_ROOT }}/static/yaksh/js/bootstrap.js"></script>
    <script src="{{ URL_ROOT }}/static/yaksh/js/bootstrap-tabs.js"></script>
    <script src="{{ URL_ROOT }}/static/yaksh/js/question_paper_creation.js"></script>
{% endblock %}

{% block content %}
<input type=hidden id="url_root" value={{ URL_ROOT }}>
<form action="{{ URL_ROOT }}/exam/manage/designquestionpaper/{{ qpaper.quiz.id }}/{{ qpaper.id }}/" method="POST" id="design_q">
<input class ="btn primary small" type="submit" name="back" id="back" value="Cancel">
    {% csrf_token %}
    <input type=hidden name="is_active" id="is_active" value="{{ state }}">
<center><b>Manual mode to design the {{lang}}  Question Paper</center><br>
    <ul class="nav nav-tabs tabs" data-tabs="tabs">
    <li class="active" id="fixed-tab">
        <a href="#fixed-questions" id="fixed">
            STEP 1<br>
            Add Fixed Questions
        </a>
    </li>
    <li id="random-tab">
        <a href="#random-questions" id="random">
            STEP 2<br>
            Add Random Questions
        </a>
    </li>
    <li id="finish-tab">
    <a href="#finish" id="finished">
        STEP 3<br>
        Finish
    </a></li>
</ul>

    <div>
        <h3>Total Marks:  <span id="total_marks" class="well"> {{ qpaper.total_marks }} </span></h3>
    </div>
<div class="tab-content">
    <!-- common to fixed and random questions -->
    <div class="row" id="selectors">
        <h5 style="padding-left: 20px;">Please select Question type and Marks</h5>
        <div class="col-md-6">
            {{ filter_form.question_type }}
        </div>
        <div class="col-md-6">
            {{ filter_form.marks }}
        </div>
    </div> <!-- /.row -->
    <br><br>

    <div class="tab-pane active" id="fixed-questions">
        <div class="row">
            <div class="col-md-6">
                <div id="fixed-available-wrapper">
                    <p><u>Select questions to add:</u></p>
                    <div id="fixed-available">
                        {% if state == "fixed"  or state == "None" %}
                            <ul class="inputs-list">
                               {% for question in questions %}
                                    <li>
                                        <label>
                                            <input type="checkbox" name="questions" data-qid="{{question.id}}" value={{question.id}}>
                                            <span> {{ question.summary }} </span> <span> {{ question.points }} </span>
                                        </label>
                                     </li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </div>
                    <br /><br />
                    <button id="add-fixed" name="add-fixed" class="btn small primary pull-right" type="submit">Add to paper</button>
                </div>
            </div>
            <div class="col-md-6">
                <div id="fixed-added-wrapper">
                    <p><u>Fixed questions currently in paper:</u></p>
                    <div id="fixed-added">
                            <ul class="inputs-list">
                               {% for question in fixed_questions %}
                                    <li>
                                        <label>
                                            <input type="checkbox" name="added-questions"
                                            data-qid="{{question.id}}" value={{question.id}}>
                                            <span> {{ question.summary }} </span>
                                            <span> {{ question.points }} </span>
                                        </label>
                                     </li>
                                {% endfor %}
                            </ul>
                    </div>
                     <br />
                    <button id="remove-fixed" name="remove-fixed" class="btn small primary pull-right" type="submit"> Remove from paper</button>
                </div>
            </div>
        </div> <!-- /.row -->
        <br>
        <div class="pull-right">
            <a class="btn" id="fixed-next">Next &gt;</a>
        </div>
    </div> <!-- /#fixed-questions -->

    <div class="tab-pane" id="random-questions">
        <div class="row">
            <div class="col-md-6">
                <div id="random-available-wrapper">
                    <p><u>Select questions to add to the pool:</u></p>
                    <div id="random-available">
                        {% if state == "random" %}
                            <select id="num_of_questions" name="num_of_questions">
                                <option value="1">Number of questions to be picked from the pool</option>
                                    {% for q in questions %}
                                        {% if forloop.counter0 != 0 %}
                                             <option value={{forloop.counter0}}>{{ forloop.counter0}}</option>
                                             {% endif %}
                                         {% if questions|length == 1%}
                                             <option value=1>1</option>
                                         {% endif %}
                                    {% endfor %}
                            </select>
                            <ul class="inputs-list">
                               {% for question in questions %}
                                    <li>
                                        <label>
                                            <input type="checkbox" name="random_questions" data-qid="{{question.id}}" value={{question.id}}>
                                            <span> {{ question.summary }} </span> <span> {{ question.points }} </span>
                                        </label>
                                     </li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </div>
                    <br /><br />
                    <button id="add-random" name="add-random" class="btn small primary pull-right" type="submit">Add to paper</button>
                </div>
            </div>
            <div class="col-md-6">
                <div id="random-added-wrapper">
                    <p><u>Pool of  questions currently in paper:</u></p>
                    <div id="random-added">
                            <ul class="inputs-list">
                                {% for random_set in random_sets %}
                                        <li>
                                        <label>
                                            <input type="checkbox" name="random_sets" data-qid="{{random_set.id}}" value={{random_set.id}}>
                                            <span> Random Set {{ forloop.counter }}  (will take {{ random_set.num_questions }} randomly out of  {{ random_set.questions.count }})</span>
                                        </label>
                                        </li>
                                    {% for question in random_set.questions.all %}
                                        <li>
                                        <label>
                                            <span> {{ question.summary }} </span> <span> {{ question.points }} </span>
                                        </label>
                                        </li>
                                    {% endfor %}
                                {% endfor %}
                            </ul>
                    </div>
                    <br />
                    <button id="remove-random" name="remove-random" class="btn small primary pull-right" type="submit"> Remove from paper</button>
                </div>
            </div>
        </div> <!-- /.row -->
        <br>
        <div class="pull-left">
            <a class="btn" id="random-prev">&lt; Previous</a>
        </div>
        <div class="pull-right">
            <a class="btn" id="random-next">Next &gt;</a>
        </div>
   </div> <!-- /#random-questions -->

    <div class="tab-pane" id="finish">
        <center>
            <h5>Almost finished creating your question paper</h5>
            <label style="float: none;">
                {{ qpaper_form.shuffle_questions }}
                <span>Auto shuffle.</span>
            </label> <br><br>
            <input class ="btn primary large" type="submit" name="save" id="save" value="Save question paper">
            <br>
            <div class="pull-left">
                <a class="btn" id="finish-prev">&lt; Previous</a>
            </div>
       </center>
    </div> <!-- /#finish -->
</div>
<!-- /.tab-content -->
</form>
<br>
<script>
    $(function () {
        $('.tabs').tabs()
        {% if state == "fixed" %}
            $('#fixed').tab('show');
        {% elif state == "random" %}
            $("#random").tab('show');
        {% elif state == "finish" %}
            $('#finished').tab('show');
        {% endif %}
    })
</script>
{% endblock %}
{% block manage %}
{% endblock %}
