{% include "header.html"  %}
{% load static %}

    <!-- 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 page__heading-container">
                    <div class="page__heading">
                       
                    </div>

                    <div class="row mb-3">
                        <div class="col-6">
                            <h1 class="heading">Course Discount Management</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">Course Discount</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_course_discount_modal">Add Discount</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="container 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  text-center">
                                        <thead class="table-heading text-center">
                                        <tr>
                                            <th class="table-head">Sr.No.</th>
                                            <th class="table-head">Exam Category</th>
                                            <th class="table-head">Course Type</th>
                                            <th class="table-head">Min Score</th>
                                            <th class="table-head">Max Score</th>
                                            <th class="table-head">Discount %</th>
                                            <th class="table-head">Status</th>
                                            <th class="table-head">Action</th>
                                        </tr>
                                        </thead>

                                        <tbody class="tbody align-middle  text-center">
                                    

                                            {% for d in all_discount %}
                                            <tr>
                                                <td>{{forloop.counter}}</td>
                                                <td>{{d.exam_category.exam_category_name|default:"-"}}</td>
                                                <td>
                                                    {% if d.course_type == "selfprep" %}Self Prep{% elif d.course_type == "classroom" %}Classroom{% else %}-{% endif %}
                                                </td>
                                                <td>{{d.min_score}}</td>
                                                <td>{{d.max_score}}</td>
                                                <td>{{d.discount_percentage}}%</td>

                                                <td>
                                                    {% if d.status == "Active" %}
                                                    <span class="badge badge-success">Active</span>
                                                    {% else %}
                                                    <span class="badge bg-warning">Inactive</span>
                                                    {% endif %}
                                                </td>

                                                <td>
                                                    <a class="edit-btn badge badge-warning edit"
                                                    data-id="{{d.id}}"
                                                    data-exam-category="{{d.exam_category_id|default:''}}"
                                                    data-course-type="{{d.course_type|default:''}}"
                                                    data-min="{{d.min_score}}"
                                                    data-max="{{d.max_score}}"
                                                    data-discount="{{d.discount_percentage}}"
                                                    data-status="{{d.status}}"
                                                    data-toggle="modal"
                                                    href="#edit-modal">
                                                    <i class="fas fa-edit"></i>
                                                    </a>

                                                    <a class="delete-button badge badge-danger"
                                                    data-id="{{d.id}}"
                                                    data-toggle="modal"
                                                    href="#delete_modal">
                                                    <i class="fas fa-trash delete"></i>
                                                    </a>
                                                </td>
                                            </tr>

                                            {% empty %}

                                            <tr>
                                                <td colspan="8" class="text-center text-muted py-4">
                                                    <strong>No discount records found</strong>
                                                </td>
                                            </tr>

                                            {% endfor %}

                                            </tbody>

                                        
                                        </table>

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

                    
                    <div class="col-lg-12 p-0">
                            <ul class="pagination m-0">

                                {% if all_discount.has_previous %}
                                <li class="page-item">
                                    <a class="page-link"
                                    href="?page={{ all_discount.previous_page_number }}">
                                        <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="#">
                                        {{ all_discount.number }}
                                    </a>
                                </li>

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


    <div id="add_course_discount_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 Discount</h4>
                        <form  id="addForm" method="post" enctype="multipart/form-data" class="modal-form">
                            {% csrf_token %}
                            <div class="form-group">
                                <label>Exam Category</label>
                                <select name="exam_category" class="form-control form-select" required>
                                    <option value="">Select Exam Category</option>
                                    {% for category in exam_categories %}
                                    <option value="{{category.id}}">{{category.exam_category_name}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Course Type</label>
                                <select name="course_type" class="form-control form-select" required>
                                    <option value="">Select Course Type</option>
                                    {% for value, label in course_types %}
                                    <option value="{{value}}">{{label}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div id="discount_rows">

                                <div class="discount-row mb-3">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <input type="number" name="min_score[]" class="form-control" placeholder="Min Score">
                                        </div>
                                        <div class="col-md-3">
                                            <input type="number" name="max_score[]" class="form-control" placeholder="Max Score">
                                        </div>
                                        <div class="col-md-3">
                                            <input type="number" name="discount[]" class="form-control" placeholder="Discount %">
                                        </div>
                                        <div class="col-md-3">
                                            <button type="button" class="btn btn-danger remove-row">X</button>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <button type="button" class="btn btn-primary mt-2" id="add_row">
                                + Add More
                            </button>
                           
                            <div class="form-group">
                                <label for="status">Status </label>
                                <select id="status" name="status" data-toggle="select" class="form-control form-select">
                                    <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>
                                <button type="button" class="btn modal-btn-cancel ms-4" data-dismiss="modal">Cancel</button>

                            </div>
                        </form>

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




    <div id="edit-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 Discount</h4>
                        <form  method="post" enctype="multipart/form-data" id="editForm" class="edit_form modal-form">
                            {% csrf_token %}

                            
                            <input type="hidden" name="id" id="e_id">
                             <div class="form-group">
                                <label>Exam Category</label>
                                <select name="exam_category" class="form-control" id="e_exam_category" data-toggle="select" required>
                                    <option value="">Select Exam Category</option>
                                    {% for category in exam_categories %}
                                    <option value="{{category.id}}">{{category.exam_category_name}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Course Type</label>
                                <select name="course_type" class="form-control" id="e_course_type" data-toggle="select" required>
                                    <option value="">Select Course Type</option>
                                    {% for value, label in course_types %}
                                    <option value="{{value}}">{{label}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="min_score">Min Score</label>
                                <input type="number" id="e_min" name="min_score" class="form-control" placeholder="Min Score">
                            </div>
                             <div class="form-group">
                                <label for="max_score">Max Score</label>
                                <input type="number" id="e_max" class="form-control" name="max_score" placeholder="Max Score">
                            </div>
                            <div class="form-group">
                                <label for="discount">Discount Percentage</label>
                                <input type="number" id="e_discount" class="form-control" name="discount" placeholder="discount %">
                            </div>
                           
                            <div class="form-group">
                                <label for="status">Status </label>
                                <select id="e_status" name="status" data-toggle="select" class="form-control form-select">
                                    <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">Update </button>
                                <button type="button" class="btn modal-btn-cancel ms-4" data-dismiss="modal">Cancel</button>

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



     <!-- delete modal  -->
     <div id="delete_modal" 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="deleteForm" >
                        {% 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> 


                                                       


</body>

<script>
$('#add_row').click(function(){
    let row = `
    <div class="discount-row mb-3">
        <div class="row">
            <div class="col-md-3">
                <input type="number" name="min_score[]" class="form-control" placeholder="Min Score">
            </div>
            <div class="col-md-3">
                <input type="number" name="max_score[]" class="form-control" placeholder="Max Score">
            </div>
            <div class="col-md-3">
                <input type="number" name="discount[]" class="form-control" placeholder="Discount %">
            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-danger remove-row">X</button>
            </div>
        </div>
    </div>
    `;
    $('#discount_rows').append(row);
});

$(document).on('click', '.remove-row', function(){
    $(this).closest('.discount-row').remove();
});
</script>
<script>


$('#addForm').submit(function(event) {

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


$.ajax({
  url: '{% url "add_course_discount" %}',
  type: 'POST',
  data: formData,
  processData: false,
  dataType: 'json',
  contentType: false,
  success: function(response) {
    if(response.status=='success'){
        $('#add_course_discount_modal').modal('hide');
        setTimeout(function () {
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: 'dicount Added successfully.',
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'OK'
            });
        }, 1000);
        setTimeout(function () {
            location.reload();
        }, 2000);
      
    }
    else{

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

    console.log(error);
  }
});
 
});
</script>

<script>

        $('.edit-btn').click(function(){
        $('#e_id').val($(this).data('id'));
        $('#e_exam_category').val($(this).data('exam-category'));
        $('#e_course_type').val($(this).data('course-type'));
        $('#e_min').val($(this).data('min'));
        $('#e_max').val($(this).data('max'));
        $('#e_discount').val($(this).data('discount'));
        $('#e_status').val($(this).data('status'));
        });

   
    $('#editForm').submit(function(event) {
   
      event.preventDefault();
      
      var formData = new FormData($(this)[0]);
    
  
    $.ajax({
      url: '{% url "edit_course_discount" %}',
      type: 'POST',
      data: formData,
      processData: false,
      dataType: 'json',
      contentType: false,
      success: function(response) {
        if(response.status=='success'){
            $('#edit-modal').modal('hide');
             setTimeout(function () {
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: 'Discount updated successfully.',
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'OK'
            });
        }, 1000);
        setTimeout(function () {
            location.reload();
        }, 2000);
           
        }
        else{
    
            $('#edit_msg').html('<div class="text-danger">'+response.msg+'</div>');
        }
      },
      error: function(xhr, status, error) {
       
        console.log(error);
      }
    });
     
    });
    </script>

<script>
    $('.delete-button').click( function() {
      var id = $(this).data('id');
       $('#delete_id').val(id);
   })
 
       $('#deleteForm').submit(function(event) {
        
         event.preventDefault();
         
         var formData = new FormData($(this)[0]);
       
     
       $.ajax({
         url: '{% url "delete_course_discount" %}',
         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: 'Dicount Deleted Successfully.',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK'
                });
            }, 1000);
            setTimeout(function () {
                location.reload();
            }, 2000);
          
           }
           else{
       
               $('#delete_msg').html('<div class="text-danger">'+response.msg+'</div>');
           }
         },
         error: function(xhr, status, error) {
        
           console.log(error);
         }
       });
        
   });
</script>



</html>