{% extends 'web_template/index.html' %}
{% load i18n %}
{% load static %}
{% load problemparser %}
{% block stylesheets %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static  'datatables/media/css/dataTables.bootstrap.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static  'exam/draggable.css' %}">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript" src="{% static 'MathJax/MathJax.js' %}?config=TeX-AMS_CHTML"></script>
{% endblock %}
{% block page_name %}
<!-- {% blocktrans with type=exam.type subject=exam.subject date=exam.date %}{{ type }} on {{ subject }} ({{ date }}){% endblocktrans %} -->
<div class="info-box">
            <span class="info-box-icon bg-aqua"><i class="fa fa-info-circle"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">{{ exam.type }}</span>
		<span class='info-box-number'>{{ exam.subject.name }}, {{ exam.study_type.name }}</span>
              <span class="info-box-text">{{ exam.date }}</span>
		<p class='info-box-text'>{{ exam.user.first_name }} {{ exam.user.last_name }} ({{ exam.user }})</p>
            <!-- /.info-box-content -->
          </div>
            <!-- /.info-box -->
	</div>

{% endblock %}
{% block page_description %}
{% endblock %}
{%block content %}
<div class="nav-tabs-custom">
    <ul class="nav nav-tabs">
              <!--<li><a href="#view" data-toggle="tab">View</a></li>-->
        <li class="active"><a href="#edit" data-toggle="tab">Edit</a></li>
        <li><a href="#upload" data-toggle="tab">Upload problems</a></li>
    </ul>
            <div class="tab-content">
                <!--<div class="tab-pane active" id="view">-->
                    <!--<div class="row">-->
                        <!--<div class="col-md-3 col-sm-6 col-xs-12">-->
                            <!--<div class="info-box">-->
                                <!--<span class="info-box-icon bg-red"><i class="fa fa-bar-chart"></i></span>-->
                                <!--<div class="info-box-content">-->
                                    <!--<span class="info-box-text">Problems: 60</span>-->
                                    <!--<span class="info-box-text">Gen. papers: 120</span>-->
                                    <!--<span class="info-box-text">Pages/paper: 4</span>-->
                                    <!--<span class="info-box-text">Scanned pages: 4</span>-->
                                <!--</div>&lt;!&ndash; /.info-box-content &ndash;&gt;-->
                            <!--</div>&lt;!&ndash; /.info-box &ndash;&gt;-->
                        <!--</div>&lt;!&ndash; /.col &ndash;&gt;-->
                        <!--&lt;!&ndash; fix for small devices only &ndash;&gt;-->
                        <!--<div class="clearfix visible-sm-block"></div>-->
                        <!---->
                        <!--<div class="col-md-3 col-sm-6 col-xs-12">-->
                            <!--<div class="info-box">-->
                                <!--<span class="info-box-icon bg-green"><i class="fa fa-cog"></i></span>-->
                                <!---->
                                <!--<div class="info-box-content">-->
                                    <!--<span class="info-box-text">Correct val.: {{ exam.mark_positive }}</span>-->
                                    <!--<span class="info-box-text">Wrong val.: {{ exam.mark_negative }}</span>-->
                                    <!--<span class="info-box-text">Kvizek (TM): 0</span>-->
                                <!--</div>&lt;!&ndash; /.info-box-content &ndash;&gt;-->
                            <!--</div>&lt;!&ndash; /.info-box &ndash;&gt;-->
                        <!--</div>&lt;!&ndash; /.col &ndash;&gt;-->
                        <!--<div class="col-md-3 col-sm-6 col-xs-12">-->
                            <!--<div class="info-box">-->
                                <!--<span class="info-box-icon bg-yellow"><i class="fa fa-comment"></i></span>-->
                                <!---->
                                <!--<div class="info-box-content">-->
                                    <!--<span class="info-box-text">Generated: No</span>-->
                                    <!--<span class="info-box-text">Finalized: No</span>-->
                                    <!--<span class="info-box-text">Locked: No</span>-->
                                    <!--<span class="info-box-text">Published: No</span>-->
                                <!--</div>&lt;!&ndash; /.info-box-content &ndash;&gt;-->
                            <!--</div>&lt;!&ndash; /.info-box &ndash;&gt;-->
                        <!--</div>&lt;!&ndash; /.col &ndash;&gt;-->
                    <!--</div>-->

                    <!--<div class="box">-->
                        <!--<div class="box-header">-->
                            <!--<h3 class="box-title">{{ exam.type }}  {{ exam.subject }}</h3>-->
                        <!--</div>&lt;!&ndash; /.box-header &ndash;&gt;-->
                        <!--<div class="box-body">-->
                        <!--</div>&lt;!&ndash; /.box-body &ndash;&gt;-->
                    <!--</div>&lt;!&ndash; /.box &ndash;&gt;-->
                <!--</div> &lt;!&ndash; /.tab-pane &ndash;&gt;-->
                <div id="edit" class="tab-pane active">
                    <form method="POST" class="post-form" url='{% url 'examdetail' exam.id %}'>{% csrf_token %}
                    {{ form.as_p }}
                    <button type="submit" class="save btn btn-default">Save</button>
                    </form>
                </div>

            <div id="upload" class="tab-pane">
		Mass upload problems and add to exam

Temporary a <a href='{% url 'examupload' exam.id %}'>separate page</a> until I find a way for multiple forms in one view
</form>
		</div>

</div> <!-- /.tab-content -->

</div> <!-- /.nav-tabs-custom -->

{% endblock %}

{% block extra_foot %}
{{ block.super }}
<script src='{% static  'datatables/media/js/jquery.dataTables.min.js' %}'></script>
<script src='{% static  'datatables/media/js/dataTables.bootstrap.min.js' %}'></script>
<script src='{% static 'jquery-sortable/source/js/jquery-sortable-min.js' %}'></script>
<script src='{% static 'bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}'></script>

<script>
$(function () {
    $('#exam_list').DataTable();
//    $("ol.problem_selection").sortable();

    var group = $("ol.problem_selection").sortable({
        group: 'problem_selection',
        delay: 500,
        onDrop: function ($item, container, _super) {
            var data = group.sortable("serialize").get();

            var jsonString = JSON.stringify(data, null, ' ');

            $('#serialize_output2').text(jsonString);
            _super($item, container);
        },

    });

      $('#id_date').datepicker({
      autoclose: true,
      format: "dd.mm.yyyy"
    })
});



function sendAjax(){

var data = $("ol.problem_selection").sortable("serialize").get();
var jsonString = JSON.stringify(data, null, ' ');


$.ajax({
    url: "{% url 'savegrouping' exam.id %}",
    type: "post", // or "get"
    data:  {'data': jsonString},
    success: function(data) {

      alert(data.result);
    }});
}
</script>
{% endblock %}