{% include "header.html" %}

<!-- main page  -->
<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">
                    
                </div>

                <div class="row mb-3">
                    <div class="col-6">
                        <h1 class="heading">Coupons</h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="#">home</a>
                                </li>
    
                                <li class="breadcrumb-item active" aria-current="page">Coupons</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-6">
                        <div class="d-flex justify-content-end">
                            <button type="button" class="add-btn" data-toggle="modal"
                                data-target="#add-coupen-code-modal">Add coupon</button>
                        </div>
                    </div>
                </div>
                <div class="mb-3 mt-4">
                    <div class="card card-body mb-3">
                        <h4>Filters</h4>
                        <form method="GET">
                            <div class="row justify-content-center">
                                <div class="col-lg-2 col-md-4 col-12">
                                    <input type="hidden" name="page" value="{{page}}" />
                                    <div class="form-group">
                                        <label>Coupon Code</label>
                                        <input type="text" name="code" {% if code != None %} value="{{code}}"{% else %} value=""{% endif %} class="form-control">
                                    </div>
                                </div>
                                <!-- <div class="col-md-3 col-6">
                                    <div class="form-group">
                                        <label>Course Name</label>
                                        <input type="text" name="course" id="" class="form-control">
                                    </div>
                                </div> -->
                                <div class="col-lg-2 col-md-4 col-12">
                                    <div class="form-group">
                                        <label>Valid Till</label>
                                        <input type="date" name="valid_to" id="" class="form-control" value="{{valid_to}}">
                                    </div>
                                </div>
                                
                               
                               
                                <div class="col-lg-2 col-md-4 col-12">
                                            <div class="form-group">
                                                <label for="name">Select Status</label>
                                                <select class="form-control" name="status" id="status">
                                                    <option value="">Select status</option>
                                                    <option value="Active" {% if status == 'Active' %} selected {% endif %}>Active</option>
            
                                                    <option value="Inactive" {% if status == 'Inactive' %} selected {% endif %}>Inactive</option>   
                                                </select>
                                            </div>
                                </div>

                                <div class="col-lg-4 col-md-9 col-12">
                                    <div class="form-group row">
                                        <!-- <label for="name col-md-12"></label> -->
                                        <div class="col-md-6">
                                            <label for="">From Dates</label>
                                            <input type="date" class="form-control" name="from_date" value="{{from_date}}"/>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="">To Dates</label>
                                            <input type="date" class="form-control" name="to_date" value="{{to_date}}"/>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-2 col-md-3 col-12 ">
                                    <div class="justify-content-center m-top-18px">
                                        <label for="name" class="form-label"></label>
                                        <button class="btn add-btn" type="submit">Filter</button>
                                        <a class="btn btn-refresh" href="{{SITE_URL}}/admin/coupons"><i class="fas fa-sync-alt"></i></a>
                                    </div>
                                    
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>



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

                        <div class="col-lg-12 card-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">Code</th>
                                            <th class="table-head">Course Name</th>
                                            <!-- <th class="table-head">Minimum Amount</th>
                                            <th class="table-head">Discount Type</th> -->
                                            <th class="table-head">Discount</th>
                                            <th class="table-head">Emails</th>
                                            <th class="table-head">Usage Limit</th>
                                            <th class="table-head">Status</th>
                                            <th class="table-head">Valid Till</th>
                                            <th class="table-head">Created on</th>
                                            <!-- <th class="table-head">Last Modified </th> -->
                                            <th class="table-head">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody class="list" id="staff">
                                        {% for coupen in all_coupon %}
                                        <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">{{coupen.code}}</span>
                                                    </div>
                                                </div>
                                            </td>

                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        {% if coupen.courses %}
                                                        {% for course in coupen.courses.all %}
                                                        <span
                                                            class="js-lists-values-exam-name exam-name">{{course.course_name}}</span>,
                                                            <input type="hidden" name="course_ids_{{coupen.id}}[]" value="{{course.id}}"/>
                                                    {% endfor %}
                                                    {% endif %}
                                                    </div>
                                                </div>
                                            </td>
                                            <!-- <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <span
                                                            class="js-lists-values-exam-name exam-name">{{coupen.minimum_amount}}</span>
                                                    </div>
                                                </div>
                                            </td> -->

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




                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <span
                                                            class="js-lists-values-exam-name exam-name">{{coupen.discount}}</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body" style="width: 250px;">
                                                        <span
                                                            class="js-lists-values-exam-name exam-name">{{coupen.emails}}</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <span
                                                            class="js-lists-values-exam-name exam-name">{{coupen.usage_limit}}</span>
                                                    </div>
                                                </div>
                                            </td>

                                            <td>
                                                {% if coupen.status == "Active" %}
                                                <span class="badge badge-success status active">{{coupen.status}}</span>
                                                {% else %}
                                                <span
                                                    class="badge badge-warning text-white status inactive">{{coupen.status}}</span>

                                                {% endif %}
                                            </td>
                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <span
                                                            class="js-lists-values-exam-name exam-name">{{coupen.validto}}</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <span
                                                            class="js-lists-values-exam-name exam-name">{{coupen.created_at}}</span>
                                                    </div>
                                                </div>
                                            </td>

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

                                            <td span="2">
                                                <a href="#modal-delete" class="delete-button badge badge-danger"
                                                    data-toggle="modal" data-id="{{coupen.id}}"><i
                                                        class="fas fa-trash delete"></i></a>
                                                <a href="#edit-coupen-code-modal"
                                                    class="edit-button badge badge-warning edit" data-toggle="modal"
                                                    data-id="{{coupen.id}}" 
                                                    data-code="{{coupen.code}}"
                                                    data-emails="{{coupen.emails}}"
                                                    data-usage_limit="{{coupen.usage_limit}}"
                                                    data-course="1"
                                                    data-minamount="{{coupen.minimum_amount}}"
                                                    data-dtype="{{coupen.discount_type}}"
                                                    data-amount="{{coupen.discount}}"
                                                    data-validto="{{coupen.validto|date:'Y-m-d H:i:s'}}" data-status="{{coupen.status}}"><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_coupon.has_previous %}
                        <li class="page-item ">
                            <a class="page-link" href="?page={{ all_coupon.previous_page_number }}{{filter}}"
                                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_coupon.number }}{{filter}}" aria-label="1">
                                <span>{{ all_coupon.number }}</span>
                            </a>
                        </li>

                        {% if all_coupon.has_next %}

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









