{% extends "base.html" %}

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

{% block content %}
<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>
    {% if kelas_names %}
    <p class="text-emerald-200 text-xs mt-1">Kelas: {{ kelas_names|join(', ') }}</p>
    {% endif %}
</div>

<div class="grid grid-cols-1 sm:grid-cols-3 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">Total Nilai</p>
        <p class="text-3xl font-bold text-gray-800 mt-1">{{ total_nilai }}</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">Kehadiran</p>
        <p class="text-3xl font-bold text-green-600 mt-1">{{ total_hadir }}</p>
        <p class="text-xs text-gray-500 mt-1">dari {{ total_kehadiran }} hari</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">Persentase Hadir</p>
        <p class="text-3xl font-bold text-primary-600 mt-1">
            {% if total_kehadiran > 0 %}{{ "%.0f"|format(total_hadir / total_kehadiran * 100) }}%{% else %}-{% endif %}
        </p>
    </div>
</div>

{% set days = {'senin': 'Senin', 'selasa': 'Selasa', 'rabu': 'Rabu', 'kamis': 'Kamis', 'jumat': 'Jumat'} %}

<div class="bg-white rounded-xl shadow-sm border border-gray-100">
    <div class="px-6 py-4 border-b border-gray-100">
        <h3 class="font-semibold text-gray-800">Jadwal Pelajaran</h3>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Hari</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Waktu</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Mata Pelajaran</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Guru</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                {% for jadwal in jadwal_list %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800">{{ days.get(jadwal.day, jadwal.day) }}</span>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-600">{{ jadwal.start_time.strftime('%H:%M') }} - {{ jadwal.end_time.strftime('%H:%M') }}</td>
                    <td class="px-6 py-4 text-sm font-medium text-gray-800">{{ jadwal.mata_pelajaran.name }}</td>
                    <td class="px-6 py-4 text-sm text-gray-600">{{ jadwal.guru.name }}</td>
                </tr>
                {% endfor %}
                {% if not jadwal_list %}
                <tr><td colspan="4" class="px-6 py-8 text-center text-gray-400 text-sm">Belum ada jadwal pelajaran</td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}