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

{% block title %}Dashboard{% endblock %}

{% block content %}
    
    <section class="dashboard-context">
        <h2>
            {% if selected_account_obj %}
                {{ selected_account_obj.name }}
            {% else %}
                Todas las cuentas
            {% endif %}
        </h2>

        <p class="muted">
            {% if selected_month %}
                {{ selected_month }}/{{ selected_year}}
            {% else %}
                Año {{ selected_year }}
            {% endif %}
        </p>
    </section>

    <!-- ========================= -->
    <!-- Filters -->
    <!-- ========================= -->
    
    <section class="dashboard-filters">
        <div class="dashboard-presets">
            <a href="{% url 'dashboard' %}" data-period="this_month" class="preset {% if period == 'this_month' %}active{% endif %}">
                Este mes
            </a>
            
            <a href="{% url 'dashboard' %}" data-period="last_month" class="preset {% if period == 'last_month' %}active{% endif %}">
                Mes anterior
            </a>

            <a href="{% url 'dashboard' %}" data-period="this_year" class="preset {% if period == 'this_year' %}active{% endif %}">
                Este año
            </a>
        </div>

        <br>

        <form method="get">
            <select name="account" id="account">
                <option value="">Todas las cuentas</option>
                {% for acc in accounts %}
                    <option value="{{ acc.id }}"
                        {% if selected_account == acc.id %}selected{% endif %}
                    >
                        {{ acc.name }}
                    </option>
                {% endfor %}
            </select>

            <select name="year">
                {% for y in year_list %}
                    <option value="{{ y }}"
                        {% if y == selected_year %}selected{% endif %}
                    >
                        {{ y }}
                    </option>
                {% endfor %}
            </select>
            
            <select name="month">
                <option value="">Todo el año</option>
                {% for m in months %}
                    <option value="{{ m }}"
                    {% if m == selected_month %}selected{% endif %}
                    >
                        {{ m }}
                    </option>
                {% endfor %}
            </select>

            <label class="checkbox">
                <input type="checkbox" name="compare" value="1"
                    {% if compare_enabled %}checked{% endif %}>
                Comparar
            </label>

            <button type="submit">Aplicar</button>
        </form>

    </section>

    <script>
        document.querySelectorAll('.dashboard-presets  a').forEach(link => {
            link.addEventListener('click', e => {
                e.preventDefault();

                const period = link.dataset.period;
                const isActive = link.classList.contains('active');

                if (isActive) {
                    window.location.href = link.href;
                } else {
                    window.location.href = `${link.href}?period=${period}`
                }
            });
        });
    </script>

    <!-- ========================= -->
    <!-- KPIs -->
    <!-- ========================= -->

    <section class="kpi-grid">            

        <div class="kpi-card">
            <span class="kpi-label">Saldo actual</span>
            <span class="kpi-value">{{ kpi_balance|floatformat:2 }}€</span>
        </div>
        
        <div class="kpi-card">
            <span class="kpi-label">Gastos totales</span>
            <span class="kpi-value">{{ kpi_total }}€</span>
        </div>

        <div class="kpi-card">
            <span class="kpi-label">Nº de gastos</span>
            <span class="kpi-value">{{ kpi_count }}</span>
        </div>

        <div class="kpi-card">
            <span class="kpi-label">Categorías</span>
            <span class="kpi-value">{{ kpi_categories }}</span>
        </div>

    </section>

    <!-- ========================= -->
    <!-- Charts -->
    <!-- ========================= -->
    <section class="chart-box">
        <canvas id="mainChart"></canvas>
    </section>


    <h3>Evolución anual por cuenta ({{ selected_year }})</h3>

    <div class="dashboard-grid">
        {% for acc in accounts_charts %}
            <div class="card card-chart">
                <h3>{{ acc.name }}</h3>
                <p><strong>Saldo actual:</strong> {{ acc.current_balance|floatformat:2 }} €</p>

                <canvas id="accountChart{{ acc.id }}"></canvas>
            </div>
        {% endfor %}
    </div>

    <script>
        const labels = {{ chart_labels|safe }};
        const data = {{ chart_data|safe }};
        
        const ctx = document.getElementById('mainChart');

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets:[{
                    label: 'Gastos',
                    data: data,
                }]
            }
        });
    </script> 
    <script>
        const monthLabels = {{ chart_labels|safe }};

        {% for acc in accounts_charts %}
            new Chart(
                document.getElementById('accountChart{{ acc.id }}'),
                {
                    type: 'line',
                    data: {
                        labels: monthLabels,
                        datasets: [{
                            label: 'Saldo',
                            data: {{ acc.data|safe }},
                            fill: true,
                            tension: 0.3,
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false
                    }
                }
            );
        {% endfor %}
    </script>


    {% if compare_enabled %}
        <section class="comparison">
            <h3>Comparativa</h3>
            
            <p>
                Diferencia:
                <strong class="{% if kpi_trend == 'up' %}positive{% endif %}">
                    {% if kpi_trend == "up" %}+{% endif %}
                    {{ kpi_difference_abs|floatformat:2 }} €
                </strong>
                {% if kpi_percentage %}
                    ({{ kpi_percentage|floatformat:1 }}%)
                {% endif %}
            </p>
        </section>
    {% endif %}

    <table>
        <thead>
            <tr>
                <th>Categoría</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            {% for row in by_category %}
                <tr>
                    <td>{{ row.category__name }}</td>
                    <td>{{ row.total|floatformat:2 }} €</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

{% endblock %}