{% extends 'layouts/portal.html.twig' %}
{% block title %}{{ student.fullName }}{% endblock %}
{% block content %}
{% set hour = "now"|date('G') %}
{% set hello = hour < 12 ? 'Good morning' : (hour < 17 ? 'Good afternoon' : 'Good evening') %}
{% set att_total = attendance.summary.total ?: 0 %}
{% set present_pct = att_total ? ((attendance.summary.Present / att_total) * 100)|round : 0 %}
{% set fee_total = (paid_total + unpaid_total) %}
<div class="dash-hero mb-4">
    <div class="d-flex align-items-center gap-3">
        {% include 'admin/student/_thumb.html.twig' with { student: student, large: true } %}
        <div>
            <div class="dash-hero-date">{{ "now"|date('l, d M Y') }}</div>
            <h1>{{ hello }}, {{ student.fullName }}</h1>
            <p>{{ portal_prefix == 'parent' ? 'Parent dashboard' : 'Student dashboard' }} · {{ student.studentId }}</p>
            <div class="dash-chips">
                <span class="dash-chip">{{ student.campus }}</span>
                <span class="dash-chip">{{ student.session }}</span>
                <span class="dash-chip">{{ student.class }} · {{ student.section }}</span>
                <span class="dash-chip">{{ student.medium }} · {{ student.shift }}</span>
            </div>
        </div>
    </div>
</div>
{% if insight %}
<div class="card-soft p-3 mb-4 insight-item insight-{{ insight.severity }}">
    <div class="insight-item-head">
        <span class="insight-flag">{{ insight.severity == 'high' ? 'Act now' : 'Follow up' }}</span>
    </div>
    <p class="insight-advice mb-2">{{ insight.advice }}</p>
    <div class="insight-actions">
        <a href="{{ path(portal_prefix ~ '_attendance', nav_query) }}">Attendance</a>
        <a href="{{ path(portal_prefix ~ '_results', nav_query) }}">Results</a>
    </div>
</div>
{% endif %}
<div class="row g-3 mb-4">
    <div class="col-6 col-xl-3">
        <div class="card stat-card h-100"><div class="card-body">
            <div class="text-muted small">Attendance</div>
            <div class="fs-3 fw-bold" style="color:#232176;">{{ present_pct }}%</div>
            <div class="stat-foot">{{ attendance.summary.Present }}/{{ att_total }} present</div>
        </div></div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="card stat-card h-100"><div class="card-body">
            <div class="text-muted small">Due</div>
            <div class="fs-3 fw-bold" style="color:#232176;">{{ unpaid_total|number_format(0) }}</div>
            <div class="stat-foot">{{ fees.lines|length }} unpaid item{{ fees.lines|length == 1 ? '' : 's' }}</div>
        </div></div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="card stat-card h-100"><div class="card-body">
            <div class="text-muted small">Paid</div>
            <div class="fs-3 fw-bold" style="color:#232176;">{{ paid_total|number_format(0) }}</div>
            <div class="stat-foot">{{ fees.invoices|length }} recent receipt{{ fees.invoices|length == 1 ? '' : 's' }}</div>
        </div></div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="card stat-card h-100"><div class="card-body">
            <div class="text-muted small">Latest result</div>
            <div class="fs-3 fw-bold" style="color:#232176;">{{ latest_result ? latest_result.summary.grade : '—' }}</div>
            <div class="stat-foot">{{ latest_result ? latest_result.exam.examType : 'No exam yet' }}</div>
        </div></div>
    </div>
</div>
<div class="row g-3 mb-3">
    <div class="col-lg-4">
        {% include '_ui/chart_panel.html.twig' with { title: 'Attendance mix', canvas_id: 'chartAttendance', show: att_total > 0, empty: 'No attendance marked in this session.', compact: true } %}
    </div>
    <div class="col-lg-8">
        {% include '_ui/chart_panel.html.twig' with { title: 'Present days by month', canvas_id: 'chartMonthly', show: monthly_present|length > 0, empty: 'No monthly attendance yet.' } %}
    </div>
    <div class="col-lg-4">
        {% include '_ui/chart_panel.html.twig' with { title: 'Fees paid vs due', canvas_id: 'chartFees', show: fee_total > 0, empty: 'No fee activity yet.', compact: true } %}
    </div>
    <div class="col-lg-8">
        {% include '_ui/chart_panel.html.twig' with { title: 'Exam scores %', canvas_id: 'chartResults', show: results_chart|length > 0, empty: 'No published marks yet.' } %}
    </div>
</div>
<div class="row g-3">
    <div class="col-lg-6">
        <div class="card-soft p-4 h-100">
            <div class="dash-panel-title">Open fees</div>
            {% if fees.lines %}
                <ul class="list-unstyled mb-0">
                    {% for line in fees.lines|slice(0, 6) %}
                        <li class="d-flex justify-content-between py-1 border-bottom">
                            <span>{{ line.detail.accountHead.name }} · {{ line.label }}</span>
                            <span class="fw-semibold">{{ line.amount|number_format(0) }}</span>
                        </li>
                    {% endfor %}
                </ul>
                <a class="small mt-2 d-inline-block" href="{{ path(portal_prefix ~ '_fees', nav_query) }}">See all fees</a>
            {% else %}
                <div class="empty-state">Nothing unpaid in this date range.</div>
            {% endif %}
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card-soft p-4 h-100">
            <div class="dash-panel-title">Go to</div>
            <div class="dash-quick">
                <a href="{{ path(portal_prefix ~ '_attendance', nav_query) }}"><i class="fa-solid fa-clipboard-check"></i> Attendance</a>
                <a href="{{ path(portal_prefix ~ '_results', nav_query) }}"><i class="fa-solid fa-chart-column"></i> Results</a>
                <a href="{{ path(portal_prefix ~ '_fees', nav_query) }}"><i class="fa-solid fa-file-invoice"></i> Fees</a>
                <a href="{{ path(portal_prefix ~ '_routine', nav_query) }}"><i class="fa-solid fa-table"></i> Routine</a>
                <a href="{{ path(portal_prefix ~ '_messages', nav_query) }}"><i class="fa-solid fa-comments"></i> Messages</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="{{ asset('js/dashboard-charts.js') }}"></script>
<script>
DashboardCharts.doughnut('chartAttendance', {{ attendance_chart|json_encode|raw }}, DashboardCharts.statusColors);
DashboardCharts.bars('chartMonthly', {{ monthly_present|json_encode|raw }});
DashboardCharts.doughnut('chartFees', {{ fees_chart|json_encode|raw }});
DashboardCharts.bars('chartResults', {{ results_chart|json_encode|raw }}, DashboardCharts.accent);
</script>
{% endblock %}