{% extends 'base.html' %}

{% block page_title %}Category Management{% endblock %}

{% block header_actions %}
<div class="btn-group me-2">
    <a href="{% url 'category_create' %}" class="btn btn-sm btn-primary">
        <i class="fas fa-plus me-1"></i> Add Category
    </a>
    <a href="{% url 'product_list' %}" class="btn btn-sm btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i> Back to Products
    </a>
</div>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card shadow">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-tags me-2"></i>Categories</h5>
                <span class="badge bg-light text-dark">{{ categories.count }} categories</span>
            </div>
            <div class="card-body">
                <!-- Search Form -->
                <form method="get" class="mb-4">
                    <div class="input-group">
                        <input type="text" class="form-control" name="search" 
                               value="{{ search_query }}" placeholder="Search categories...">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i>
                        </button>
                        {% if search_query %}
                        <a href="{% url 'category_list' %}" class="btn btn-outline-secondary">
                            Clear
                        </a>
                        {% endif %}
                    </div>
                </form>
                
                <!-- Categories Table -->
                <div class="table-responsive">
                    <table class="table table-hover data-table">
                        <thead class="table-light">
                            <tr>
                                <th>Category Name</th>
                                <th>Description</th>
                                <th>Products</th>
                                <th>Inventory Value</th>
                                <th>Created</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for category in categories %}
                            <tr>
                                <td>
                                    <strong>{{ category.name }}</strong>
                                </td>
                                <td>
                                    {% if category.description %}
                                    {{ category.description|truncatechars:50 }}
                                    {% else %}
                                    <span class="text-muted">No description</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge bg-info">{{ category.product_count }}</span>
                                </td>
                                <td>
                                    <strong>KSh {{ category.total_inventory_value|floatformat:2 }}</strong>
                                </td>
                                <td>
                                    {{ category.created_at|date:"M d, Y" }}
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a href="{% url 'category_edit' category.id %}" 
                                           class="btn btn-outline-primary btn-action" 
                                           title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button class="btn btn-outline-danger btn-action" 
                                                onclick="deleteCategory({{ category.id }}, '{{ category.name }}')"
                                                title="Delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                        <a href="{% url 'product_list' %}?category={{ category.id }}" 
                                           class="btn btn-outline-info btn-action" 
                                           title="View Products">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="6" class="text-center py-4">
                                    <i class="fas fa-tags fa-3x text-muted mb-3"></i>
                                    <h5>No categories found</h5>
                                    <p class="text-muted">Create your first category to organize products.</p>
                                    <a href="{% url 'category_create' %}" class="btn btn-primary">
                                        <i class="fas fa-plus me-1"></i> Create Category
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer bg-white">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Statistics</h6>
                        <div class="d-flex">
                            <div class="me-4">
                                <span class="fw-bold">Total Categories:</span>
                                <span class="ms-2">{{ categories.count }}</span>
                            </div>
                            <div class="me-4">
                                <span class="fw-bold">Total Products:</span>
                                <span class="ms-2">{{ total_products|default:"0" }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 text-end">
                        <a href="{% url 'category_create' %}" class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i> Add New Category
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>Confirm Delete
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="deleteMessage">Are you sure you want to delete this category?</p>
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    Deleting a category will not delete the products. Products will be moved to "Uncategorized".
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="fas fa-trash me-1"></i> Delete
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    let categoryToDelete = null;
    let categoryName = '';
    
    function deleteCategory(id, name) {
        categoryToDelete = id;
        categoryName = name;
        $('#deleteMessage').html(`Are you sure you want to delete the category "<strong>${name}</strong>"?`);
        $('#deleteModal').modal('show');
    }
    
    $('#confirmDeleteBtn').click(function() {
        if (!categoryToDelete) return;
        
        $.ajax({
            url: `/category/${categoryToDelete}/delete/`,
            method: 'POST',
            headers: {
                'X-CSRFToken': csrftoken
            },
            success: function(response) {
                if (response.success) {
                    alert(response.message);
                    location.reload();
                } else {
                    alert(response.message);
                }
                $('#deleteModal').modal('hide');
            },
            error: function(xhr, status, error) {
                alert('An error occurred: ' + error);
                $('#deleteModal').modal('hide');
            }
        });
    });
</script>
{% endblock %}