{% extends "base.html" %}
{% block title %}Data Kelas{% endblock %}
{% block content %}
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div><h1 class="text-2xl lg:text-3xl font-bold">Data Kelas</h1></div>
    <button onclick="openAddModal()" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold shadow-lg">
        + Tambah Kelas
    </button>
</div>

<div class="bg-white rounded-lg shadow-md p-4 mb-6">
    <form method="GET" class="flex gap-2">
        <input type="text" name="search" value="{{ search }}" placeholder="Cari kelas..." class="flex-1 px-4 py-2 border rounded-lg">
        <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded-lg">Cari</button>
    </form>
</div>

<div class="bg-white rounded-lg shadow-md overflow-x-auto hidden md:block">
    <table class="w-full">
        <thead class="bg-gray-50 border-b">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-semibold uppercase">Nama Kelas</th>
                <th class="px-6 py-3 text-left text-xs font-semibold uppercase">Wali Kelas</th>
                <th class="px-6 py-3 text-center text-xs font-semibold uppercase">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y">
            {% for k in kelas_list %}
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4 font-medium">{{ k.nama_kelas }}</td>
                <td class="px-6 py-4">{{ k.wali_kelas_nama or '-' }}</td>
                <td class="px-6 py-4 text-center">
                    <button onclick='openEditModal({{ k.id }}, "{{ k.nama_kelas }}", {{ k.wali_kelas_id or 0 }})' class="text-blue-600 hover:text-blue-800 font-semibold mr-3">Edit</button>
                    <a href="{{ url_for('delete_kelas', id=k.id) }}" onclick="return confirm('Yakin?')" class="text-red-600 hover:text-red-800 font-semibold">Hapus</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div class="md:hidden space-y-4">
    {% for k in kelas_list %}
    <div class="bg-white rounded-lg shadow-md p-4">
        <p class="font-bold text-gray-900 mb-1">{{ k.nama_kelas }}</p>
        <p class="text-sm text-gray-600 mb-3">Wali Kelas: {{ k.wali_kelas_nama or '-' }}</p>
        <div class="flex gap-2">
            <button onclick='openEditModal({{ k.id }}, "{{ k.nama_kelas }}", {{ k.wali_kelas_id or 0 }})' class="flex-1 bg-blue-600 text-white px-4 py-2 rounded">Edit</button>
            <a href="{{ url_for('delete_kelas', id=k.id) }}" onclick="return confirm('Yakin?')" class="flex-1 bg-red-600 text-white px-4 py-2 rounded text-center">Hapus</a>
        </div>
    </div>
    {% endfor %}
</div>

<div id="addModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50 p-4">
    <div class="bg-white rounded-lg max-w-md w-full">
        <div class="p-6 border-b"><h2 class="text-xl font-bold">Tambah Kelas</h2></div>
        <form method="POST" action="{{ url_for('add_kelas') }}" class="p-6">
            <div class="mb-4">
                <label class="block font-semibold mb-2">Nama Kelas</label>
                <input type="text" name="nama_kelas" required class="w-full px-4 py-2 border rounded-lg">
            </div>
            <div class="mb-4">
                <label class="block font-semibold mb-2">Wali Kelas</label>
                <select name="wali_kelas_id" class="w-full px-4 py-2 border rounded-lg">
                    <option value="">- Pilih Wali Kelas -</option>
                    {% for g in guru_list %}<option value="{{ g.id }}">{{ g.nama }}</option>{% endfor %}
                </select>
            </div>
            <div class="flex gap-2">
                <button type="submit" class="flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg">Simpan</button>
                <button type="button" onclick="closeAddModal()" class="flex-1 bg-gray-500 text-white px-4 py-2 rounded-lg">Batal</button>
            </div>
        </form>
    </div>
</div>

<div id="editModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50 p-4">
    <div class="bg-white rounded-lg max-w-md w-full">
        <div class="p-6 border-b"><h2 class="text-xl font-bold">Edit Kelas</h2></div>
        <form id="editForm" method="POST" class="p-6">
            <div class="mb-4">
                <label class="block font-semibold mb-2">Nama Kelas</label>
                <input type="text" name="nama_kelas" id="edit_nama" required class="w-full px-4 py-2 border rounded-lg">
            </div>
            <div class="mb-4">
                <label class="block font-semibold mb-2">Wali Kelas</label>
                <select name="wali_kelas_id" id="edit_wali" class="w-full px-4 py-2 border rounded-lg">
                    <option value="">- Pilih Wali Kelas -</option>
                    {% for g in guru_list %}<option value="{{ g.id }}">{{ g.nama }}</option>{% endfor %}
                </select>
            </div>
            <div class="flex gap-2">
                <button type="submit" class="flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg">Update</button>
                <button type="button" onclick="closeEditModal()" class="flex-1 bg-gray-500 text-white px-4 py-2 rounded-lg">Batal</button>
            </div>
        </form>
    </div>
</div>

<script>
function openAddModal() { document.getElementById('addModal').classList.remove('hidden'); document.getElementById('addModal').classList.add('flex'); }
function closeAddModal() { document.getElementById('addModal').classList.add('hidden'); }
function openEditModal(id, nama, wali_id) {
    document.getElementById('editForm').action = `/kelas/edit/${id}`;
    document.getElementById('edit_nama').value = nama;
    document.getElementById('edit_wali').value = wali_id || '';
    document.getElementById('editModal').classList.remove('hidden');
    document.getElementById('editModal').classList.add('flex');
}
function closeEditModal() { document.getElementById('editModal').classList.add('hidden'); }
</script>
{% endblock %}