{% extends "base.html" %}

{% block title %}Kelola Pengguna{% endblock %}
{% block page_title %}Kelola Pengguna{% endblock %}

{% block content %}
<!-- Search and Filter -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-6">
    <form method="GET" class="flex flex-wrap gap-3 items-end">
        <div class="flex-1 min-w-[200px]">
            <label class="block text-xs font-medium text-gray-600 mb-1">Cari Pengguna</label>
            <input type="text" name="search" value="{{ search }}" placeholder="Nama atau Email..." 
                   class="w-full px-3 py-2 rounded-lg border border-gray-200 text-sm focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-none">
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-600 mb-1">Role</label>
            <select name="role" onchange="this.form.submit()" 
                    class="px-3 py-2 rounded-lg border border-gray-200 text-sm focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-none">
                <option value="all" {% if role_filter == 'all' %}selected{% endif %}>Semua</option>
                <option value="admin" {% if role_filter == 'admin' %}selected{% endif %}>Admin</option>
                <option value="guru" {% if role_filter == 'guru' %}selected{% endif %}>Guru</option>
                <option value="murid" {% if role_filter == 'murid' %}selected{% endif %}>Murid</option>
            </select>
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-600 mb-1">Sekolah</label>
            <select name="school" onchange="this.form.submit()" 
                    class="px-3 py-2 rounded-lg border border-gray-200 text-sm focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-none">
                <option value="0">Semua Sekolah</option>
                {% for school in all_schools %}
                <option value="{{ school.id }}" {% if school_filter == school.id %}selected{% endif %}>{{ school.name }}</option>
                {% endfor %}
            </select>
        </div>
        <button type="submit" class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700 transition-colors">
            Filter
        </button>
        {% if search or role_filter != 'all' or school_filter %}
        <a href="{{ url_for('superadmin.users') }}" class="px-4 py-2 bg-white border border-gray-200 text-gray-600 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors">
            Reset
        </a>
        {% endif %}
    </form>
</div>

<!-- Users table -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100">
    <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">Pengguna</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Role</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Sekolah</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Status</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Terdaftar</th>
                    <th class="text-right text-xs font-medium text-gray-500 uppercase px-6 py-3">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                {% for user in pagination.items %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0">
                                <span class="text-primary-700 font-semibold">{{ user.name[0]|upper }}</span>
                            </div>
                            <div>
                                <p class="text-sm font-medium text-gray-800">{{ user.name }}</p>
                                <p class="text-xs text-gray-500">{{ user.email }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        {% if user.role == 'admin' %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Admin</span>
                        {% elif user.role == 'guru' %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Guru</span>
                        {% elif user.role == 'murid' %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Murid</span>
                        {% else %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">{{ user.role }}</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-600">
                        {% if user.school %}
                        <span class="text-sm">{{ user.school.name }}</span>
                        {% else %}
                        <span class="text-gray-400">-</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4">
                        {% if user.is_active %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Aktif</span>
                        {% else %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Nonaktif</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-500">{{ user.created_at.strftime('%d %b %Y') }}</td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <!-- Toggle Active -->
                            <form method="POST" action="{{ url_for('superadmin.toggle_user_active', user_id=user.id) }}" class="inline">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="text-xs px-2 py-1 rounded {% if user.is_active %}bg-yellow-50 text-yellow-600 hover:bg-yellow-100{% else %}bg-green-50 text-green-600 hover:bg-green-100{% endif %} transition-colors" 
                                        title="{% if user.is_active %}Nonaktifkan{% else %}Aktifkan{% endif %}">
                                    {% if user.is_active %}Nonaktifkan{% else %}Aktifkan{% endif %}
                                </button>
                            </form>
                            
                            <!-- Reset Password -->
                            <a href="{{ url_for('superadmin.reset_user_password', user_id=user.id) }}" 
                               class="text-xs px-2 py-1 rounded bg-blue-50 text-blue-600 hover:bg-blue-100 transition-colors">
                                Reset Password
                            </a>
                            
                            <!-- Delete -->
                            <form method="POST" action="{{ url_for('superadmin.delete_user', user_id=user.id) }}" class="inline">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="text-xs px-2 py-1 rounded bg-red-50 text-red-600 hover:bg-red-100 transition-colors" 
                                        onclick="return confirm('Yakin ingin menghapus pengguna &quot;{{ user.name }}&quot;? Tindakan ini tidak dapat dibatalkan.')">
                                    Hapus
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
                {% if not pagination.items %}
                <tr><td colspan="6" class="px-6 py-8 text-center text-gray-400 text-sm">Tidak ada pengguna ditemukan</td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    {% if pagination.pages > 1 %}
    <div class="px-6 py-4 border-t border-gray-100 flex items-center justify-between">
        <p class="text-sm text-gray-500">
            Menampilkan {{ (pagination.page - 1) * pagination.per_page + 1 }} - {{ pagination.page * pagination.per_page if pagination.page * pagination.per_page < pagination.total else pagination.total }} dari {{ pagination.total }} pengguna
        </p>
        <div class="flex gap-2">
            {% if pagination.has_prev %}
            <a href="{{ url_for('superadmin.users', page=pagination.prev_num, role=role_filter, school=school_filter, search=search) }}" 
               class="px-3 py-1.5 rounded-lg border border-gray-200 text-sm text-gray-600 hover:bg-gray-50 transition-colors">
                &larr; Sebelumnya
            </a>
            {% endif %}
            {% for page_num in pagination.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
                {% if page_num %}
                    {% if page_num == pagination.page %}
                    <span class="px-3 py-1.5 rounded-lg bg-primary-600 text-white text-sm font-medium">{{ page_num }}</span>
                    {% else %}
                    <a href="{{ url_for('superadmin.users', page=page_num, role=role_filter, school=school_filter, search=search) }}" 
                       class="px-3 py-1.5 rounded-lg border border-gray-200 text-sm text-gray-600 hover:bg-gray-50 transition-colors">
                        {{ page_num }}
                    </a>
                    {% endif %}
                {% else %}
                <span class="px-2 text-gray-400">...</span>
                {% endif %}
            {% endfor %}
            {% if pagination.has_next %}
            <a href="{{ url_for('superadmin.users', page=pagination.next_num, role=role_filter, school=school_filter, search=search) }}" 
               class="px-3 py-1.5 rounded-lg border border-gray-200 text-sm text-gray-600 hover:bg-gray-50 transition-colors">
                Selanjutnya &rarr;
            </a>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}