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

{% block title %}Staff 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; } }

/* Welcome banner — on-brand red, not off-brand purple */
.staff-welcome {
    background: linear-gradient(135deg, var(--rb-red-dark) 0%, var(--rb-red) 60%, #b84a4a 100%);
    border-radius: 14px;
    padding: 1.4rem 1.5rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 20px rgba(139,0,0,.25);
}
.staff-welcome h2 { font-size:1.2rem;font-weight:700;margin:0 0 .25rem; }
.staff-welcome p  { font-size:.82rem;color:rgba(255,255,255,.8);margin:0; }
.welcome-time-badge {
    background:rgba(255,255,255,.15);
    border-radius:10px;
    padding:.6rem 1rem;
    text-align:center;
    flex-shrink:0;
    display:none;
}
@media(min-width:480px){ .welcome-time-badge { display:block; } }
.welcome-time-badge .time { font-size:1.3rem;font-weight:700;line-height:1; }
.welcome-time-badge .date { font-size:.7rem;color:rgba(255,255,255,.75);margin-top:2px; }

.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:.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:.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:.72rem;color:#aaa;margin-top:3px; }

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

/* My classes list */
.class-item { display:flex;align-items:center;gap:.75rem;padding:.65rem 0;border-bottom:1px solid #f5f0ea; }
.class-item:last-child { border-bottom:none; }
.class-bubble { width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--rb-red-dark),var(--rb-red));color:#fff;font-weight:700;font-size:.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.class-name { font-weight:600;font-size:.875rem; }
.class-meta { font-size:.75rem;color:#aaa; }

/* Quick actions */
.qa-grid { display:grid;grid-template-columns:1fr 1fr;gap:.5rem; }
.qa-btn { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:.85rem .5rem;border-radius:10px;background:#fff;border:1px solid #ede8e3;text-decoration:none;color:#444;font-size:.75rem;font-weight:600;text-align:center;transition:all .15s;min-height:72px; }
.qa-btn i { font-size:1.3rem;color:var(--rb-red); }
.qa-btn:hover { border-color:var(--rb-red);background:#fff5f5;color:var(--rb-red);transform:translateY(-2px);box-shadow:0 4px 12px rgba(139,0,0,.12); }

/* Leave request mini-list */
.leave-item { display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px solid #f5f0ea; }
.leave-item:last-child { border-bottom:none; }

/* My profile card (default staff) */
.profile-row { display:flex;align-items:baseline;gap:.5rem;padding:.4rem 0;border-bottom:1px solid #f5f0ea;font-size:.875rem; }
.profile-row:last-child { border-bottom:none; }
.profile-label { font-weight:600;color:#555;width:110px;flex-shrink:0;font-size:.8rem; }
.profile-val { color:#333; }
</style>
{% endblock %}

{% block content %}

<!-- WELCOME BANNER -->
<div class="staff-welcome">
    <div>
        <h2>
            {% if dashboard_type == 'proprietor' %}Welcome, Proprietor{% elif dashboard_type == 'head' %}Good day, Head Teacher{% elif dashboard_type == 'teacher' %}Good day, Teacher{% else %}Welcome Back{% endif %}
            {% if request.user.staff_profile %} — {{ request.user.get_full_name|default:request.user.username }}{% endif %}
        </h2>
        <p>
            {% if dashboard_type == 'teacher' %}Your classes &amp; today's tasks are below.
            {% elif dashboard_type == 'head' %}{{ department_name }} section overview.
            {% elif dashboard_type == 'proprietor' %}Full school overview.
            {% else %}Rapha-Bethel BNPS Staff Portal.{% endif %}
        </p>
    </div>
    <div class="welcome-time-badge">
        <div class="time" id="liveTime">--:--</div>
        <div class="date">{{ current_date|date:"d M Y" }}</div>
    </div>
</div>

<!-- KPI CARDS — common to all roles -->
<div class="dash-grid dash-grid-2 dash-grid-4 mb-4">
    <div class="kpi">
        <div class="kpi-icon blue"><i class="fas fa-users"></i></div>
        <div>
            <div class="kpi-label">Total Staff</div>
            <div class="kpi-value">{{ total_staff|default:"—" }}</div>
            <div class="kpi-sub">{{ active_staff|default:0 }} active</div>
        </div>
    </div>
    <div class="kpi">
        <div class="kpi-icon green"><i class="fas fa-chalkboard-teacher"></i></div>
        <div>
            <div class="kpi-label">Teachers</div>
            <div class="kpi-value">{{ teachers_count|default:"—" }}</div>
            <div class="kpi-sub">{{ class_teachers|default:0 }} class teachers</div>
        </div>
    </div>
    <div class="kpi">
        <div class="kpi-icon gold"><i class="fas fa-calendar-minus"></i></div>
        <div>
            <div class="kpi-label">Pending Leave</div>
            <div class="kpi-value">{{ pending_leaves|default:"0" }}</div>
            <div class="kpi-sub">{{ approved_leaves|default:0 }} approved</div>
        </div>
    </div>
    <div class="kpi">
        <div class="kpi-icon red"><i class="fas fa-clock"></i></div>
        <div>
            <div class="kpi-label">Staff Present Today</div>
            <div class="kpi-value">{{ present_percent|default:"0" }}%</div>
            <div class="kpi-sub">{{ today_attendance|default:0 }} checked in</div>
        </div>
    </div>
</div>

<!-- ROLE-SPECIFIC CONTENT -->

{% if dashboard_type == 'proprietor' %}
<!-- ── PROPRIETOR VIEW ──────────────────────────── -->
<div class="dash-grid dash-grid-2-1 mb-4">
    <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
            <span class="rb-section-title mb-0">School Overview</span>
        </div>
        <div class="card-body">
            <div class="row g-2">
                {% with items="Students|user-graduate|blue,Classes|chalkboard|green,Monthly Revenue XAF|coins|gold,Pending Invoices|file-invoice|red" %}
                {% endwith %}
                <div class="col-6">
                    <div class="p-3 rounded text-center" style="background:#eff6ff">
                        <div style="font-size:1.5rem;font-weight:700;color:#3b82f6">{{ total_students|default:0 }}</div>
                        <div style="font-size:.75rem;color:#666">Total Students</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="p-3 rounded text-center" style="background:#f0fdf4">
                        <div style="font-size:1.5rem;font-weight:700;color:#22c55e">{{ total_classes|default:0 }}</div>
                        <div style="font-size:.75rem;color:#666">Total Classes</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="p-3 rounded text-center" style="background:#fffbeb">
                        <div style="font-size:1.1rem;font-weight:700;color:var(--rb-gold)">{{ monthly_revenue|default:0|floatformat:0 }}</div>
                        <div style="font-size:.75rem;color:#666">Monthly Revenue (XAF)</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="p-3 rounded text-center" style="background:#fef2f2">
                        <div style="font-size:1.5rem;font-weight:700;color:var(--rb-red)">{{ pending_invoices|default:0 }}</div>
                        <div style="font-size:.75rem;color:#666">Pending Invoices</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header"><span class="rb-section-title mb-0">Admin Actions</span></div>
        <div class="card-body" style="display:flex;flex-direction:column;gap:.5rem;padding-top:.6rem">
            <a href="{% url 'staff:staff_list' %}"     class="quick-action d-flex align-items-center gap-2" style="text-decoration:none;padding:.65rem .85rem;border-radius:8px;background:#fff;border:1px solid #ede8e3;color:#333;font-size:.875rem;font-weight:500;transition:all .15s"><i class="fas fa-id-badge" style="color:var(--rb-red);width:18px;text-align:center"></i> Manage Staff</a>
            <a href="{% url 'students:student_list' %}" class="quick-action d-flex align-items-center gap-2" style="text-decoration:none;padding:.65rem .85rem;border-radius:8px;background:#fff;border:1px solid #ede8e3;color:#333;font-size:.875rem;font-weight:500;transition:all .15s"><i class="fas fa-user-graduate" style="color:var(--rb-red);width:18px;text-align:center"></i> All Students</a>
            <a href="{% url 'finance:bursar_dashboard' %}" class="quick-action d-flex align-items-center gap-2" style="text-decoration:none;padding:.65rem .85rem;border-radius:8px;background:#fff;border:1px solid #ede8e3;color:#333;font-size:.875rem;font-weight:500;transition:all .15s"><i class="fas fa-chart-pie" style="color:var(--rb-red);width:18px;text-align:center"></i> Finance Dashboard</a>
            <a href="{% url 'reports:academic_report' %}" class="quick-action d-flex align-items-center gap-2" style="text-decoration:none;padding:.65rem .85rem;border-radius:8px;background:#fff;border:1px solid #ede8e3;color:#333;font-size:.875rem;font-weight:500;transition:all .15s"><i class="fas fa-chart-bar" style="color:var(--rb-red);width:18px;text-align:center"></i> View Reports</a>
            {% if user.is_superuser %}<a href="{% url 'admin:index' %}" class="quick-action d-flex align-items-center gap-2" style="text-decoration:none;padding:.65rem .85rem;border-radius:8px;background:#fff;border:1px solid #ede8e3;color:#333;font-size:.875rem;font-weight:500;transition:all .15s"><i class="fas fa-shield-alt" style="color:var(--rb-red);width:18px;text-align:center"></i> Admin Panel</a>{% endif %}
        </div>
    </div>
</div>

{% elif dashboard_type == 'head' %}
<!-- ── HEAD TEACHER VIEW ────────────────────────── -->
<div class="dash-grid dash-grid-2-1 mb-4">
    <div class="card">
        <div class="card-header"><span class="rb-section-title mb-0">{{ department_name }} — Recent Staff Leave Requests</span></div>
        <div class="card-body">
            {% with leaves=recent_leave_requests %}
            {% if leaves %}
                {% for leave in leaves %}
                <div class="leave-item">
                    <div style="width:34px;height:34px;border-radius:8px;background:#f5ede6;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.8rem;font-weight:700;color:var(--rb-red)">{{ leave.staff.user.first_name|first }}{{ leave.staff.user.last_name|first }}</div>
                    <div style="flex:1;min-width:0">
                        <div style="font-weight:600;font-size:.85rem">{{ leave.staff.user.get_full_name }}</div>
                        <div style="font-size:.75rem;color:#aaa">{{ leave.get_leave_type_display }} · {{ leave.start_date|date:"d M" }} – {{ leave.end_date|date:"d M" }}</div>
                    </div>
                    {% if leave.status == 'pending' %}<span class="rb-badge rb-badge-gold">Pending</span>
                    {% elif leave.status == 'approved' %}<span class="rb-badge rb-badge-green">Approved</span>
                    {% else %}<span class="rb-badge rb-badge-red">{{ leave.status|title }}</span>{% endif %}
                </div>
                {% endfor %}
            {% else %}
                <p class="text-muted text-center py-3 mb-0" style="font-size:.85rem">No recent leave requests</p>
            {% endif %}
            {% endwith %}
        </div>
    </div>

    <div class="card">
        <div class="card-header"><span class="rb-section-title mb-0">Head's Quick Actions</span></div>
        <div class="card-body">
            <div class="qa-grid">
                <a href="{% url 'students:student_add' %}"  class="qa-btn"><i class="fas fa-user-plus"></i>Add Student</a>
                <a href="{% url 'staff:staff_add' %}"       class="qa-btn"><i class="fas fa-user-tie"></i>Add Staff</a>
                <a href="{% url 'staff:leave_list' %}"      class="qa-btn"><i class="fas fa-calendar-check"></i>Leave List</a>
                <a href="{% url 'reports:attendance_report' %}" class="qa-btn"><i class="fas fa-chart-bar"></i>Reports</a>
            </div>
        </div>
    </div>
</div>

{% elif dashboard_type == 'teacher' %}
<!-- ── TEACHER VIEW ─────────────────────────────── -->
<div class="dash-grid dash-grid-2-1 mb-4">
    <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
            <span class="rb-section-title mb-0">My Assigned Classes</span>
            <a href="{% url 'academics:class_list' %}" style="font-size:.75rem;color:var(--rb-red)">All classes</a>
        </div>
        <div class="card-body" style="padding-top:.5rem">
            {% if my_classes %}
                {% for cls in my_classes %}
                <div class="class-item">
                    <div class="class-bubble">{{ cls.name|slice:":2"|upper }}</div>
                    <div style="flex:1">
                        <div class="class-name">{{ cls.name }}</div>
                        <div class="class-meta">{{ cls.student_count|default:0 }} students</div>
                    </div>
                    <a href="{% url 'academics:class_detail' cls.pk %}" class="btn btn-sm" style="background:#fef2f2;color:var(--rb-red);border:none;font-size:.75rem;padding:.25rem .6rem">View</a>
                </div>
                {% endfor %}
            {% else %}
                <p class="text-muted text-center py-3 mb-0" style="font-size:.85rem">No classes assigned yet</p>
            {% endif %}
        </div>
    </div>

    <div class="card">
        <div class="card-header"><span class="rb-section-title mb-0">Today's Tasks</span></div>
        <div class="card-body">
            <div class="qa-grid">
                <a href="/academics/attendance/" class="qa-btn"><i class="fas fa-clipboard-check"></i>Attendance</a>
                <a href="{% url 'academics:class_list' %}" class="qa-btn"><i class="fas fa-chalkboard"></i>My Classes</a>
                <a href="{% url 'staff:leave_add' %}"     class="qa-btn"><i class="fas fa-calendar-plus"></i>Request Leave</a>
                <a href="{% url 'staff:leave_list' %}"    class="qa-btn"><i class="fas fa-list"></i>My Leave</a>
            </div>
        </div>
    </div>
</div>

{% else %}
<!-- ── DEFAULT STAFF VIEW ──────────────────────── -->
<div class="dash-grid dash-grid-2-1 mb-4">
    <div class="card">
        <div class="card-header"><span class="rb-section-title mb-0">My Profile</span></div>
        <div class="card-body" style="padding-top:.5rem">
            {% if request.user.staff_profile %}
            {% with s=request.user.staff_profile %}
            <div class="profile-row"><span class="profile-label">Employee ID</span><span class="profile-val">{{ s.employee_id }}</span></div>
            <div class="profile-row"><span class="profile-label">Role</span><span class="profile-val">{{ s.get_role_display }}</span></div>
            <div class="profile-row"><span class="profile-label">Department</span><span class="profile-val">{{ s.get_department_display }}</span></div>
            <div class="profile-row"><span class="profile-label">Phone</span><span class="profile-val">{{ s.phone_number|default:"—" }}</span></div>
            <div class="profile-row"><span class="profile-label">Email</span><span class="profile-val">{{ request.user.email|default:"—" }}</span></div>
            <div class="profile-row"><span class="profile-label">Hire Date</span><span class="profile-val">{{ s.hire_date|date:"d M Y"|default:"—" }}</span></div>
            {% endwith %}
            {% endif %}
        </div>
    </div>

    <div class="card">
        <div class="card-header"><span class="rb-section-title mb-0">Quick Links</span></div>
        <div class="card-body">
            <div class="qa-grid">
                {% if request.user.staff_profile %}
                <a href="{% url 'staff:staff_edit' request.user.staff_profile.pk %}" class="qa-btn"><i class="fas fa-user-edit"></i>Edit Profile</a>
                {% endif %}
                <a href="{% url 'staff:leave_add' %}"  class="qa-btn"><i class="fas fa-calendar-plus"></i>Request Leave</a>
                <a href="{% url 'staff:leave_list' %}" class="qa-btn"><i class="fas fa-list-alt"></i>My Leave</a>
                <a href="{% url 'dashboard' %}"        class="qa-btn"><i class="fas fa-th-large"></i>Main Dashboard</a>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% endblock %}

{% block extra_js %}
<script>
/* Live clock in welcome banner */
(function tick(){
    const el = document.getElementById('liveTime');
    if (el) {
        const now = new Date();
        const h = String(now.getHours()).padStart(2,'0');
        const m = String(now.getMinutes()).padStart(2,'0');
        el.textContent = h + ':' + m;
    }
    setTimeout(tick, 30000);
})();
</script>
{% endblock %}
