{% extends 'adminapp/master.html' %}
{% load static %}
{% block content %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

<div class="page-content py-4">
  <div class="container-fluid">
    <!-- Page Title -->
    <div class="row">
      <div class="col-12 mb-3">
        <div class="page-title-box">
          <h4 class="mb-0 fw-semibold">Manage Category</h4>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item">
              <a href="{% url 'index' %}">
                <i class="bi bi-house-door-fill me-1"></i>Dashboard
              </a>
            </li>
            <li class="breadcrumb-item active text-primary">Manage Category</li>
          </ol>
        </div>
      </div>
    </div>

    <!-- Categories Section -->
    <div class="row">
      <div class="col-xl-12">
        <div class="card shadow-sm border-0">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h5 class="mb-0">
                <i class="bi bi-tags-fill me-2"></i> Category List
              </h5>
              <a href="{% url 'category_add' %}" class="btn btn-success rounded-pill">
                <i class="bi bi-plus-circle me-1"></i> Add Category
              </a>
            </div>

            <div class="table-responsive">
              <table class="table table-hover table-centered mb-0 align-middle">
                <thead class="table-dark">
                  <tr>
                    <th>Category Name</th>
                    <th>Image</th>
                    <th class="text-center">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {% for category in categories %}
                  <tr>
                    <td class="fw-medium text-capitalize">{{ category.name }}</td>
                    <td>
                      {% if category.image %}
                        <img src="{{ category.image.url }}" alt="Category Image" class="img-thumbnail shadow-sm" style="max-width: 70px; border-radius: 8px;">
                      {% else %}
                        <span class="text-muted">No Image</span>
                      {% endif %}
                    </td>
                    <td class="text-center">
                      <a href="{% url 'category_edit' category.id %}" class="btn btn-warning btn-sm me-2 rounded-pill">
                        <i class="bi bi-pencil-square me-1"></i> Edit
                      </a>
                      <button class="btn btn-danger btn-sm rounded-pill" onclick="confirmDelete('{% url 'category_delete' category.id %}')">
                        <i class="bi bi-trash3 me-1"></i> Delete
                      </button>
                    </td>
                  </tr>
                  {% empty %}
                  <tr>
                    <td colspan="3" class="text-center text-muted py-4">No categories available.</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div> <!-- End Card -->
      </div> <!-- End Col -->
    </div> <!-- End Row -->
  </div> <!-- End Container -->
</div> <!-- End Page Content -->

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 rounded shadow">
      <div class="modal-header bg-light border-0">
        <h5 class="modal-title fw-semibold text-danger" id="deleteModalLabel">
          <i class="bi bi-exclamation-triangle me-1"></i> Confirm Deletion
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center">
        <p class="fs-6 fw-bold text-dark">Are you sure you want to delete this category?</p>
      </div>
      <div class="modal-footer border-0 justify-content-center">
        <form id="deleteForm" method="post">
          {% csrf_token %}
          <button type="submit" class="btn btn-danger rounded-pill px-4">Delete</button>
          <button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Delete Confirmation Script -->
<script>
  function confirmDelete(deleteUrl) {
    document.getElementById('deleteForm').action = deleteUrl;
    var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
    deleteModal.show();
  }
</script>
{% endblock %}