{% extends '::base.html.twig' %}
{% block usercss %}
    {{ parent() }}
    <style>
        @media
        only screen and (max-width: 760px),
        (min-device-width: 768px) and (max-device-width: 1024px)  { 

            /*
            Label the data
            */
            td:nth-of-type(1):before { content: "#"; }
            td:nth-of-type(2):before { content: "Question"; }
            td:nth-of-type(3):before { content: "Subject"; }
            td:nth-of-type(4):before { content: "Question Type"; }
            td:nth-of-type(5):before { content: "Mark"; }
            td:nth-of-type(6):before { content: "Minus Mark"; }
        }
    </style>
{% endblock %}
{% block body -%}

    <div class="row">
        <div class="col-lg-3 col-md-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3 text-right">
                            <div> <i class="fa fa-columns fa-fw fa-2x">  </i></div>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div>{{ exam.examname }}</div>
                        </div>
                    </div>
                </div>
                <a data-target="#myModal" data-toggle="modal" class="view_exam_details" data-exam="{{ exam.examname }}" href="#">
                    <div class="panel-footer">
                        <span class="pull-left">View Exam Details</span>
                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="panel panel-yellow">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3 text-right">
                            <div> <i class="fa fa-columns fa-fw fa-2x">  </i></div>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div> Questions </div>
                        </div>
                    </div>
                </div>
                <a   href="{{ path('exam_add_question',{'examid': exam.guid}) }}">
                    <div class="panel-footer">
                        <span class="pull-left">Add More/Remove</span>
                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading"> List: Questions in  {{ exam.examname }} </div>
                <div class="panel-body">
                    <table class="table table-bordered" id="table_responsive">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Question</th>
                                <th>Subject</th>
                                <th>Question Type</th>
                                <th>Mark</th>
                                <th>Minus Mark</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% set slno = 1 %}
                            {% set total_mark = 0 %}
                            {% set total_minus_mark = 0 %}
                            {% for question in exam_questions %}
                                <tr id="{{ exam.guid }}_{{question.question.guid}}">
                                    <td>{{ slno }}</td>
                                    <td>
                                        <div>
                                            {{ question.question.question|raw }}
                                            {#{{ question.question|raw }}#}
                                        </div>
                                        <strong> Positive Feedback </strong>
                                        <div class="positive_feedback_container">
                                            {{ question.positivefeedback }}
                                        </div>
                                        <strong> Negative Feedback </strong>
                                        <div class="negative_feedback_container">
                                            {{ question.negativefeedback }}
                                        </div>
                                        <a data-target="#myModal" data-toggle="modal" data-exam="{{ exam.guid }}" data-question="{{question.question.guid}}" class="modify_feedback" href="javascript:void(0)">
                                            <i  class="fa fa-edit  fa-2x"></i>
                                        </a>
                                    </td>
                                    <td>{{ question.question.subject }}</td>
                                    <td>{{ question.question.questiontype }}</td>
                                    <td>
                                        <span class="mark_area">
                                            {{ question.mark }}
                                            {% set total_mark = total_mark + question.mark %}
                                        </span>
                                        {% if exam.finalized == 0 %}
                                            <a data-target="#myModal" data-toggle="modal" data-exam="{{ exam.guid }}" data-question="{{question.question.guid}}" class="modify_mark" href="javascript:void(0)">
                                                <i  class="fa fa-edit  fa-2x"></i>
                                            </a>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if question.question.questiontype.id == 1 %}
                                            <span class="minus_mark_area"> 
                                                {{ question.minusmark }} 
                                                {% set total_minus_mark = total_minus_mark + question.minusmark %}
                                            </span>
                                            {% if exam.finalized == 0 %}
                                                <a data-target="#myModal" class="modify_minus_mark" data-toggle="modal" href="javascript:void(0)" data-exam="{{ exam.guid }}" data-question="{{question.question.guid}}">
                                                    <i class="fa fa-edit fa-2x"></i>
                                                </a>
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                </tr>
                                {% set slno = slno + 1 %}
                            {% endfor %}
                            <tr>
                                <td colspan="4" style="text-align:right;"> <strong> Total </strong> </td>
                                <td>
                                    <span id="total_mark_container"> {{ total_mark }} </span>
                                </td>
                                <td>
                                    <span id="total_minus_mark_container"> {{ total_minus_mark }} </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    {% if exam.finalized %}
                        <a href="{{ path('exam_finalize_cancel',{'examid' : exam.guid}) }}" class="btn btn-danger btn-lg btn-block" type="button">Cancel Finlization </a>
                    {% else %}
                        <a href="{{ path('exam_finalize',{'examid' : exam.guid}) }}" class="btn btn-primary btn-lg btn-block" type="button">Click Here to Finlize </a>
                    {% endif %}  
                </div>

            </div>
        </div>
    </div>

    <div id="exam_details" style="display:none;">
        <div class="table-responsive">
            <table class="table">
                <tbody>
                    <tr>
                        <td>Exam Name</td>
                        <td>{{ exam.examname }}</td>
                    </tr>
                    <tr>
                        <td>Duration[in minutes]</td>
                        <td>{{ exam.duration }}</td>
                    </tr>
                    <tr>
                        <td>Exam Type</td>
                        <td>{{ exam.examtype }}</td>
                    </tr>
                    <tr>
                        <td>Maximun Questions</td>
                        <td>{{ exam.maxQuestions }}</td>
                    </tr>
                    <tr>
                        <td>Description</td>
                        <td>{{ exam.description|raw }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal -->
    <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade" style="display: none;">
        <div class="modal-dialog"  style="width: 85%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                    <h4 id="myModalLabel" class="modal-title"><span id="modal_title"> </span></h4>
                </div>
                <div class="modal-body">
                    <div class="modal_data_container">
                    </div>
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

{% endblock %}
{% block userscripts %}
    <script type="text/javascript">

        $('#myModal').on('hidden.bs.modal', function () {
            $("#modal_title").html("");
            $(".modal_data_container").html("");
        });

        $(document).ready(function () {
            $(".view_exam_details").click(function () {
                $("#modal_title").html("Exam Details");
                $(".modal_data_container").html($("#exam_details").html());
            });

            /* Modify feedback */
            $(".modify_feedback").click(function () {
                var question = $(this).data("question");
                var exam = $(this).data("exam");
                var path = "{{ path('exam_modify_exam_question_feedback',{'questionid':'__questionid__','examid':'__examid__'}) }}";
                path = path.replace('__examid__', exam);
                path = path.replace('__questionid__', question);

                $.ajax({
                    type: "POST",
                    url: path,
                    beforeSend: function () {
                        $("#modal_title").html("Modify Mark");
                        $("#ajax_loader_div").show();
                    },
                    method: "GET"
                }).done(function (html) {
                    $(".modal_data_container").html(html);
                }).error(function () {
                    $(".modal_data_container").html("Some Error found!!!");
                }).complete(function () {
                    $("#ajax_loader_div").hide();
                });
            });
            
            $("body").on("submit", "form[name='exam_question_feedback']", function (e) {
                e.preventDefault();
                var frm = $(this);
                var formdata = frm.serialize();
                var path = frm.attr('action');
                var exam = frm.data('exam');
                var question = frm.data('question');
                var tr_selector = exam + '_' + question;

                $.ajax({
                    type: "POST",
                    url: path,
                    data: formdata,
                    beforeSend: function () {
                        $("#ajax_loader_div").show();
                    }
                }).done(function (html) {
                    var p_feedback = frm.find('#exam_question_feedback_positive_feedback').val();
                    var n_feedback = frm.find('#exam_question_feedback_negative_feedback').val();
                    console.log(p_feedback);
                    $(".modal_data_container").html(html);
                    $("body #" + tr_selector).find(".positive_feedback_container").html(p_feedback);
                    $("body #" + tr_selector).find(".negative_feedback_container").html(n_feedback);
                    re_arrange_mark();
                }).error(function () {
                    $(".modal_data_container").html("Some Error found!!!");
                }).complete(function () {
                    $("#ajax_loader_div").hide();
                });

            });
            /* Modify feedback ends */


            $(".modify_mark").click(function () {
                var question = $(this).data("question");
                var exam = $(this).data("exam");
                var path = "{{ path('exam_modify_exam_question_mark',{'questionid':'__questionid__','examid':'__examid__'}) }}";
                path = path.replace('__examid__', exam);
                path = path.replace('__questionid__', question);

                $.ajax({
                    type: "POST",
                    url: path,
                    beforeSend: function () {
                        $("#modal_title").html("Modify Mark");
                        $("#ajax_loader_div").show();
                    },
                    method: "GET"
                }).done(function (html) {
                    $(".modal_data_container").html(html);
                }).error(function () {
                    $(".modal_data_container").html("Some Error found!!!");
                }).complete(function () {
                    $("#ajax_loader_div").hide();
                });
            });

            $("body").on("submit", "form[name='exam_question_mark']", function (e) {
                e.preventDefault();
                var frm = $(this);
                var formdata = frm.serialize();
                var path = frm.attr('action');
                var exam = frm.data('exam');
                var question = frm.data('question');
                var tr_selector = exam + '_' + question;

                $.ajax({
                    type: "POST",
                    url: path,
                    data: formdata,
                    beforeSend: function () {
                        $("#ajax_loader_div").show();
                    }
                }).done(function (html) {
                    var text = frm.find('#exam_question_mark_mark').val();
                    $(".modal_data_container").html(html);
                    $("body #" + tr_selector).find(".mark_area").html(text);
                    re_arrange_mark();
                }).error(function () {
                    $(".modal_data_container").html("Some Error found!!!");
                }).complete(function () {
                    $("#ajax_loader_div").hide();
                });

            });

            $(".modify_minus_mark").click(function () {
                var question = $(this).data("question");
                var exam = $(this).data("exam");
                var path = "{{ path('exam_modify_exam_question_minusmark',{'questionid':'__questionid__','examid':'__examid__'}) }}";
                path = path.replace('__examid__', exam);
                path = path.replace('__questionid__', question);

                $.ajax({
                    type: "POST",
                    url: path,
                    beforeSend: function () {
                        $("#modal_title").html("Modify Minus Mark");
                        $("#ajax_loader_div").show();
                    },
                    method: "GET"
                }).done(function (html) {
                    $(".modal_data_container").html(html);
                }).error(function () {
                    $(".modal_data_container").html("Some Error found!!!");
                }).complete(function () {
                    $("#ajax_loader_div").hide();
                });
            });

            $("body").on("submit", "form[name='exam_question_minus_mark']", function (e) {
                e.preventDefault();
                var frm = $(this);
                var formdata = frm.serialize();
                var path = frm.attr('action');
                var exam = frm.data('exam');
                var question = frm.data('question');
                var tr_selector = exam + '_' + question;

                $.ajax({
                    type: "POST",
                    url: path,
                    data: formdata,
                    beforeSend: function () {
                        $("#ajax_loader_div").show();
                    }
                }).done(function (html) {
                    var text = frm.find('#exam_question_minus_mark_minus_mark').val();
                    $(".modal_data_container").html(html);
                    $("body #" + tr_selector).find(".minus_mark_area").html(text);
                    re_arrange_mark();
                }).error(function () {
                    $(".modal_data_container").html("Some Error found!!!");
                }).complete(function () {
                    $("#ajax_loader_div").hide();
                });

            });

        });

        function re_arrange_mark() {
            var mark = 0;
            var minus_mark = 0;
            $("#table_responsive .mark_area").each(function (key, value) {
                mark = mark + parseInt($(value).text());
            });
            $("#table_responsive .minus_mark_area").each(function (key, value) {
                minus_mark = minus_mark + parseInt($(value).text());
            });
            $("#table_responsive #total_mark_container").html(mark);
            $("#table_responsive #total_minus_mark_container").html(minus_mark);
        }

    </script>
{% endblock %}