{% include "header.html" %}
{% load static %}
<!-- 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="container page__container exam-module mock-test-list-add">
            <div class="card card-form">
                <div class="row no-gutters">
                    <div class="d-flex justify-content-center">
                            <h1 class="text-center">{{form_title}}</h1>  
                    </div>
                    <div class="col-lg-12 mt-4 card-form__body">
                        <form id="add_course_form" method="post">
                            {% csrf_token %}
                            <div class="row">

                                <div class="col-lg-6 col-md-12 col-sm-12">

                                    <input class="form-control" type="hidden" name="course_id" required=""
                                    placeholder="Enter course name" value="{{ course.id|default:'' }}"/>

                                    <div class="form-group">
                                        <label for="mock-title">Course Name</label>
                                       
                                            <input class="form-control" type="text" name="course_name" required=""
                                                placeholder="Enter course name" value="{{ course.course_name|default:'' }}"/>
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="image">Image</label>
                                        <input class="form-control" type="file" id="image" name="image" />
                                    </div>

                                </div>


                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="exam_type">Exam Category </label>
                                        <select data-toggle="select" id="exam_category"  name="exam_type"
                                            class="form-control">
                                            {% for category in all_categories %}
                                            {% if course.exam_category.id == category.id %}
                                            <option value="{{ category.id }}" selected>{{ category.exam_category_name }}</option>
                                            {% else %}
                                            <option value="{{ category.id }}">{{ category.exam_category_name }}</option>
                                            {% endif %}
                                            {% endfor %}
                                        </select>
                                    </div>

                                </div>
                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="exam_master">Exam Mater </label>
                                        <select data-toggle="select" id="exam_master" name="exam_master"
                                            class="form-control">
                                            {% for exam in all_exams %}
                                            {% if course.exam_master.id == exam.id %}
                                            <option value="{{ exam.id }}" selected>{{ exam.exam_name }}</option>
                                            {% else %}
                                            <option value="{{ exam.id }}">{{ exam.exam_name }}</option>
                                            {% endif %}
                                            {% endfor %}
                                        </select>
                                    </div>

                                </div>
                               
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="Mock-type">Description </label>
                                        <input type="hidden" id="description" name="editor1">
                                        <textarea id="editor1" value="{{ course.description|default:'' }}"></textarea>
                                        <!-- <input type="text" name="description" class="form-control" value="{{ course.description|default:'' }}"> -->
                                    </div>

                                </div>

                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="Mock-type">Duratation </label>
                                        <input type="text" name="duration" class="form-control"  value="{{ course.duration|default:'' }}">
                                    </div>

                                </div>

                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="area_price">Area Price</label>
                                        <input type="number" name="area_price" class="form-control" value="{{ course.area_price|default:'' }}">
                                    </div>

                                </div>

                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="sectional_price">Sectional Price </label>
                                        <input type="number" name="sectional_price" class="form-control" value="{{ course.sectional_price|default:'' }}">
                                    </div>
                                </div>


                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="Mock-duration"> Mini Mock Price</label>
                                        <input class="form-control" name="minimock_price" type="number" value="{{ course.minimock_price|default:'' }}" />
                                    </div>
                                </div>


                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="fullmock_price">Full Mock Price</label>
                                        <input class="form-control" name="fullmock_price" type="number"  value="{{ course.fullmock_price|default:'' }}"  />
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="lectures_price">Lecture Price</label>
                                        <input class="form-control" name="lectures_price" type="number"  value="{{ course.lectures_price|default:'' }}" 
                                         />
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="full_price">Full Price</label>
                                        <input class="form-control" name="full_price" type="number" value="{{ course.full_price|default:'' }}"
                                           />
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="status">Status </label>
                                        <select name="status" data-toggle="select" class="form-control">
                                            
                                            <option selected="">Active</option>
                                            <option selected="">Inactive</option>

                                        </select>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div id="msg"></div>
                                </div>


                            
                                <div class="form-group text-center d-flex justify-content-center">
                                    <button class="" type="submit">{{submit_button}} </button>
                                </div>
                            </div>
                        </form>
                    </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>

    // Listen for the form submission event
    $('#add_course_form').submit(function(event) {
      // Prevent the default form submission behavior
      event.preventDefault();
    //   var s = document.getElementById("editor1").value;

      var val = $("#editor1").val();
      document.getElementById("description").value= val;
      console.log(val);
    // alert()
      var formData = new FormData($(this)[0]);
    
    // Send the Ajax request
    $.ajax({
      type: 'POST',
      url: '{% url "course_create" %}',
      data: formData,
      processData: false,
      dataType: 'json',
      contentType: false,
      
      success: function(response) {
        if(response.status=='success'){
            // $('#exam-category-modal').modal('hide');
            // setTimeout(function () {
            //     Swal.fire({
            //         icon: 'success',
            //         title: 'Success!',
            //         text: 'course created successfully.',
            //         confirmButtonColor: '#3085d6',
            //         confirmButtonText: 'OK'
            //     });
            // }, 1000);
            // setTimeout(function () {
            //     location.reload();
            // }, 2000);
            // $('#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>
    <script>
        $("#exam_category").change(function() {
        var exam_category_id = $(this).find("option:selected").val();
        
       // var category_level = $(this).attr("data-id");
        var html = '';
        if (exam_category_id != "") {
            $("#exam_master").empty();
            $.ajax({
                url: '{% url "select_exam_category" %}',
                method: "GET",
                data: {
                    exam_category_id: exam_category_id,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function(response) {
                    // alert(response);
                    $('#exam_master').html(response);
                
                },
            });
        }
    });
    </script>


<script
src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/6/tinymce.min.js"></script>

<script src="https://cdn.ckeditor.com/4.21.0/standard/ckeditor.js"></script>
<script>
  CKEDITOR.replace( 'editor1' );
  CKEDITOR.replace( 'editor2' );
</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>

</html>