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

{% block title %}
    <title>Admin | Categories 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">
    <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 Categories List</h4>
                        <a href="{% url 'parent_categories_create' %}" class="btn btn-sm btn-primary">Add Category</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>Categories</th>
                                        <th>Status</th>
                                        <th>Create At</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for category in parent_categories %}
                                    <tr>
                                        <td>
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="customCheck2">
                                                <label class="form-check-label" for="customCheck2"></label>
                                            </div>
                                        </td>
                                        <td>{{ category.id }}</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">
                                                    <img src="{{ category.image.url }}" style="border-radius:5px;" alt="" class="avatar-md">
                                                </div>
                                                <p class="text-dark fw-medium fs-15 mb-0">{{ category.name }}</p>
                                            </div>
                                        </td>
                                        <td>
                                             <!-- Status Badge -->
                                             {% if category.status == 1 %}
                                                 <span class="badge bg-success">Active</span>
                                             {% else %}
                                                 <span class="badge bg-danger">Inactive</span>
                                             {% endif %}
                                         </td>
                                        <td>{{ category.created_at }}</td>
                                        <td>
                                            <div class="d-flex gap-2">
                                                <!-- <a href="" class="btn btn-light btn-sm"><iconify-icon icon="solar:eye-broken" class="align-middle fs-18"></iconify-icon></a> -->
                                                <a href="{% url 'parent_categories_edit' category.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 'parent_categories_delete' category.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="6" class="text-center text-warning fw-bold p-5">No categories available</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer border-top">
                        <!-- Pagination Controls -->
                        <nav aria-label="Page navigation example">
                            <ul class="pagination justify-content-end mb-0">
                                {% if parent_categories.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ parent_categories.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 parent_categories.paginator.page_range %}
                                    {% if parent_categories.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 parent_categories.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ parent_categories.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>

    <!-- 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>
     // 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 or remove the deleted row from the table
                                 location.reload(); // Reload the page to reflect the deletion
                             });
                         } 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 %}