{%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 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">Test Series</li>
                        </ol>
                    </nav>
                </div>

                <div class="row mb-3">
                    <div class="col-6">
                        <h1 class="heading">{{title}}</h1>
                    </div>
                    <div class="col-6">
                        <div class="d-flex justify-content-end">
                            <button type="button" class="add-btn" data-toggle="modal"
                                data-target="#add_mock_test_series_modal">Add Test</button>
                        </div>
                    </div>
                </div>


                <div class="row mb-3 mt-4">
                    <!-- <div class="col-lg-6 col-md-12 col-sm-12">
                                <input type="number" placeholder="10"> <span class="items-pages">Items/Pages</span>
                            </div> -->
                    <!-- <div class="col-lg-12 col-md-12 col-sm-12">
                                <div class="d-flex justify-content-end">
                                    <input type="serach" placeholder="Serach....">
                                </div>
                            </div> -->
                </div>


            </div>



            <div class="container 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">Title</th>

                                            <!-- <th class="table-head">Image</th> -->
                                            <th class="table-head">Exam Category</th>
                                            <th class="table-head">Exam Master</th>
                                            <th class="table-head">Total Tests</th>
                                            <th class="table-head">Release Date</th>
                                            <th class="table-head">Status</th>
                                            <th class="table-head"> Updated On</th>
                                            <th class="table-head">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody class="list" id="staff">
                                        {% for mock_test in all_mocks %}
                                        <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">
                                                        <a href="/admin/mock-test-list?series_id={{mock_test.id}}&type={{mock_test.series_type}}"
                                                            class="js-lists-values-exam-name exam-name">{{mock_test.title}}</a>
                                                    </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.exam_category.exam_category_name}}</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.exam_master.exam_name}}</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.total_tests}}</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.release_date}}</span>
                                                    </div>
                                                </div>
                                            </td>

                                            <td>
                                                {% if mock_test.status == "Active" %}
                                                <span
                                                    class="badge badge-success status active">{{mock_test.status}}</span>
                                                {% else %}
                                                <span
                                                    class="badge badge-warning text-white status inactive">{{mock_test.status}}</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}}</span>
                                                    </div>
                                                </div>
                                            </td>

                                            <td span="2">
                                                <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="#edit_mock_test_series_modal"
                                                    class="badge badge-warning edit edit-mock"
                                                    data-id="{{mock_test.id}}" data-title="{{mock_test.title}}"
                                                    data-seriestype="{{mock_test.title}}"
                                                    data-image="{{mock_test.image}}" data-status="{{mock_test.status}}"
                                                    data-category="{{mock_test.exam_category.exam_category_name}}"
                                                    data-exam="{{mock_test.exam_master.exam_name}}"
                                                    data-tests="{{mock_test.total_tests}}"
                                                    data-rdate="{{mock_test.release_date|date:'Y-m-d'}}" data-toggle="modal"><i
                                                        class="fas fa-edit"></i></a>
                                            </td>
                                        </tr>
                                        {% endfor %}





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

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

                <div class="col-lg-12 p-0">
                    <ul class="pagination m-0">
                        {% if all_mocks.has_previous %}
                        <li class="page-item ">
                            <a class="page-link" href="?page={{ all_mocks.previous_page_number }}"
                                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={{ all_mocks.number }}" aria-label="1">
                                <span>{{ all_mocks.number }}</span>
                            </a>
                        </li>

                        {% if all_mocks.has_next %}

                        <li class="page-item">
                            <a class="page-link" href="?page={{ all_mocks.next_page_number }}" 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 -->