<!-- add  exam Category modal  -->
<div id="add-coupen-code-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 Coupon</h4>
                    <form id="add-coupen-code-form" method="post" enctype="multipart/form-data" class="modal-form">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="name">Coupon Code</label>
                            <input class="form-control" type="text" name="code" />
                        </div>
                        <div class="form-group">
                            <label for="name">Emails</label>
                            <!-- <input class="form-control" type="text" name="emails" /> -->
                            <textarea name="emails" cols="30" rows="5" class="form-control"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="name">Usage Limit</label>
                            <!-- <input class="form-control" type="text" name="emails" /> -->
                            <input type="number" name="usage_limit" value="1" class="form-control"/>
                        </div>

                        <div class="form-group">
                            <label for="course_name">Select Course </label>
                            <select data-toggle="select" name="course_name" multiple class="form-control section select_field_class">
                                {% comment %} <option selcted="" value="all">all</option> {% endcomment %}
                                {% for course in all_courses %}
                                <option value="{{ course.id }}">{{ course.course_name }}</option>
                                {% endfor %}

                            </select>
                        </div>
                        <div class="form-group">
                            <label for="minimum_amount">Minimum Amount</label>
                            <input class="form-control" type="text" name="minimum_amount" />
                        </div>
                        <div class="form-group">
                            <label for="discount_type">Discount Type </label>
                            <select name="discount_type" data-toggle="select" class="form-control">
                                <option selcted="">Select discount Type</option>
                                <option value="percent">percent</option>
                                <option value="amount">amount</option>
                            </select>
                            </select>
                        </div>
                        <!-- style="display:none;" id="dpercentage" -->
                        <div class="form-group">
                            <label for="Discount">Discount</label>
                            <input class="form-control" type="text" name="discount"  />
                        </div>
                       
                        <div class="form-group">
                            <label for="name">Valid To</label>
                            <input class="form-control" type="datetime-local" name="validto" />
                        </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 </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- // END .modal -->

<!-- =========== edit exam category model start =============  -->

