{% 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 %}
                                <input type="hidden" name="mock_id" value="{{ mock.id|default:'' }}">
                                <input type="hidden" name="mock_type" value="{{ mock.mock_type|default:'' }}">

                                <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" value="{{ mock.mock_title|default:'' }}" required>
                                        </div>
                                    </div>

                                    {% if mock.mock_type != 5 and mock.mock_type != 8 and mock.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 }}" {% if section.id == mock.section_id %}selected{% endif %}>
                {{ section.section_name }}
            </option>
            {% endfor %}
        </select>
    </div>
</div>
{% endif %}

{% if mock.mock_type == 1 or mock.mock_type == 6 or mock.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 }}" {% if sub_section.id == mock.sub_section_id %}selected{% endif %}>
                {{ sub_section.sub_section_name }}
            </option>
            {% endfor %}
        </select>
    </div>
</div>
{% endif %}

{% if mock.mock_type == 6 or mock.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 }}" {% if topic.id == mock.topic_id %}selected{% endif %}>
                {{ topic.topic_name }}
            </option>
            {% endfor %}
        </select>
    </div>
</div>
{% endif %}

{% if mock.mock_type == 6 or mock.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.mock_type != 6 and mock.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 }}" {% if category.id == mock.examcategory_id %}selected{% endif %}>
                {{ category.exam_category_name }}
            </option>
            {% endfor %}
        </select>
    </div>
</div>
{% endif %}

{% if mock.mock_type == 5 or mock.mock_type == 8 or mock.mock_type == 3 or mock.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" {% if mock.question_type == 1 %}selected{% endif %}>Overall</option>
            <option value="0" {% if mock.question_type == 0 %}selected{% endif %}>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" {% if mock.section_wise_timer == 1 %}selected{% endif %}>Yes</option>
            <option value="0" {% if mock.section_wise_timer == 0 %}selected{% endif %}>No</option>
        </select>
    </div>
</div>
<div id="section_timer_input" class="col-md-6" {% if mock.section_wise_timer == 0 %}style="display: none;" {% endif %}>
    <label class="form-label">Set Section wise Timer</label>
    <div id="section1">
        <div id="section_timer_input" class="col-md-12">
            <label class="form-label">Set Section-wise Timer</label>
            {% if mock_sections %}
                {% for s in mock_sections %}
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th>Section ID</th>
                            <th>Section Name</th>
                            <th>Section Duration (in minutes)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <!-- Hidden input for section_id -->
                            <td>
                                <input type="hidden" name="section_ids[]" value="{{ s.section_id }}">
                                {{ s.section_id }}
                            </td>
                            <!-- Display section name -->
                            <td>
                                {{ s.section.section_name }}
                            </td>
                            <!-- Editable input for section duration -->
                            <td>
                                <input type="number" name="section_durations[]" value="{{ s.duration }}" class="form-control" placeholder="Enter time in minutes">
                            </td>
                        </tr>
                    </tbody>
                </table>
                {% endfor %}
            {% else %}
                <p>No sections available to set timers.</p>
            {% endif %}
        </div>
        
    
    </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" {% if mock.section_switching == 1 %}selected{% endif %}>Yes</option>
            <option value="0" {% if mock.section_switching == 0 %}selected{% endif %}>No</option>
        </select>
    </div>
</div>
{% endif %}

<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" {% if mock.mock_level == 'easy' %}selected{% endif %}>Easy</option>
            <option value="medium" {% if mock.mock_level == 'medium' %}selected{% endif %}>Medium</option>
            <option value="hard" {% if mock.mock_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="Mock-duration">Total Questions</label>
        <input class="form-control" name="total_questions" type="number" value="{{ mock.total_questions }}" />
    </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" value="{{ mock.total_marks }}" />
    </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" value="{{ mock.mock_duration }}" />
    </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" {% if mock.is_accessible == '0' %}selected{% endif %}>No</option>
            <option value="1" {% if mock.is_accessible == 1 %}selected{% endif %}>Yes</option>
        </select>
    </div>
</div>

{% if mock.mock_type != 6 and mock.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" value="{{ mock.test_date|date:'Y-m-d' }}" />
    </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" value="{{ mock.test_time|time:'H:i' }}" />
    </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" {% if mock.negative_marks == 'Yes' %}selected{% endif %}>Yes</option>
            <option value="No" {% if mock.negative_marks == 'No' %}selected{% endif %}>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" {% if mock.negative_marks == 0 %}selected{% endif %}>No</option>
                                                <option value="1" {% if mock.negative_marks == 1 %}selected{% endif %}>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" {% if mock.status == 'Active' %}selected{% endif %}>Active</option>
            <option value="Inactive" {% if mock.status == 'Inactive' %}selected{% endif %}>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 "edit_mock" %}',
            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 Updated 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.mock_type == 5 or mock.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>