{% extends "base.html" %}
{% block interface %}

<section id="interface">
    {% include "_navigation.html" %}
    
    <h3 class="i-name">
        Informe de cuenta: {{ cuenta.nombre }}  
    </h3>
    <h4 style="padding: 30px 30px 0 30px;">
    Periodo del {{ fecha_inicio }} hasta {{ fecha_fin }} -  Saldo inicial: {{ saldo_inicial|floatformat:2 }} €
    </h4>

    <div class="board"> 
        <div class="form-group">
            <form method="get" class="form-inline">
                <div class="row g-2 align-items-end">
                    <input type="hidden" name="cuenta_id" value="{{ cuenta.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 class="table table-striped">
            <thead>
                <tr>
                    <th>Fecha</th>
                    <th>Desde</th>
                    <th>Hasta</th>
                    <th>Descripción</th>
                    <th class="text-end">Monto (€)</th>
                    <th class="text-end">Saldo después (€)</th>
                    <th class="text-end">Acciones</th>
                </tr>
            </thead>
            <tbody>
                {% for item in movimientos_con_saldo %}
                <tr>
                    <td>{{ item.fecha|date:"Y-m-d H:i" }}</td>
                    <td>{{ item.desde }}</td>
                    <td>{{ item.hasta }}</td>
                    <td>{{ item.descripcion }}</td>
                    {% if item.tipo == 'Ingreso' %}
                    <td style="color: green" class="text-end">{{ item.monto|floatformat:2 }}</td>
                    {% else %}
                    <td style="color: red" class="text-end">-{{ item.monto|floatformat:2 }}</td>
                    {% endif %}
                    <td class="text-end">{{ item.saldo_despues|floatformat:2 }}</td>
                    <td class="edit">
                        <a href="{% url 'editar_movimiento' item.id %}">
                            <i class="bi bi-pencil"></i>
                        </a>
                        <a href="{% url 'eliminar_movimiento' item.id %}" onclick="return confirm('¿Estás seguro de que quieres eliminar este movimiento?');">
                            <i class="bi bi-trash"></i>
                        </a>
                        <a href="{% url 'duplicar_movimiento' item.id %}">
                            <i class="bi bi-files"></i>
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        <div class="botones">
            <a href="{% url 'listar_cuentas' %}" class="btn btn-secondary">Volver</a>
            <a href="{% url 'informe_cuenta_pdf'%}?cuenta_id={{ cuenta.id }}&fecha_inicio={{ fecha_inicio }}&fecha_fin={{ fecha_fin }}" class="btn btn-outline-primary" target="_blank">
            Descargar PDF
            </a>
       </div>
    </div>
</section>
{% endblock %}