{% extends 'school/base_school.html' %}

{% block title %}Attendance Report | STD Lab{% endblock %}

{% block page_title %}Monthly Attendance Matrix{% endblock %}

{% block content %}
<style>
    .report-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.75rem;
        background: #fff;
        border-radius: 0;
        overflow: hidden;
    }
    .report-table th, .report-table td {
        padding: 8px 4px;
        text-align: center;
        border: 1px solid #f1f5f9;
        min-width: 25px;
        white-space: nowrap;
    }
    .report-table th {
        background: #0f172a;
        color: #fff;
        font-weight: 800;
        text-transform: uppercase;
        font-size: 0.65rem;
    }
    .status-p { color: #10b981; font-weight: 900; }
    .status-a { color: #ef4444; font-weight: 900; }
    .status-l { color: #6366f1; font-weight: 900; }
    .status-h { background: #fffbeb; color: #f59e0b; font-weight: 900; }
    
    .month-nav {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 25px;
        background: #fff;
        padding: 15px 25px;
        border-radius: 0;
        border: 1px solid #f1f5f9;
    }
</style>

<div class="month-nav">
    <div style="font-weight: 900; color: #01152a; font-size: 1rem; flex-grow: 1;">
        <i class="fas fa-calendar-alt" style="color: #6366f1; margin-right: 10px;"></i> {{ month_name }} {{ current_year }}
    </div>
    {% if selected_class %}
        <a href="{% url 'attendance_report_pdf' %}?class_id={{ selected_class.id }}&month={{ current_month }}&year={{ current_year }}" class="btn" style="background: #ef4444; border-radius: 0; font-size: 0.8rem; padding: 10px 20px;">
            <i class="fas fa-file-pdf"></i> DOWNLOAD PDF
        </a>
    {% endif %}
</div>

{% if not selected_class %}
    <div style="margin-bottom: 30px; font-weight: 800; color: #94a3b8; font-size: 0.75rem; letter-spacing: 1.5px;">SELECT ACADEMIC CLASS</div>
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;">
        {% for cls in classes %}
            <a href="?class_id={{ cls.id }}" style="text-decoration: none;">
                <div class="card" style="padding: 25px; border-radius: 0; transition: 0.3s; border-top: 5px solid #3b82f6;">
                    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px;">
                        <h3 style="font-size: 1.2rem; font-weight: 900; color: #0f172a;">{{ cls.name }}</h3>
                        <div style="width: 40px; height: 40px; border-radius: 10px; background: rgba(59, 130, 246, 0.08); color: #3b82f6; display: flex; align-items: center; justify-content: center;"><i class="fas fa-graduation-cap"></i></div>
                    </div>
                </div>
            </a>
        {% endfor %}
    </div>
{% else %}
    <div class="card" style="padding: 0; overflow-x: auto; border-radius: 0; border: 1px solid #f1f5f9;">
        <table class="report-table">
            <thead>
                <tr>
                    <th style="min-width: 50px;">Roll</th>
                    <th style="min-width: 80px;">PIN</th>
                    <th style="min-width: 150px; text-align: left; padding-left: 15px;">Student Name</th>
                    {% for day in days %}
                        <th>{{ day }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in student_data %}
                    <tr {% if forloop.counter|divisibleby:2 %}style="background: #fdfdfd;"{% endif %}>
                        <td style="font-weight: 800; color: #64748b;">{{ row.student.roll }}</td>
                        <td style="font-weight: 850; color: #1e293b;">{{ row.student.pin }}</td>
                        <td style="text-align: left; padding-left: 15px; font-weight: 800; color: #0f172a;">{{ row.student.name }}</td>
                        {% for status in row.attendance %}
                            <td>
                                <span class="status-{{ status|lower }}">
                                    {% if status == 'P' %}<i class="fas fa-check"></i>
                                    {% elif status == 'A' %}<i class="fas fa-times"></i>
                                    {% elif status == 'L' %}L
                                    {% elif status == 'H' %}<i class="fas fa-star" style="font-size: 0.6rem;"></i>
                                    {% else %}{{ status }}
                                    {% endif %}
                                </span>
                            </td>
                        {% endfor %}
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="{{ days|length|add:3 }}" style="padding: 40px; text-align: center; color: #94a3b8; font-weight: 700;">No students enrolled in this class.</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <div style="margin-top: 25px; display: flex; gap: 20px; font-size: 0.75rem; font-weight: 850;">
        <div style="display: flex; align-items: center; gap: 8px;"><span style="color: #10b981;">●</span> P = Present</div>
        <div style="display: flex; align-items: center; gap: 8px;"><span style="color: #ef4444;">●</span> A = Absent</div>
        <div style="display: flex; align-items: center; gap: 8px;"><span style="color: #6366f1;">●</span> L = Leave</div>
        <div style="display: flex; align-items: center; gap: 8px;"><span style="color: #f59e0b; background: #fffbeb; padding: 2px 6px; border-radius: 4px;">★</span> H = Holiday / Friday</div>
    </div>

    <div style="margin-top: 40px; text-align: center;">
        <a href="{% url 'attendance_report' %}" class="btn" style="background: #fff; color: #0f172a; border: 1px solid #e2e8f0; border-radius: 0; font-size: 0.8rem;">
            <i class="fas fa-arrow-left"></i> CHOOSE DIFFERENT CLASS
        </a>
    </div>
{% endif %}

{% endblock %}