{% extends "base.html" %}
{% block title %}Riwayat Kehadiran{% endblock %}
{% block content %}
<div class="mb-6">
    <h1 class="text-2xl lg:text-3xl font-bold">Riwayat Kehadiran</h1>
    {% if siswa %}<p class="text-gray-600">{{ siswa.nama }} ({{ siswa.nisn }})</p>{% endif %}
</div>

{% if not siswa %}
<div class="bg-yellow-100 text-yellow-800 p-6 rounded-lg">
    <p class="font-semibold">Data siswa tidak ditemukan.</p>
</div>
{% else %}
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
    <form method="GET" class="flex gap-4">
        <select name="periode" class="flex-1 px-4 py-2 border rounded-lg">
            <option value="bulan" {% if periode == 'bulan' %}selected{% endif %}>Bulan Ini</option>
            <option value="semua" {% if periode == 'semua' %}selected{% endif %}>Semua Riwayat</option>
        </select>
        <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold">Tampilkan</button>
    </form>
</div>

<!-- Statistik Bulan Ini -->
<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>

<!-- Riwayat Absensi -->
<div class="bg-white rounded-lg shadow-md overflow-x-auto hidden md:block">
    <div class="p-4 border-b">
        <h2 class="text-lg font-bold">Detail Riwayat Absensi</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">Tanggal</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>
                <th class="px-6 py-3 text-left text-xs font-semibold uppercase">Keterangan</th>
            </tr>
        </thead>
        <tbody class="divide-y">
            {% for r in riwayat %}
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4 font-medium">{{ r.tanggal }}</td>
                <td class="px-6 py-4 text-center">{{ r.jam_masuk or '-' }}</td>
                <td class="px-6 py-4 text-center">{{ r.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 r.status == 'Hadir' %}bg-green-100 text-green-800{% elif r.status == 'Ijin' %}bg-blue-100 text-blue-800{% elif r.status == 'Sakit' %}bg-yellow-100 text-yellow-800{% else %}bg-red-100 text-red-800{% endif %}">
                        {{ r.status }}
                    </span>
                </td>
                <td class="px-6 py-4 text-sm text-gray-600">{{ r.keterangan or '-' }}</td>
            </tr>
            {% else %}
            <tr><td colspan="5" class="px-6 py-8 text-center text-gray-500">Belum ada riwayat absensi</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Mobile Cards -->
<div class="md:hidden space-y-4">
    {% for r in riwayat %}
    <div class="bg-white rounded-lg shadow-md p-4">
        <div class="flex justify-between items-start mb-3">
            <div>
                <p class="font-bold text-gray-900">{{ r.tanggal }}</p>
                <p class="text-xs text-gray-500">{{ r.keterangan or '-' }}</p>
            </div>
            <span class="px-2 py-1 rounded-full text-xs font-semibold {% if r.status == 'Hadir' %}bg-green-100 text-green-800{% elif r.status == 'Ijin' %}bg-blue-100 text-blue-800{% elif r.status == 'Sakit' %}bg-yellow-100 text-yellow-800{% else %}bg-red-100 text-red-800{% endif %}">
                {{ r.status }}
            </span>
        </div>
        <div class="grid grid-cols-2 gap-2 text-sm">
            <div><span class="text-gray-600">Masuk:</span> <span class="font-semibold">{{ r.jam_masuk or '-' }}</span></div>
            <div><span class="text-gray-600">Pulang:</span> <span class="font-semibold">{{ r.jam_pulang or '-' }}</span></div>
        </div>
    </div>
    {% else %}
    <div class="bg-white rounded-lg shadow-md p-8 text-center text-gray-500">Belum ada riwayat absensi</div>
    {% endfor %}
</div>
{% endif %}
{% endblock %}