<!-- templates/academics/class_list.html -->
{% extends 'base.html' %}
{% load static %}

{% block title %}Classes - Rapha-Bethel BNPS{% endblock %}

{% block extra_css %}
<style>
/* ── Section headers ── */
.section-group { margin-bottom: 2.5rem; }
.section-header {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px; border-radius: 10px;
    margin-bottom: 1rem; font-weight: 700; letter-spacing: .3px;
}
.section-header.english   { background: linear-gradient(135deg,#1d4ed8,#3b82f6); color:#fff; }
.section-header.bilingual { background: linear-gradient(135deg,#065f46,#10b981); color:#fff; }
.section-header.french    { background: linear-gradient(135deg,#78350f,#f59e0b); color:#1c1c1c; }
.section-header .icon { font-size:1.5rem; line-height:1; }
.section-header .meta { font-size:.76rem; font-weight:400; opacity:.85; margin-top:1px; }
.section-badge {
    margin-left:auto; background:rgba(255,255,255,.22);
    border-radius:99px; padding:3px 12px; font-size:.75rem; white-space:nowrap;
}
.section-header.french .section-badge { background:rgba(0,0,0,.1); }

/* ── Class cards ── */
.class-card {
    border-radius:10px; border:1px solid #e5e7eb;
    border-left:5px solid transparent;
    transition: transform .2s, box-shadow .2s; background:#fff;
}
.class-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.1); }
.class-card.english   { border-left-color:#3b82f6; }
.class-card.bilingual { border-left-color:#10b981; }
.class-card.french    { border-left-color:#f59e0b; }

.order-num {
    width:24px; height:24px; border-radius:50%; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:.68rem; font-weight:800;
}
.english   .order-num { background:#dbeafe; color:#1d4ed8; }
.bilingual .order-num { background:#d1fae5; color:#065f46; }
.french    .order-num { background:#fef3c7; color:#92400e; }

.class-name-main { font-size:.92rem; font-weight:700; line-height:1.2; color:#111; }
.class-name-alt  { font-size:.75rem; color:#888; margin-top:1px; }
.class-code      { font-size:.7rem; font-family:monospace; color:#aaa; }

.stat-box { text-align:center; padding:7px 4px; background:#f8fafc; border-radius:7px; }
.stat-box .n { font-size:1.2rem; font-weight:700; }
.stat-box .l { font-size:.65rem; color:#888; }
.english   .stat-box .n { color:#3b82f6; }
.bilingual .stat-box .n { color:#10b981; }
.french    .stat-box .n { color:#f59e0b; }

.teacher-line { font-size:.75rem; border-top:1px solid #f1f5f9; padding-top:7px; margin-top:8px; color:#555; }
.no-teacher-txt { color:#dc2626; font-style:italic; }

/* ── Summary stat cards ── */
.stat-card { border-radius:10px; padding:14px 18px; color:#fff; }
.stat-card .l { font-size:.75rem; opacity:.85; }
.stat-card .n { font-size:2rem; font-weight:800; line-height:1; }

/* ── Table ── */
.tbl-section-row td { font-weight:700; font-size:.78rem; letter-spacing:.3px; padding:7px 12px !important; background:#f8fafc; }
.tbl-section-row td.english   { border-left:4px solid #3b82f6; color:#1d4ed8; }
.tbl-section-row td.bilingual { border-left:4px solid #10b981; color:#065f46; }
.tbl-section-row td.french    { border-left:4px solid #f59e0b; color:#92400e; }
.no-teacher-td { color:#dc2626; font-style:italic; font-size:.8rem; }

/* ── Misc ── */
.result-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin-bottom:12px; font-size:.84rem; color:#555; }
</style>
{% endblock %}

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

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h1 class="h3 mb-0">Classes</h1>
            <p class="text-muted mb-0" style="font-size:.85rem">Manage all classes and sections</p>
        </div>
        <a href="{% url 'academics:class_add' %}" class="btn btn-primary btn-sm">
            <i class="fas fa-plus me-1"></i> Add New Class
        </a>
    </div>

    <!-- Summary Stats -->
    <div class="row g-2 mb-3">
        <div class="col-6 col-md-3">
            <div class="stat-card" style="background:linear-gradient(135deg,#374151,#6b7280)">
                <div class="l">Total Classes</div>
                <div class="n">{{ classes|length }}</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="stat-card" style="background:linear-gradient(135deg,#065f46,#10b981)">
                <div class="l">Total Students</div>
                <div class="n">{{ total_students|default:"0" }}</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="stat-card" style="background:linear-gradient(135deg,#1d4ed8,#3b82f6)">
                <div class="l">English Section</div>
                <div class="n">{{ english_count|default:"0" }}</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="stat-card" style="background:linear-gradient(135deg,#78350f,#f59e0b)">
                <div class="l">No Class Teacher</div>
                <div class="n">{{ unassigned_teachers|default:"0" }}</div>
            </div>
        </div>
    </div>

    <!-- Result bar + View toggle -->
    <div class="result-bar">
        <span>
            <strong>{{ classes|length }}</strong> class{{ classes|length|pluralize:"es" }} &nbsp;·&nbsp;
            <span style="color:#3b82f6">{{ english_classes|length }} English</span> &nbsp;·&nbsp;
            <span style="color:#10b981">{{ bilingual_classes|length }} Bilingual</span> &nbsp;·&nbsp;
            <span style="color:#92400e">{{ french_classes|length }} French</span>
        </span>
        <div class="btn-group btn-group-sm">
            <button class="btn btn-outline-primary active" id="gridViewBtn">
                <i class="fas fa-th-large me-1"></i> Grid
            </button>
            <button class="btn btn-outline-primary" id="tableViewBtn">
                <i class="fas fa-table me-1"></i> Table
            </button>
        </div>
    </div>

    <!-- ══════════════════════════ GRID VIEW ══════════════════════════ -->
    <div id="gridView">

        <!-- ENGLISH SUB-SECTION -->
        {% if english_classes %}
        <div class="section-group">
            <div class="section-header english">
                <span class="icon">🇬🇧</span>
                <div>
                    <div>English Sub-section</div>
                    <div class="meta">Nursery 1 &nbsp;·&nbsp; Nursery 2 &nbsp;·&nbsp; Class 1 → Class 6</div>
                </div>
                <span class="section-badge">{{ english_classes|length }} class{{ english_classes|length|pluralize:"es" }}</span>
            </div>
            <div class="row g-3">
                {% for cls in english_classes %}
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="card class-card english h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-start gap-2 mb-3">
                                <span class="order-num">{{ forloop.counter }}</span>
                                <div class="flex-grow-1">
                                    <div class="class-name-main">{{ cls.name }}</div>
                                    <div class="class-code">{{ cls.code }}</div>
                                </div>
                                <span class="badge bg-primary" style="font-size:.68rem">English</span>
                            </div>
                            <div class="row g-2 mb-2">
                                <div class="col-6">
                                    <div class="stat-box english">
                                        <div class="n">{{ cls.student_count }}</div>
                                        <div class="l">Students</div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="stat-box english">
                                        <div class="n">{{ cls.teacher_count|default:"0" }}</div>
                                        <div class="l">Teachers</div>
                                    </div>
                                </div>
                            </div>
                            <div class="teacher-line">
                                <i class="fas fa-chalkboard-teacher me-1"></i>
                                {% if cls.class_teacher %}
                                    {{ cls.class_teacher.user.get_full_name }}
                                {% else %}
                                    <span class="no-teacher-txt">No class teacher</span>
                                {% endif %}
                            </div>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <span style="font-size:.72rem;color:#aaa">
                                    <i class="fas fa-door-open me-1"></i>{{ cls.room_number|default:"No room" }}
                                </span>
                                <a href="{% url 'academics:class_detail' cls.pk %}" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-eye me-1"></i>View
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- BILINGUAL SUB-SECTION -->
        {% if bilingual_classes %}
        <div class="section-group">
            <div class="section-header bilingual">
                <span class="icon">🌍</span>
                <div>
                    <div>Bilingual Sub-section <span style="font-weight:400;font-size:.82rem">(English &amp; French)</span></div>
                    <div class="meta">Petite Section &nbsp;·&nbsp; Moyenne Section &nbsp;·&nbsp; Grande Section &nbsp;·&nbsp; SIL &nbsp;·&nbsp; CP &nbsp;·&nbsp; CE1 &nbsp;·&nbsp; CE2</div>
                </div>
                <span class="section-badge">{{ bilingual_classes|length }} class{{ bilingual_classes|length|pluralize:"es" }}</span>
            </div>
            <div class="row g-3">
                {% for cls in bilingual_classes %}
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="card class-card bilingual h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-start gap-2 mb-3">
                                <span class="order-num">{{ forloop.counter }}</span>
                                <div class="flex-grow-1">
                                    <div class="class-name-main">{{ cls.name }}</div>
                                    {% if cls.french_name %}
                                    <div class="class-name-alt">{{ cls.french_name }}</div>
                                    {% endif %}
                                    <div class="class-code">{{ cls.code }}</div>
                                </div>
                                <span class="badge bg-success" style="font-size:.68rem">Bilingual</span>
                            </div>
                            <div class="row g-2 mb-2">
                                <div class="col-6">
                                    <div class="stat-box bilingual">
                                        <div class="n">{{ cls.student_count }}</div>
                                        <div class="l">Students</div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="stat-box bilingual">
                                        <div class="n">{{ cls.teacher_count|default:"0" }}</div>
                                        <div class="l">Teachers</div>
                                    </div>
                                </div>
                            </div>
                            <div class="teacher-line">
                                <i class="fas fa-chalkboard-teacher me-1"></i>
                                {% if cls.class_teacher %}
                                    {{ cls.class_teacher.user.get_full_name }}
                                {% else %}
                                    <span class="no-teacher-txt">No class teacher</span>
                                {% endif %}
                            </div>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <span style="font-size:.72rem;color:#aaa">
                                    <i class="fas fa-door-open me-1"></i>{{ cls.room_number|default:"No room" }}
                                </span>
                                <a href="{% url 'academics:class_detail' cls.pk %}" class="btn btn-sm btn-outline-success">
                                    <i class="fas fa-eye me-1"></i>View
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- FRENCH SUB-SECTION -->
        {% if french_classes %}
        <div class="section-group">
            <div class="section-header french">
                <span class="icon">🇫🇷</span>
                <div>
                    <div>French Sub-section</div>
                    <div class="meta">CM1 &nbsp;·&nbsp; CM2</div>
                </div>
                <span class="section-badge">{{ french_classes|length }} class{{ french_classes|length|pluralize:"es" }}</span>
            </div>
            <div class="row g-3">
                {% for cls in french_classes %}
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="card class-card french h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-start gap-2 mb-3">
                                <span class="order-num">{{ forloop.counter }}</span>
                                <div class="flex-grow-1">
                                    <div class="class-name-main">{{ cls.name }}</div>
                                    <div class="class-code">{{ cls.code }}</div>
                                </div>
                                <span class="badge bg-warning text-dark" style="font-size:.68rem">French</span>
                            </div>
                            <div class="row g-2 mb-2">
                                <div class="col-6">
                                    <div class="stat-box french">
                                        <div class="n">{{ cls.student_count }}</div>
                                        <div class="l">Students</div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="stat-box french">
                                        <div class="n">{{ cls.teacher_count|default:"0" }}</div>
                                        <div class="l">Teachers</div>
                                    </div>
                                </div>
                            </div>
                            <div class="teacher-line">
                                <i class="fas fa-chalkboard-teacher me-1"></i>
                                {% if cls.class_teacher %}
                                    {{ cls.class_teacher.user.get_full_name }}
                                {% else %}
                                    <span class="no-teacher-txt">No class teacher</span>
                                {% endif %}
                            </div>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <span style="font-size:.72rem;color:#aaa">
                                    <i class="fas fa-door-open me-1"></i>{{ cls.room_number|default:"No room" }}
                                </span>
                                <a href="{% url 'academics:class_detail' cls.pk %}" class="btn btn-sm btn-outline-warning">
                                    <i class="fas fa-eye me-1"></i>View
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        {% if not classes %}
        <div class="text-center py-5 text-muted">
            <i class="fas fa-school fa-3x mb-3 d-block"></i>
            <h5>No classes yet</h5>
            <p>Click <strong>Add New Class</strong> to get started.</p>
        </div>
        {% endif %}

    </div>{# /gridView #}

    <!-- ══════════════════════════ TABLE VIEW ══════════════════════════ -->
    <div id="tableView" style="display:none">
        <div class="card">
            <div class="table-responsive">
                <table class="table table-hover mb-0" style="font-size:.84rem">
                    <thead style="background:#f8fafc">
                        <tr>
                            <th style="width:32px;font-size:.7rem;color:#888">#</th>
                            <th style="font-size:.7rem;color:#888;text-transform:uppercase;letter-spacing:.4px">Class Name</th>
                            <th style="font-size:.7rem;color:#888;text-transform:uppercase;letter-spacing:.4px">Code</th>
                            <th style="font-size:.7rem;color:#888;text-transform:uppercase;letter-spacing:.4px">Section</th>
                            <th style="font-size:.7rem;color:#888;text-transform:uppercase;letter-spacing:.4px" class="text-center">Students</th>
                            <th style="font-size:.7rem;color:#888;text-transform:uppercase;letter-spacing:.4px" class="text-center">Teachers</th>
                            <th style="font-size:.7rem;color:#888;text-transform:uppercase;letter-spacing:.4px">Class Teacher</th>
                            <th style="font-size:.7rem;color:#888;text-transform:uppercase;letter-spacing:.4px">Room</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>

                        {% if english_classes %}
                        <tr class="tbl-section-row">
                            <td colspan="9" class="english">🇬🇧 &nbsp;English Sub-section</td>
                        </tr>
                        {% for cls in english_classes %}
                        <tr>
                            <td class="text-muted" style="font-size:.72rem">{{ forloop.counter }}</td>
                            <td><strong>{{ cls.name }}</strong></td>
                            <td><code style="font-size:.76rem">{{ cls.code }}</code></td>
                            <td><span class="badge bg-primary" style="font-size:.68rem">English</span></td>
                            <td class="text-center">{{ cls.student_count }}</td>
                            <td class="text-center">{{ cls.teacher_count|default:"0" }}</td>
                            <td>{% if cls.class_teacher %}{{ cls.class_teacher.user.get_full_name }}{% else %}<span class="no-teacher-td">Not assigned</span>{% endif %}</td>
                            <td>{{ cls.room_number|default:"—" }}</td>
                            <td><a href="{% url 'academics:class_detail' cls.pk %}" class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></a></td>
                        </tr>
                        {% endfor %}
                        {% endif %}

                        {% if bilingual_classes %}
                        <tr class="tbl-section-row">
                            <td colspan="9" class="bilingual">🌍 &nbsp;Bilingual Sub-section (English &amp; French)</td>
                        </tr>
                        {% for cls in bilingual_classes %}
                        <tr>
                            <td class="text-muted" style="font-size:.72rem">{{ forloop.counter }}</td>
                            <td>
                                <strong>{{ cls.name }}</strong>
                                {% if cls.french_name %}<br><span class="text-muted" style="font-size:.74rem">{{ cls.french_name }}</span>{% endif %}
                            </td>
                            <td><code style="font-size:.76rem">{{ cls.code }}</code></td>
                            <td><span class="badge bg-success" style="font-size:.68rem">Bilingual</span></td>
                            <td class="text-center">{{ cls.student_count }}</td>
                            <td class="text-center">{{ cls.teacher_count|default:"0" }}</td>
                            <td>{% if cls.class_teacher %}{{ cls.class_teacher.user.get_full_name }}{% else %}<span class="no-teacher-td">Not assigned</span>{% endif %}</td>
                            <td>{{ cls.room_number|default:"—" }}</td>
                            <td><a href="{% url 'academics:class_detail' cls.pk %}" class="btn btn-sm btn-outline-success"><i class="fas fa-eye"></i></a></td>
                        </tr>
                        {% endfor %}
                        {% endif %}

                        {% if french_classes %}
                        <tr class="tbl-section-row">
                            <td colspan="9" class="french">🇫🇷 &nbsp;French Sub-section</td>
                        </tr>
                        {% for cls in french_classes %}
                        <tr>
                            <td class="text-muted" style="font-size:.72rem">{{ forloop.counter }}</td>
                            <td><strong>{{ cls.name }}</strong></td>
                            <td><code style="font-size:.76rem">{{ cls.code }}</code></td>
                            <td><span class="badge bg-warning text-dark" style="font-size:.68rem">French</span></td>
                            <td class="text-center">{{ cls.student_count }}</td>
                            <td class="text-center">{{ cls.teacher_count|default:"0" }}</td>
                            <td>{% if cls.class_teacher %}{{ cls.class_teacher.user.get_full_name }}{% else %}<span class="no-teacher-td">Not assigned</span>{% endif %}</td>
                            <td>{{ cls.room_number|default:"—" }}</td>
                            <td><a href="{% url 'academics:class_detail' cls.pk %}" class="btn btn-sm btn-outline-warning"><i class="fas fa-eye"></i></a></td>
                        </tr>
                        {% endfor %}
                        {% endif %}

                    </tbody>
                </table>
            </div>
        </div>
    </div>{# /tableView #}

</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const gridView = document.getElementById('gridView');
    const tableView = document.getElementById('tableView');
    const gridBtn  = document.getElementById('gridViewBtn');
    const tableBtn = document.getElementById('tableViewBtn');

    function showGrid() {
        gridView.style.display = ''; tableView.style.display = 'none';
        gridBtn.classList.add('active'); tableBtn.classList.remove('active');
        localStorage.setItem('classView', 'grid');
    }
    function showTable() {
        gridView.style.display = 'none'; tableView.style.display = 'block';
        tableBtn.classList.add('active'); gridBtn.classList.remove('active');
        localStorage.setItem('classView', 'table');
    }
    gridBtn.addEventListener('click', showGrid);
    tableBtn.addEventListener('click', showTable);
    if (localStorage.getItem('classView') === 'table') showTable();
});
</script>
{% endblock %}