{% extends 'base.html' %}
{% load static %}
{% block title %}Student Report — {{ student.get_full_name }}{% 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">Student Report</h1>
            <p class="text-muted">{{ student.get_full_name }} &bull; {{ student.student_id }} &bull; Term {{ term }}, {{ year }}</p>
        </div>
        <a href="{% url 'reports:academic_report' %}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left me-2"></i>Back</a>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3"><h6 class="m-0 font-weight-bold text-primary">Student Info</h6></div>
                <div class="card-body">
                    <table class="table table-borderless mb-0">
                        <tr><td class="text-muted">Name</td><td class="fw-bold">{{ student.get_full_name }}</td></tr>
                        <tr><td class="text-muted">ID</td><td>{{ student.student_id }}</td></tr>
                        <tr><td class="text-muted">Class</td><td>{{ student.current_class|default:"—" }}</td></tr>
                        <tr><td class="text-muted">Status</td><td><span class="badge bg-{% if student.status == 'active' %}success{% else %}secondary{% endif %}">{{ student.get_status_display }}</span></td></tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3"><h6 class="m-0 font-weight-bold text-success">Attendance</h6></div>
                <div class="card-body">
                    <div class="text-center mb-3">
                        <div class="h2 fw-bold {% if attendance.rate >= 80 %}text-success{% elif attendance.rate >= 60 %}text-warning{% else %}text-danger{% endif %}">{{ attendance.rate }}%</div>
                        <div class="text-muted small">Attendance Rate</div>
                    </div>
                    <div class="progress mb-3" style="height:12px;">
                        <div class="progress-bar bg-{% if attendance.rate >= 80 %}success{% elif attendance.rate >= 60 %}warning{% else %}danger{% endif %}" style="width:{{ attendance.rate }}%"></div>
                    </div>
                    <table class="table table-borderless table-sm mb-0">
                        <tr><td class="text-muted">Total Days</td><td class="fw-bold">{{ attendance.total }}</td></tr>
                        <tr><td class="text-success">Present</td><td class="fw-bold">{{ attendance.present }}</td></tr>
                        <tr><td class="text-danger">Absent</td><td class="fw-bold">{{ attendance.absent }}</td></tr>
                        <tr><td class="text-warning">Late</td><td class="fw-bold">{{ attendance.late }}</td></tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3"><h6 class="m-0 font-weight-bold text-warning">Fees Summary</h6></div>
                <div class="card-body">
                    <table class="table table-borderless mb-0">
                        <tr><td class="text-muted">Total Invoiced</td><td class="fw-bold">{{ fees.invoiced|floatformat:0 }} XAF</td></tr>
                        <tr><td class="text-success">Total Paid</td><td class="fw-bold text-success">{{ fees.paid|floatformat:0 }} XAF</td></tr>
                        <tr class="{% if fees.balance > 0 %}table-warning{% else %}table-success{% endif %}">
                            <td class="fw-bold">Balance Due</td><td class="fw-bold">{{ fees.balance|floatformat:0 }} XAF</td>
                        </tr>
                    </table>
                    <div class="mt-3">
                        <a href="{% url 'students:student_detail' student.pk %}" class="btn btn-outline-primary btn-sm w-100">View Full Profile</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Term filter -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <form method="get" class="row g-3 align-items-end">
                <div class="col-md-4"><label class="form-label">Term</label>
                    <select name="term" class="form-select">
                        {% for t in "123" %}<option value="{{ t }}" {% if term|stringformat:"s" == t %}selected{% endif %}>Term {{ t }}</option>{% endfor %}
                    </select>
                </div>
                <div class="col-md-4"><label class="form-label">Year</label><input type="number" name="year" class="form-control" value="{{ year }}"></div>
                <div class="col-md-4"><button type="submit" class="btn btn-primary w-100">Update Report</button></div>
            </form>
        </div>
    </div>
</div>
{% endblock %}
