{% extends 'layouts/portal.html.twig' %}
{% block title %}Attendance{% endblock %}
{% block content %}
<div class="page-head">
    <div>
        <h1 class="h3">Attendance</h1>
        <p class="text-muted mb-0">Marked days for {{ student.fullName }}</p>
    </div>
</div>
<form method="get" class="card-soft p-3 mb-3">
    {% if nav_query.student is defined %}<input type="hidden" name="student" value="{{ nav_query.student }}">{% endif %}
    <div class="row g-3 align-items-end">
        <div class="col-md-3">
            <label class="form-label" for="from">From</label>
            <input type="date" name="from" id="from" class="form-control" value="{{ from|date('Y-m-d') }}">
        </div>
        <div class="col-md-3">
            <label class="form-label" for="to">To</label>
            <input type="date" name="to" id="to" class="form-control" value="{{ to|date('Y-m-d') }}">
        </div>
        <div class="col-md-2">
            <button class="btn btn-brand w-100">Show</button>
        </div>
    </div>
</form>
<div class="row g-3 mb-3">
    {% for label, value in {'Marked': summary.total, 'Present': summary.Present, 'Absent': summary.Absent, 'Late': summary.Late, 'Leave': summary.Leave} %}
        <div class="col">
            <div class="card stat-card h-100"><div class="card-body">
                <div class="text-muted small">{{ label }}</div>
                <div class="fs-4 fw-bold" style="color:#232176;">{{ value }}</div>
            </div></div>
        </div>
    {% endfor %}
</div>
<div class="card-soft student-list-card">
    <div class="table-scroll">
        <table class="table table-modern">
            <thead><tr><th>Date</th><th>Status</th><th>Remark</th></tr></thead>
            <tbody>
            {% for row in rows %}
                <tr>
                    <td>{{ row.attendanceDate|date('d M Y') }}</td>
                    <td><span class="badge {{ row.attendanceStatus == 'Present' ? 'badge-ok' : 'badge-off' }}">{{ row.attendanceStatus }}</span></td>
                    <td>{{ row.remarks ?: '—' }}</td>
                </tr>
            {% else %}
                <tr><td colspan="3"><div class="empty-state">No attendance marked in this range.</div></td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}