{% extends "expenses/base.html" %}


{% block title %}
    Gastos
{% endblock %}
    
{% block content %}
    <h1>Mis gastos</h1>

    <form method="get" class="filters">
        <div class="filters-main">

            <label class="sr-only" for="filterYear">Año</label>
            <select name="year" id="filterYear">
                <option value="">Año</option>
                    {% for y in year_list %}
                    <option value="{{ y }}"
                    {% if selected_year == y %}selected{% endif %}
                    >
                    {{ y }}
                </option>
                {% endfor %}
            </select>

            <label class="sr-only" for="filterMonth">Mes</label>
            <select name="month" id="filterMonth">
                <option value="">Mes</option>
                    {% for m in months %}
                    <option value="{{ m }}"
                    {% if selected_month == m %}selected{% endif %}
                    >
                    {{ m }}
                </option>
                {% endfor %}
            </select>

            <label class="sr-only" for="filterAccount">Cuenta</label>
            <select name="account" id="filterAccount">
                <option value="">Cuenta</option>
                {% for acc in accounts %}
                    <option value="{{ acc.id }}"
                        {% if selected_account == acc.id %}selected{% endif %}
                    >
                        {{ acc.name }}
                </option>
                {% endfor %}
            </select>

            {% include "expenses/_date_range.html" %}

            <button type="submit" class="btn btn-primary">Filtrar</button>
            <a href="{% url 'expense_list' %}" class="btn btn-secondary">Limpiar</a>
        </div>

        {% if range_active %}
            <p class="range-notice">
                Mostrando el rango de fechas seleccionado; los filtros de año y mes no
                se aplican.
                <a href="{% url 'expense_list' %}">Quitar el rango</a>
            </p>
        {% endif %}

        <br>

        <details class="filters-advanced"
            {% if advanced_filters_open %}
                open
            {% endif %}
        >
            <summary>Filtros avanzados</summary>

            <div class="advanced-content">
                <label for="filterCategory">Categoría:</label>
                <select name="category" id="filterCategory" onchange="this.form.submit()">
                    <option value="">Todas</option>
                    {% for cat in categories %}
                        <option value="{{ cat.id }}"
                            {% if selected_category == cat.id %}selected{% endif%}
                        >
                            {{ cat.name }}
                        </option>
                    {% endfor %}
                </select>

                <div class="tags-filters" role="group" aria-label="Filtrar por etiquetas">
                    <span aria-hidden="true">Tags:</span>
                    <div class="active-tags">
                        {% for tag in tags_with_state %}
                        <a href="?{{ tag.query }}"
                            class="tag {% if tag.active %}active{% endif %}">
                            {{ tag.name }} {% if tag.active %} ✕{% endif %}
                        </a>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </details>
    </form>

    <br>

    <a class="btn" href="{% url 'expense_create' %}">➕ Nuevo gasto</a>

    <br>
    <br>

    <section>
        <strong>Total (sin traspasos):</strong> {{ kpi_total|floatformat:2 }}€ |
        <strong>Gastos:</strong> {{ kpi_count }} |
        <strong>Categorías:</strong> {{ kpi_categories }}
    </section>

    <div class="table-wrap">
    <table>
        <thead>
            <tr>
                <th>Fecha</th>
                <th>Categoría</th>
                <th>Importe</th>
                <th>Cuenta</th>
                <th>Etiquetas</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for expense in page_obj %}
                <tr>
                    <td>{{ expense.date }}</td>
                    <td>
                        {{ expense.category.name }}
                        {% if expense.is_transfer %}
                            <span class="badge badge-neutral">Traspaso</span>
                        {% endif %}
                    </td>
                    <td>{{ expense.amount }}</td>
                    <td>{{ expense.account.name }}</td>
                    <td>
                        {% for tag in expense.tags.all %}
                            <span class="tag">
                                {{ tag.name }}
                            </span>
                        {% empty %}
                            <span>-</span>
                        {% endfor %}
                    </td>
                    <td class="table-actions">
                        {% if expense.fuel_data %}
                            <a href="{% url 'fuel_edit' expense.id %}?next={{ request.get_full_path|urlencode }}">Editar</a>
                            <a href="{% url 'fuel_delete' expense.id %}?next={{ request.get_full_path|urlencode }}" class="danger">Eliminar</a>
                        {% else %}
                            <a href="{% url 'expense_edit' expense.id %}">Editar</a>
                            <a href="{% url 'expense_delete' expense.id %}" class="danger">Eliminar</a>
                        {% endif %}                        
                    </td>
                </tr>
            {% empty %}
                <tr>
                    <td colspan="6" class="empty-state">
                        {% if filters_active %}
                            <p>No hay gastos que coincidan con los filtros</p>
                            <a href="{% url 'expense_list' %}">Quitar los filtros</a>
                        {% else %}
                            <p>No hay gastos</p>
                            <a href="{% url 'expense_create' %}">Añade el primero</a>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>

    <nav class="pagination" aria-label="Paginación de gastos">
        <span class="step-links">
            {% if page_obj.has_previous %}
                <a href="?page=1{% if query_params %}&{{ query_params }}{% endif %}">&laquo; Primero</a>
                <a href="?page={{ page_obj.previous_page_number }}{% if query_params %}&{{ query_params }}{% endif %}">Anterior</a>
            {% endif %}

            <span>Página {{ page_obj.number }} de {{ page_obj.paginator.num_pages }}</span>

            {% if page_obj.has_next %}
                <a href="?page={{ page_obj.next_page_number }}{% if query_params %}&{{ query_params }}{% endif %}">Siguiente</a>
                <a href="?page={{ page_obj.paginator.num_pages }}{% if query_params %}&{{ query_params }}{% endif %}">Último &raquo;</a>
            {% endif %}
        </span>
    </nav>

{% endblock %}