{% extends 'expenses/base.html' %}
{% load i18n %}

{% block page_title %}{% trans 'Expenses' %}{% endblock %}

{% block page_actions %}
    <a href="{% url 'expenses:expense_create' %}" class="btn btn-primary">
        <i class="fas fa-plus me-2"></i> {% trans 'Add Expense' %}
    </a>
{% endblock %}

{% block expense_content %}
<div class="row mb-4">
    <div class="col-12">
        <form method="get" class="row g-3">
            <div class="col-md-3">
                <input type="text" name="q" class="form-control" placeholder="{% trans 'Search...' %}" value="{{ search_query }}">
            </div>
            <div class="col-md-2">
                <select name="status" class="form-select">
                    <option value="">{% trans 'All Status' %}</option>
                    {% for value, label in status_choices.items %}
                        <option value="{{ value }}" {% if current_status == value %}selected{% endif %}>
                            {{ label }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <input type="date" name="date_from" class="form-control" value="{{ date_from }}" placeholder="{% trans 'From Date' %}">
            </div>
            <div class="col-md-2">
                <input type="date" name="date_to" class="form-control" value="{{ date_to }}" placeholder="{% trans 'To Date' %}">
            </div>
            <div class="col-md-3">
                <button type="submit" class="btn btn-primary me-2">
                    <i class="fas fa-filter me-1"></i> {% trans 'Filter' %}
                </button>
                <a href="{% url 'expenses:expense_list' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-sync-alt me-1"></i> {% trans 'Reset' %}
                </a>
            </div>
        </form>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-hover">
        <thead class="table-light">
            <tr>
                <th>{% trans 'Reference' %}</th>
                <th>{% trans 'Date' %}</th>
                <th>{% trans 'Description' %}</th>
                <th>{% trans 'Category' %}</th>
                <th class="text-end">{% trans 'Amount' %}</th>
                <th>{% trans 'Status' %}</th>
                <th class="text-end">{% trans 'Actions' %}</th>
            </tr>
        </thead>
        <tbody>
            {% for expense in expenses %}
            <tr>
                <td>{{ expense.reference }}</td>
                <td>{{ expense.expense_date|date:"M d, Y" }}</td>
                <td>{{ expense.description|truncatechars:50 }}</td>
                <td>{{ expense.category.name }}</td>
                <td class="text-end">KSh {{ expense.amount|floatformat:2 }}</td>
                <td>
                    <span class="badge bg-{{ expense.status|default:'secondary' }}">
                        {{ expense.get_status_display }}
                    </span>
                </td>
                <td class="text-end">
                    <div class="btn-group">
                        <a href="{% url 'expenses:expense_detail' expense.pk %}" class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-eye"></i>
                        </a>
                        <a href="{% url 'expenses:expense_edit' expense.pk %}" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-edit"></i>
                        </a>
                        <a href="{% url 'expenses:expense_delete' expense.pk %}" class="btn btn-sm btn-outline-danger">
                            <i class="fas fa-trash"></i>
                        </a>
                    </div>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="7" class="text-center py-4">
                    <div class="text-muted">
                        <i class="fas fa-inbox fa-3x mb-3"></i>
                        <p class="mb-0">{% trans 'No expenses found.' %}</p>
                        <a href="{% url 'expenses:expense_create' %}" class="btn btn-primary mt-3">
                            <i class="fas fa-plus me-1"></i> {% trans 'Add Your First Expense' %}
                        </a>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% if is_paginated %}
<nav aria-label="Page navigation" class="mt-4">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1{% if current_status %}&status={{ current_status }}{% endif %}{% if date_from %}&date_from={{ date_from }}{% endif %}{% if date_to %}&date_to={{ date_to }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">
                    &laquo; {% trans 'First' %}
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if current_status %}&status={{ current_status }}{% endif %}{% if date_from %}&date_from={{ date_from }}{% endif %}{% if date_to %}&date_to={{ date_to }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">
                    {% trans 'Previous' %}
                </a>
            </li>
        {% endif %}
        
        {% for num in page_obj.paginator.page_range %}
            {% if page_obj.number == num %}
                <li class="page-item active">
                    <span class="page-link">{{ num }}</span>
                </li>
            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ num }}{% if current_status %}&status={{ current_status }}{% endif %}{% if date_from %}&date_from={{ date_from }}{% endif %}{% if date_to %}&date_to={{ date_to }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">
                        {{ num }}
                    </a>
                </li>
            {% endif %}
        {% endfor %}
        
        {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if current_status %}&status={{ current_status }}{% endif %}{% if date_from %}&date_from={{ date_from }}{% endif %}{% if date_to %}&date_to={{ date_to }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">
                    {% trans 'Next' %}
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if current_status %}&status={{ current_status }}{% endif %}{% if date_from %}&date_from={{ date_from }}{% endif %}{% if date_to %}&date_to={{ date_to }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">
                    {% trans 'Last' %} &raquo;
                </a>
            </li>
        {% endif %}
    </ul>
</nav>
{% endif %}
{% endblock %}