{% load static %}

<!-- ── USER CARD ─────────────────────────────────────────────── -->
<div class="sb-user">
    <div class="sb-user-avatar">{{ user.get_full_name|default:user.username|first|upper }}</div>
    <div style="min-width:0;">
        <div class="sb-user-name">{{ user.get_full_name|default:user.username }}</div>
        <div class="sb-user-role">
            {% if user.is_superuser %}
                Proprietor
            {% elif user.staff_profile.role %}
                {{ user.staff_profile.get_role_display }}
            {% else %}
                Staff
            {% endif %}
        </div>
    </div>
</div>

<!-- ── MAIN ──────────────────────────────────────────────────── -->
<div class="sb-section">Main</div>
<a href="{% url 'dashboard' %}" class="sb-link">
    <i class="fas fa-th-large sb-icon"></i> Dashboard
</a>

<!-- ── STUDENTS ───────────────────────────────────────────────── -->
<div class="sb-divider"></div>
<div class="sb-section">Students</div>
<a href="{% url 'students:student_list' %}" class="sb-link">
    <i class="fas fa-user-graduate sb-icon"></i> All Students
</a>
{% if user.is_superuser or user.staff_profile.role in 'admin,head_master,head_mistress,proprietor' %}
<a href="{% url 'students:student_add' %}" class="sb-link">
    <i class="fas fa-user-plus sb-icon"></i> Add Student
</a>
{% endif %}
<a href="{% url 'students:parent_list' %}" class="sb-link">
    <i class="fas fa-users sb-icon"></i> Parents / Guardians
</a>

<!-- Import/Export — collapsible -->
{% if user.is_superuser or user.staff_profile.role in 'admin,head_master,head_mistress,proprietor' %}
<button class="sb-group-toggle" data-group="students-io" data-target="sb-students-io">
    <i class="fas fa-file-csv sb-icon"></i> Import / Export
    <i class="fas fa-chevron-right sb-chevron"></i>
</button>
<div class="sb-children" id="sb-students-io">
    <a href="{% url 'students:import_students_csv' %}" class="sb-link">
        <i class="fas fa-upload sb-icon"></i> Import CSV
    </a>
    <a href="{% url 'students:export_students' %}" class="sb-link">
        <i class="fas fa-download sb-icon"></i> Export CSV
    </a>
    <a href="{% url 'students:download_student_sample' %}" class="sb-link">
        <i class="fas fa-file sb-icon"></i> Sample Template
    </a>
</div>
{% endif %}

<!-- ── STAFF ───────────────────────────────────────────────────── -->
{% if user.is_superuser or user.staff_profile.role in 'admin,head_master,head_mistress,proprietor' %}
<div class="sb-divider"></div>
<div class="sb-section">Staff</div>
<a href="{% url 'staff:staff_list' %}" class="sb-link">
    <i class="fas fa-id-badge sb-icon"></i> All Staff
</a>
<a href="{% url 'staff:staff_add' %}" class="sb-link">
    <i class="fas fa-user-plus sb-icon"></i> Add Staff
</a>
<a href="{% url 'staff:leave_list' %}" class="sb-link">
    <i class="fas fa-calendar-minus sb-icon"></i> Leave Requests
</a>
<a href="{% url 'staff:attendance_list' %}" class="sb-link">
    <i class="fas fa-clock sb-icon"></i> Staff Attendance
</a>
{% else %}
<!-- Teachers / non-admin see only their own leave -->
<div class="sb-divider"></div>
<div class="sb-section">My HR</div>
<a href="{% url 'staff:leave_list' %}" class="sb-link">
    <i class="fas fa-calendar-minus sb-icon"></i> My Leave
</a>
<a href="{% url 'staff:leave_add' %}" class="sb-link">
    <i class="fas fa-plus sb-icon"></i> Request Leave
</a>
{% endif %}

<!-- ── ACADEMICS ───────────────────────────────────────────────── -->
<div class="sb-divider"></div>
<div class="sb-section">Academics</div>
<a href="{% url 'academics:class_list' %}" class="sb-link">
    <i class="fas fa-chalkboard sb-icon"></i> Classes
</a>
<a href="{% url 'academics:subject_list' %}" class="sb-link">
    <i class="fas fa-book-open sb-icon"></i> Subjects
</a>

<button class="sb-group-toggle" data-group="attendance" data-target="sb-attendance">
    <i class="fas fa-clipboard-check sb-icon"></i> Attendance
    <i class="fas fa-chevron-right sb-chevron"></i>
</button>
<div class="sb-children" id="sb-attendance">
    <a href="/academics/attendance/" class="sb-link">
        <i class="fas fa-list sb-icon"></i> Attendance List
    </a>
    {% if user.is_superuser or user.staff_profile.role in 'admin,head_master,head_mistress,proprietor' %}
    <a href="/admin/academics/attendance/add/" class="sb-link">
        <i class="fas fa-plus sb-icon"></i> Mark Attendance
    </a>
    {% endif %}
    <a href="{% url 'reports:attendance_report' %}" class="sb-link">
        <i class="fas fa-chart-line sb-icon"></i> Attendance Report
    </a>
</div>

<!-- ── FINANCE ────────────────────────────────────────────────── -->
{% if user.is_superuser or user.staff_profile.role in 'bursar,admin,head_master,head_mistress,proprietor' %}
<div class="sb-divider"></div>
<div class="sb-section">Finance</div>
<a href="{% url 'finance:bursar_dashboard' %}" class="sb-link">
    <i class="fas fa-chart-pie sb-icon"></i> Bursar Dashboard
