{% extends "base.html" %}

{% block title %}User Management - Project Management System{% endblock %}

{% block navbar %}
<div class="navbar bg-base-100 shadow-lg">
    <div class="flex-1">
        <a href="{{ url_for('admin_dashboard') }}" class="btn btn-ghost normal-case text-xl">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            User Management
        </a>
    </div>
    <div class="flex-none">
        <div class="dropdown dropdown-end">
            <label tabindex="0" class="btn btn-ghost">
                <div class="indicator">
                    <div class="badge badge-primary badge-xs indicator-item"></div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                </div>
            </label>
            <ul tabindex="0" class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
                <li><span class="text-sm opacity-70">{{ session.full_name }}</span></li>
                <li><span class="text-xs opacity-50">{{ session.user_role|title }}</span></li>
                <li><div class="divider my-1"></div></li>
                <li><a href="{{ url_for('admin_dashboard') }}">Dashboard</a></li>
                <li><a href="{{ url_for('user_management') }}">User Management</a></li>
                <li><a href="{{ url_for('logout') }}">Logout</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="flex flex-col lg:flex-row gap-6">
    <!-- Sidebar -->
    <div class="lg:w-80 w-full">
        <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <h2 class="card-title">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
                    </svg>
                    Quick Actions
                </h2>
                
                <button class="btn btn-primary w-full mb-4" onclick="document.getElementById('add_user_modal').showModal()">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
                    </svg>
                    Tambah User
                </button>
                
                <div class="divider"></div>
                
                <!-- User Statistics -->
                <div class="stats stats-vertical shadow">
                    <div class="stat">
                        <div class="stat-title">Total Users</div>
                        <div class="stat-value text-primary">{{ users|length }}</div>
                    </div>
                    
                    <div class="stat">
                        <div class="stat-title">Admin</div>
                        <div class="stat-value text-secondary">{{ users|selectattr('role', 'equalto', 'admin')|list|length }}</div>
                    </div>
                    
                    <div class="stat">
                        <div class="stat-title">Team Members</div>
                        <div class="stat-value text-accent">{{ users|selectattr('role', 'equalto', 'team')|list|length }}</div>
                    </div>
                    
                    <div class="stat">
                        <div class="stat-title">Active</div>
                        <div class="stat-value text-success">{{ users|selectattr('is_active', 'equalto', 1)|list|length }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Main Content -->
    <div class="flex-1">
        <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="card-title">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                        </svg>
                        Daftar Users
                    </h2>
                    <div class="badge badge-primary">Total: {{ users|length }}</div>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="table table-zebra w-full">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Username</th>
                                <th>Nama Lengkap</th>
                                <th>WhatsApp</th>
                                <th>Role</th>
                                <th>Status</th>
                                <th>Dibuat</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for user in users %}
                            <tr>
                                <td>{{ user.id }}</td>
                                <td>
                                    <div class="font-mono">{{ user.username }}</div>
                                </td>
                                <td>
                                    <div class="flex items-center">
                                        <div class="avatar placeholder mr-3">
                                            <div class="bg-neutral-focus text-neutral-content rounded-full w-8">
                                                <span class="text-xs">{{ user.full_name[0].upper() }}</span>
                                            </div>
                                        </div>
                                        <div>{{ user.full_name }}</div>
                                    </div>
                                </td>
                                <td>
                                    {% if user.whatsapp_number %}
                                    <a href="https://wa.me/{{ user.whatsapp_number }}" target="_blank" class="btn btn-xs btn-success">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                                        </svg>
                                        WA
                                    </a>
                                    {% else %}
                                    <span class="text-gray-400">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if user.role == 'admin' %}
                                    <div class="badge badge-error">Admin</div>
                                    {% else %}
                                    <div class="badge badge-info">Team</div>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if user.is_active %}
                                    <div class="badge badge-success">Aktif</div>
                                    {% else %}
                                    <div class="badge badge-ghost">Nonaktif</div>
                                    {% endif %}
                                </td>
                                <td class="text-sm opacity-70">
                                    {{ user.created_at[:10] }}
                                </td>
                                <td>
                                    <div class="flex gap-1">
                                        <button class="btn btn-xs btn-outline" 
                                                onclick="loadUserData({{ user.id }}); document.getElementById('edit_user_modal').showModal()">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                            </svg>
                                            Edit
                                        </button>
                                        {% if user.id != session.user_id %}
                                        <a href="{{ url_for('delete_user', user_id=user.id) }}" 
                                           class="btn btn-xs btn-error"
                                           onclick="return confirm('Yakin ingin menghapus user {{ user.full_name }}?')">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                            </svg>
                                            Hapus
                                        </a>
                                        {% else %}
                                        <div class="badge badge-outline">Current</div>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    
                    {% if not users %}
                    <div class="text-center py-8">
                        <div class="text-base-content/60">Tidak ada user yang ditemukan</div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add User Modal -->
