{% include "header.html"%}

<style>
    .form-select {
        border: 1px solid var(--bold-text-3) !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 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"><a href="./mock-test.html">Mock Test List</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Create Mock</li>
                        </ol>
                    </nav>
                </div>

                <div class="row mb-3">
                    <div class="col-6">
                        <h1 class="heading">Create Mock</h1>
                    </div>
                </div>
            </div>

            <div class="container page__container exam-module mock-test-list-add">
                <div class="card card-form">
                    <div class="row no-gutters">
                        <div class="col-lg-12 card-form__body">
                            <form id="add_mocktest" method="post">
                                {% csrf_token %}
                                <div class="row">
                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="mock-title">Mock title</label>
                                            <input class="form-control" type="text" name="mock_title" id="mock-title" />
                                        </div>
                                    </div>

                                    {% if mock_type != '5' and mock_type != '8' and mock_type != '3' %}
                                    <div id="s_section" class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="Mock-type">Select Section </label>
                                            <select data-toggle="select" name="section_id" class="form-control">
                                                <option value="">Select Section</option>
                                                {% for section in section_list %}
                                                <option value="{{ section.id }}">{{ section.section_name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>

                                    {% endif %}



                                    {% if mock_type == '1' or mock_type == '6' or mock_type == '7' %}
                                    <div class="col-lg-6 col-md-12 col-sm-12" id="s_sub_section">
                                        <div class="form-group">
                                            <label for="Mock-type">Select Sub Section </label>
                                            <select data-toggle="select" name="sub_section_id" class="form-control">
                                                <option value="">Select Sub Section</option>
                                                {% for sub_section in Sub_Sections_list %}
                                                <option value="{{ sub_section.id }}">{{ sub_section.sub_section_name }}
                                                </option>
                                                {% endfor %}
                                            </select>
                                        </div>

                                    </div>

                                    {% endif %}
                                    {% if mock_type == '6' or mock_type == '7' %}
                                    <div class="col-lg-6 col-md-12 col-sm-12" id="s_topic">
                                        <div class="form-group">
                                            <label for="Mock-type">Select Topic </label>
                                            <select data-toggle="select" id="topic" name="topic_id"
                                                class="form-control">
                                                {% for topic in Topics_list %}
                                                <option value="{{ topic.id }}">{{ topic.topic_name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>

                                    </div>
                                    {% endif %}

                                    {% if mock_type == '6' or mock_type == '7' %}
                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="">Exam Category</label>
                                            <select name="exam_category_ids"  data-toggle="select"
                                                class="form-control select2" multiple="multiple">
                                                {% for category in all_categories %}
                                                <option value="{{category.id}}">{{category.exam_category_name}}</option>
                                                {% endfor %}

                                            </select>
                                        </div>

                                    </div>

                                    {% endif %}

                                    {% if mock_type != '6' and mock_type != '7' %}
                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="">Exam Category</label>
                                            <select name="exam_category_id" id="exam_category" data-toggle="select"
                                                class="form-control">
                                                <option value="">Select category</option>
                                                {% for category in all_categories %}
                                                <option value="{{category.id}}">{{category.exam_category_name}}</option>
                                                {% endfor %}

                                            </select>
                                        </div>

                                    </div>
                                    {% endif %}

                                    <!-- 
                                            <div  class="col-lg-6 col-md-12 col-sm-12">
                                                <div class="form-group">
                                                    <label for="">Exam Master</label>
                                                    <select name="exam_master_id" data-toggle="select"
                                                        class="form-control">
                                                        {% for exam in all_exam %}
                                                        <option value="{{exam.id}}">{{exam.exam_name}}</option>
                                                        {% endfor %}
                                                       
                                                    </select>
                                                </div>

                                            </div> -->

                                    {% if mock_type == '5' or mock_type == '8' or mock_type == '3' or mock_type == '4' %}
                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label>Question Type</label>
                                            <select id="question_type" name="question_type" data-toggle="select" class="form-select">
                                                <option value="1" selected>Overall</option>
                                                <option value="0">Section wise</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label>Section Wise Timer</label>
                                            <select id="section_timer" name="section_wise_timer" data-toggle="select"
                                                class="form-select">
                                                <option value="select">Select</option>
                                                <option value="1">Yes</option>
                                                <option value="0">No</option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="mock_level">Switching Between Section</label>
                                            <select name="section_switching" data-toggle="select" class="form-select">
                                                <option value="select">Select</option>
                                                <option value="1">Yes</option>
                                                <option value="0">No</option>

                                            </select>
                                        </div>
                                    </div>
                                    {% endif %}




                                    <div id="section_timer_input" class="col-md-6" style="display: none;">
                                        <label class="form-label">Set Section wise Timer</label>
                                        <div id="section1">
                                         
                                        
                                        </div>

                                    </div>

                                    <div class="col-lg-6 col-md-12 col-sm-12 d-none">
                                        <div class="form-group">
                                            <label for="mock_level">Mock Level</label>
                                            <select name="mock_level" data-toggle="select" class="form-control">
                                                <option value="easy" selected>Easy</option>
                                                <option value="medium">Medium</option>
                                                <option value="hard">Hard</option>

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



                                    <input type="hidden" name="mock_type" value="{{mock_type}}" />
                                    <!-- <input type="hidden" name="series_id" value="{{series_id}}" /> -->

                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="Mock-duration">Total Questions</label>
                                            <input class="form-control" name="total_questions" type="number" />
                                        </div>
                                    </div>

                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="Mock-duration">Total Marks</label>
                                            <input class="form-control" name="total_marks" type="number" />
                                        </div>
                                    </div>




                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="Mock-duration">Mock Duration (In minutes)</label>
                                            <input class="form-control" name="mock_duration" type="number"
                                                id="Mock-duration" />
                                        </div>
                                    </div>


                                    <!-- <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="pass-percentage">Pass Percentage</label>
                                            <input class="form-control" name="pass_per" type="number"
                                                id="pass-percentage" />
                                        </div>
                                    </div> -->
                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="pass-percentage">Is Accessible</label>
                                            <select class="form-control" name="is_accessible">
                                                <option value="0">No</option>
                                                <option value="1">Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                    {% if mock_type != '6' and mock_type != '7' %}
                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="Instructions-page">Test Date</label>
                                            <input class="form-control" name="test_date" type="date" />
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="Instructions-page">Test Time</label>
                                            <input class="form-control" name="test_time" type="time" />
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="negative-marks">Negative Marks</label>
                                            <select id="Instructions-page" name="negative_marks" data-toggle="select"
                                                class="form-control">
                                                <option value="Yes">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="pass-percentage">Calculator Allowed</label>
                                            <select class="form-control" name="calculator">
                                                <option value="0">No</option>
                                                <option value="1">Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                    {% endif %}
                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="Instructions-page">Status</label>
                                            <select id="Instructions-page" name="status" data-toggle="select"
                                                class="form-control">
                                                <option value="Active">Active</option>
                                                <option value="Inactive">Inactive</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-12 mt-4 mb-4">
                                        <div id="msg"></div>
                                    </div>
                                    <div class="col-12">


                                        <div class="form-group text-center">
                                            <button class="" type="submit">Add </button>
                                        </div>
                                    </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_mocktest').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_mocktest" %}',
            type: 'POST',
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function (response) {
                if (response.status == 'success') {

                    $('#mock-test-list-add').modal('hide');
                    setTimeout(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'Mock Test Added successfully.',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        });
                    }, 2000);
                    setTimeout(function () {
                        location.reload();
                    }, 3000);


                    // $('#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>
    $(document).ready(function () {
        $('#Mock-typeSelect').change(function () {
            if ($(this).val() === 'Area_Test') {
                $('#s_section').show();
                $('#s_sub_section').show();
                $('#s_topic').show();
            }
            else if ($(this).val() === 'Section_Test') {
                $('#s_section').show();
                $('#s_sub_section').show();
                $('#s_topic').hide();
            }
            else {
                $('#s_section').hide();
                $('#s_sub_section').hide();
                $('#s_topic').hide();
            }

        });
    });


    $("#exam_category").change(function () {
        var exam_id = $(this).find("option:selected").val();
        console.log(exam_id);

        // var category_level = $(this).attr("data-id");
        var html = '';
        {% if mock_type == '5' or mock_type == '8' %}
        if (exam_id != "") {
            $("#section1").empty();
            $.ajax({
                url: '{% url "section_selct1" %}',
                method: "GET",
                data: {
                    exam_id: exam_id,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function (response) {
                    //alert(response);
                    $('#section1').html(response);

                },
            });
        }
        {% endif %}
    });


    $("#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);

                },
            });
        }
    });
</script>

<script>
    $(document).ready(function () {
        $('#section_timer').on('change', function () {
            if ($(this).val() === '1') {
                $('#section_timer_input').show(); // Show the timer input section
            } else {
                $('#section_timer_input').hide(); // Hide the timer input section
            }
        });
    });
</script>

<script>
    $('.select2').select2({ placeholder: "Select here", maximumSelectionSize: 100 });
</script>




</html>