{% include "header.html" %}
{% load custom_filters %}
{% load static %}
<style>
    .options{
        background-color: #f4f4f4 !important;
    }
</style>
        <!-- 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-fluid 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;
                                            <button type="button" class="add-btn" data-toggle="modal" data-target="#wordquestionModal">Add Via
                                                Word</button> &nbsp;
                                        <a href="add-question?test_id={{test_id}}" type="button" class="add-btn">Add Question</a> &nbsp;
                                        <a href="download-questions?test_id={{test_id}}" type="button" class="add-btn"><i class="fa fa-download"></i> Download Questions</a>
                                    
                                    </div>
                                </div>

                            </div>
                        </div>


                    
                    </div>

                    <div class="container-fluid page__container exam-module">
                        <div class="card card-form">


                            <form action='/admin/question_bank'>
                                <input type="hidden" name="test_id" value="{{test_id}}"/>
                                <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" name="section_id" class="form-control">
                                                <option value="">Select section</option>
                                                {% for section in section_list %} 
                                                <option value="{{ section.id }}" {% if section.id == section_id %} selected {% endif %}>{{ 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" name="sub_section_id" class="form-control">
                                                <option value="">Select subsection</option>
                                                {% for sub_section in Sub_Sections_list %} 
                                                <option value="{{ sub_section.id }}" {% if sub_section.id == sub_section_id %} selected {% endif %}>{{ 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" name="topic_id" class="form-control">
                                                <option value="">Select topic</option>
                                                {% for topic in Topics_list %} 
                                                <option value="{{ topic.id }}">{{ topic.topic_name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="form-group">
                                            <label for="topic">Question No. : </label>
                                        <input type="serach" id="search" name="search" placeholder="Enter Question No." value="{{search}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-1 col-md-12 col-sm-12"><br>
                                            <button class="btn btn-warning" type="submit">Go</button>
                                    </div>
                                </div>
    
                            </form>



                            <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">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 Level</th>
                                                    <th class="table-head w-250">Question</th>
                                                    <th class="table-head w-250">Paragraph</th>
                                                    <th class="table-head w-250">Answer Explaination</th>
                                                    <th class="table-head w-250">Options</th>
                                                    <th class="table-head">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody class="list" id="staff">
                                                
                                                {% for question in Question_list %}
                                                <tr>
                                                    <td>
                                                        <!-- {{forloop.counter}} -->

                                                        <select class="form-control change_index" data-id="{{question.id}}" data-test_id="{{question.test_id}}" style="width: 50px;">
                                                            <option value="">Select order</option>
                                                            {% for number in numbers %}
                                                            {% if number not in display_order %}
                                                                <option>{{ number }}</option>
                                                            {% endif %}
                                                            {% if question.display_order == number %}
                                                                <option selected>{{ number }}</option>
                                                            {% endif %}
                                                            {% endfor %}
                                                        </select>
                                                        <p id="qmsg_{{question.id}}"></p>
                                                    </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}} </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.paragraph|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.explanation|safe}} </span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        {% if question.question_type == 'mcq' %}
                                                        {% with question.options|json_decode as option %}
                                                           
                                                                {% for opt in option %}
                                                                {% if forloop.counter|stringformat:"s" == question.correct_answer|stringformat:"s" %}
                                                                    <div class="card card-body p-2 options bg-success" style="width: 400px;">{{ opt|safe }} </div>
                                                                {% else %}
                                                                    <div class="card card-body p-2 options" style="width: 400px;">{{ opt|safe }} </div>
                                                                {% endif %}
                                                                    <!-- <div class="card card-body p-2 options">{{ opt|safe }}</div> -->
                                                                {% endfor %}
                                                         
                                                        {% endwith %}
                                                        {% else %}
                                                            <div class="card card-body p-2 options bg-success" style="width: 400px;">{{ question.correct_answer }} </div>
                                                        {% endif %}
                                                    </td>

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

                                                        <a href="/admin/editquestion/{{question.id}}"><span class="badge badge-warning edit"><i
                                                            class="fas fa-edit"></i></span></a>
                                                            <br>
                                                             <a href="#modal-upload-video"><span class="btn btn-primary upload-video"  data-toggle="modal"
                                                        data-id="{{question.id}}" ><i class="fas fa-upload text-white"></i> Upload</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{{filter}}">&laquo; first</a>
                                                <a href="?page={{ Question_list.previous_page_number }}{{filter}}">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 }}{{filter}}">next</a>
                                                <a href="?page={{ Question_list.paginator.num_pages }}{{filter}}">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 -->

  <!-- Upload Video Modal -->
<div id="modal-upload-video" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="modal-body text-center p-4">
        <h3>Upload Video Explaination</h3>
            <form id="upload_video_form" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="hidden" name="quid" id="video_quid" />
                <input type="file" name="video" accept="video/*" class="form-control mb-3" required />
                <button type="submit" class="btn btn-primary">Upload</button>
                <button type="button" class="btn btn-light text-dark" data-dismiss="modal">Cancel</button>
            </form>
      </div>
    </div>
  </div>
