{% 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: "Choice Type"; }
            td:nth-of-type(4):before { content: "Question Type"; }
            td:nth-of-type(5):before { content: "Actions"; }
        }
        .delete_question:hover{
           cursor: pointer;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('bundles/app/tinymce/js/tinymce/skins/lightgray/skin.min.css') }}">
{% endblock %}
{% block body -%}

    {% if entities %}
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h6> Questions : {{ subject.subject }}</h6>
                    </div>
                    <div class="panel-body">  
                        <div class="row">
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <label>No. of Records:</label>

                                    <select name="maxItemPerPage" id="maxItemPerPage" class="form-control">
                                        <option id="10"
                                                {% if maxItemPerPage is defined and maxItemPerPage == 10 %}
                                                    selected="selected"
                                                {% endif %}
                                                >10</option>
                                        <option id="20"
                                                {% if maxItemPerPage is defined and maxItemPerPage == 20 %}
                                                    selected="selected"
                                                {% endif %}
                                                >20</option>
                                        <option id="30"
                                                {% if maxItemPerPage is defined and maxItemPerPage == 30 %}
                                                    selected="selected"
                                                {% endif %}
                                                >30</option>
                                        <option id="50"
                                                {% if maxItemPerPage is defined and maxItemPerPage == 50 %}
                                                    selected="selected"
                                                {% endif %}
                                                >50</option>
                                        <option id="100"
                                                {% if maxItemPerPage is defined and maxItemPerPage == 100 %}
                                                    selected="selected"
                                                {% endif %}
                                                >100</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label>Search:</label>
                                    <input type="text" name="search_text" placeholder="Search" id="search_text" data-subject="{{subject.guid}}" class="form-control"/>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="button_container">
                                    <a class="btn btn-primary btn-sm" href="{{ path('question_bank_new',{subject:subject.guid,'qsttype':'objective'}) }}"> Add Objective Question </a>
                                    <a class="btn btn-success btn-sm" href="{{ path('question_bank_new',{subject:subject.guid,'qsttype':'descriptive'}) }}"> Add Descriptive Question </a>
                                </div>
                            </div>
                        </div>
                        <div id="messages" class="alert alert-dismissable">  </div>
                        <div class="data_container">

                            {{ include("AppBundle:QuestionBank:TableContent/index.html.twig") }}
                        </div>
                    </div>
                </div>
            </div>
        </div>  
    {% else %}
        <div class="row">
            <div class="col-lg-12">
                <div class="alert alert-info alert-dismissable">
                    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                    <i class="fa fa-info-circle"></i>  <strong>Upload Question Bank</strong> Click <a class="alert-link" href="{{ path('app_question_bank_upload_home') }}">here</a> to upload questions from CSV!
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h6>Select Subject</h6>
                    </div>
                    <div class="panel-body">
                        {{ form(search_form) }}
                    </div>
                </div>
            </div>
        </div>

    {% endif %}
{% 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" src="{{ asset('bundles/app/tinymce/js/tinymce/tinymce.min.js') }}"></script>
    <script type="text/javascript">
        tinymce.init({
            selector: '.editor',
            plugins: ["image"],{#            relative_urls: true,#}{#            remove_script_host: false,#}
            convert_urls: false,
            remove_script_host: true,
            file_browser_callback: function (field_name, url, type, win) {
                if (type == 'image')
                    $('#my_form input').click();
            }
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {

            var del_icons = $(".data_container").find('.delete_question')
            $.each(del_icons, function (key, val) {
                var del_id = $(val).data("id");
                $(val).confirmation({
                    popout: true,
                    onConfirm: function () {
                        delete_process(del_id);
                    },
                    onCancel: function () {

                    }
                });
            });

            $('#maxItemPerPage').change(function () {

                var url = "{{path('question_bank_subject',{'maxItemPerPage':'_itemNum','subject':'__subject_guid_'})}}";
                var item = $('#maxItemPerPage').find(":selected").text();
                var subject_guid = $("#search_text").data("subject");
                url = url.replace('_itemNum', item);
                url = url.replace('__subject_guid_', subject_guid);
                window.location.href = url;
            });


            $("#search_text").on("keyup", function () {
                var pathname = window.location.pathname; // Returns path only
                __loadPage(pathname);
            });
        });
        function __loadPage(path) {
       
            var search_text = $("#search_text").val();
            $.ajax({
                type: "POST",
                url: path,
                data: {search_text: search_text},
                beforeSend: function () {
                    $("#ajax_loader_div").show();
                },
                success: function (html) {
                    $(".data_container").html(html);
                    var del_icons = $(".data_container").find('.delete_question')
                    $.each(del_icons, function (key, val) {
                        var del_id = $(val).data("id");
                        $(val).confirmation({
                            popout: true,
                            onConfirm: function () {
                                delete_process(del_id);
                            },
                            onCancel: function () {

                            }
                        });
                    });

                },
                complete: function () {
                    $("#ajax_loader_div").hide();
                    $("body #messages").attr("class", "");
                    $("body #messages").html("");
                }

            });
        }
        function delete_process(qstn) {

            var path_dummy = "{{ path('question_bank_delete',{id:'__id_'}) }}";
            var path = path_dummy.replace("__id_", qstn);
            $("body #messages").attr("class", "");
            $("body #messages").html("");

            $.ajax({
                type: "POST",
                url: path,
                beforeSend: function () {
                    $("#ajax_loader_div").show();
                },
                success: function (html) {
                    var status = html.status;
                    if ("success" == status) {
                        var pathname = window.location.pathname + "?page="+ current_page; // Returns path only
                        __loadPage(pathname);
                    }
                    $("body #messages").addClass("alert alert-" + status);
                    $("body #messages").html(html.message);

                },
                complete: function () {
                    $("#ajax_loader_div").hide();
                }

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