{% extends "admin/dashboard.html" %}
{% load static %}

{% block title %}
    <title>Admin | Coupons List</title>
{% endblock title %}

{% block content %}
<style>
    /* Custom styles for SweetAlert */
    .swal2-popup {
        width: 350px;
        font-size: 10px;
    }

    .swal2-confirm,
    .swal2-cancel {
        padding: 8px 12px;
        font-size: 12px;
    }

    .swal2-icon {
        font-size: 10px;
    }
</style>

<div class="page-content">
    <!-- Start Container Fluid -->
    <div class="container-xxl">
        <div class="row">
          <div class="col-xl-12">
              <div class="card">
                  <div class="card-header d-flex justify-content-between align-items-center gap-1">
                      <h4 class="card-title flex-grow-1">All Coupons List</h4>
                      <a href="#!" class="btn btn-info fw-bold">Export</a>
                      <a href="{% url 'coupons_create' %}" class="btn btn-primary fw-bold">Add Coupons</a>
                  </div>
                  <div>
                      <div class="table-responsive">
                          <table class="table align-middle mb-0 table-hover table-centered">
                              <thead class="bg-light-subtle">
                                  <tr>
                                      <th style="width: 20px;">
                                          <div class="form-check">
                                              <input type="checkbox" class="form-check-input" id="customCheck1">
                                              <label class="form-check-label" for="customCheck1"></label>
                                          </div>
                                      </th>
                                      <th>ID</th>
                                      <th>Coupon Code</th>
                                      <th>Discount Type</th>
                                      <th>Discount Value</th>
                                      <th>Min Order Amount</th>
                                      <th>Max Order Amount</th>
                                      <th>Start Date</th>
                                      <th>End Date</th>
                                      <th>Status</th>
                                      <th>Action</th>
                                  </tr>
                              </thead>
                              <tbody>
                                  {% if coupons %}
                                      {% for coupon in coupons %}
                                          <tr>
                                              <td>
                                                  <div class="form-check">
                                                      <input type="checkbox" class="form-check-input" id="customCheck2">
                                                      <label class="form-check-label" for="customCheck2">&nbsp;</label>
                                                  </div>
                                              </td>
                                              <td>{{ coupon.id }}</td>
                                              <td>{{ coupon.code }}</td>
                                              <td>{{ coupon.get_discount_type_display }}</td>
                                              <td>₹{{ coupon.discount_value }}</td>
                                              <td>₹{{ coupon.min_order_amount }}</td>
                                              <td>₹{{ coupon.max_discount_amount }}</td>
                                              <td>{{ coupon.start_date }}</td>
                                              <td>{{ coupon.end_date }}</td>
                                              <td>
                                                  {% if coupon.status == 'active' %}
                                                      <span class="badge text-success bg-success-subtle fs-12"><i class="bx bx-check-double"></i>Active</span>
                                                  {% else %}
                                                      <span class="badge text-danger bg-danger-subtle fs-12"><i class="bx bx-x"></i>Inactive</span>
                                                  {% endif %}
                                              </td>
                                              <td>
                                                  <div class="d-flex gap-2">
                                                      <a href="{% url 'coupon_edit' coupon.id %}" class="btn btn-soft-primary btn-sm"><iconify-icon icon="solar:pen-2-broken" class="align-middle fs-18"></iconify-icon></a>
                                                      <a href="javascript:void(0);" class="btn btn-soft-danger btn-sm delete-button" data-url="{% url 'coupon_delete' coupon.id %}">
                                                       <iconify-icon icon="solar:trash-bin-minimalistic-2-broken" class="align-middle fs-18"></iconify-icon>
                                                      </a>
                                                  </div>
                                              </td>
                                          </tr>
                                      {% endfor %}
                                  {% else %}
                                      <tr>
                                          <td colspan="8" class="text-center">No coupons found.</td>
                                      </tr>
                                  {% endif %}
                              </tbody>
                          </table>
                      </div>
                  </div>
                  <!-- Pagination Controls -->
                    <div class="card-footer border-top">
                         <nav aria-label="Page navigation example">
                         <ul class="pagination justify-content-end mb-0">
                              {% if coupons.has_previous %}
                                   <li class="page-item">
                                        <a class="page-link" href="?page={{ coupons.previous_page_number }}">Previous</a>
                                   </li>
                              {% else %}
                                   <li class="page-item disabled">
                                        <a class="page-link" href="#">Previous</a>
                                   </li>
                              {% endif %}
                              
                              {% for num in coupons.paginator.page_range %}
                                   {% if coupons.number == num %}
                                        <li class="page-item active">
                                             <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                                        </li>
                                   {% else %}
                                        <li class="page-item">
                                             <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                                        </li>
                                   {% endif %}
                              {% endfor %}

                              {% if coupons.has_next %}
                                   <li class="page-item">
                                        <a class="page-link" href="?page={{ coupons.next_page_number }}">Next</a>
                                   </li>
                              {% else %}
                                   <li class="page-item disabled">
                                        <a class="page-link" href="#">Next</a>
                                   </li>
                              {% endif %}
                         </ul>
                         </nav>
                    </div>
              </div>
          </div>
      </div>

   </div>
   <!-- End Container Fluid -->

    <!-- Footer -->
    <footer class="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 text-center">
                    <script>document.write(new Date().getFullYear())</script> &copy; Aquarium E-Commerce. Developed by 
                    <iconify-icon icon="iconamoon:heart-duotone" class="fs-18 align-middle text-danger"></iconify-icon> 
                    <a href="https://geegatechnologies.com/" class="fw-bold footer-text" target="_blank">GeegaTechnologies</a>
                </div>
            </div>
        </div>
    </footer>
</div>

<script>
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    document.querySelectorAll(".delete-button").forEach(function (button) {
        button.addEventListener("click", function (event) {
            event.preventDefault();

            let deleteUrl = this.getAttribute('data-url');

            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'No, cancel!',
                confirmButtonClass: 'btn btn-primary w-xs me-2 mt-2',
                cancelButtonClass: 'btn btn-danger w-xs mt-2',
                buttonsStyling: false
            }).then(function (result) {
                if (result.value) {
                    fetch(deleteUrl, {
                        method: 'POST',
                        headers: {
                            'X-CSRFToken': csrfToken,
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                title: 'Deleted!',
                                text: 'The coupon has been deleted.',
                                icon: 'success',
                                confirmButtonClass: 'btn btn-primary w-xs mt-2',
                                buttonsStyling: false
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                title: 'Error!',
                                text: data.message,
                                icon: 'error',
                                confirmButtonClass: 'btn btn-primary w-xs mt-2',
                                buttonsStyling: false
                            });
                        }
                    })
                    .catch(error => {
                        Swal.fire({
                            title: 'Error!',
                            text: 'An error occurred while deleting the banner.',
                            icon: 'error',
                            confirmButtonClass: 'btn btn-primary w-xs mt-2',
                            buttonsStyling: false
                        });
                    });
                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    Swal.fire({
                        title: 'Cancelled',
                        text: 'Your coupon is safe :)',
                        icon: 'error',
                        confirmButtonClass: 'btn btn-primary mt-2',
                        buttonsStyling: false
                    });
                }
            });
        });
    });
</script>
{% endblock content %}