{% extends 'base.html' %}
{% load static %}

{% block title %}Financial Reports - Rapha-Bethel BNPS{% endblock %}

{% block content %}
<div class="container-fluid">
    <h1 class="h3 mb-4 text-gray-800">Financial Reports</h1>

    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="card shadow">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">Revenue Summary</h6>
                </div>
                <div class="card-body">
                    <canvas id="revenueChart" height="200"></canvas>
                </div>
            </div>
        </div>
        
        <div class="col-md-6 mb-4">
            <div class="card shadow">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">Payment Methods</h6>
                </div>
                <div class="card-body">
                    <canvas id="paymentChart" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 mb-4">
            <div class="card shadow">
                <div class="card-body text-center">
                    <h3 class="text-primary">{{ total_revenue }} XAF</h3>
                    <p class="text-muted">Total Revenue</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card shadow">
                <div class="card-body text-center">
                    <h3 class="text-success">{{ collected }} XAF</h3>
                    <p class="text-muted">Amount Collected</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card shadow">
                <div class="card-body text-center">
                    <h3 class="text-warning">{{ outstanding }} XAF</h3>
                    <p class="text-muted">Outstanding Balance</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Revenue Chart
    new Chart(document.getElementById('revenueChart'), {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
            datasets: [{
                label: 'Revenue',
                data: [1200000, 1350000, 1100000, 1450000, 1600000, 1550000],
                borderColor: '#4CAF50'
            }]
        }
    });

    // Payment Methods Chart
    new Chart(document.getElementById('paymentChart'), {
        type: 'doughnut',
        data: {
            labels: ['Cash', 'Mobile Money', 'Bank Transfer'],
            datasets: [{
                data: [60, 25, 15],
                backgroundColor: ['#4CAF50', '#2196F3', '#FF9800']
            }]
        }
    });
});
</script>
{% endblock %}