{% extends "base.html" %}

{% block content %}
<div class="container mt-4">

    <h1>Financial Report</h1>

    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card text-center">
                <div class="card-body">
                    <h2 class="text-success">
                        KSh {{ total_amount|floatformat:0 }}
                    </h2>
                    <p class="card-text">Total Contributions</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <canvas id="financialChart" height="100"></canvas>
        </div>
    </div>

    <a href="{% url 'reports_list' %}" class="btn btn-secondary mt-3">
        Back to Reports
    </a>

</div>

<script>
    const ctx = document.getElementById('financialChart').getContext('2d');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {{ labels|safe }},
            datasets: [{
                label: 'Monthly Contributions',
                data: {{ data|safe }},
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>

{% endblock %}