{% extends "core/base.html" %}
{% load humanize %}

{% block title %}Resumen de Cobros{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1 class="text-primary text-center mb-4">Resumen de Cobros - {{ anho }}</h1>

    <!-- Selector de Año -->
    <form method="get" class="mb-3">
        <label for="anho" class="form-label">Seleccionar Año</label>
        <select name="anho" id="anho" class="form-select" onchange="this.form.submit()">
            {% for year in anhos_disponibles %}
                <option value="{{ year }}" {% if anho == year %}selected{% endif %}>{{ year }}</option>
            {% endfor %}
        </select>
    </form>

    <!-- Tabla de Resumen -->
    <table class="table table-bordered table-striped text-center">
        <thead class="table-primary">
            <tr>
                <th>MES</th>
                <th>USD</th>
                <th>GS</th>
            </tr>
        </thead>
        <tbody>
            {% for resumen in resumen_mensual %}
                <tr>
                    <td>{{ resumen.mes }}</td>
                    <td>{{ resumen.total_usd|floatformat:2 }}</td>
                    <td>{{ resumen.total_gs|intcomma }}</td>
                </tr>
            {% endfor %}
        </tbody>
        <tfoot class="table-secondary">
            <tr>
                <th>TOTAL</th>
                <th>{{ total_usd|floatformat:2 }}</th>
                <th>{{ total_gs|intcomma }}</th>
            </tr>
        </tfoot>
    </table>
</div>
{% endblock %}