{% extends "base.html" %}
{% block title %}Monitoring Kelas{% endblock %}
{% block content %}
<div class="mb-6">
    <h1 class="text-2xl lg:text-3xl font-bold">Monitoring Kehadiran Kelas</h1>
    {% if kelas %}<p class="text-gray-600">{{ kelas.nama_kelas }}</p>{% endif %}
</div>

{% if not kelas %}
<div class="bg-yellow-100 text-yellow-800 p-6 rounded-lg">
    <p class="font-semibold">Anda belum ditugaskan sebagai wali kelas.</p>
    <p class="text-sm mt-2">Silakan hubungi admin untuk penugasan kelas.</p>
</div>
{% else %}
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
    <form method="GET" class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
            <label class="block text-sm font-semibold mb-2">Periode</label>
            <select name="periode" class="w-full px-4 py-2 border rounded-lg">
                <option value="hari" {% if periode == 'hari' %}selected{% endif %}>Harian</option>
                <option value="minggu" {% if periode == 'minggu' %}selected{% endif %}>Mingguan</option>
                <option value="bulan" {% if periode == 'bulan' %}selected{% endif %}>Bulanan</option>
            </select>
        </div>
        <div>
            <label class="block text-sm font-semibold mb-2">Tanggal</label>
            <input type="date" name="tanggal" value="{{ tanggal }}" class="w-full px-4 py-2 border rounded-lg">
        </div>
        <div class="flex items-end">
            <button type="submit" class="w-full bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold">Tampilkan</button>
        </div>
    </form>
</div>

<!-- Statistik -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-green-500">
        <p class="text-sm text-gray-600">Hadir</p>
        <p class="text-3xl font-bold text-gray-800">{{ stats.hadir or 0 }}</p>
    </div>
    <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-blue-500">
        <p class="text-sm text-gray-600">Ijin</p>
        <p class="text-3xl font-bold text-gray-800">{{ stats.ijin or 0 }}</p>
    </div>
    <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-yellow-500">
        <p class="text-sm text-gray-600">Sakit</p>
        <p class="text-3xl font-bold text-gray-800">{{ stats.sakit or 0 }}</p>
    </div>
    <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-red-500">
        <p class="text-sm text-gray-600">Alpa</p>
        <p class="text-3xl font-bold text-gray-800">{{ stats.alpa or 0 }}</p>
    </div>
</div>

<!-- Detail Harian -->
{% if periode == 'hari' and stats.detail %}
<div class="bg-white rounded-lg shadow-md overflow-x-auto">
    <div class="p-4 border-b">
        <h2 class="text-lg font-bold">Detail Kehadiran Siswa</h2>
    </div>
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-semibold uppercase">NISN</th>
                <th class="px-6 py-3 text-left text-xs font-semibold uppercase">Nama</th>
                <th class="px-6 py-3 text-center text-xs font-semibold uppercase">Jam Masuk</th>
                <th class="px-6 py-3 text-center text-xs font-semibold uppercase">Jam Pulang</th>
                <th class="px-6 py-3 text-center text-xs font-semibold uppercase">Status</th>
            </tr>
        </thead>
        <tbody class="divide-y">
            {% for d in stats.detail %}
            <tr>
                <td class="px-6 py-4 font-medium">{{ d.nisn }}</td>
                <td class="px-6 py-4">{{ d.nama }}</td>
                <td class="px-6 py-4 text-center">{{ d.jam_masuk or '-' }}</td>
                <td class="px-6 py-4 text-center">{{ d.jam_pulang or '-' }}</td>
                <td class="px-6 py-4 text-center">
                    <span class="px-3 py-1 rounded-full text-xs font-semibold {% if d.status == 'Hadir' %}bg-green-100 text-green-800{% elif d.status == 'Ijin' %}bg-blue-100 text-blue-800{% elif d.status == 'Sakit' %}bg-yellow-100 text-yellow-800{% else %}bg-red-100 text-red-800{% endif %}">
                        {{ d.status or 'Belum Absen' }}
                    </span>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}
{% endif %}
{% endblock %}