{% extends "expenses/base.html" %}
{% block title %}Ingresos{% endblock %}
{% block content %}
    <h1>Mis ingresos</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 'income_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 'income_list' %}">Quitar el rango</a>
            </p>
        {% endif %}
    </form>

    <br>

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

    <br>
    <br>

    <section>
        <strong>Total (sin traspasos):</strong> {{ kpi_total|floatformat:2 }}€ |
        <strong>Ingresos:</strong> {{ kpi_count }}
    </section>

    <div class="table-wrap">
    <table>
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Cuenta</th>
                <th>Cantidad</th>
                <th>Fecha ingreso</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for income in page_obj %}
                <tr>
                    <td>
                        {{ income.name }}
                        {% if income.is_transfer %}
                            <span class="badge badge-neutral">Traspaso</span>
                        {% endif %}
                    </td>
                    <td>{{ income.account.name }}</td>
                    <td>{{ income.amount|floatformat:2 }}</td>
                    <td>{{ income.date }}</td>
                    <td class="table-actions">
                        <a href="{% url 'income_edit' income.id %}">Editar</a>
                        <a href="{% url 'income_delete' income.id %}" class="danger">Eliminar</a>
                    </td>
                </tr>
            {% empty %}
            <tr>
                <td colspan="5" class="empty-state">
                    {% if filters_active %}
                        <p>No hay ingresos que coincidan con los filtros</p>
                        <a href="{% url 'income_list' %}">Quitar los filtros</a>
                    {% else %}
                        <p>No hay ingresos</p>
                        <a href="{% url 'income_create' %}">Añade el primero</a>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>

    <nav class="pagination" aria-label="Paginación de ingresos">
        <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 %}