{%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-fluid 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 active" aria-current="page">All Mock List</li>
                        </ol>
                    </nav>
                </div>

                <div class="row mb-3">
                    <div class="col-6">
                        <h1 class="heading">All Mock List</h1>
                    </div>
                    <div class="col-6">
                        <div class="d-flex justify-content-end">
                            <button type="button" class="add-btn"><a href="/admin/add-mock?type={{mock_type}}">Add Mock
                                    Test</a></button>
                        </div>
                    </div>
                </div>

                <section class="filter-section">
                    <form method="GET">
                       
                        <input type="hidden" name="type" value="{{mock_type}}" />

                        <div class="row">
                            <div class="col-md-10">
        
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-2">
                                            <label for="" class="form-label">Mock Title</label>
                                            <input type="text"  name="name" {% if name != None %} value="{{name}}"{% else %} value=""{% endif %} class="form-control" placeholder="Serach by mock title....">
        
                                        </div>
                                    </div>
        
                                    
        
                                    
                                    <div class="col-md-4">
                                        <div class="mb-2">
                                            <label for="" class="form-label">Section</label>
                                            <select name="section1" id="" class="form-select">
                                                <option value="" selected>Select</option>
                                                {% for section in section_list %}
                                                <option value="{{section.id}}" {% if section1 == section.id|stringformat:"i" %} selected {% endif %}> {{section.section_name}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
        
        
                                    </div>
        
                                    {% if mock_type != '2' %}
        
                                    <div class="col-md-4">
                                        <div class="mb-2">
                                            <label for="" class="form-label">Sub Section</label>
                                            <select name="sub1" id="" class="form-select">
                                                <option value="" selected>Select</option>
                                                {% for sub in Sub_Sections_list %}
                                                <option value="{{sub.id}}"  {% if sub1 == sub.id|stringformat:"i" %} selected {% endif %}> {{sub.sub_section_name}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
        
                                    {% endif %}
        
                                    <div class="col-md-4">
                                        <div class="mb-2">
                                            <label for="" class="form-label">Exam Category</label>
                                            <select name="cat1" id="" class="form-select">
                                                <option value="" selected>Select</option>
                                                {% for category in all_categories %}
                                                <option value="{{category.id}}" {% if cat1 == category.id|stringformat:"i" %} selected {% endif %}> {{category.exam_category_name}}</option>
                                                {% endfor %}
                                            </select>
        
                                        </div>
                                    </div>
        
        
                                    <div class="col-md-4">
                                        <div class="mb-2">
                                            <label for="" class="form-label">Mock Level</label>
                                            <select name="mock_level" data-toggle="select" class="form-select">
                                                <option value="" selected>Select</option>
                                                <option value="easy" {% if mock_level == 'easy' %} selected {% endif %}>Easy</option>
                                                <option value="medium" {% if mock_level == 'medium' %} selected {% endif %}>Medium</option>
                                                <option value="hard" {% if mock_level == 'hard' %} selected {% endif %}>Hard</option>
        
                                            </select>
                                        </div>
        
                                    </div>
        
                                    <div class="col-md-4">
                                        <div class="mb-2">
                                            <label for="" class="form-label">Is Accessible</label>
                                            <select class="form-select" name="is_accessible">
                                                <option value="" selected>Select</option>
                                                <option value="0" {% if is_accessible == '0' %} selected {% endif %}>No</option>
                                                <option value="1" {% if is_accessible == '1' %} selected {% endif %}>Yes</option>
                                            </select>
                                        </div>
        
                                    </div>
        
                                    {% if mock_type == '5' or mock_type == '3' or mock_type == '4' %}
        
                                    <div class="col-md-4">
                                        <div class="mb-2">
                                            <label for="" class="form-label">Section Timer</label>
                                            <select id="section_timer" name="section_wise_timer" data-toggle="select"
                                                class="form-select">
                                                <option value="" selected>Select</option>
        
                                                <option value="1" {% if section_wise_timer == '1' %} selected {% endif %}>Yes</option>
                                                <option value="0" {% if section_wise_timer == '0' %} selected {% endif %}>No</option>
        
                                            </select>
                                        </div>
        
                                    </div>
        
                                    <div class="col-md-4">
                                        <div class="mb-2">
                                            <label for="" class="form-label">Switching Section</label>
                                            <select name="section_switching" data-toggle="select" class="form-select">
                                                <option value="" selected>Select</option>
        
                                                <option value="1" {% if section_switching == '1' %} selected {% endif %}>Yes</option>
                                                <option value="0" {% if section_switching == '0' %} selected {% endif %}>No</option>
        
                                            </select>
                                        </div>
        
                                    </div>
        
                                    {% endif %}
        
                                    <div class="col-md-4">
                                        <div class="mb-2">
                                            <label for="" class="form-label">Calculator Allowed</label>
                                            <select class="form-select" name="calculator">
                                                <option value="" selected>Select</option>
                                                <option value="0" {% if calculator == '0' %} selected {% endif %}>No</option>
                                                <option value="1" {% if calculator == '1' %} selected {% endif %}>Yes</option>
                                            </select>
                                        </div>
        
                                    </div>
                                </div>
        
                            </div>
                            <div class="col-md-2 d-flex  align-items-center justify-content-center">
        
                                <div>
                                    <button class="btn add-btn" type="submit">Filter</button>
                                    <a class="btn btn-refresh " href=""><i class="fas fa-sync-alt"></i></a>
                                </div>
        
                            </div>
                        </div>
                    </form>
                </section>

               


            </div>



            <div class="container-fluid page__container exam-module">
                <div class="card card-form">
                    <div class="row no-gutters">

                        <div class="col-lg-12 card-form__body">

                            <div class="table-responsive border-bottom" data-toggle="lists"
                                data-lists-values='["js-lists-values-employee-name"]'>

                                <table class="table mb-0 thead-border-top-0">
                                   <thead class="table-heading">
                                    <tr>
                                        <th class="table-head">Sr.No.</th>
                                        <th class="table-head">Mock Name</th>
                                        <th class="table-head">Total Questions</th>
                                        <th class="table-head">Total Marks</th>
                                        <th class="table-head">Duration</th>
                                        <th class="table-head">Status</th>
                                        <th class="table-head">Promotional WhatsApp</th>
                                        <th class="table-head">Last Modified</th>
                                        <th class="table-head">Share Link</th>   <!-- ✅ NEW -->
                                        <th class="table-head" colspan="2">Action</th>
                                    </tr>
                                </thead>

                                    <tbody class="list" id="staff">
                                        {% for mock_test in mock_test_list %}
                                        <tr class="">
                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <span class="js-lists-values-exam-name exam-name">
                                                            {{forloop.counter}}</span>
                                                    </div>
                                                </div>
                                            </td>

                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <span
                                                            class="js-lists-values-exam-name exam-name">{{mock_test.mock_title}}</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <a href="/admin/add_mock_questions?test_id={{mock_test.id}}">
                                                    <div class="media align-items-center">
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span
                                                                    class="js-lists-values-exam-name exam-name text-primary">
                                                                    {{mock_test.total_questions}}</span>
                                                            </div>
                                                        </div>
                                                </a>
                                            </td>
                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <span class="js-lists-values-exam-name exam-name">
                                                            {{mock_test.total_marks}}</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <span class="js-lists-values-exam-name exam-name">
                                                            {{mock_test.mock_duration}}</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <!-- <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">
                                                                    {{mock_test.pass_per}}</span>
                                                            </div>
                                                        </div>
                                                    </td> -->
                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <span class="js-lists-values-exam-name exam-name">
                                                            {{mock_test.status}}</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                {% if mock_test.send_promotional_message %}
                                                    <span class="badge badge-success">Yes</span>
                                                {% else %}
                                                    <span class="badge badge-secondary">No</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <span class="js-lists-values-exam-name exam-name">
                                                            {{mock_test.created_at|date:"d/m/Y"}}</span>
                                                    </div>
                                                </div>
                                            </td>

        <td>
            <div class="media align-items-center">
                <div class="media-body">
                    <button
                        type="button"
                        class="btn btn-sm btn-outline-primary copy-share-link"
                        data-link="https://student.crackeverytest.com/student/exam?id={{mock_test.id}}">
                        Copy Link
                    </button>
                </div>
            </div>
        </td>

                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <a href="/admin/question_bank?test_id={{mock_test.id}}"
                                                            class="add-question-btn">
                                                            <button class="btn btn primary">Add Question</button>
                                                        </a>
                                                    </div>
                                                </div>
                                            </td>



                                            <td>
                                                <a href="#modal-delete" class="badge badge-danger delete-button"
                                                    data-toggle="modal" data-id="{{mock_test.id}}"><i
                                                        class="fas fa-trash delete"></i></a>
                                                        
                                                <!-- <a href="#mock-test-list-edit"
                                                    class="badge badge-warning edit edit-mock"
                                                    data-id="{{mock_test.id}}"
                                                    data-category_id="{{mock_test.examcategory_id}}"
                                                    data-sectionid="{{mock_test.section_id}}"
                                                    data-sub_sectionid="{{mock_test.sub_section_id}}"
                                                    data-mocktitle="{{mock_test.mock_title}}"
                                                    data-mocktype="{{mock_test.mock_type}}"
                                                    data-questions="{{mock_test.total_questions}}"
                                                    data-marks="{{mock_test.total_marks}}"
                                                    data-mockduration="{{mock_test.mock_duration}}"
                                                    data-date="{{mock_test.test_date|date:'Y-m-d'}}"
                                                    data-time="{{mock_test.test_time}}"
                                                    data-accessible="{{mock_test.is_accessible}}"
                                                    data-negativemarks="{{mock_test.negative_marks}}"
                                                    data-status="{{mock_test.status}}" data-toggle="modal"><i
                                                        class="fas fa-edit"></i></a> -->
                                                        <a href="/admin/edit_mock_test/{{mock_test.id}}"
                                                            class="badge badge-warning"><i
                                                            class="fas fa-edit"></i></a>
                                                <a href="/admin/mock-test-result?test_id={{mock_test.id}}"
                                                    class="btn btn-warning">
                                                    <button class="btn btn primary">View Results</button>
                                            </td>
                                        </tr>
                                        {% endfor %}


                                    </tbody>
                                </table>
                            </div>

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

                <div class="col-lg-12 p-0">
                    <ul class="pagination m-0">
                        {% if mock_test_list.has_previous %}
                        <li class="page-item ">
                            <a class="page-link"
                                href="?page={{ mock_test_list.previous_page_number }}&type={{mock_type}}"
                                aria-label="Previous">
                                <span aria-hidden="true" class="material-icons">chevron_left</span>
                                <span>Prev</span>
                            </a>
                        </li>
                        {% endif %}

                        <li class="page-item active ">
                            <a class="page-link" href="?page={{ mock_test_list.number }}&type={{mock_type}}"
                                aria-label="1">
                                <span>{{ mock_test_list.number }}</span>
                            </a>
                        </li>

                        {% if mock_test_list.has_next %}

                        <li class="page-item">
                            <a class="page-link" href="?page={{ mock_test_list.next_page_number }}&type={{mock_type}}"
                                aria-label="Next">
                                <span>Next</span>
                                <span aria-hidden="true" class="material-icons">chevron_right</span>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </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>
    $(document).on('click', '.copy-share-link', function () {
    var link = $(this).data('link');
    var $btn = $(this);

    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(link).then(function () {
        var oldText = $btn.text();
        $btn.text('Copied!');
        setTimeout(function () {
          $btn.text(oldText);
        }, 1500);
      }).catch(function () {
        fallbackCopy(link, $btn);
      });
    } else {
      fallbackCopy(link, $btn);
    }
  });

  function fallbackCopy(text, $btn) {
    var tempInput = document.createElement('input');
    tempInput.value = text;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand('copy');
    document.body.removeChild(tempInput);

    var oldText = $btn.text();
    $btn.text('Copied!');
    setTimeout(function () {
      $btn.text(oldText);
    }, 1500);
  }
    (function () {
        'use strict';
        // ENABLE sidebar menu tabs
        $('#sidebar-mini-tabs [data-toggle="tab"]').on('click', function (e) {
            e.preventDefault()
            $(this).tab('show')
        })
    })()
</script>


<!-- delete modal  -->
<div id="modal-delete" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content bg-danger">
            <div class="modal-body text-center p-4">
                <form method="post" id="delete_form">
                    {% csrf_token %}
                    <i class="material-icons icon-40pt text-white mb-2">report_problem</i>
                    <h4 class="text-white">Ohhh Snap!</h4>
                    <p class="text-white mt-3 text-capitalize">are you sure you want to delete?</p>
                    <input type="hidden" name="id" id="delete_id" />
                    <button type="submit" class="btn btn-light my-2 rounded-0 ">Delete</button>
                </form>
            </div> <!-- // END .modal-body -->
        </div> <!-- // END .modal-content -->
    </div> <!-- // END .modal-dialog -->
</div> <!-- // END .modal -->
<!-- delete modal  -->


<!-- edit mock test list modal  -->
<div id="mock-test-list-edit" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="px-3">
                    <form id="edit_mock_form" method="post" class="modal-form">
                        {% csrf_token %}
                        <h4 class="modal-heading">Edit Mock Test List</h4>
                        <div class="form-group">
                            <label for="mock-title">Mock title</label>
                            <input class="form-control" type="text" name="mock_title" id="mock-title"
                                placeholder="Enter Mock title" />
                        </div>

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


                        {% if mock_type == '1' %}
                        <div class="">
                            <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 != '1' %}
                        <div class="">
                            <div class="form-group">
                                <label for="">Exam Category</label>
                                <select name="exam_category_id" id="exam_category_id" data-toggle="select"
                                    class="form-control">
                                    {% for category in all_categories %}
                                    <option value="{{category.id}}">{{category.exam_category_name}}</option>
                                    {% endfor %}

                                </select>
                            </div>

                        </div>
                        {% endif %}


                        <div class="" id="edit_section_id">
                            <div class="form-group">
                                <label for="Mock-type">Select Section </label>
                                <select data-toggle="select" name="section_id" class="form-control" id="section">
                                    <option value="">Select Section</option>
                                    {% for section in section_list %}
                                    <option value="{{ section.id }}">{{ section.section_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <div class="" id="edit_subsection_id">
                            <div class="form-group">
                                <label for="Mock-type">Select Sub Section </label>
                                <select data-toggle="select" name="sub_section_id" class="form-control"
                                    id="sub-section">
                                    <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>
                        <!-- 
                              <div class="" >
                                                <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>  -->

                        {% if mock_type == '5' or mock_type == '3' or mock_type == '4' %}
                        <div class="">
                            <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="">
                            <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="yes">Yes</option>
                                    <option value="no">No</option>

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


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


                            </div>

                        </div>





                        <div class="form-group">
                            <label for="Mock-duration">Total Questions</label>
                            <input class="form-control" id="t_question" name="total_questions" type="number" />
                        </div>



                        <div class="form-group">
                            <label for="Mock-duration">Total Marks</label>
                            <input class="form-control" id="t_marks" name="total_marks" type="number" />
                        </div>

                        <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"
                                placeholder="Exam" />
                        </div>
                        <div class="form-group">
                            <label for="pass-percentage">Is Accessible</label>
                            <!-- <input class="form-control" name="is_accessible" type="number"  id="accessible"
                                     placeholder="Exam" /> -->
                            <div class="form-group">
                                <select class="form-control" id="accessible" name="is_accessible">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="Instructions-page">Test Date</label>
                            <input class="form-control" name="test_date" type="date" id="testdate"
                                placeholder="Select Date" />
                        </div>

                        <div class="form-group">
                            <label for="Instructions-page">Test Time</label>
                            <input class="form-control" name="test_time" type="time" id="testtime"
                                placeholder="Select time" />
                        </div>

                        <!-- <div class="form-group">
                                <label for="pass-percentage">Pass Percentage</label>
                                <input class="form-control" name="pass_per" type="text" id="pass-percentage" 
                                    placeholder="Passing Percentage" />
                            </div> -->

                        <div class="form-group">
                            <label for="negative-marks">Negative Marks</label>
                            <!-- <input class="form-control" name="negative_marks" type="number" id="negative-marks" 
                                    placeholder="Negative Marks" /> -->
                            <select id="negative-marks" name="negative_marks" data-toggle="select" class="form-control">
                                <option value="Yes">Yes</option>
                                <option value="No">No</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="pass-percentage">Calculator Allowed ?</label>
                            <!-- <input class="form-control" name="is_accessible" type="number"  id="accessible"
                                     placeholder="Exam" /> -->
                            <div class="form-group">
                                <select class="form-control" id="" name="calculator">
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="Instructions-page">Status : </label>
                            <select id="status" name="status" data-toggle="select" class="form-control">
                                <option value="Active">Active</option>
                                <option value="Inactive">Inactive</option>
                            </select>
                        </div>
                        <div class="col-12 mt-4 mb-4">
                            <div id="msg"></div>
                        </div>

                        <input type="hidden" id="mock-id" name="mock_id">
                        <div class="form-group text-center">
                            <button class="btn modal-btn" type="submit">Save </button>
                        </div>
                    </form>
                </div>
            </div> <!-- // END .modal-body -->
        </div> <!-- // END .modal-content -->
    </div> <!-- // END .modal-dialog -->
</div> <!-- // END .modal -->


</body>
<script>
    // set dynamic value in modal on button click
    $('.edit-mock').click(function () {
        //alert();

        var id = $(this).data('id');
        $('#mock-id').val(id);
        $('#mock-title').val($(this).data('mocktitle'));
        $('#Mock-type').val($(this).data('mocktype'));
        if ($(this).data('mocktype') == 5 || $(this).data('mocktype') == 4 || $(this).data('mocktype') == 3) {
            $('#edit_section_id').addClass('d-none');
            $('#edit_subsection_id').addClass('d-none');
        }
        else if ($(this).data('mocktype') == 2) {
            // $('#edit_section_id').addClass('d-none');
            $('#section').val($(this).data('sectionid'))
            $('#edit_subsection_id').addClass('d-none');
        }
        else {
            $('#section').val($(this).data('sectionid'))
            $('#sub-section').val($(this).data('sub_sectionid'))
        }
        $('#exam_category_id').val($(this).data('category_id'));
        $('#t_question').val($(this).data('questions'));
        $('#t_marks').val($(this).data('marks'));
        $('#Mock-duration').val($(this).data('mockduration'));
        $('#pass-percentage').val($(this).data('passper'));
        $('#accessible').val($(this).data('accessible'));
        $('#testdate').val($(this).data('date'));
        $('#testtime').val($(this).data('time'));
        $('#negative-marks').val($(this).data('negativemarks'));
        $('#status').val($(this).data('status'));
        $('#mock-level').val($(this).data('mocklevel'));


        //$('img').attr('src')=$(this).data('image');
    })

    // edit exam category event
    $('#edit_mock_form').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-edit').modal('hide');
                    setTimeout(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'Test Updated Successfully.',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        });
                    }, 1000);
                    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>
    $('.delete-button').click(function () {
        var id = $(this).data('id');
        $('#delete_id').val(id);
    })
    //    var delete_id = $('#category_id').val(id);
    //debugger
    // var category_id = $(this).val();
    $('#delete_form').submit(function (event) {
        // Prevent the default form submission behavior
        //alert();
        event.preventDefault();

        var formData = new FormData($(this)[0]);

        // Send the Ajax request
        $.ajax({
            url: '{% url "delete_mock" %}',
            type: 'POST',
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function (response) {
                if (response.status == 'success') {
                    $('#modal-delete').modal('hide');
                    setTimeout(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'Test deleted Successfully.',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        });
                    }, 1000);
                    setTimeout(function () {
                        location.reload();
                    }, 3000);
                    // $('#msg').html('<div class="text-success">'+response.msg+'</div>');
                    // $('#modal-delete').modal('toggle');
                }
                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 () {

        $(document).on('keyup', '#search', function () {
            //alert();
            var search = $('#search').val();
            $.ajax({
                url: '{% url "search_mock" %}',
                method: "GET",
                data: {
                    search: search,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function (data) {
                    $('#staff').html(data);
                }
            })
        });

    });
</script>

<script>
    $("#exam_category_id").change(function () {
        var exam_id = $(this).find("option:selected").val();
        // console.log(exam_id);

        // var category_level = $(this).attr("data-id");
        var html = '';
        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);

                },
            });
        }
    });

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