{% extends "base.html" %}
{% load humanize %}
{% load filtros_de_entorno %}

{% block content %}

<div class="container-xl">
    <div class="position-relative mb-3">  
        <h3 class="i-name">
            Informe de categoría: {{ categoria.nombre }}
        </h3>
        <h4 style="padding: 30px 30px 0 30px;">
        Periodo del {{ fecha_inicio }} hasta {{ fecha_fin }} -  Saldo final: {{ saldo_final|formato_numero:2  }} €
        </h4> 

        <div class="row g-4 mb-4">
            <div class="form-group">
                <form method="get" class="form-inline mb-3">
                    <div class="row g-2 align-items-end">
                        <input type="hidden" name="categoria_id" value="{{ categoria.id }}">
                        <div class="col-auto">
                            <label>Desde:</label>
                            <input type="date" name="fecha_inicio" value="{{ fecha_inicio|date:'Y-m-d' }}">
                        </div>
                        <div class="col-auto">
                            <label>Hasta:</label>
                            <input type="date" name="fecha_fin" value="{{ fecha_fin|date:'Y-m-d' }}">
                        </div>
                        <div class="col-auto ">
                            <button type="submit" class="btn btn-primary">Filtrar</button>
                        </div>
                    </div>
                </form>
            </div>

            <table width="100%" class="table app-table-hover mb-0 text-left">
                <thead>
                    <tr>
                        <td>Fecha</td>
                        <td>Descripción</td>
                        <td>Origen</td>
                        <td>Destino</td>
                        <td class="text-end">Monto (€)</td>
                        <td class="text-end">Saldo Acumulado (€)</td>
                    </tr>
                </thead>

                <tbody>
                {% for movimiento in movimientos_con_saldo %}
                    <tr class="{% cycle 'fila-impar' 'fila-par' %}">
                        <td>{{ movimiento.movimiento.fecha|date:"Y-m-d H:i" }}</td>
                        <td>{{ movimiento.movimiento.descripcion }}</td>
                        <td>{{ movimiento.movimiento.cuenta_origen }}</td>
                        <td>{{ movimiento.movimiento.cuenta_destino }}</td>
                        {% if movimiento.movimiento.tipo == 'Ingreso' %}
                        <td style="color: green" class="text-end">{{ movimiento.movimiento.monto|formato_numero:2 }}</td>
                        {% else %}
                        <td style="color: red" class="text-end">-{{ movimiento.movimiento.monto|formato_numero:2 }}</td>
                        {% endif %}
                        <td class="text-end">{{ movimiento.saldo_despues|formato_numero:2 }}</td>
                    </tr>
                {% empty %}
                    <tr><td colspan="3">No hay movimientos para esta categoría en el periodo seleccionado.</td></tr>
                {% endfor %}
                </tbody>
            </table>

            <div class="row g-4 mb-4">
                <a href="{% url 'listar_categorias' %}" class="btn btn-secondary">Volver</a>
                <a href="{% url 'informe_categoria_pdf'%}?categoria_id={{ categoria.id }}&fecha_inicio={{ fecha_inicio }}&fecha_fin={{ fecha_fin }}" class="btn btn-outline-primary" target="_blank">
                Descargar PDF
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}