<dialog id="add_user_modal" class="modal">
    <div class="modal-box">
        <form method="dialog">
            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
        </form>
        <h3 class="font-bold text-lg mb-4">Tambah User Baru</h3>
        
        <form method="POST" action="{{ url_for('add_user') }}">
            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">Username <span class="text-error">*</span></span>
                </label>
                <input type="text" name="username" class="input input-bordered" placeholder="username" required>
                <label class="label">
                    <span class="label-text-alt">Username akan otomatis diubah ke huruf kecil</span>
                </label>
            </div>
            
            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">Nama Lengkap <span class="text-error">*</span></span>
                </label>
                <input type="text" name="full_name" class="input input-bordered" placeholder="Nama lengkap" required>
            </div>
            
            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">Nomor WhatsApp</span>
                </label>
                <input type="text" name="whatsapp_number" class="input input-bordered" placeholder="628123456789">
                <label class="label">
                    <span class="label-text-alt">Format: 628xxxxxxxxx (dengan kode negara)</span>
                </label>
            </div>
            
            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">Role <span class="text-error">*</span></span>
                </label>
                <select name="role" class="select select-bordered" required>
                    <option disabled selected>Pilih role</option>
                    <option value="admin">Admin</option>
                    <option value="team">Team Member</option>
                </select>
            </div>
            
            <div class="modal-action">
                <button type="submit" class="btn btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
                    </svg>
                    Tambah User
                </button>
                <button type="button" class="btn" onclick="document.getElementById('add_user_modal').close()">Batal</button>
            </div>
        </form>
    </div>
</dialog>

<!-- Edit User Modal -->
<dialog id="edit_user_modal" class="modal">
    <div class="modal-box">
        <form method="dialog">
            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
        </form>
        <h3 class="font-bold text-lg mb-4">Edit User</h3>
        
        <form id="editUserForm" method="POST">
            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">Username <span class="text-error">*</span></span>
                </label>
                <input type="text" id="edit_username" name="username" class="input input-bordered" required>
                <label class="label">
                    <span class="label-text-alt">Username akan otomatis diubah ke huruf kecil</span>
                </label>
            </div>
            
            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">Nama Lengkap <span class="text-error">*</span></span>
                </label>
                <input type="text" id="edit_full_name" name="full_name" class="input input-bordered" required>
            </div>
            
            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">Nomor WhatsApp</span>
                </label>
                <input type="text" id="edit_whatsapp_number" name="whatsapp_number" class="input input-bordered" placeholder="628123456789">
                <label class="label">
                    <span class="label-text-alt">Format: 628xxxxxxxxx (dengan kode negara)</span>
                </label>
            </div>
            
            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">Role <span class="text-error">*</span></span>
                </label>
                <select id="edit_role" name="role" class="select select-bordered" required>
                    <option value="admin">Admin</option>
                    <option value="team">Team Member</option>
                </select>
            </div>
            
            <div class="form-control mb-4">
                <label class="cursor-pointer label">
                    <span class="label-text">Status</span>
                    <input type="checkbox" id="edit_is_active" name="is_active" class="checkbox checkbox-primary">
                    <span class="label-text">Aktif</span>
                </label>
            </div>
            
            <div class="modal-action">
                <button type="submit" class="btn btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                    Update User
                </button>
                <button type="button" class="btn" onclick="document.getElementById('edit_user_modal').close()">Batal</button>
            </div>
        </form>
    </div>
</dialog>

<script>
async function loadUserData(userId) {
    try {
        const response = await fetch(`/get_user/${userId}`);
        const user = await response.json();
        
        if (user.error) {
            showToast(user.error, 'error');
            return;
        }
        
        // Fill form fields
        document.getElementById('edit_username').value = user.username || '';
        document.getElementById('edit_full_name').value = user.full_name || '';
        document.getElementById('edit_whatsapp_number').value = user.whatsapp_number || '';
        document.getElementById('edit_role').value = user.role || '';
        document.getElementById('edit_is_active').checked = user.is_active == 1;
        
        // Set form action
        document.getElementById('editUserForm').action = `/edit_user/${userId}`;
        
    } catch (error) {
        showToast('Terjadi kesalahan saat memuat data user', 'error');
    }
}
</script>
{% endblock %}