</div>
{% 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">
                <div class="modal-body text-center p-4">
                    <form method="post" enctype="multipart/form-data" id="delete_form" >
                        {% csrf_token %}
                        <h4 class="">Are you sure you want to delete?</h4>
                        <input type="hidden" name="id" id="delete_id" />
                        <button type="submit" class="btn btn-danger">Yes</button>
                        <button type="button" class="btn btn-light text-dark" data-dismiss="modal">No</button>
                        
                </form>
                </div> 
            </div> 
        </div> 
    </div> 


    <!-- 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">Upload Question</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 %}
                <div class="form-group">
                    <label><i>* Download Excel Format</i></label><br>
                    <a href="{% static 'assets/images/question-excel.xlsx'%}" class="btn add-btn" target="_blank"><i class="fa fa-download"></i> Download</a>
                </div><br>
                <input type="file" name="excelFile" class="form-control"><br>
                <input type="hidden" name="test_id" value="{{test_id}}"/>
                <input type="hidden" name="exam_category_id" value="{{test.0.examcategory_id}}"/>
                <button type="submit" class="btn btn-primary">Upload</button>
                <div id="message"></div>
            </form>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="wordquestionModal" 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">Upload Question</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="uploadWordForm" method="post" enctype="multipart/form-data">
                {% csrf_token %}<br>

                <p><strong>Instructions: </strong></p>
                <ul>
                    <li>A paragraph should start with the keyword <strong>Directions: </strong>.</li>
                    <li>A question should start with the keyword <strong>Q-</strong>.</li>
                    <li>Options should begin with the keyword <strong>A) </strong>.</li>
                    <li>The correct answer should start with the keyword <strong>Answer: </strong>.</li>
                    <li>The answer explanation should start with the keyword <strong>Solution: </strong>.</li>
                    <li>Math equations should begin on a new line, and there must be a <strong>$$</strong> delimiter at the start and end of the equation.</li>
                    <li>The font family should be Cambria Math.</li>
                </ul>
                <div class="form-group">
                    <label><i>* Download Word Format</i></label><br>
                    <a href="{% static 'assets/images/question-word.docx'%}" class="btn add-btn" target="_blank"><i class="fa fa-download"></i> Download</a>
                </div><br>
                <br>
                <input type="file" name="excelFile" class="form-control"><br>
                <input type="hidden" name="test_id" value="{{test_id}}"/>
                <input type="hidden" name="exam_category_id" value="{{test.0.examcategory_id}}"/>
                <button type="submit" class="btn btn-primary">Upload</button>
                <div id="wmessage"></div>
            </form>
        </div>
      </div>
    </div>
  </div>


</body>
<script>
       $('.delete-button').click( function() {
      var id = $(this).data('id');
       $('#delete_id').val(id);
   })
   //    var delete_id = $('#category_id').val(id);
       //debugger
       // var category_id = $(this).val();
       $('#delete_form').submit(function(event) {
         // Prevent the default form submission behavior
         event.preventDefault();
         
         var formData = new FormData($(this)[0]);
       
       // Send the Ajax request
       $.ajax({
         url: '{% url "delete-question" %}',
         type: 'POST',
         data: formData,
         processData: false,
         dataType: 'json',
         contentType: false,
         success: function(response) {
           if(response.status=='success'){
            $('#modal-delete').modal('hide');
            setTimeout(function () {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: 'Deleted Successfully.',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK'
                });
            }, 1000);
            setTimeout(function () {
                location.reload();
            }, 2000);
            //    $('#msg').html('<div class="text-success">'+response.msg+'</div>');
           }
           else{
       
               $('#delete_msg').html('<div class="text-danger">'+response.msg+'</div>');
           }
         },
         error: function(xhr, status, error) {
          
           console.log(error);
         }
       });
        
   });

    $(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);
        }
    });
});
});
$(document).ready(function() {
$('#uploadWordForm').submit(function(e) {
    e.preventDefault();

    var formData = new FormData(this);

    $.ajax({
        url: "{% url 'upload_question_word' %}",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if(response.success){

                $('#wmessage').html('<p class="text-success">'+response.message+'</p>');
            }
            else{
                $('#wmessage').html('<p class="text-danger">'+response.message+'</p>');
            }
        },
        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);
                
                },
            });
        }
    });
    $('.change_index').change(function(){
        var order = $(this).val();
        var question_id = $(this).data('id');
        var test_id = $(this).data('test_id');
        $.ajax({
                 url: '{% url "update_question_order" %}',
                 method: "POST",
                 data: {
                     order: order,
                     question_id:question_id,
                     test_id:test_id,
                     csrfmiddlewaretoken: '{{ csrf_token }}'
                 },
                 dataType: 'json',
                 success: function(response) {
                     // alert(response);
                    //  $('#topic').html(response);
                    if(response.status){
                        $('#qmsg_'+question_id).html('');
                    }
                    else{
                        $('#qmsg_'+question_id).html('<p class="text-danger">'+response.msg+'</p>');
                    }
                 
                 },
             });
         
    })
     // Function to open the modal and set question ID
  $(document).on('click', '.upload-video', function () {
    const questionId = $(this).data('id');
    $('#video_quid').val(questionId); // Set hidden input value
    $('#modal-upload-video').modal('show'); // Show modal
  });

  // Handle the form submission with AJAX
  $('#upload_video_form').on('submit', function (e) {
    e.preventDefault();

    // Create FormData object
    let formData = new FormData(this);

    $.ajax({
      url: "{% url 'upload_question_explaination_video' %}", // Replace with your URL name
      type: "POST",
      data: formData,
      processData: false,
      contentType: false,
      beforeSend: function(xhr, settings) {
        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
      },
      success: function (response) {
        // On success, close modal and reload or update UI
        $('#modal-upload-video').modal('hide');
        alert("Video uploaded successfully!");
        location.reload(); // or dynamically update video preview
      },
      error: function (xhr, status, error) {
        alert("Video upload failed: " + xhr.responseText);
      }
    });
  });
</script>
</html>