{% 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">Add 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 %}
                            <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 %} 
                                            <option value="{{ section.id }}">{{ section.section_name }}</option>
                                            {% 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 %} 
                                            <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="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 %} 
                                            <option value="{{ topic.id }}">{{ topic.topic_name }}</option>
                                            {% 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 selected="">Active</option>
                                            <option selected="">Inactive</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row ckeditor m-3">
                                <label for="editor1">Question : </label>
                                <div class="col-lg-12 card-form__body">
                                    <textarea name="editor1" id="editor1"></textarea>
                                </div>
                            </div>

                            <div class="row m-3 question-bank">
                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="question">Question Type : </label>
                                        <select id="question_type" data-toggle="select" name="question_type" class="form-control">
                                            <option value="mcq">Multiple Choice Question (MCQ)</option>
                                            <option value="paragraph">Paragraph</option>
                                            <option value="one_liner">One Liner</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="image">Question File:</label>
                                        <input class="form-control" type="file" name="question_file" id="image" required="" />
                                    </div>
                                </div>
                                <div id="optionsContainer" style="display: none;">
                                    <label for="id_option_1">Option 1:</label>
                                    <input type="text" name="option_1" id="id_option_1">
                                    <br>
                        
                                    <label for="id_option_2">Option 2:</label>
                                    <input type="text" name="option_2" id="id_option_2">
                                    <br>
                        
                                    <label for="id_option_3">Option 3:</label>
                                    <input type="text" name="option_3" id="id_option_3">
                                    <br>
                        
                                    <label for="id_option_4">Option 4:</label>
                                    <input type="text" name="option_4" id="id_option_4">
                                    <br>
                                </div>
                        
                                <div id="paragraphContainer" style="display: none;">
                                    <label for="id_paragraph">Paragraph:</label>
                                    <textarea name="paragraph" id="id_paragraph"></textarea>
                                    <br>
                                </div>
                        
                                <div id="subQuestionsContainer" style="display: none;">
                                    <label for="id_sub_question_1">Sub Question 1:</label>
                                    <textarea name="sub_question_1" id="id_sub_question_1"></textarea>
                                    <br>
                        
                                    <label for="id_option_1_1">Option 1:</label>
                                    <input type="text" name="option_1_1" id="id_option_1_1">
                                    <br>
                        
                                    <label for="id_option_1_2">Option 2:</label>
                                    <input type="text" name="option_1_2" id="id_option_1_2">
                                    <br>
                        
                                    <label for="id_option_1_3">Option 3:</label>
                                    <input type="text" name="option_1_3" id="id_option_1_3">
                                    <br>
                        
                                    <label for="id_option_1_4">Option 4:</label>
                                    <input type="text" name="option_1_4" id="id_option_1_4">
                                    <br>
                        
                                    <label for="id_sub_question_2">Sub Question 2:</label>
                                    <textarea name="sub_question_2" id="id_sub_question_2"></textarea>
                                    <br>
                        
                                    <label for="id_option_2_1">Option 1:</label>
                                    <input type="text" name="option_2_1" id="id_option_2_1">
                                    <br>
                        
                                    <label for="id_option_2_2">Option 2:</label>
                                    <input type="text" name="option_2_2" id="id_option_2_2">
                                    <br>
                        
                                    <label for="id_option_2_3">Option 3:</label>
                                    <input type="text" name="option_2_3" id="id_option_2_3">
                                    <br>
                        
                                    <label for="id_option_2_4">Option 4:</label>
                                    <input type="text" name="option_2_4" id="id_option_2_4">
                                    <br>
                                </div>
                                <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 selected="">Easy</option>
                                            <option selected="">Medium</option>
                                            <option selected="">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 Speed : </label>
                                        <input class="form-control" type="time" 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>

                            <div class="row ckeditor m-3">
                                <label for="editor2">Answer : </label>
                                <div class="col-lg-12 text-center card-form__body">
                                    <textarea name="editor2"></textarea>
                                    <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"%}

{% include "footer.html"%}
<script src="https://cdn.ckeditor.com/4.21.0/standard/ckeditor.js"></script>
<script>
  CKEDITOR.replace( 'editor1' );
  CKEDITOR.replace( 'editor2' );
</script>

    <script
        src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/6/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: "#mytextarea",
            height: 400,
            plugins: [
                "advlist autolink advcode lists link image charmap print preview anchor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table paste emoticons"
            ],
            toolbar:
                "styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | code ",
            menubar: "file edit view insert format tools table help",
            setup: function (editor) {
                editor.on("keyup", function (e) {
                    updateHTML(editor.getContent());
                });
                editor.on("change", function (e) {
                    updateHTML(editor.getContent());
                });
            }
        });

        function updateHTML(content) {
            cmeditor.getDoc().setValue(content);
        }

        function updateEditor() {
            if (!tinymce.activeEditor.hasFocus()) {
                tinymce.activeEditor.setContent(cmeditor.getDoc().getValue());
            }
        }

        var HTMLContainer = document.querySelector(".HTMLContainer");

        var cmeditor = CodeMirror(HTMLContainer, {
            lineNumbers: true,
            mode: "htmlmixed"
        });

        cmeditor.on("change", (editor) => {
            updateEditor();
        });

        CKEDITOR.replace('editor1');
        CKEDITOR.replace('editor2');
    </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();
          
            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);
            }
            });
         
        });
        $(document).ready(function() {
            $("#question_type").change(function() {
                var questionType = $(this).val();

                if (questionType === "mcq") {
                    $("#optionsContainer").show();
                    $("#paragraphContainer").hide();
                    $("#subQuestionsContainer").hide();
                } else if (questionType === "paragraph") {
                    $("#optionsContainer").hide();
                    $("#paragraphContainer").show();
                    $("#subQuestionsContainer").show();
                } else {
                    $("#optionsContainer").hide();
                    $("#paragraphContainer").hide();
                    $("#subQuestionsContainer").hide();
                }
            });
        });
    </script>
</body>

</html>