{% extends "base.html" %}

{% block title %}Dashboard Admin{% endblock %}
{% block page_title %}Dashboard Admin{% endblock %}

{% block content %}
<!-- Welcome -->
<div class="islamic-pattern-bg rounded-2xl p-6 mb-6 text-white">
    <h3 class="text-xl font-bold">Assalamu'alaikum, {{ current_user.name }}</h3>
    <p class="text-emerald-100 text-sm mt-1">{{ current_user.school.name }}</p>
</div>

<!-- Stats Grid -->
<div class="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
    <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-100 card-islamic">
        <p class="text-sm text-gray-500">Guru</p>
        <p class="text-3xl font-bold text-gray-800 mt-1">{{ guru_count }}</p>
    </div>
    <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-100 card-islamic">
        <p class="text-sm text-gray-500">Murid</p>
        <p class="text-3xl font-bold text-gray-800 mt-1">{{ murid_count }}</p>
    </div>
    <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-100 card-islamic">
        <p class="text-sm text-gray-500">Kelas</p>
        <p class="text-3xl font-bold text-gray-800 mt-1">{{ kelas_count }}</p>
    </div>
    <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-100 card-islamic">
        <p class="text-sm text-gray-500">Mata Pelajaran</p>
        <p class="text-3xl font-bold text-gray-800 mt-1">{{ mapel_count }}</p>
    </div>
    <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-100 card-islamic">
        <p class="text-sm text-gray-500">Jadwal</p>
        <p class="text-3xl font-bold text-gray-800 mt-1">{{ jadwal_count }}</p>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Recent Guru -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <h3 class="font-semibold text-gray-800">Guru Terbaru</h3>
            <a href="{{ url_for('admin.guru_list') }}" class="text-sm text-primary-600 hover:text-primary-700">Lihat semua &rarr;</a>
        </div>
        <div class="divide-y divide-gray-50">
            {% for guru in recent_guru %}
            <div class="px-6 py-3 flex items-center gap-3">
                <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0">
                    <span class="text-primary-700 text-xs font-semibold">{{ guru.name[0]|upper }}</span>
                </div>
                <div class="min-w-0">
                    <p class="text-sm font-medium text-gray-800 truncate">{{ guru.name }}</p>
                    <p class="text-xs text-gray-500 truncate">{{ guru.email }}</p>
                </div>
            </div>
            {% endfor %}
            {% if not recent_guru %}
            <p class="px-6 py-6 text-center text-gray-400 text-sm">Belum ada guru</p>
            {% endif %}
        </div>
    </div>

    <!-- Recent Murid -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <h3 class="font-semibold text-gray-800">Murid Terbaru</h3>
            <a href="{{ url_for('admin.murid_list') }}" class="text-sm text-primary-600 hover:text-primary-700">Lihat semua &rarr;</a>
        </div>
        <div class="divide-y divide-gray-50">
            {% for murid in recent_murid %}
            <div class="px-6 py-3 flex items-center gap-3">
                <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                    <span class="text-blue-700 text-xs font-semibold">{{ murid.name[0]|upper }}</span>
                </div>
                <div class="min-w-0">
                    <p class="text-sm font-medium text-gray-800 truncate">{{ murid.name }}</p>
                    <p class="text-xs text-gray-500 truncate">{{ murid.email }}</p>
                </div>
            </div>
            {% endfor %}
            {% if not recent_murid %}
            <p class="px-6 py-6 text-center text-gray-400 text-sm">Belum ada murid</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}