{% extends "base.html" %}
{% block title %}Data Guru{% 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 text-gray-800">Data Guru & Wali Kelas</h1>
        <p class="text-gray-600">Kelola data pengajar dan akses login</p>
    </div>
    <button onclick="openAddModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold flex items-center justify-center space-x-2 shadow-lg transition-all">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
        <span>Tambah Guru</span>
    </button>
</div>

<!-- Search Section -->
<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 nama atau NIP..." class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-semibold transition-colors">Cari</button>
        {% if search %}
        <a href="{{ url_for('guru') }}" class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-lg font-semibold transition-colors">Reset</a>
        {% endif %}
    </form>
</div>

<!-- Desktop Table -->
<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 border-gray-200">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">NIP</th>
                <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Nama Lengkap</th>
                <th class="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Terdaftar</th>
                <!-- KOLOM BARU: QR CODE -->
                <th class="px-6 py-3 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">QR Code</th>
                <th class="px-6 py-3 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
            {% for g in guru_list %}
            <tr class="hover:bg-gray-50 transition-colors">
                <td class="px-6 py-4 font-medium text-gray-900">{{ g.nip }}</td>
                <td class="px-6 py-4 text-gray-800">{{ g.nama }}</td>
                <td class="px-6 py-4 text-sm text-gray-500">{{ g.created_at[:10] }}</td>
                
                <!-- TOMBOL LIHAT QR -->
                <td class="px-6 py-4 text-center">
                    <a href="{{ url_for('user_qrcode', id=g.user_id) }}" class="inline-flex items-center px-3 py-1 bg-purple-50 text-purple-700 border border-purple-200 rounded-md text-xs font-bold hover:bg-purple-100 transition-colors">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path></svg>
                        Lihat QR
                    </a>
                </td>

                <td class="px-6 py-4 text-center">
                    <button onclick='openEditModal({{ g.id }}, "{{ g.nip }}", "{{ g.nama }}")' class="text-blue-600 hover:text-blue-800 font-semibold mr-3 transition-colors">Edit</button>
                    <a href="{{ url_for('delete_guru', id=g.id) }}" onclick="return confirm('Yakin ingin menghapus data guru ini? User terkait juga akan dihapus.')" class="text-red-600 hover:text-red-800 font-semibold transition-colors">Hapus</a>
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="5" class="px-6 py-8 text-center text-gray-500 italic">Tidak ada data guru ditemukan</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Mobile Cards -->
<div class="md:hidden space-y-4">
    {% for g in guru_list %}
    <div class="bg-white rounded-lg shadow-md p-4 border border-gray-100">
        <div class="flex justify-between items-start mb-2">
            <div>
                <p class="font-bold text-gray-900 text-lg">{{ g.nama }}</p>
                <p class="text-sm text-gray-600 font-mono">NIP: {{ g.nip }}</p>
            </div>
        </div>
        <p class="text-xs text-gray-400 mb-4">Terdaftar: {{ g.created_at[:10] }}</p>
        
        <div class="flex gap-2">
            <!-- TOMBOL QR MOBILE -->
            <a href="{{ url_for('user_qrcode', id=g.user_id) }}" class="flex-1 bg-purple-600 hover:bg-purple-700 text-white px-3 py-2 rounded-lg text-sm font-semibold text-center transition-colors">
                QR Code
            </a>
            <button onclick='openEditModal({{ g.id }}, "{{ g.nip }}", "{{ g.nama }}")' class="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-lg text-sm font-semibold transition-colors">Edit</button>
            <a href="{{ url_for('delete_guru', id=g.id) }}" onclick="return confirm('Yakin ingin menghapus?')" class="flex-1 bg-red-600 hover:bg-red-700 text-white px-3 py-2 rounded-lg text-sm font-semibold text-center transition-colors">Hapus</a>
        </div>
    </div>
    {% else %}
    <div class="bg-white rounded-lg shadow-md p-8 text-center text-gray-500 italic">Tidak ada data guru</div>
    {% endfor %}
</div>

<!-- Pagination -->
{% if total_pages > 1 %}
<div class="mt-6 flex justify-center">
    <div class="flex gap-2">
        {% if page > 1 %}
        <a href="?page={{ page - 1 }}{% if search %}&search={{ search }}{% endif %}" class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Prev</a>
        {% endif %}
        
        <span class="px-4 py-2 bg-blue-600 text-white rounded-lg font-bold">{{ page }}</span>
        
        {% if page < total_pages %}
        <a href="?page={{ page + 1 }}{% if search %}&search={{ search }}{% endif %}" class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Next</a>
        {% endif %}
    </div>
</div>
{% endif %}

<!-- Modal Tambah -->
<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-xl shadow-xl max-w-md w-full overflow-hidden transform transition-all">
        <div class="p-6 border-b bg-gray-50">
            <h2 class="text-xl font-bold text-gray-800">Tambah Guru Baru</h2>
        </div>
        <form method="POST" action="{{ url_for('add_guru') }}" class="p-6">
            <div class="mb-4">
                <label class="block text-gray-700 font-bold mb-2 text-sm">NIP (Nomor Induk Pegawai)</label>
                <input type="text" name="nip" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 font-bold mb-2 text-sm">Nama Lengkap</label>
                <input type="text" name="nama" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 font-bold mb-2 text-sm">Username Login</label>
                <input type="text" name="username" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 font-bold mb-2 text-sm">Password</label>
                <input type="password" name="password" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                <p class="text-xs text-gray-500 mt-1">*User dengan role 'Wali Kelas' & QR Code akan dibuat otomatis</p>
            </div>
            <div class="flex gap-3">
                <button type="submit" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-lg font-bold shadow transition-colors">Simpan Data</button>
                <button type="button" onclick="closeAddModal()" class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2.5 rounded-lg font-bold transition-colors">Batal</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal Edit -->
<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-xl shadow-xl max-w-md w-full overflow-hidden transform transition-all">
        <div class="p-6 border-b bg-gray-50">
            <h2 class="text-xl font-bold text-gray-800">Edit Data Guru</h2>
        </div>
        <form id="editForm" method="POST" class="p-6">
            <div class="mb-4">
                <label class="block text-gray-700 font-bold mb-2 text-sm">NIP</label>
                <input type="text" name="nip" id="edit_nip" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 font-bold mb-2 text-sm">Nama Lengkap</label>
                <input type="text" name="nama" id="edit_nama" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 font-bold mb-2 text-sm">Username Login</label>
                <input type="text" name="username" id="edit_username" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 font-bold mb-2 text-sm">Password Baru <span class="font-normal text-gray-500">(kosongkan jika tidak ubah)</span></label>
                <input type="password" name="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="flex gap-3">
                <button type="submit" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-lg font-bold shadow transition-colors">Update Data</button>
                <button type="button" onclick="closeEditModal()" class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2.5 rounded-lg font-bold transition-colors">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');
    document.getElementById('addModal').classList.remove('flex');
}

function openEditModal(id, nip, nama) {
    document.getElementById('editForm').action = `/guru/edit/${id}`;
    document.getElementById('edit_nip').value = nip;
    document.getElementById('edit_nama').value = nama;
    document.getElementById('edit_username').value = nip; // Asumsi username awal = NIP
    document.getElementById('editModal').classList.remove('hidden');
    document.getElementById('editModal').classList.add('flex');
}

function closeEditModal() {
    document.getElementById('editModal').classList.add('hidden');
    document.getElementById('editModal').classList.remove('flex');
}
</script>
{% endblock %}