{% 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">
                        <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">Question Bank</h1>
                            </div>
                            <div class="col-md-6">
                                <div>
                                    <div class="d-flex justify-content-md-end">
 
                                        <button type="button" class="add-btn" data-toggle="modal" data-target="#questionModal">Add Via
                                            Excel</button> &nbsp;
                                        <a href="/add-question/" type="button" class="add-btn">Add Question</a>
                                    </div>
                                </div>

                            </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">
                                <div class="d-flex justify-content-end">
                                    <input type="serach" id="search" placeholder="Serach....">
                                </div>
                            </div>
                        </div>
                    </div>

                    <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="{{ 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">
                                            {% 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="{{ 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">

                                    <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">Section Name</th>
                                                    <th class="table-head">Sub-Section Name</th>
                                                    <th class="table-head">Topic Name</th>
                                                    <th class="table-head col-6">Question</th>
                                                    <th class="table-head">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody class="list" id="staff">
                                                {% for question in Question_list %}
                                                <tr>
                                                    <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}} </span>
                                                            </div>
                                                        </div>
                                                    </td>

                                                    <td span="" 2>
                                                        <a href="#modal-delete{{question.id}}" class="badge badge-danger"
                                                            data-toggle="modal"><i class="fas fa-trash delete"></i></a>
                                                    

                                                        <a href="/editquestion/{{question.id}}"><span class="badge badge-warning edit"><i
                                                            class="fas fa-edit"></i></span></a>
                                                            
                                                    </td>
                                                    
                                                </tr>
                                                        <!-- delete modal  -->

                                                       
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="pagination">
                                        <span class="step-links">
                                            {% if Question_list.has_previous %}
                                                <a href="?page=1">&laquo; first</a>
                                                <a href="?page={{ Question_list.previous_page_number }}">previous</a>
                                            {% endif %}
                                    
                                            <span class="current">
                                                Page {{ Question_list.number }} of {{ Question_list.paginator.num_pages }}.
                                            </span>
                                    
                                            {% if Question_list.has_next %}
                                                <a href="?page={{ Question_list.next_page_number }}">next</a>
                                                <a href="?page={{ Question_list.paginator.num_pages }}">last &raquo;</a>
                                            {% endif %}
                                        </span>
                                    </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>

   

    <!-- delete modal  -->

    <div id="modal-delete" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content bg-danger">
                <div class="modal-body text-center p-4">
                    <i class="material-icons icon-40pt text-white mb-2">report_problem</i>
                    <h4 class="text-white">Ohhh Snap!</h4>
                    <p class="text-white mt-3 text-capitalize">are you sure you want to delete?</p>
                    <button type="button" class="btn btn-light my-2 rounded-0 " data-dismiss="modal">Delete</button>
                </div> <!-- // END .modal-body -->
            </div> <!-- // END .modal-content -->
        </div> <!-- // END .modal-dialog -->
    </div> <!-- // END .modal -->


    <!-- delete modal  -->
 <!--question Modal -->
 <div class="modal fade" id="questionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <form id="uploadForm" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="file" name="excelFile" class="form-control"><br>
                <button type="submit" class="btn btn-primary">Upload</button>
                <div id="message"></div>
            </form>
        </div>
      </div>
    </div>
  </div>



</body>
<script>
    $(document).ready(function() {
$('#uploadForm').submit(function(e) {
    e.preventDefault();

    var formData = new FormData(this);

    $.ajax({
        url: "{% url 'upload_question_excel' %}",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            $('#message').html(response.message);
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
        }
    });
});
});
    
    $("#section").change(function() {
        var section = $(this).find("option:selected").val();
        
       // var category_level = $(this).attr("data-id");
        var html = '';
        if (section != "") {
            $("#sub-section").empty();
            $.ajax({
                url: '{% url "section_selct" %}',
                method: "GET",
                data: {
                    section: section,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function(response) {
                    // alert(response);
                    $('#sub-section').html(response);
                
                },
            });
        }
    });
    $("#sub-section").change(function() {
      //  alert();
        var sub_section = $(this).find("option:selected").val();
        
       // var category_level = $(this).attr("data-id");
        var html = '';
        if (sub_section != "") {
            $("#topic").empty();
            $.ajax({
                url: '{% url "subsection_select" %}',
                method: "GET",
                data: {
                    sub_section: sub_section,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function(response) {
                    // alert(response);
                    $('#topic').html(response);
                
                },
            });
        }
    });
</script>
</html>