{% extends 'base.html' %}
{% load static %}
{% block title %}Bursar Dashboard - Rapha-Bethel BNPS{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">Bursar Dashboard</h1>
            <p class="text-muted">Financial overview — {{ "now"|date:"F Y" }}</p>
        </div>
        <div class="btn-group">
            <a href="{% url 'finance:invoice_create' %}" class="btn btn-primary"><i class="fas fa-plus me-2"></i>New Invoice</a>
            <a href="{% url 'finance:payment_add' %}" class="btn btn-success"><i class="fas fa-money-bill me-2"></i>Record Payment</a>
            <a href="{% url 'finance:financial_reports' %}" class="btn btn-outline-secondary"><i class="fas fa-chart-bar me-2"></i>Reports</a>
        </div>
    </div>

    <!-- KPI Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Total Revenue</div>
                    <div class="h4 mb-0 font-weight-bold">{{ total_revenue|floatformat:0 }} XAF</div>
                    <small class="text-muted">All time</small>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">This Month</div>
                    <div class="h4 mb-0 font-weight-bold">{{ monthly_revenue|floatformat:0 }} XAF</div>
                    <small class="text-muted">Net: {{ net_income|floatformat:0 }} XAF</small>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Pending Invoices</div>
                    <div class="h4 mb-0 font-weight-bold">{{ pending_invoices }}</div>
                    <a href="{% url 'finance:invoice_list' %}?status=sent" class="small text-warning">View all</a>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-danger shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Overdue</div>
                    <div class="h4 mb-0 font-weight-bold">{{ overdue_invoices }}</div>
                    <a href="{% url 'finance:invoice_list' %}?status=overdue" class="small text-danger">View all</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <!-- Revenue Chart -->
        <div class="col-lg-8">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Revenue — Last 6 Months (XAF)</h6>
                </div>
                <div class="card-body">
                    <canvas id="revenueChart" height="100"></canvas>
                </div>
            </div>
        </div>
        <!-- Expenses Summary -->
        <div class="col-lg-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">This Month</h6>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-3 pb-3 border-bottom">
                        <span class="text-success fw-bold"><i class="fas fa-arrow-up me-2"></i>Revenue</span>
                        <span class="fw-bold">{{ monthly_revenue|floatformat:0 }} XAF</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3 pb-3 border-bottom">
                        <span class="text-danger fw-bold"><i class="fas fa-arrow-down me-2"></i>Expenses</span>
                        <span class="fw-bold">{{ monthly_expenses|floatformat:0 }} XAF</span>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="fw-bold">Net Income</span>
                        <span class="fw-bold {% if net_income >= 0 %}text-success{% else %}text-danger{% endif %}">
                            {{ net_income|floatformat:0 }} XAF
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Recent Payments -->
        <div class="col-lg-7">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">Recent Payments</h6>
                    <a href="{% url 'finance:payment_list' %}" class="btn btn-sm btn-outline-primary">View All</a>
                </div>
                <div class="card-body p-0">
                    <table class="table table-hover mb-0">
                        <thead class="table-light"><tr><th>Student</th><th>Amount</th><th>Date</th><th>Method</th></tr></thead>
                        <tbody>
                            {% for payment in recent_payments %}
                            <tr>
                                <td><a href="{% url 'students:student_detail' payment.student.pk %}">{{ payment.student.get_full_name }}</a></td>
                                <td class="text-success fw-bold">{{ payment.amount|floatformat:0 }} XAF</td>
                                <td>{{ payment.payment_date|date:"d M Y" }}</td>
                                <td><span class="badge bg-info">{{ payment.get_payment_method_display }}</span></td>
                            </tr>
                            {% empty %}
                            <tr><td colspan="4" class="text-center text-muted py-3">No recent payments</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Due Soon -->
        <div class="col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-warning">Due This Week</h6>
                    <a href="{% url 'finance:invoice_list' %}" class="btn btn-sm btn-outline-warning">All Invoices</a>
                </div>
                <div class="card-body p-0">
                    <table class="table table-hover mb-0">
                        <thead class="table-light"><tr><th>Student</th><th>Due</th><th>Balance</th></tr></thead>
                        <tbody>
                            {% for inv in upcoming_due %}
                            <tr>
                                <td>{{ inv.student.get_full_name }}</td>
                                <td class="text-danger">{{ inv.due_date|date:"d M" }}</td>
                                <td class="fw-bold">{{ inv.balance|floatformat:0 }} XAF</td>
                            </tr>
                            {% empty %}
                            <tr><td colspan="3" class="text-center text-muted py-3">Nothing due this week</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const ctx = document.getElementById('revenueChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: {{ chart_labels|safe }},
        datasets: [{
            label: 'Revenue (XAF)',
            data: {{ chart_data|safe }},
            backgroundColor: 'rgba(40, 167, 69, 0.7)',
            borderColor: 'rgba(40, 167, 69, 1)',
            borderWidth: 1
        }]
    },
    options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }
});
</script>
{% endblock %}