{% extends 'base.html' %}
{% load static %}

{% block title %}Report Cards — Rapha-Bethel BNPS{% endblock %}

{% block extra_css %}
<style>
.rc-stat-card { border-radius:12px; padding:16px 20px; color:#fff; }
.rc-stat-card .l { font-size:.75rem; opacity:.85; }
.rc-stat-card .n { font-size:2rem; font-weight:800; line-height:1.1; }

.class-rc-card {
    border-radius:10px; border:1px solid #e5e7eb;
    border-left:5px solid #6b7280;
    background:#fff; transition:transform .18s,box-shadow .18s;
}
.class-rc-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.09); }
.class-rc-card.ap { border-left-color:#3b82f6; }
.class-rc-card.an { border-left-color:#8b5cf6; }
.class-rc-card.fp { border-left-color:#10b981; }
.class-rc-card.fn { border-left-color:#f59e0b; }

.rc-type-badge.ap { background:#dbeafe; color:#1d4ed8; }
.rc-type-badge.an { background:#ede9fe; color:#5b21b6; }
.rc-type-badge.fp { background:#d1fae5; color:#065f46; }
.rc-type-badge.fn { background:#fef3c7; color:#92400e; }
.rc-type-badge {
    font-size:.68rem; font-weight:700; padding:2px 8px;
    border-radius:99px; display:inline-block;
}

.progress { height:6px; border-radius:99px; }
.progress-bar { border-radius:99px; }

.status-dot {
    width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0;
}
.status-dot.green  { background:#10b981; }
.status-dot.yellow { background:#f59e0b; }
.status-dot.red    { background:#ef4444; }
.status-dot.grey   { background:#d1d5db; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h1 class="h3 mb-0"><i class="fas fa-file-alt me-2 text-primary"></i>Report Cards</h1>
            <p class="text-muted mb-0" style="font-size:.85rem">Manage marks, compute averages, generate PDFs</p>
        </div>
        <!-- Term selector -->
        <form method="get" class="d-flex align-items-center gap-2">
            <label class="text-muted" style="font-size:.83rem;white-space:nowrap">
                <i class="fas fa-calendar me-1"></i>Term:
            </label>
            <select name="term" class="form-select form-select-sm" style="min-width:160px"
                    onchange="this.form.submit()">
                <option value="">— All Terms —</option>
                {% for t in terms %}
                <option value="{{ t.pk }}"
                    {% if selected_term and selected_term.pk == t.pk %}selected{% endif %}>
                    Term {{ t.term }} — {{ t.academic_year }}
                    {% if t.is_current %}(Current){% endif %}
                </option>
                {% endfor %}
            </select>
        </form>
    </div>

    <!-- Summary Stats -->
    <div class="row g-2 mb-4">
        <div class="col-6 col-md-3">
            <div class="rc-stat-card" style="background:linear-gradient(135deg,#374151,#6b7280)">
                <div class="l">Classes</div>
                <div class="n">{{ total_classes }}</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="rc-stat-card" style="background:linear-gradient(135deg,#065f46,#10b981)">
                <div class="l">Active Students</div>
                <div class="n">{{ total_students }}</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="rc-stat-card" style="background:linear-gradient(135deg,#1d4ed8,#3b82f6)">
                <div class="l">Cards Created</div>
                <div class="n">{{ total_cards }}</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="rc-stat-card" style="background:linear-gradient(135deg,#7c3aed,#a78bfa)">
                <div class="l">PDFs Generated</div>
                <div class="n">{{ total_pdfs }}</div>
            </div>
        </div>
    </div>

    {% if not selected_term %}
    <div class="alert alert-info">
        <i class="fas fa-info-circle me-2"></i>
        Select a term above to see report card status per class.
        {% if not terms %}
            <a href="/portal/admin/academics/academicterm/add/" class="alert-link">
                Create your first academic term →
            </a>
        {% endif %}
    </div>
    {% endif %}

    <!-- Class cards grid -->
    {% if class_data %}
    <div class="row g-3">
        {% for item in class_data %}
        <div class="col-xl-4 col-lg-6">
            <div class="class-rc-card {{ item.report_type }} p-3">

                <!-- Class name + type badge -->
                <div class="d-flex align-items-start justify-content-between mb-2">
                    <div>
                        <div style="font-weight:700;font-size:.95rem">{{ item.cls.name }}</div>
                        <div style="font-size:.72rem;color:#888;font-family:monospace">{{ item.cls.code }}</div>
                    </div>
                    <span class="rc-type-badge {{ item.report_type }}">{{ item.report_type_display }}</span>
                </div>

                <!-- Stats row -->
                <div class="d-flex gap-3 mb-2" style="font-size:.78rem">
                    <div class="text-center">
                        <div style="font-weight:700;font-size:1.1rem">{{ item.active_students }}</div>
                        <div class="text-muted">Students</div>
                    </div>
                    <div class="text-center">
                        <div style="font-weight:700;font-size:1.1rem">{{ item.cards_created }}</div>
                        <div class="text-muted">Cards</div>
                    </div>
                    <div class="text-center">
                        <div style="font-weight:700;font-size:1.1rem">{{ item.students_with_marks }}</div>
                        <div class="text-muted">Marked</div>
                    </div>
                    <div class="text-center">
                        <div style="font-weight:700;font-size:1.1rem">{{ item.cards_with_pdf }}</div>
                        <div class="text-muted">PDFs</div>
                    </div>
                </div>

                <!-- Progress bar -->
                {% if item.active_students > 0 %}
                <div class="mb-2">
                    <div class="d-flex justify-content-between mb-1" style="font-size:.72rem;color:#888">
                        <span>Marks entered</span>
                        <span>{{ item.progress_pct }}%</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar
                            {% if item.progress_pct == 100 %}bg-success
                            {% elif item.progress_pct > 0 %}bg-primary
                            {% else %}bg-secondary{% endif %}"
                            style="width:{{ item.progress_pct }}%"></div>
                    </div>
                </div>
                {% endif %}

                <!-- Status indicators -->
                <div class="d-flex gap-3 mb-3" style="font-size:.73rem;color:#666">
                    <span class="d-flex align-items-center gap-1">
                        <span class="status-dot {% if item.cards_created > 0 %}green{% else %}grey{% endif %}"></span>
                        Initialised
                    </span>
                    <span class="d-flex align-items-center gap-1">
                        <span class="status-dot {% if item.students_with_marks == item.active_students and item.active_students > 0 %}green{% elif item.students_with_marks > 0 %}yellow{% else %}grey{% endif %}"></span>
                        Marks entered
                    </span>
                    <span class="d-flex align-items-center gap-1">
                        <span class="status-dot {% if item.cards_with_pdf == item.active_students and item.active_students > 0 %}green{% elif item.cards_with_pdf > 0 %}yellow{% else %}grey{% endif %}"></span>
                        PDFs ready
                    </span>
                </div>

                <!-- Actions -->
                {% if selected_term %}
                <div class="d-flex gap-2 flex-wrap">
                    <a href="{% url 'rc-marks' item.cls.pk selected_term.pk %}"
                       class="btn btn-sm btn-primary flex-grow-1">
                        <i class="fas fa-pencil-alt me-1"></i>Enter Marks
                    </a>
                    <a href="{% url 'rc-bulk' item.cls.pk selected_term.pk %}"
                       class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-file-pdf me-1"></i>Bulk PDF
                    </a>
                </div>
                {% else %}
                <div class="text-muted" style="font-size:.78rem">
                    <i class="fas fa-info-circle me-1"></i>Select a term to manage marks
                </div>
                {% endif %}

            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-5 text-muted">
        <i class="fas fa-school fa-3x mb-3 d-block"></i>
        <h5>No classes found</h5>
        <p>Make sure classes have been created and students assigned.</p>
    </div>
    {% endif %}

</div>
{% endblock %}