<div id="edit-coupen-code-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-dismiss="modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="px-3">
                    <h4 class="modal-heading">Edit Coupon</h4>
                    <form method="post" enctype="multipart/form-data" class="edit_coupen_code_form modal-form">
                        {% csrf_token %}

                        <input type="hidden" name="id" id="coupen_id">

                        <div class="form-group">
                            <label for="name">Coupon Code</label>
                            <input class="form-control" type="text" id="code" name="code" />
                        </div>
                        <div class="form-group">
                            <label for="name">Emails</label>
                            <!-- <input class="form-control" type="text" name="emails" /> -->
                            <textarea name="emails" id="e_emails" cols="30" rows="5" class="form-control"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="name">Usage Limit</label>
                            <input type="number" name="usage_limit"  id="e_usage_limit" class="form-control"/>
                        </div>

                        <div class="form-group">
                            <label for="course_name">Select Course </label>
                            <select data-toggle="select" name="course_name" id="e_course" multiple class="form-control section select_field_class">
                                {% comment %} <option selcted="" value="all">all</option> {% endcomment %}
                                {% for course in all_courses %}
                                <option value="{{ course.id }}">{{ course.course_name }}</option>
                                {% endfor %}

                            </select>
                        </div>
                        <div class="form-group">
                            <label for="minimum_amount">Minimum Amount</label>
                            <input class="form-control" type="text" id="min_amount" name="minimum_amount" />
                        </div>
                        <div class="form-group">
                            <label for="discount_type">Discount Type </label>
                            <select name="discount_type" data-toggle="select" id="d_type" class="form-control">
                                <option selcted="">Select discount Type</option>
                                <option value="percent">percent</option>
                                <option value="amount">amount</option>
                            </select>
                            </select>
                        </div>
                        <!-- style="display:none;" id="dpercentage" -->
                        <div class="form-group">
                            <label for="Discount">Discount</label>
                            <input class="form-control" type="text" id="discount" name="discount"  />
                        </div>
                        
                        <div class="form-group">
                            <label for="name">Valid To</label>
                            <input class="form-control" type="datetime-local" id="validto" name="validto" />
                        </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" class="mt-4 mb-4"></div>
                        <div class="form-group text-center">
                            <button class="btn modal-btn" type="submit">Save</button>
                        </div>
                    </form>
                </div>
            </div>

        </div>

    </div>

</div>

<!-- ========== edit exam category model end ==========  -->

<!--========= delete modal start==========  -->

<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">
            <div class="modal-body text-center p-4">
                <form method="post" enctype="multipart/form-data" id="delete_form">
                    {% csrf_token %}
                   
                    <h4 class="">Are you sure you want to delete?</h4>
                    <input type="hidden" name="id" id="delete_id" />
                    <button type="submit" class="btn btn-danger">Yes</button>
                    <button type="button" class="btn btn-light text-dark" data-dismiss="modal">No</button>
                </form>
            </div>
        </div>
    </div>
</div>

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




</body>
<script>
$('.select_field_class').select2({ placeholder: "Select here", maximumSelectionSize: 100 });
    // Listen for the form submission event
    $('#add-coupen-code-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 "add_coupons" %}',
            type: 'POST',
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function (response) {
                if (response.status == 'success') {
                    $('#add-coupen-code-modal').modal('hide');
                    setTimeout(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'Coupon 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-button').click(function () {
        var id = $(this).data('id');
        console.log(id);
        var values = $("input[name='course_ids_"+id+"[]']")
            .map(function(){return ($(this).val());}).get();
            console.log(values);
        $('#e_course').select2('val',values);
        $('#coupen_id').val(id);
        $('#code').val($(this).data('code'));
        $('#e_emails').val($(this).data('emails'));
        $('#e_usage_limit').val($(this).data('usage_limit'));
        $('#course').val($(this).data('course'));
        $('#min_amount').val($(this).data('minamount'));
        $('#d_type').val($(this).data('dtype'));
        $('#discount').val($(this).data('amount'));
        $('#validto').val($(this).data('validto'));
        $('#status').val($(this).data('status'));

    })

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

                    $('#msg').html('<div class="text-danger">' + response.msg + '</div>');
                }
            },
            error: function (xhr, status, error) {
                // Handle the error response
                console.log(error);
            }
        });

    });
</script>

<script>
    $(document).ready(function () {
        $('#discount_type').change(function () {
            if ($(this).val() === 'percent') {
                $('#dpercentage').show();
            }
            else if ($(this).val() === 'amount') {
                $('#damount').show();

            }
            else {
                $('#dpercentage').hide();
                $('#damount').hide();

            }

        });
    });
</script>


</html>