{% include "header.html" %}
{% load static %}
{% include "sidebar.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="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-6 col-sm-12">
                                    <input type="hidden" name="course_id" value="{{course_id}}">
                                    <div class="form-group">
                                        <label for="exam_type">Exam Category </label>
                                        <select data-toggle="select" id="exam_category" name="exam_type"
                                            class="form-control" required>
                                            {% 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-6 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" required>
                                            {% 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-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="exam_master">Select Batch</label>
                                        <select data-toggle="select" id="batch_id" name="batch_id"
                                            class="form-control" required>
                                            {% for batch in batches %}
                                            {% if course.batch_id == batch.id %}
                                            <option value="{{ batch.id }}" selected>{{ batch.batch_name }}</option>
                                            {% else %}
                                            <option value="{{ batch.id }}">{{ batch.batch_name }}</option>
                                            {% endif %}
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 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-12 col-md-12 col-sm-12">
                                    <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:'' }}"
                                            required />
                                    </div>
                                </div>

                      

                                <!-- <div class="col-lg-12 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="mock-title">Course Subtitle</label>

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

                                </div>

                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="Mock-type">Features </label>
                                        <input type="hidden" id="features" name="editor2">
                                        <textarea id="editor2"
                                            required>{{ course.features|default:'' }}</textarea>
                                        <!-- <input type="text" name="description" class="form-control" value="{{ course.description|default:'' }}"> -->
                                    </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"
                                            required>{{ 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-6 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-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="status">Status </label>
                                        <select name="status" data-toggle="select" class="form-control" required>

                                            <option value="Active">Active</option>
                                            <option value="Inactive">Inactive</option>

                                        </select>
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6 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:'' }}" required>
                                    </div>

                                </div>

                                <div class="col-lg-6 col-md-6 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:'' }}" required>
                                    </div>
                                </div>


                                <div class="col-lg-6 col-md-6 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-6 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:'' }}" required />
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6 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:'' }}" required />
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 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:'' }}" required />
                                    </div>
                                </div>


                                <div class="col-12 mt-4">
                                    <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>
   

        <!-- // END drawer-layout__content -->

        <!-- drawer -->
        {%include "sidebar.html"%}
        <!-- // END drawer -->
    </div>
    <!-- // END drawer-layout -->
</div>
</div>
<!-- // END header-layout__content -->




{%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();
        var features = $("#editor2").val();
        var subtitle = $("#editor3").val();
        document.getElementById("description").value = val;
        document.getElementById("features").value = features;
        document.getElementById("subtitle").value = subtitle;
        // 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') {
                    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');
    CKEDITOR.replace('editor3');
    CKEDITOR.replace('editor1', {
        on: {
            instanceReady: function (evt) {
                var editor = evt.editor;
                var editorValue = editor.getData();
                $('#editor1').val(editorValue);
            }
        }


    });

    CKEDITOR.replace('editor2', {
        on: {
            instanceReady: function (evt) {
                var editor = evt.editor;
                var editorValue = editor.getData();
                $('#editor2').val(editorValue);
            }
        }


    });

    CKEDITOR.replace('editor3', {
        on: {
            instanceReady: function (evt) {
                var editor = evt.editor;
                var editorValue = editor.getData();
                $('#editor3').val(editorValue);
            }
        }


    });
</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');
    CKEDITOR.replace('editor3');
</script>

</html>