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

{% load l10n %}

{% block title %}Home{% endblock %}

{% block content %}

    <h1>Home</h1>

    <section>
        <h2>Resumen del mes</h2>
        <p>Total: {{ kpi_total|floatformat:2 }}</p>
        <p>Gastos: {{ kpi_count }}</p>
        <p>Categorías: {{ kpi_categories }}</p>
    </section>

    <section>
        <h2>Últimos gastos</h2>
        <ul>
            {% for expense in last_expenses %}
                <li>
                    {{ expense.date }} - 
                    {{ expense.category.name }} - 
                    {{ expense.amount }}
                </li>
            {% empty %}
                <li>No hay gastos</li>
            {% endfor %}
        </ul>
    </section>

    <section>
        <div class="dashboard-grid">
            <div class="card card-chart">
                <h2>Últimos meses</h2>                
                <canvas id="miniChart"></canvas>
            </div>
        </div>

        <script>
            const labels = {{ mini_chart_labels|safe }};
            const data = {{ mini_chart_data|safe }};
            
            const ctx = document.getElementById('miniChart');

            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets:[{
                        label: 'Gastos',
                        data: data,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });
        </script>  

    </section>

    <h3>Objetivos</h3>
    {% if goals %}
        <div class="goals-widget">
            {% for goal in goals %}
                <div class="goal-card">
                    <strong>{{ goal.name }}</strong>

                    <div class="progress-bar">
                        <div class="progress-fill
                        {% if goal.percentage < 50 %} low
                        {% elif goal.percentage < 80 %} medium
                        {% else %} high
                        {% endif %}"
                        style="width: {{ goal.percentage|unlocalize }}%"></div>
                    </div>

                    <span class="progress-label">
                        {{ goal.progress|floatformat:1 }}€ / {{ goal.target_amount|floatformat:1 }}€ ({{ goal.percentage|floatformat:1 }}%)
                    </span>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <p>No tienes objetivos aún.</p>
    {% endif %}

{% endblock %}