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

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

{% block content %}
<style>
     /* Custom styles for SweetAlert */
     .swal2-popup {
         width: 350px; /* Adjust the width of the alert */
         font-size: 10px; /* Adjust the font size */
     }
 
     .swal2-confirm,
     .swal2-cancel {
         padding: 8px 12px; /* Decrease button size */
         font-size: 12px; /* Decrease font size */
     }
 
     /* Decrease icon size */
     .swal2-icon {
         font-size: 10px; /* Adjust icon size as needed */
     }
 </style>
<div class="page-content">

    <!-- Start Container Fluid -->
    <div class="container-fluid">

         <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 Product List</h4>

                             <a href="{% url 'products_create' %}" class="btn btn-sm btn-primary">
                                  Add Product
                             </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 ms-1">
                                                           <input type="checkbox" class="form-check-input" id="customCheck1">
                                                           <label class="form-check-label" for="customCheck1"></label>
                                                      </div>
                                                 </th>
                                                 <th>Image</th>
                                                 <th>Product Name</th>
                                                 <th>Category</th>
                                                 <th>Price</th>
                                                 <th>Stock</th>
                                                 <th>Featured</th>
                                                 <th>Status</th>
                                                 <th>Action</th>
                                            </tr>
                                       </thead>
                                       <tbody>
                                            {% for product in products %}
                                            <tr>
                                                 <td>
                                                      <div class="form-check ms-1">
                                                           <input type="checkbox" class="form-check-input" id="customCheck{{ forloop.counter }}">
                                                           <label class="form-check-label" for="customCheck{{ forloop.counter }}">&nbsp;</label>
                                                      </div>
                                                 </td>
                                                 <td>
                                                      <div class="d-flex align-items-center gap-2">
                                                           <div class="rounded bg-light avatar-md d-flex align-items-center justify-content-center">
                                                                {% if product.images.all %} 
                                                                    <img src="{{ product.images.first.image.url }}" style="border-radius:5px;" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="{{ product.name }}" alt="{{ product.name }}" class="avatar-md">
                                                                {% else %}
                                                                    <img src="{% static '/assets/images/product/default.png' %}" style="border-radius:5px;" alt="{{ product.name }}" class="avatar-md">
                                                                {% endif %}
                                                           </div>
                                                      </div>

                                                 </td>
                                                 <td>{{ product.name }}</td>
                                                 <td>{{ product.category.name }}</td>
                                                 <td>₹{{ product.price }}</td>
                                                 <td>
                                                      <p class="mb-1 text-muted">
                                                          <span class="text-dark fw-medium">{{ product.stock }} Items</span> Left
                                                      </p>
                                                 </td>

                                                 <td>
                                                    <!-- Feature Badge -->
                                                    {% if product.feature == 1 %}
                                                      <span class="badge badge-outline-primary me-1">Related Product</span>
                                                    {% elif product.feature == 2 %}
                                                      <span class="badge badge-outline-success me-1">Featured Product</span>
                                                    {% elif product.feature == 3 %}
                                                      <span class="badge badge-outline-warning me-1">Popular Product</span>
                                                    {% elif product.feature == 4 %}
                                                      <span class="badge badge-outline-danger me-1">Special Product</span>
                                                    {% else %}
                                                      <span class="badge badge-outline-secondary me-1">Unknown</span>
                                                    {% endif %}
                                                  </td>

                                                 <td>
                                                  <!-- Status Badge -->
                                                  {% if product.status == 1 %}
                                                      <span class="badge bg-success">Active</span>
                                                  {% else %}
                                                      <span class="badge bg-danger">Inactive</span>
                                                  {% endif %}
                                                  </td>
                                                 
                                                 <td>
                                                      <div class="d-flex gap-2">
                                                            <a href="{% url 'products_edit' product.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 'products_delete' product.id %}"> <iconify-icon icon="solar:trash-bin-minimalistic-2-broken" class="align-middle fs-18"></iconify-icon> </a>
                                                      </div>
                                                 </td>
                                            </tr>
                                            {% empty %}
                                            <tr>
                                                <td colspan="8" class="text-center text-warning fw-bold p-5">No products available.</td>
                                            </tr>
                                            {% endfor %}
                                       </tbody>
                                  </table>
                             </div>
                             <!-- end table-responsive -->
                        </div>
                        <div class="card-footer border-top">
                            <!-- Pagination Controls -->
                            <nav aria-label="Page navigation example">
                                <ul class="pagination justify-content-end mb-0">
                                    {% if products.has_previous %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ products.previous_page_number }}">Previous</a>
                                        </li>
                                    {% else %}
                                        <li class="page-item disabled">
                                            <a class="page-link" href="#">Previous</a>
                                        </li>
                                    {% endif %}
                        
                                    {% for page_num in products.paginator.page_range %}
                                        {% if products.number == page_num %}
                                            <li class="page-item active">
                                                <a class="page-link" href="#">{{ page_num }}</a>
                                            </li>
                                        {% else %}
                                            <li class="page-item">
                                                <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                                            </li>
                                        {% endif %}
                                    {% endfor %}
                        
                                    {% if products.has_next %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ products.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 Start ========== -->
    <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>
    <!-- ========== Footer End ========== -->

</div>
<script>
// Get CSRF token from meta tag
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    // Target all elements with the class 'delete-button'
    document.querySelectorAll(".delete-button").forEach(function (button) {
        button.addEventListener("click", function (event) {
            event.preventDefault(); // Prevent the link's default action

            let deleteUrl = this.getAttribute('data-url'); // Get the delete URL from the data attribute

            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,
                showCloseButton: false,
                customClass: {
                    popup: 'swal2-popup', // Adding custom class for popup
                    confirmButton: 'swal2-confirm', // Adding custom class for confirm button
                    cancelButton: 'swal2-cancel' // Adding custom class for cancel button
                }
            }).then(function (result) {
                if (result.value) {
                    // Perform an AJAX request to delete the item
                    fetch(deleteUrl, {
                        method: 'POST',
                        headers: {
                            'X-CSRFToken': csrfToken, // Include CSRF token
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                title: 'Deleted!',
                                text: 'Your file has been deleted.',
                                icon: 'success',
                                confirmButtonClass: 'btn btn-primary w-xs mt-2',
                                buttonsStyling: false
                            }).then(() => {
                                // Reload the page to reflect the deletion
                                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 file.',
                            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 file is safe :)',
                        icon: 'error',
                        confirmButtonClass: 'btn btn-primary mt-2',
                        buttonsStyling: false
                    });
                }
            });
        });
    });
</script>
{% endblock content %}