</a>
<a href="{% url 'finance:invoice_list' %}" class="sb-link">
    <i class="fas fa-file-invoice sb-icon"></i> Invoices
</a>
<a href="{% url 'finance:payment_list' %}" class="sb-link">
    <i class="fas fa-money-bill-wave sb-icon"></i> Payments
</a>
<button class="sb-group-toggle" data-group="finance-more" data-target="sb-finance-more">
    <i class="fas fa-ellipsis-h sb-icon"></i> More Finance
    <i class="fas fa-chevron-right sb-chevron"></i>
</button>
<div class="sb-children" id="sb-finance-more">
    <a href="{% url 'finance:fee_list' %}" class="sb-link">
        <i class="fas fa-tags sb-icon"></i> Fee Structures
    </a>
    <a href="{% url 'finance:expense_list' %}" class="sb-link">
        <i class="fas fa-receipt sb-icon"></i> Expenses
    </a>
    <a href="{% url 'finance:discount_list' %}" class="sb-link">
        <i class="fas fa-percent sb-icon"></i> Discounts
    </a>
    <a href="{% url 'finance:financial_reports' %}" class="sb-link">
        <i class="fas fa-chart-bar sb-icon"></i> Financial Reports
    </a>
</div>
{% endif %}

<!-- ── COMMUNICATION ───────────────────────────────────────────── -->
<div class="sb-divider"></div>
<div class="sb-section">Communication</div>
<a href="{% url 'communication:announcement_list' %}" class="sb-link">
    <i class="fas fa-bullhorn sb-icon"></i> Announcements
</a>
<a href="{% url 'communication:sms_compose' %}" class="sb-link">
    <i class="fas fa-comment-sms sb-icon"></i> Send SMS
</a>
<a href="{% url 'communication:sms_list' %}" class="sb-link">
    <i class="fas fa-inbox sb-icon"></i> SMS History
</a>
<a href="{% url 'communication:parent_communication' %}" class="sb-link">
    <i class="fas fa-users sb-icon"></i> Parent Contacts
</a>

<!-- ── REPORTS ────────────────────────────────────────────────── -->
{% if user.is_superuser or user.staff_profile.role in 'admin,head_master,head_mistress,proprietor,bursar' %}
<div class="sb-divider"></div>
<div class="sb-section">Reports</div>
<a href="{% url 'reports:academic_report' %}" class="sb-link">
    <i class="fas fa-graduation-cap sb-icon"></i> Academic
</a>
<a href="{% url 'reports:attendance_report' %}" class="sb-link">
    <i class="fas fa-calendar-check sb-icon"></i> Attendance
</a>
<a href="{% url 'reports:financial_report' %}" class="sb-link">
    <i class="fas fa-coins sb-icon"></i> Financial
</a>
<a href="{% url 'reports:custom_report' %}" class="sb-link">
    <i class="fas fa-cogs sb-icon"></i> Custom Report
</a>
{% endif %}

<!-- ── ADMIN ──────────────────────────────────────────────────── -->
{% if user.is_superuser %}
<div class="sb-divider"></div>
<div class="sb-section">Administration</div>
<a href="{% url 'admin:index' %}" class="sb-link">
    <i class="fas fa-shield-alt sb-icon"></i> Django Admin
</a>
{% endif %}

<!-- ── LOGOUT ─────────────────────────────────────────────────── -->
<div class="sb-logout">
    <form method="post" action="{% url 'staff:logout' %}" style="margin:0">
        {% csrf_token %}
        <button type="submit" style="display:flex;align-items:center;gap:.65rem;padding:.6rem .85rem;border-radius:8px;color:#888;background:none;border:none;cursor:pointer;font-size:.875rem;font-weight:500;min-height:44px;width:100%;transition:background .15s,color .15s" onmouseover="this.style.background='#fff0f0';this.style.color='var(--rb-red)'" onmouseout="this.style.background='none';this.style.color='#888'">
            <i class="fas fa-sign-out-alt sb-icon"></i> Sign Out
        </button>
    </form>
</div>

<script>
(function () {
    /* ── Active link detection ── */
    const path = window.location.pathname;
    document.querySelectorAll('.sb-link').forEach(link => {
        const href = link.getAttribute('href');
        if (!href || href === '#') return;
        if (path === href || (href.length > 1 && path.startsWith(href))) {
            link.classList.add('active');
            const parent = link.closest('.sb-children');
            if (parent) {
                parent.classList.add('open');
                const btn = document.querySelector('[data-target="' + parent.id + '"]');
                if (btn) btn.classList.add('open');
            }
        }
    });

    /* ── Collapsible groups ── */
    document.querySelectorAll('.sb-group-toggle').forEach(btn => {
        const key = 'sb-' + btn.dataset.group;
        const children = document.getElementById(btn.dataset.target);
        if (!children) return;
        const saved = sessionStorage.getItem(key);
        const hasActive = children.querySelector('.active');
        if (saved === 'open' || hasActive) {
            btn.classList.add('open');
            children.classList.add('open');
        }
        btn.addEventListener('click', () => {
            const isOpen = btn.classList.toggle('open');
            children.classList.toggle('open', isOpen);
            sessionStorage.setItem(key, isOpen ? 'open' : 'closed');
        });
    });

    /* ── Close on mobile link tap ── */
    document.querySelectorAll('.sb-link').forEach(link => {
        link.addEventListener('click', () => {
            if (window.innerWidth < 992) document.body.classList.remove('sidebar-open');
        });
    });
})();
</script>