{% include "header.html" %}

        <!-- Header Layout Content -->
        <div class="mdk-header-layout__content">

            <div class="mdk-drawer-layout js-mdk-drawer-layout" data-push data-responsive-width="992px">
                <div class="mdk-drawer-layout__content page">

                    <div class="container page__heading-container pt-3">
                       <!--  <div class="page__heading">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb mb-0">
                                    <li class="breadcrumb-item"><a href="#"><i
                                                class="material-icons icon-20pt">home</i></a></li>
                                    <li class="breadcrumb-item">Sections</li>
                                    <li class="breadcrumb-item">Sub Sections/</li>
                                    <li class="breadcrumb-item">Topic/</li>
                                    <li class="breadcrumb-item active" aria-current="page">Question Bank</li>
                                </ol>
                            </nav>
                        </div> -->

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <h1 class="heading">Add Mock Questions</h1>
                            </div>
                            <div class="col-md-6">
                               

                            </div>
                        </div>


                        <div class="row mb-3 mt-4">
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <!-- <input type="number" placeholder="10"> <span class="items-pages">Items/Pages</span> -->
                            </div>
                            <div class="col-lg-6 col-md-12 col-sm-12 text-end">
                                <!-- <div class="d-flex justify-content-end">
                                    <input type="serach" id="search" placeholder="Serach....">
                                </div> -->
                                <input type="hidden" name="test_id" id="test_id" value="{{test_id}}"/>
                                <button type="button" class="btn add-btn" name="submit" id="submit">Save</button>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="s_qids" id="s_qids" value="{{test.question_ids}}"/>
                    <div class="container page__container exam-module">
                        <div class="card card-form">


                            <div class="row m-3 question-bank">
                                <div class="col-lg-3 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="section">Section Name : </label>
                                        <select id="section" data-toggle="select" class="form-control">
                                            {% for section in section_list %} 
                                            <option value="">Select section</option>
                                            <option value="{{ section.id }}">{{ section.section_name }}</option>
                                            {% endfor %}
                                            {% comment %} <option selected="">Active</option>
                                            <option selected="">Inactive</option> {% endcomment %}
                                        </select>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="sub-section">Sub-Section Name : </label>
                                        <select id="sub-section" data-toggle="select" class="form-control">
                                            <option value="">Select subsection</option>
                                            {% for sub_section in Sub_Sections_list %} 
                                            <option value="{{ sub_section.id }}">{{ sub_section.sub_section_name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>


                                <div class="col-lg-3 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="topic">Topic : </label>
                                        <select id="topic" data-toggle="select" class="form-control">
                                            {% for topic in Topics_list %} 
                                            <option value="">Select topic</option>
                                            <option value="{{ topic.id }}">{{ topic.topic_name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>




                            <div class="row question-bank m-3 ">

                                <div class="col-lg-12 card-form__body">
                                    <p>Total Selected Questions : <span id="selected_questions">{{qids|length}}</span></p>
                                    <div class="table-responsive border-bottom" data-toggle="lists"
                                        data-lists-values='["js-lists-values-employee-name"]'>

                                        <table class="table mb-0 thead-border-top-0">
                                            <thead class="table-heading">
                                                <tr>
                                                    <th class="table-head">No.</th>
                                                    <!-- <th class="table-head">Section Name</th>
                                                    <th class="table-head">Sub-Section Name</th>
                                                    <th class="table-head">Topic Name</th> -->
                                                    <th class="table-head w-250">Question Type</th>
                                                    <th class="table-head w-250">Difficulty Lever</th>
                                                    <th class="table-head w-250">Question</th>
                                                    <th class="table-head w-250">Marks</th>
                                                </tr>
                                            </thead>
                                            <tbody class="list" id="questions">
                                                
                                                {% for question in Question_list %}
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" name="question_ids" class="question_ids" value="{{question.id}}"  {% if question.id|stringformat:"i" in qids %} checked {% endif %}/>
                                                    </td>
                                                    <!-- <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span
                                                                    class="js-lists-values-exam-name exam-name">{{question.section.section_name}}</span>
                                                            </div>
                                                        </div>
                                                    </td>

                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{question.sub_section.sub_section_name}}
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </td>


                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{question.topic.topic_name}}</span>
                                                            </div>
                                                        </div>
                                                    </td> -->
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{question.question_type}}</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{question.difficulty_level|safe}}</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{question.question|safe}} </span>
                                                            </div>
                                                        </div>
                                                    </td>

                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{question.marks|safe}} </span>
                                                            </div>
                                                        </div>
                                                    </td>


                                                    
                                                </tr>
                                                        <!-- delete modal  -->

                                                 
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>




                    </div>

                </div>
                <!-- // END drawer-layout__content -->

                <!-- drawer -->
               {% include "sidebar.html"%}
                <!-- // END drawer -->
            </div>
            <!-- // END drawer-layout -->

        </div>
        <!-- // END header-layout__content -->

    </div>
    <!-- // END header-layout -->

{% include "footer.html" %}

    <script>
        (function () {
            'use strict';
            // ENABLE sidebar menu tabs
            $('#sidebar-mini-tabs [data-toggle="tab"]').on('click', function (e) {
                e.preventDefault()
                $(this).tab('show')
            })
        })()
    </script>

 
</body>
<script>
    var y = [1, 2, 2, 3, 2]
var removeItem = 2;

y = jQuery.grep(y, function(value) {
  return value != removeItem;
});

console.log(y);
    var question_ids = [];
    question_ids = JSON.parse($('#s_qids').val())
    $(".question_ids").change(function() {
        var question_id = $(this).val();
    if(this.checked) {
        question_ids.push(question_id)
    }
    else{
        question_ids=jQuery.grep(question_ids, function(value) {
            return value != question_id;
            });
      //  question_ids.pop($(this).val())
    }
    $('#selected_questions').html(question_ids.length)
    $('#s_qids').val(JSON.stringify(question_ids));
    //console.log(JSON.stringify(question_ids));
});


$('#submit').click(function(){
   
   
   $.ajax({
    url: "{% url 'save_mock_questions' %}",
       type: "POST",
       data: {'test_id':$('#test_id').val(), 'qids': $('#s_qids').val(),csrfmiddlewaretoken: '{{ csrf_token }}'},
                success: function(response) {
                    // alert(response);
                  //  $('#message').html(response.message);
                    Swal.fire({
               icon: 'success',
               title: 'Success!',
               text: 'Mock test questions added successfully.',
               confirmButtonColor: '#3085d6',
               confirmButtonText: 'OK'
            });
       setTimeout(function () {
           location.reload();
       }, 3000);

                },
            });
});
    
    $("#section").change(function() {
       
        filter_questions();
    });
    $("#sub-section").change(function() {
        filter_questions();
    });
    $("#topic").change(function() {
        filter_questions();
    });
    function filter_questions(){
        var section = $('#section').find("option:selected").val();
        var sub_section = $('#sub-section').find("option:selected").val();
        var topic = $('#topic').find("option:selected").val();
        $.ajax({
                url: '{% url "filter_questions" %}',
                method: "GET",
                data: {
                    section: section,sub_section: sub_section,topic: topic, 'qids': $('#s_qids').val(),
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function(response) {
                    // alert(response);
                    $('#questions').html(response);
                
                },
            });
        }
</script>
</html>