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

{% block title %}Dashboard — Rapha-Bethel BNPS{% endblock %}

{% block extra_css %}
<style>
.dash-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 480px) { .dash-grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .dash-grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .dash-grid-2-1 { grid-template-columns: 2fr 1fr; } }

.kpi { background:#fff; border-radius:12px; padding:1rem 1.1rem; border:1px solid #ede8e3; box-shadow:0 1px 4px rgba(0,0,0,.07); display:flex; align-items:center; gap:0.9rem; }
.kpi-icon { width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0; }
.kpi-icon.blue   { background:#eff6ff; color:#3b82f6; }
.kpi-icon.green  { background:#f0fdf4; color:#22c55e; }
.kpi-icon.gold   { background:#fffbeb; color:var(--rb-gold); }
.kpi-icon.red    { background:#fef2f2; color:var(--rb-red); }
.kpi-label { font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#999;margin-bottom:2px; }
.kpi-value { font-size:1.5rem;font-weight:700;color:#1a1a1a;line-height:1; }
.kpi-sub { font-size:0.72rem;color:#aaa;margin-top:3px; }
.kpi-progress { height:4px;border-radius:4px;background:#f0ebe5;margin-top:6px; }
.kpi-progress-bar { height:100%;border-radius:4px;background:linear-gradient(90deg,#22c55e,#16a34a); }

.rb-section-title { font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#999;margin:0 0 0.75rem; }

.chart-wrap { position:relative; height:200px; }
@media (min-width:600px) { .chart-wrap { height:240px; } }

.birthday-row { display:flex;align-items:center;gap:0.75rem;padding:0.6rem 0;border-bottom:1px solid #f5f0ea; }
.birthday-row:last-child { border-bottom:none; }
.birthday-avatar { width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;font-weight:700;font-size:0.85rem;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.birthday-name { font-weight:600;font-size:0.85rem;line-height:1.2; }
.birthday-meta { font-size:0.75rem;color:#aaa; }
.birthday-badge { margin-left:auto;background:#fef9c3;color:#854d0e;border-radius:20px;padding:0.15rem 0.55rem;font-size:0.7rem;font-weight:700;flex-shrink:0; }

.admit-row { display:flex;align-items:center;gap:0.75rem;padding:0.65rem 0;border-bottom:1px solid #f5f0ea; }
.admit-row:last-child { border-bottom:none; }
.admit-avatar { width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--rb-red-dark),var(--rb-red));color:#fff;font-weight:700;font-size:0.85rem;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.admit-name { font-weight:600;font-size:0.85rem;line-height:1.2; }
.admit-meta { font-size:0.75rem;color:#aaa; }

.announce-item { padding:0.75rem 0;border-bottom:1px solid #f5f0ea; }
.announce-item:last-child { border-bottom:none; }
.announce-title { font-weight:600;font-size:0.875rem;margin-bottom:0.2rem; }
.announce-body { font-size:0.8rem;color:#777;margin-bottom:0.35rem; }
.announce-meta { display:flex;align-items:center;justify-content:space-between;gap:0.5rem; }
.priority-high   { background:#fee2e2;color:#991b1b;border-radius:20px;padding:.1rem .5rem;font-size:.68rem;font-weight:700; }
.priority-medium { background:#fef9c3;color:#854d0e;border-radius:20px;padding:.1rem .5rem;font-size:.68rem;font-weight:700; }
.priority-low    { background:#f0fdf4;color:#166534;border-radius:20px;padding:.1rem .5rem;font-size:.68rem;font-weight:700; }
.priority-urgent { background:#7f1d1d;color:#fff;border-radius:20px;padding:.1rem .5rem;font-size:.68rem;font-weight:700; }

.quick-action { display:flex;align-items:center;gap:0.65rem;padding:.65rem .85rem;border-radius:10px;background:#fff;border:1px solid #ede8e3;text-decoration:none;color:#333;font-size:.875rem;font-weight:500;transition:all .15s;min-height:48px; }
.quick-action:hover { border-color:var(--rb-red);color:var(--rb-red);background:#fff5f5;transform:translateX(3px); }
.quick-action i { width:20px;text-align:center;color:var(--rb-red);flex-shrink:0; }
</style>
{% endblock %}

{% block content %}
<!-- Page header -->
<div class="rb-page-header">
    <div>
        <h1 class="rb-page-title">Dashboard</h1>
        <p class="rb-page-subtitle">School overview &middot; {% now "l, d N Y" %}</p>
    </div>
    <a href="{% url 'communication:announcement_create' %}" class="btn btn-rb-primary btn-sm">
        <i class="fas fa-plus me-1"></i> Announcement
    </a>
</div>

<!-- KPI CARDS -->
<div class="dash-grid dash-grid-2 dash-grid-4 mb-4">
    <div class="kpi">
        <div class="kpi-icon blue"><i class="fas fa-user-graduate"></i></div>
        <div>
            <div class="kpi-label">Students</div>
            <div class="kpi-value">{{ total_students }}</div>
            <div class="kpi-sub">{{ total_classes }} class{{ total_classes|pluralize:"es" }}</div>
        </div>
    </div>
    <div class="kpi">
        <div class="kpi-icon green"><i class="fas fa-clipboard-check"></i></div>
        <div style="flex:1;min-width:0">
            <div class="kpi-label">Today's Attendance</div>
            <div class="kpi-value">{{ attendance_rate }}%</div>
            <div class="kpi-progress"><div class="kpi-progress-bar" style="width:{{ attendance_rate }}%"></div></div>
        </div>
    </div>
    <div class="kpi">
        <div class="kpi-icon gold"><i class="fas fa-file-invoice-dollar"></i></div>
        <div>
            <div class="kpi-label">Pending Invoices</div>
            <div class="kpi-value">{{ pending_invoices }}</div>
            {% if overdue_invoices > 0 %}
            <div class="kpi-sub" style="color:var(--rb-red)"><i class="fas fa-exclamation-circle"></i> {{ overdue_invoices }} overdue</div>
            {% else %}
            <div class="kpi-sub" style="color:#22c55e"><i class="fas fa-check-circle"></i> None overdue</div>
            {% endif %}
        </div>
    </div>
    <div class="kpi">
        <div class="kpi-icon red"><i class="fas fa-coins"></i></div>
        <div>
            <div class="kpi-label">Total Revenue</div>
            <div class="kpi-value" style="font-size:1.1rem">{{ total_revenue|floatformat:0 }}</div>
            <div class="kpi-sub">XAF collected</div>
        </div>
    </div>
</div>

<!-- CHART + BIRTHDAYS -->
<div class="dash-grid dash-grid-2-1 mb-4">
    <!-- Attendance trend -->
    <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
            <span class="rb-section-title mb-0">7-Day Attendance Trend</span>
            <a href="{% url 'reports:attendance_report' %}" class="btn btn-sm btn-outline-secondary" style="font-size:.75rem;padding:.2rem .6rem">Full Report</a>
        </div>
        <div class="card-body">
            <div class="chart-wrap">
                <canvas id="attendanceChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Upcoming birthdays -->
    <div class="card">
        <div class="card-header"><span class="rb-section-title mb-0">🎂 Birthdays This Month</span></div>
        <div class="card-body" style="padding-top:.5rem">
            {% if upcoming_birthdays %}
                {% for s in upcoming_birthdays %}
                <div class="birthday-row">
                    <div class="birthday-avatar">{{ s.first_name|first }}{{ s.last_name|first }}</div>
                    <div>
                        <div class="birthday-name">{{ s.first_name }} {{ s.last_name }}</div>
                        <div class="birthday-meta">{{ s.current_class|default:"No class" }}</div>
                    </div>
                    <span class="birthday-badge">{{ s.date_of_birth|date:"d M" }}</span>
                </div>
                {% endfor %}
            {% else %}
                <p class="text-muted text-center py-3 mb-0" style="font-size:.85rem">No birthdays this month</p>
            {% endif %}
        </div>
    </div>
</div>

<!-- RECENT ADMISSIONS + ANNOUNCEMENTS -->
<div class="dash-grid dash-grid-2-1 mb-4">
    <!-- Recent students -->
    <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
            <span class="rb-section-title mb-0">Recent Admissions</span>
            <a href="{% url 'students:student_list' %}" class="btn btn-sm btn-outline-secondary" style="font-size:.75rem;padding:.2rem .6rem">All Students</a>
        </div>
        <div class="card-body" style="padding-top:.5rem">
            {% for s in recent_students %}
            <div class="admit-row">
                <div class="admit-avatar">{{ s.first_name|first }}{{ s.last_name|first }}</div>
                <div style="flex:1;min-width:0">
                    <div class="admit-name">{{ s.first_name }} {{ s.last_name }}</div>
                    <div class="admit-meta">{{ s.student_id }} &middot; {{ s.admission_date|date:"d M Y" }}</div>
                </div>
                {% if s.status == 'active' %}
                <span class="rb-badge rb-badge-green">Active</span>
                {% elif s.current_class %}
                <span class="rb-badge rb-badge-blue">{{ s.current_class }}</span>
                {% else %}
                <span class="rb-badge rb-badge-gray">Unassigned</span>
                {% endif %}
            </div>
            {% empty %}
            <p class="text-muted text-center py-3 mb-0" style="font-size:.85rem">No recent admissions</p>
            {% endfor %}
        </div>
    </div>

    <!-- Announcements + Quick Actions stacked -->
    <div style="display:flex;flex-direction:column;gap:1rem">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <span class="rb-section-title mb-0">Announcements</span>
                <a href="{% url 'communication:announcement_list' %}" style="font-size:.75rem;color:var(--rb-red)">View all</a>
            </div>
            <div class="card-body" style="padding-top:.5rem">
                {% for ann in recent_announcements %}
                <div class="announce-item">
                    <div class="announce-title">{{ ann.title }}</div>
                    <div class="announce-body">{{ ann.content|truncatewords:12 }}</div>
                    <div class="announce-meta">
                        <span style="font-size:.72rem;color:#bbb"><i class="far fa-clock"></i> {{ ann.publish_date|timesince }} ago</span>
                        <span class="priority-{{ ann.priority }}">{{ ann.get_priority_display }}</span>
                    </div>
                </div>
                {% empty %}
                <p class="text-muted text-center py-3 mb-0" style="font-size:.85rem">No announcements</p>
                {% endfor %}
            </div>
        </div>

        <div class="card">
            <div class="card-header"><span class="rb-section-title mb-0">Quick Actions</span></div>
            <div class="card-body" style="display:flex;flex-direction:column;gap:.5rem;padding-top:.6rem">
                <a href="{% url 'students:student_add' %}" class="quick-action"><i class="fas fa-user-plus"></i> Add Student</a>
                <a href="{% url 'finance:payment_add' %}" class="quick-action"><i class="fas fa-money-bill-wave"></i> Record Payment</a>
                <a href="{% url 'communication:sms_compose' %}" class="quick-action"><i class="fas fa-comment-sms"></i> Send SMS</a>
                <a href="{% url 'reports:academic_report' %}" class="quick-action"><i class="fas fa-chart-bar"></i> View Reports</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function(){
    const ctx = document.getElementById('attendanceChart');
    if (!ctx) return;
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: {{ attendance_labels|safe }},
            datasets: [{
                label: 'Students Present',
                data: {{ attendance_data|safe }},
                borderColor: '#8B0000',
                backgroundColor: 'rgba(139,0,0,.08)',
                pointBackgroundColor: '#8B0000',
                pointRadius: 4,
                pointHoverRadius: 6,
                fill: true,
                tension: 0.4,
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                x: { grid: { display: false }, ticks: { font: { size: 11 } } },
                y: { beginAtZero: true, ticks: { precision: 0, font: { size: 11 } }, grid: { color: '#f5f0ea' } }
            }
        }
    });
})();
</script>
{% endblock %}