<!-- add  mock test series modal  -->
<div id="add_mock_test_series_modal" 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">
                    <h4 class="modal-heading">Add Mock Test Series</h4>
                    <form id="add_mock_test_series_form" method="post" enctype="multipart/form-data" class="modal-form">
                        {% csrf_token %}

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

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

                        <div class="form-group">
                            <label for="name">Title</label>
                            <input class="form-control" type="text" name="title" />
                        </div>
                        {% if series_type == 1 %}

                        <input type="hidden" id="series_type" name="series_type" value="1">
                        {% else %}
                        <input type="hidden" id="series_type" name="series_type" value="2">
                        {% endif %}
                        <!-- <div class="form-group">
                                <label for="name">Series Type</label>
                                <select id="series_type" name="series_type" data-toggle="select" class="form-control">
                                    <option value="1">Area Mocks</option>
                                    <option value="2">Sectional Mocks</option>

                                </select>
                            </div> -->

                        <div class="form-group">
                            <label for="batches">Select Sections: </label>
                            <select data-toggle="select" class="form-control select_field_class" name="section"
                                multiple="multiple">
                                {% for section in all_section %}
                                <option value="{{ section.id }}" multiple>{{section.section_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <!-- <div class="form-group">
                            <label for="image">Image</label>
                            <input class="form-control" type="file" id="image" name="image" />
                        </div> -->

                        <div class="form-group">
                            <label for="name">Total Tests</label>
                            <input class="form-control" type="text" name="total_tests" />
                        </div>
                        <div class="form-group">
                            <label for="name">Release Date</label>
                            <input class="form-control" type="date" name="release_date" />
                        </div>
                        <div class="form-group">
                            <label for="status">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 id="msg"></div>
                        <div class="form-group text-center">
                            <button class="btn modal-btn" type="submit">Add Test Series </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- // END .modal -->



<!-- edit  mock  test series modal  -->
<div id="edit_mock_test_series_modal" 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">
                    <h4 class="modal-heading">Edit Mock Test Series</h4>
                    <form id="edit_mock_test_series_form" method="post" enctype="multipart/form-data"
                        class="modal-form">
                        {% csrf_token %}
                        <input type="hidden" id="mock-id" name="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">
                                {% 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 class="form-group">
                            <label for="exam_master">Exam Mater </label>
                            <select data-toggle="select" id="exam_master" name="exam_master" class="form-control">
                                {% for exam in all_exams %}
                                {% if course.exam_master.id == exam.id %}
                                <option value="{{ exam.id }}" selected>{{ exam.exam_name }}</option>
                                {% else %}
                                <option value="{{ exam.id }}">{{ exam.exam_name }}</option>
                                {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="name">Title</label>
                            <input class="form-control" type="text" id="mock-title" name="title" />
                        </div>
                        {% if series_type == 1 %}

                        <input type="hidden" id="series_type" name="series_type" value="1">
                        {% else %}
                        <input type="hidden" id="series_type" name="series_type" value="2">
                        {% endif %}
                        <!-- <div class="form-group">
                            <label for="name">Series Type</label>
                            <select id="series_type" name="series_type" id="" data-toggle="select" class="form-control">
                                <option value="1">Area Mocks</option>
                                <option value="2">Sectional Mocks</option>

                            </select>
                        </div> -->

                        <div class="form-group">
                            <label for="batches">Select Sections: </label>
                            <select data-toggle="select" class="form-control select_field_class" name="section"
                                id="e_section" multiple="multiple">
                                {% for section in all_section %}
                                <option value="{{ section.id }}" multiple>{{section.section_name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- <div class="form-group">
                            <label for="image">Image</label>
                            <input class="form-control" type="file" id="image" name="image" />
                        </div> -->
                        <div class="form-group">
                            <label for="name">Total Tests</label>
                            <input class="form-control" type="text" id="e_t_tests" name="total_tests" />
                        </div>
                        <div class="form-group">
                            <label for="name">Release Date</label>
                            <input class="form-control" type="date" id="e_r_date" name="release_date" />
                        </div>
                        <div class="form-group">
                            <label for="status">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 id="edit_msg"></div>
                        <div class="form-group text-center">
                            <button class="btn modal-btn" type="submit">Save </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- // END .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" enctype="multipart/form-data" 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" />
                    <div id="delete_msg"></div>
                    <button type="submit" class="btn btn-light my-2 rounded-0 ">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!--========= delete modal end ==========  -->










{%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_mock_test_series_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 "addTestSeries" %}',
            type: 'POST',
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function (response) {
                if (response.status == 'success') {
                    $('#add_mock_test_series_modal').modal('hide');
                    setTimeout(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'Mock Test Series created 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>
    // 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('title'));
        $('#e_section').val($(this).data('section'));
        $('#e_category').val($(this).data('category'));
        $('#e_exam').val($(this).data('exam'));
        $('#e_t_tests').val($(this).data('tests'));
        $('#e_r_date').val($(this).data('rdate'));
        // $('#series_type').val($(this).data('seriestype'));
        $('#status').val($(this).data('status'));
        // $('#image').attr('src') = $(this).data('image');
    })

    // edit exam category event
    $('#edit_mock_test_series_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 "editTestSeries" %}',
            type: 'POST',
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function (response) {
                if (response.status == 'success') {
                    $('#edit_mock_test_series_modal').modal('hide');
                    setTimeout(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'Mock Test Series Updated successfully.',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        });
                    }, 2000);
                    setTimeout(function () {
                        location.reload();
                    }, 3000);
                    // $('#msg').html('<div class="text-success">'+response.msg+'</div>');
                }
                else {

                    $('#edit_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
        event.preventDefault();

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

        // Send the Ajax request
        $.ajax({
            url: '{% url "deleteMockTestSeries" %}',
            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: 'Mock Test Series deleted successfully.',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        });
                    }, 2000);
                    setTimeout(function () {
                        location.reload();
                    }, 3000);
                    //    $('#delete_msg').html('<div class="text-success">'+response.msg+'</div>');
                }
                else {

                    $('#delete_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 () {

        $(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>
    $('.select_field_class').select2({ placeholder: "Select here", maximumSelectionSize: 100 });
</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>

</html>