{% extends 'base.html' %}
{% load static %}
{% block title %}Attendance — {{ class }}{% 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">{{ class }} — Monthly Attendance</h1>
        <p class="text-muted">{{ month }}/{{ year }}</p></div>
        <a href="{% url 'reports:attendance_report' %}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left me-2"></i>Back</a>
    </div>

    <div class="card shadow mb-4">
        <div class="card-body">
            <form method="get" class="row g-3 align-items-end">
                <div class="col-md-3"><label class="form-label">Month</label>
                    <select name="month" class="form-select">
                        {% for num, name in months %}
                        <option value="{{ num }}" {% if month == num %}selected{% endif %}>{{ name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3"><label class="form-label">Year</label><input type="number" name="year" class="form-control" value="{{ year }}"></div>
                <div class="col-md-3"><button type="submit" class="btn btn-primary w-100">Apply</button></div>
            </form>
        </div>
    </div>

    <div class="card shadow">
        <div class="card-header py-3"><h6 class="m-0 font-weight-bold text-primary">Daily Attendance Grid</h6></div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-bordered table-sm mb-0" style="font-size:0.8rem;">
                    <thead class="table-dark">
                        <tr>
                            <th style="min-width:160px;">Student</th>
                            {% for day in days %}
                            <th class="text-center {% if day.weekday >= 5 %}table-secondary{% endif %}" style="min-width:36px;" title="{{ day|date:'l, d M' }}">{{ day|date:"d" }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in attendance_data %}
                        <tr>
                            <td class="fw-bold">{{ row.student.get_full_name }}</td>
                            {% for att in row.attendance %}
                            <td class="text-center p-1 {% if att.is_weekend %}bg-light{% endif %}">
                                {% if att.status == 'present' %}
                                    <span class="badge bg-success" title="{{ att.date|date:'d M' }} — Present">P</span>
                                {% elif att.status == 'absent' %}
                                    <span class="badge bg-danger" title="{{ att.date|date:'d M' }} — Absent">A</span>
                                {% elif att.status == 'late' %}
                                    <span class="badge bg-warning text-dark" title="{{ att.date|date:'d M' }} — Late">L</span>
                                {% elif att.status == 'excused' %}
                                    <span class="badge bg-info" title="{{ att.date|date:'d M' }} — Excused">E</span>
                                {% elif att.status == 'weekend' %}
                                    <span class="text-muted" title="{{ att.date|date:'l' }}" style="font-size:0.65rem;">—</span>
                                {% elif att.status == 'future' %}
                                    <span class="text-muted" title="Future date" style="font-size:0.65rem;">·</span>
                                {% else %}
                                    <span class="badge bg-secondary" title="{{ att.date|date:'d M' }} — No record taken">?</span>
                                {% endif %}
                            </td>
                            {% endfor %}
                        </tr>
                        {% empty %}
                        <tr><td colspan="32" class="text-center text-muted py-4">No data available.</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer text-muted small">
            <span class="badge bg-success me-1">P</span>Present &nbsp;
            <span class="badge bg-danger me-1">A</span>Absent &nbsp;
            <span class="badge bg-warning me-1 text-dark">L</span>Late &nbsp;
            <span class="badge bg-info me-1">E</span>Excused &nbsp;
            <span class="badge bg-secondary me-1">?</span>No record taken &nbsp;
            <span class="text-muted me-1">—</span>Weekend &nbsp;
            <span class="text-muted me-1">·</span>Future date
        </div>
    </div>
</div>
{% endblock %}