{% 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">Edit Question Bank</h1>
                            </div>

                        </div>
                    </div>



                    <div class="container page__container exam-module">
                        <div class="card card-form">
                            <form id="add_question" method="post" enctype="multipart/form-data">
                                {% csrf_token %}
                                <input type="hidden" name="question_id" value="{{Question_list.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">
                                            {% comment %} <option selected="">Active</option>
                                            <option selected="">Inactive</option> {% endcomment %}
                                            {% for section in section_list %} 
                                                {% if section.id == Question_list.section_id %}
                                                <option value="{{ section.id }}" selected>{{ section.section_name }}</option>
                                                {% else %}
                                                <option value="{{ section.id }}">{{ section.section_name }}</option>
                                                {% endif %}
                                            
                                            {% endfor %}
                                        </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">
                                            {% comment %} <option selected="">Active</option>
                                            <option selected="">Inactive</option> {% endcomment %}
                                            {% for sub_section in Sub_Sections_list %} 
                                                {% if sub_section.id == Question_list.sub_section_id %}
                                                <option value="{{ sub_section.id }}" selected>{{ sub_section.sub_section_name }}</option>
                                                {% else %}
                                                <option value="{{ sub_section.id }}">{{ sub_section.sub_section_name }}</option>
                                                {% endif %}
                                            
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="sub-section">Topic Name : </label>
                                        <select id="topic" data-toggle="select" name="topic" class="form-control">
                                            {% comment %} <option selected="">Active</option>
                                            <option selected="">Inactive</option> {% endcomment %}
                                            {% for topic in Topics_list %} 
                                                {% if topic.id == Question_list.topic_id %}
                                                <option value="{{ topic.id }}" selected>{{ topic.topic_name }}</option>
                                                {% else %}
                                                <option value="{{ topic.id }}">{{ topic.topic_name }}</option>
                                                {% endif %}
                                            
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>


                                <div class="col-lg-3 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="status">Status : </label>
                                        <select id="status" data-toggle="select" name="status" class="form-control">
                                            <option {% if Question_list.status ==  'Active' %} selected{% endif %}>Active</option>
                                            <option {% if Question_list.status ==  'Inactive' %} selected{% endif %}>Inactive</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <input type="hidden" value="{{Question_list.question_type}}" name="question_type"/>
                            <div class="row m-3 question-bank">
                              
                                {% if Question_list.question_type == "paragraph" %}
                                <div class="col-md-12" id="paragraphContainer">
                                    <label for="id_paragraph">Paragraph:</label>
                                    <div class="col-lg-12 card-form__body">
                                    <textarea name="paragraph"  id="paragraph">{{Question_list.paragraph}}</textarea>
                                    </div>
                                </div>
                                {% else %}
                                <div class="col-md-12" id="paragraphContainer">
                                    <label for="id_paragraph">Paragraph:</label>
                                    <div class="col-lg-12 card-form__body">
                                    <textarea name="paragraph"  id="paragraph">{{Question_list.paragraph}}</textarea>
                                    </div>
                                </div>
                                {% endif %}
                                <div class="col-lg-12 ckeditor ">
                                    <label for="editor1">Question : </label>
                                    <div class=" card-form__body">
                                        <textarea name="question" id="question">{{Question_list.question}}</textarea>
                                    </div>
                                </div>
                                {% if Question_list.question_type == "mcq" %}
                                <div class="col-md-12 mb-2" id="correctContainer"  style="display: none;" >
                                    <label for="id_paragraph">Correct Answer:</label>
                                    <div class="col-lg-6 card-form__body">
                                    <input type="text" name="correct" class="form-control" id="correct_answer"/>
                                    </div>
                                </div>
                                {% else %}
                                <div class="col-md-12 mb-2" id="correctContainer">
                                    <label for="id_paragraph">Correct Answer:</label>
                                    <div class="col-lg-6 card-form__body">
                                    <input type="text" name="correct" class="form-control" id="correct_answer" value="{{Question_list.correct_answer}}"/>
                                    </div>
                                </div>
                                {% endif %}
                                {% if Question_list.question_type == "mcq" %}
                                    <div class="col-md-12" id="optionsContainer" >
                                        <table class="table table-bordered">
                                            <tr>
                                                <th>Correct Answer</th>
                                                <th>Options</th>
                                            </tr>
                                            <tr>
                                                <td><input type="radio" name="correct_answer" value="1" {% if Question_list.correct_answer == '1' %} checked {% endif %}/></td>
                                                <td>
                                                    <div class="form-group">
                                                        <textarea name="option_1"  id="id_option_1">{% if options|length >= 1 %} {{options.0}} {% endif %}</textarea>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><input type="radio" name="correct_answer" value="2" {% if Question_list.correct_answer == '2' %} checked {% endif %}/></td>
                                                <td>
                                                    <div class="form-group">
                                                        <textarea name="option_2"  id="id_option_2">{% if options|length >= 2 %} {{options.1}} {% endif %}</textarea>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><input type="radio" name="correct_answer" value="3" {% if Question_list.correct_answer == '3' %} checked {% endif %}/></td>
                                                <td>
                                                    <div class="form-group">
                                                        <textarea name="option_3"  id="id_option_3">{% if options|length >= 3 %} {{options.2}} {% endif %}</textarea>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><input type="radio" name="correct_answer" value="4" {% if Question_list.correct_answer == '4' %} checked {% endif %}/></td>
                                                <td>
                                                    <div class="form-group">
                                                        <textarea name="option_4"  id="id_option_4">{% if options|length >= 4 %} {{options.3}} {% endif %}</textarea>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><input type="radio" name="correct_answer" value="5" {% if Question_list.correct_answer == '5' %} checked {% endif %}/></td>
                                                <td>
                                                    <div class="form-group">
                                                        <textarea name="option_5"  id="id_option_5">{% if options|length >= 5 %} {{options.4}} {% endif %}</textarea>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                {% else %}
                                <div class="col-md-12" id="optionsContainer" style="display: none;">
                                    <table class="table table-bordered">
                                        <tr>
                                            <th>Correct Answer</th>
                                            <th>Options</th>
                                        </tr>
                                        <tr>
                                            <td><input type="radio" name="correct" value="option_1" {% if Question_list.correct_answer == '1' %} checked {% endif %}/></td>
                                            <td>
                                                <div class="form-group">
                                                    <input type="text" class="form-control" name="option_1" id="id_option_1" value="{% if options.count >= 1 %} {{options.0}} {% endif %}" placeholder="Option 1">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="radio" name="correct" value="option_2"  {% if Question_list.correct_answer == '2' %} checked {% endif %}/></td>
                                            <td>
                                                <div class="form-group">
                                                    <input type="text" class="form-control" name="option_2" id="id_option_2"  value="{% if options.count >= 2 %} {{options.1}} {% endif %}" placeholder="Option 2">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="radio" name="correct" value="option_3"  {% if Question_list.correct_answer == '3' %} checked {% endif %}/></td>
                                            <td>
                                                <div class="form-group">
                                                    <input type="text" class="form-control" name="option_3" id="id_option_3"  value="{% if options.count >= 3 %} {{options.2}} {% endif %}" placeholder="Option 3">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="radio" name="correct" value="option_4"  {% if Question_list.correct_answer == '4' %} checked {% endif %}/></td>
                                            <td>
                                                <div class="form-group">
                                                    <input type="text" class="form-control" name="option_4" id="id_option_4"  value="{% if options.count >= 4 %} {{options.3}} {% endif %}" placeholder="Option 4">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><input type="radio" name="correct" value="option_5"  {% if Question_list.correct_answer == '5' %} checked {% endif %}/></td>
                                            <td>
                                                <div class="form-group">
                                                    <input type="text" class="form-control" name="option_5" id="id_option_5"  value="{% if options.count >= 4 %} {{options.3}} {% endif %}" placeholder="Option 4">
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                {% endif %}
                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="level">Difficulty Level : </label>
                                        <select id="level" data-toggle="select" name="difficulty_level" class="form-control">
                                            <option {% if Question_list.difficulty_level ==  'Easy' %} selected{% endif %}>Easy</option>
                                            <option {% if Question_list.difficulty_level ==  'Medium' %} selected{% endif %}>Medium</option>
                                            <option {% if Question_list.difficulty_level ==  'Hard' %} selected{% endif %}>Hard</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="select03">Time to Spent : </label>
                                        <input class="form-control" type="number" value="{{Question_list.time_to_speed}}" name="time_to_speed" id="time_to_speed" required="" />

                                        {% comment %} <select id="select03" data-toggle="select" name="time_to_speed" class="form-control">
                                            <option selected="">Active</option>
                                            <option selected="">Inactive</option>
                                        </select> {% endcomment %}
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="select03">Marks: </label>
                                        <input class="form-control" type="number" name="mark" id="mark" value="{{Question_list.marks}}"/>

                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="select03">Negative Mark: </label>
                                        <input class="form-control" type="number" name="negative_mark" id="negative_mark" value="{{Question_list.negative_marks}}"/>

                                    </div>
                                </div>

                            </div>

                            <div class="row ckeditor m-3">
                                <label for="editor2">Answer Explaination: </label>
                                <div class="col-lg-12 text-center card-form__body">
                                    <textarea name="editor2" id="explaination">{{Question_list.explanation}}</textarea>
                                    <div id="msg"></div>
                                    <button type="submit" id="submit" class="add-btn mt-3">Submit</button>
                                </div>
                            </div>

                        </form>
                        </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 src="https://cdn.ckeditor.com/4.21.0/standard/ckeditor.js"></script>
<script>
//   CKEDITOR.replace( 'question' );
//   CKEDITOR.replace( 'paragraph' );
//   CKEDITOR.replace( 'editor2' );;
//   CKEDITOR.replace( 'id_option_1' );
//   CKEDITOR.replace( 'id_option_2' );
//   CKEDITOR.replace( 'id_option_3' );
//   CKEDITOR.replace( 'id_option_4' );
//   CKEDITOR.replace( 'id_option_5' );

</script>

    <script>
        $("#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);
                    
                    },
                });
            }
        });
        // Listen for the form submission event
        $('#add_question').submit(function(event) {
            // Prevent the default form submission behavior
            event.preventDefault();
          
            tinymce.triggerSave();
            var formData = new FormData($(this)[0]);

            // Send the Ajax request
            $.ajax({
            url: '{% url "add_question_store" %}',
            type: 'POST',
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function(response) {
                if(response.status=='success'){
                    $('#msg').html('<div class="text-success">'+response.msg+'</div>');
                }
                else{
            
                    $('#msg').html('<div class="text-danger">'+response.msg+'</div>');
                }
            },
            error: function(xhr, status, error) {
                // Handle the error response
                console.log(error);
            }
            });
         
        });
    </script>
</body>

</html>