{% extends "base.html" %}

{% block page_title %}Manajemen User{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header Section -->
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 mobile-small">
                <i class="fas fa-users text-ocean-600 mr-2"></i>
                Manajemen User
            </h1>
            <p class="text-gray-600 mt-1 mobile-xs">Kelola akun pengguna sistem SIRIPIKAN</p>
        </div>
        <button onclick="openModal('addUserModal')" class="bg-ocean-600 hover:bg-ocean-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors mobile-small">
            <i class="fas fa-plus"></i>
            <span>Tambah User</span>
        </button>
    </div>

    <!-- Search and Filter -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <form method="GET" class="flex flex-col sm:flex-row gap-4">
            <div class="flex-1">
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-search text-gray-400"></i>
                    </div>
                    <input type="text" name="search" value="{{ search }}" 
                           placeholder="Cari username..." 
                           class="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 mobile-small">
                </div>
            </div>
            <button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition-colors mobile-small">
                <i class="fas fa-search mr-2"></i>Cari
            </button>
            {% if search %}
            <a href="/users" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors text-center mobile-small">
                <i class="fas fa-times"></i>
            </a>
            {% endif %}
        </form>
    </div>

    <!-- Users Table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="p-6 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900 mobile-small">Daftar User</h3>
        </div>
        
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">
                            Username
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">
                            Role
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">
                            Bidang
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">
                            Status
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">
                            Dibuat
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">
                            Aksi
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for user in users %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap mobile-small">
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-ocean-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-user text-ocean-600 text-sm"></i>
                                </div>
                                <div class="font-medium text-gray-900">{{ user.username }}</div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap mobile-small">
                            {% if user.role == 'super_admin' %}
                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800 mobile-xs">
                                    Super Admin
                                </span>
                            {% else %}
                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 mobile-xs">
                                    Admin Bidang
                                </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 mobile-xs">
                            {{ user.bidang|title if user.bidang else '-' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap mobile-small">
                            {% if user.is_active %}
                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 mobile-xs">
                                    <i class="fas fa-check-circle mr-1"></i>Aktif
                                </span>
                            {% else %}
                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800 mobile-xs">
                                    <i class="fas fa-times-circle mr-1"></i>Nonaktif
                                </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 mobile-xs">
                            {{ user.created_at.split(' ')[0] if user.created_at else '-' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            {% if user.username != 'admin' %}
                            <a href="/toggle_user/{{ user.id }}" 
                               class="{% if user.is_active %}text-red-600 hover:text-red-900{% else %}text-green-600 hover:text-green-900{% endif %} mr-3 mobile-xs"
                               onclick="return confirm('{% if user.is_active %}Nonaktifkan{% else %}Aktifkan{% endif %} user {{ user.username }}?')">
                                <i class="fas fa-{% if user.is_active %}user-slash{% else %}user-check{% endif %}"></i>
                                {% if user.is_active %}Nonaktifkan{% else %}Aktifkan{% endif %}
                            </a>
                            <a href="/delete_user/{{ user.id }}" 
                               class="text-red-600 hover:text-red-900 mobile-xs"
                               onclick="return confirm('Apakah Anda yakin ingin menghapus user {{ user.username }}? Tindakan ini tidak dapat dibatalkan!')">
                                <i class="fas fa-trash"></i>
                                Hapus
                            </a>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            
            {% if not users %}
            <div class="text-center py-12">
                <i class="fas fa-users text-gray-300 text-4xl mb-4"></i>
                <p class="text-gray-500 mobile-small">
                    {% if search %}
                        Tidak ada user yang ditemukan dengan kata kunci "{{ search }}"
                    {% else %}
                        Belum ada user yang terdaftar
                    {% endif %}
                </p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Pagination -->
    {% if total_pages > 1 %}
    <div class="flex items-center justify-between bg-white px-4 py-3 border border-gray-200 rounded-lg mobile-small">
        <div class="flex-1 flex justify-between sm:hidden">
            {% if page > 1 %}
            <a href="/users?page={{ page-1 }}&search={{ search }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                Previous
            </a>
            {% endif %}
            {% if page < total_pages %}
            <a href="/users?page={{ page+1 }}&search={{ search }}" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                Next
            </a>
            {% endif %}
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
            <div>
                <p class="text-sm text-gray-700 mobile-xs">
                    Halaman {{ page }} dari {{ total_pages }}
                </p>
            </div>
            <div>
                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                    {% for p in range(1, total_pages + 1) %}
                        {% if p == page %}
                        <span class="relative inline-flex items-center px-4 py-2 border border-ocean-500 bg-ocean-50 text-sm font-medium text-ocean-600">
                            {{ p }}
                        </span>
                        {% else %}
                        <a href="/users?page={{ p }}&search={{ search }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            {{ p }}
                        </a>
                        {% endif %}
                    {% endfor %}
                </nav>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Add User Modal -->
<div id="addUserModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden modal z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-xl bg-white modal-content">
        <div class="mt-3">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900 mobile-small">
                    <i class="fas fa-user-plus text-ocean-600 mr-2"></i>
                    Tambah User Baru
                </h3>
                <button onclick="closeModal('addUserModal')" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form method="POST" action="{{ url_for('add_user') }}" class="space-y-4">
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 mobile-xs">Username</label>
                    <input type="text" id="username" name="username" required 
                           class="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 mobile-small"
                           placeholder="Masukkan username">
                </div>
                
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mobile-xs">Password</label>
                    <input type="password" id="password" name="password" required 
                           class="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 mobile-small"
                           placeholder="Masukkan password">
                </div>
                
                <div>
                    <label for="role" class="block text-sm font-medium text-gray-700 mobile-xs">Role</label>
                    <select id="role" name="role" required onchange="toggleBidangField()"
                            class="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 mobile-small">
                        <option value="">Pilih Role</option>
                        <option value="super_admin">Super Admin</option>
                        <option value="admin_bidang">Admin Bidang</option>
                    </select>
                </div>
                
                <div id="bidangField" style="display: none;">
                    <label for="bidang" class="block text-sm font-medium text-gray-700 mobile-xs">Bidang</label>
                    <select id="bidang" name="bidang" 
                            class="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 mobile-small">
                        <option value="">Pilih Bidang</option>
                        <option value="sekretariat">Sekretariat</option>
                        <option value="tangkap">Perikanan Tangkap</option>
                        <option value="budidaya">Perikanan Budidaya</option>
                        <option value="pengolahan">Pengolahan dan Pemasaran</option>
                    </select>
                </div>
                
                <div class="flex justify-end space-x-3 pt-4">
                    <button type="button" onclick="closeModal('addUserModal')" 
                            class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors mobile-small">
                        Batal
                    </button>
                    <button type="submit" 
                            class="px-4 py-2 bg-ocean-600 text-white rounded-lg hover:bg-ocean-700 transition-colors mobile-small">
                        <i class="fas fa-save mr-2"></i>Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function toggleBidangField() {
    const role = document.getElementById('role').value;
    const bidangField = document.getElementById('bidangField');
    const bidangSelect = document.getElementById('bidang');
    
    if (role === 'admin_bidang') {
        bidangField.style.display = 'block';
        bidangSelect.required = true;
    } else {
        bidangField.style.display = 'none';
        bidangSelect.required = false;
        bidangSelect.value = '';
    }
}
</script>
{% endblock %}