{% include "header.html" %}
{% load static %}
<style>
    .form-check-input {
  clear: left;
}

.form-switch.form-switch-sm {
  margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-sm .form-check-input {
  height: 1rem;
  width: calc(1rem + 0.75rem);
  border-radius: 2rem;
}

.form-switch.form-switch-md {
  margin-bottom: 1rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-md .form-check-input {
  height: 1.5rem;
  width: calc(2rem + 0.75rem);
  border-radius: 3rem;
}

.form-switch.form-switch-lg {
  margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-lg .form-check-input {
  height: 2rem;
  width: calc(3rem + 0.75rem);
  border-radius: 4rem;
}

.form-switch.form-switch-xl {
  margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-xl .form-check-input {
  height: 2.5rem;
  width: calc(4rem + 0.75rem);
  border-radius: 5rem;
}

</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">Exam Module</li> -->
                                    <li class="breadcrumb-item active" aria-current="page">Course</li>
                                </ol>
                            </nav>
                        </div>

                        <div class="row mb-3">
                            <div class="col-6">
                                <h1 class="heading">Course List</h1>
                            </div>
                            <div class="col-6">
                                <div class="d-flex justify-content-end">
                                    <a class="add-btn"
                                       href="{% url 'course_create' %}">Add Course</a>
                                </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">Course ID</th> -->
                                                    <th class="table-head">Course Name</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">Duration</th>
                                                    <!-- <th class="table-head">Description</th> -->
                                                    <!-- <th class="table-head">Area Price</th>
                                                    <th class="table-head">sectional Price</th>
                                                    <th class="table-head">Mini Mock Price</th>
                                                    <th class="table-head">Full Mock Price</th>
                                                    <th class="table-head">Lecture Price</th> -->
                                                    <th class="table-head"> Full Price</th>  
                                                    <th class="table-head"> Status </th>  
                                                    <th class="table-head">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody class="list" id="staff">
                                                {% for course in courses %}
                                                <tr class="">
                                                    <td>{{forloop.counter}}</td>
                                                    <!-- <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span
                                                                    class="js-lists-values-exam-name exam-name">{{course.id}}</span>
                                                            </div>
                                                        </div>
                                                    </td> -->
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <a href="course_Students_list/{{course.id}}"><span
                                                                    class="js-lists-values-exam-name exam-name">{{course.course_name}}</span></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="img"><span class="badge"><img
                                                        src="{{ course.image.url}}"/>
                                                    </span></td>

                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{course.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">{{course.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">{{course.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">{{course.description}}</span>
                                                            </div>
                                                        </div>
                                                    </td> -->

                                                    <!-- <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span class="js-lists-values-exam-name exam-name">{{course.area_price}}</span>
                                                            </div>
                                                        </div>
                                                    </td>

                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span
                                                                    class="js-lists-values-exam-name exam-name">{{course.sectional_price}}</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span
                                                                    class="js-lists-values-exam-name exam-name">{{course.minimock_price}}</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span
                                                                    class="js-lists-values-exam-name exam-name">{{course.fullmock_price}}</span>
                                                            </div>
                                                        </div>
                                                    </td>

                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span
                                                                    class="js-lists-values-exam-name exam-name">{{course.lectures_price}}</span>
                                                            </div>
                                                        </div>
                                                    </td> -->
                                                    <td>
                                                        <div class="media align-items-center">
                                                            <div class="media-body">
                                                                <span
                                                                    class="js-lists-values-exam-name exam-name">{{course.full_price}}</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="form-check form-switch form-switch-md">
                                                            <input class="form-check-input cstatus" {% if course.status == 'Active' %} checked {% endif %} name="cstatus_{{course.id}}" type="checkbox" id="flexSwitchCheckChecked_{{course.id}}" value="{{course.id}}">
                                                          </div>
                                                    </td>

                                                    <td span="2">
                                                        <a href="#modal-delete" class="delete-course badge badge-danger"
                                                            data-toggle="modal"
                                                            data-id="{{ course.id }}" >
                                                                <i class="fas fa-trash delete"></i></a>
                                                        <a href="{% url 'course_edit' course.id %}"
                                                            class="badge badge-warning edit" ><i
                                                                class="fas fa-edit"></i></a>
                                                    </td>
                                                </tr>

                                                {% endfor %}

                                              

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

                                </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>





     <!-- 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" 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="course_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  -->


</body>


{% comment %} <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.delete-course').click(function() {
                var courseId = $(this).data('course-id');
                if (confirm('Are you sure you want to delete this course?')) {
                    $.ajax({
                        url: "{% url 'course_delete' 0 %}".replace('0', courseId),
                        type: 'post',
                        data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
                        success: function() {
                            window.location.reload();
                        }
                    });
                }
            });
        });
    </script> {% endcomment %}


    <script>
        $('.delete-course').click( function() {
          var id = $(this).data('id');
           $('#delete_id').val(id);
       })
           $('#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 "delete_course" %}',
             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: 'Section Deleted Successfully.',
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'OK'
                    });
                }, 1000);
                setTimeout(function () {
                    location.reload();
                }, 2000);
                //    $('#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);
             }
           });
            
       });
       $('.cstatus').click(function(event) {
             // Prevent the default form submission behavior
            var status = 'Active';
            if(!$(this).is(':checked')){
                status = 'Inactive';
            }
           // Send the Ajax request
           $.ajax({
             url: '{% url "change_course_status" %}',
             headers: {'X-CSRFToken': '{{ csrf_token }}'},
             type: 'POST',
             data: {'status': status, 'course_id':$(this).val()},
             dataType: 'json',
             success: function(response) {
               if(response.status=='success'){
              
                //    $('#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>

</html>