{% extends "base.html" %} 
{% load static %}

{% block title %}Products{% endblock %}

{% block header_title %}Products{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col-md-8">
            <form method="get" class="card">
                <div class="card-body">
                    <div class="row g-2">
                        <div class="col-md-5">
                            <input type="text" name="query" class="form-control" placeholder="Search products..." value="{{ search_form.query.value|default:'' }}">
                        </div>
                        <div class="col-md-4">
                            {{ search_form.category }}
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-search"></i> Search
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-4 text-end">
            {% if user.role == 'admin' or user.role == 'manager' %}
                <a href="{% url 'product_add' %}" class="btn btn-success">
                    <i class="fas fa-plus"></i> Add Product
                </a>
                <a href="{% url 'category_list' %}" class="btn btn-outline-primary">
                    <i class="fas fa-tags"></i> Categories
                </a>
            {% endif %}
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Product List</h5>
        </div>
        <div class="card-body">
            {% if products %}
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Image</th>
                                <th>Name</th>
                                <th>Category</th>
                                <th>Price</th>
                                <th>Stock</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for product in products %}
                                <tr>
                                    <td>
                                        {% if product.image %}
                                            <img src="{{ product.image.url }}" alt="{{ product.name }}" style="width: 50px; height: 50px; object-fit: cover;">
                                        {% else %}
                                            <div class="bg-light text-center" style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
                                                <i class="fas fa-box text-muted"></i>
                                            </div>
                                        {% endif %}
                                    </td>
                                    <td>{{ product.name }}</td>
                                    <td>
                                        {% if product.category %}
                                            {{ product.category.name }}
                                        {% else %}
                                            <span class="text-muted">Uncategorized</span>
                                        {% endif %}
                                    </td>
                                    <td>KSh {{ product.price }}</td>
                                    <td>
                                        {% if product.is_low_stock %}
                                            <span class="badge bg-warning">Low Stock</span>
                                        {% endif %}
                                        {{ product.quantity }}
                                    </td>
                                    <td>
                                        {% if product.is_active %}
                                            <span class="badge bg-success">Active</span>
                                        {% else %}
                                            <span class="badge bg-danger">Inactive</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <a href="{% url 'product_detail' product.id %}" class="btn btn-outline-primary">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            {% if user.role == 'admin' or user.role == 'manager' %}
                                                <a href="{% url 'product_edit' product.id %}" class="btn btn-outline-primary">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <a href="{% url 'adjust_stock' product.id %}" class="btn btn-outline-secondary">
                                                    <i class="fas fa-boxes"></i>
                                                </a>
                                                <a href="{% url 'product_delete' product.id %}" class="btn btn-outline-danger">
                                                    <i class="fas fa-trash"></i>
                                                </a>
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                {% if products.has_other_pages %}
                <nav aria-label="Product pagination" class="mt-4">
                    <ul class="pagination justify-content-center">
                        {% if products.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1{% if search_form.query.value %}&query={{ search_form.query.value }}{% endif %}{% if search_form.category.value %}&category={{ search_form.category.value }}{% endif %}" aria-label="First">
                                    <span aria-hidden="true">&laquo;&laquo;</span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ products.previous_page_number }}{% if search_form.query.value %}&query={{ search_form.query.value }}{% endif %}{% if search_form.category.value %}&category={{ search_form.category.value }}{% endif %}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        {% endif %}
                        
                        {% for i in products.paginator.page_range %}
                            {% if products.number == i %}
                                <li class="page-item active" aria-current="page">
                                    <span class="page-link">{{ i }}</span>
                                </li>
                            {% elif i > products.number|add:'-3' and i < products.number|add:'3' %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ i }}{% if search_form.query.value %}&query={{ search_form.query.value }}{% endif %}{% if search_form.category.value %}&category={{ search_form.category.value }}{% endif %}">{{ i }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if products.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ products.next_page_number }}{% if search_form.query.value %}&query={{ search_form.query.value }}{% endif %}{% if search_form.category.value %}&category={{ search_form.category.value }}{% endif %}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ products.paginator.num_pages }}{% if search_form.query.value %}&query={{ search_form.query.value }}{% endif %}{% if search_form.category.value %}&category={{ search_form.category.value }}{% endif %}" aria-label="Last">
                                    <span aria-hidden="true">&raquo;&raquo;</span>
                                </a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            {% else %}
                <div class="text-center py-4">
                    <p class="mb-0">No products found. {% if search_form.query.value or search_form.category.value %}Try a different search.{% else %}{% if user.role == 'admin' or user.role == 'manager' %}Add your first product!{% endif %}{% endif %}</p>
                    {% if user.role == 'admin' or user.role == 'manager' %}
                        <a href="{% url 'product_add' %}" class="btn btn-primary mt-3">
                            <i class="fas fa-plus"></i> Add Product
                        </a>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}