{% extends '::base.html.twig' %}
{% form_theme form 'form_table_layout.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: "Action"; }
        }
    </style>
{% endblock %}
{% block body -%}

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading"> Search Question </div>
                <div class="panel-body">
                    <form method="get" action="{{ path('exam_add_question',{'examid':exam.guid}) }}">
                        {{ form_rest(form) }}
                        <input type="submit" class="btn btn-primary" name="submit-filter" value="Search" />
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading"> 
                    <span class="pull-right"> <h4> <a class="alert-link" href="{{ path('exam_show_question',{'examid' : exam.guid}) }}"> Back </a></h4> </span>
                    <h4>Add Question to {{ exam.examname }}</h4> 

                </div>
                <div class="panel-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-10">
                                            <div>Maximum Questions</div>
                                        </div>
                                        <div class="col-xs-2 text-right">
                                            <strong><span id="maximum_questions">{{ exam.maxquestions }}</span></strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="panel panel-success">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-xs-10">
                                            <div>Questions Added</div>
                                        </div>
                                        <div class="col-xs-2 text-right">
                                            <strong><span id="added_question">{{ added_question }}</span></strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-6">
                            <div class="panel panel-danger">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-xs-10">
                                            <div>Remaining</div>
                                        </div>
                                        <div class="col-xs-2 text-right">
                                            <strong><span id="remaining_question">{{ remaining_question }}</span></strong>
                                        </div>
                                    </div>
                                </div>
                            </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-10">
                                            <div>Duration[in minutes]</div>
                                        </div>
                                        <div class="col-xs-2 text-right">
                                            <strong><span id="duration">{{ exam.duration }}</span></strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    {% set percentage = (added_question/exam.maxquestions)*100 %}
                    {% set percentage = percentage|round(1, 'floor') %}
                    <div class="row">
                        <div class="col-md-6">
                            <div>
                                <p>
                                    <strong>Exam Questions</strong>
                                    <span class="pull-right text-muted"><span class="percentage_area">{{ percentage }}</span>% questions added</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div id="percentage_area_progress" style="width: {{ percentage  }}%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-success">
                                        <span class="sr-only"><span class="percentage_area">{{ percentage }}</span>% Complete (success)</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% set disabled = "" %}
                    {% if remaining_question == 0 %}
                        {% set disabled = "disabled" %}
                    {% endif %}
                    <div class="data_container">
                        <div id="messages" class="alert"> {#  alert-danger #} </div>
                        <table class="table table-bordered" id="table_responsive" >
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Question</th>
                                    <th>Subject</th>
                                    <th>Question Type</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% set slno = 1 %}
                                {% for question in questions %}
                                    <tr>
                                        <td>{{ slno }}</td>
                                        <td>
                                            <div>
                                                {{ question.question|raw }}
                                            </div>
                                            <strong> Positive Feedback </strong>
                                            <div>
                                                {{ question.positivefeedback }}
                                            </div>
                                            <strong> Negative Feedback </strong>
                                            <div>
                                                {{ question.negativefeedback }}
                                            </div>
                                        </td>
                                        <td>{{ question.subject }}</td>
                                        <td>{{ question.questiontype }}</td>
                                        <td>
                                            {% if entered_question[question.id] == 0 %}
                                                {% set add_btn_style = "block" %}
                                                {% set rem_btn_style = "none" %}
                                            {% else %}
                                                {% set add_btn_style = "none" %}
                                                {% set rem_btn_style = "block" %}
                                            {% endif %}
                                            <button style="display:{{ add_btn_style|raw }};" class="btn btn-primary btn-sm addto_exam confirmation_btn {{ disabled|raw }}" data-question="{{ question.guid }}"> Add to Exam </button>
                                            <button style="display:{{ rem_btn_style|raw }};" class="btn btn-danger btn-sm removefrom_exam confirmation_btn"  data-question="{{ question.guid }}"> Remove </button>
                                        </td>
                                    </tr>
                                    {% set slno = slno + 1 %}
                                {% endfor %}
                            </tbody>
                        </table>
                        {{ knp_pagination_render(questions, 'AppBundle:Default:slidingAjax.html.twig') }}
                    </div>
                </div>
            </div>
        </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" src="{{ asset('bundles/app/js/bootstrap-tooltip.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/app/js/bootstrap-confirmation.js') }}"></script>
    <script type="text/javascript">

        $(document).ready(function () {


            $(document).on("click", ".addto_exam", function () {
                var button_ob = $(this);
                var rm_button_ob = $(this).closest('td').find('.removefrom_exam');
                console.log(rm_button_ob);
                var question = button_ob.data('question');

                $.ajax({
                    type: "POST",
                    url: "{{ path('exam_insert_question',{'examid':exam.guid}) }}",
                    data: {question: question},
                    beforeSend: function () {
                        $("#ajax_loader_div").show();
                    }
                }).done(function (data) {
                    var status = data.status;
                    var message = data.message;
                    var added_question = data.added_question;
                    var remaining_question = data.remaining_question;
                    var max_questions = data.max_questions;

                    $("body #maximum_questions").html(max_questions);
                    $("body #added_question").html(added_question);
                    $("body #remaining_question").html(remaining_question);

                    $("body #messages").attr("class", "");
                    if (status == "success") {
                        var percentage = data.percentage;
                        button_ob.hide();
                        rm_button_ob.show();

                        if (remaining_question == 0) {
                            $("body .addto_exam").addClass("disabled");
                        } else {
                            $("body .addto_exam").removeClass("disabled");
                        }
                        $("body .percentage_area").html(percentage);
                        $("body #percentage_area_progress").css("width",percentage + "%");

                        $("body #messages").addClass("alert alert-success");
                    } else {
                        $("body #messages").addClass("alert alert-danger");
                    }
                    $("body #messages").html(message);
                }).error(function () {
                    $("body #messages").html("Some error found!!");
                    $("body #messages").attr("class", "");
                    $("body #messages").addClass("alert alert-danger");
                }).complete(function () {
                    $("#ajax_loader_div").hide();
                });
            });

            $(document).on("click", ".removefrom_exam", function () {
                var button_ob = $(this);
                var add_button_ob = $(this).closest('td').find('.addto_exam');
                var question = button_ob.data('question');

                $.ajax({
                    type: "POST",
                    url: "{{ path('exam_remove_question',{'examid':exam.guid}) }}",
                    data: {question: question},
                    beforeSend: function () {
                        $("#ajax_loader_div").show();
                    }
                }).done(function (data) {
                    var status = data.status;
                    var message = data.message;
                    var added_question = data.added_question;
                    var remaining_question = data.remaining_question;
                    var max_questions = data.max_questions;


                    $("body #maximum_questions").html(max_questions);
                    $("body #added_question").html(added_question);
                    $("body #remaining_question").html(remaining_question);

                    $("body #messages").attr("class", "");
                    if (status == "success") {
                        var percentage = data.percentage;
                        button_ob.hide();
                        add_button_ob.css("display", "block");

                        if (remaining_question == 0) {
                            $("body .addto_exam").addClass("disabled");
                        } else {
                            $("body .addto_exam").removeClass("disabled");
                        }
                        $("body .percentage_area").html(percentage);
                        $("body #percentage_area_progress").css("width",percentage + "%");

                        $("body #messages").addClass("alert alert-success");
                    } else {
                        $("body #messages").addClass("alert alert-danger");
                    }
                    $("body #messages").html(message);
                }).error(function () {
                    $("body #messages").html("Some error found!!");
                    $("body #messages").attr("class", "");
                    $("body #messages").addClass("alert alert-danger");
                }).complete(function () {
                    $("#ajax_loader_div").hide();
                });
            });
        });

        function __loadPage(path) {
            $.ajax({
                type: "POST",
                url: path,
                beforeSend: function () {
                    $("#ajax_loader_div").show();
                },
                success: function (html) {
                    var data_table = $(html).find(".data_container");
                    $(".data_container").html(data_table);
                },
                complete: function () {
                    $("#ajax_loader_div").hide();
                }

            });
        }
    </script>
{% endblock %}