<?= $this->extend('layout/main') ?>

<?= $this->section('content') ?>
<div class="space-y-8">
    
    <!-- Title -->
    <div>
        <h2 class="text-2xl font-bold text-on-surface">Manajemen Pengguna</h2>
        <p class="text-sm text-secondary">Kelola master data pengguna (User) sistem perizinan.</p>
    </div>

    <!-- Layout Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        
        <!-- Section 1: Form Tambah -->
        <div class="bg-surface p-6 rounded-xl border border-outline shadow-sm space-y-6 self-start">
            <div class="flex items-center space-x-2 pb-4 border-b border-outline">
                <span class="material-symbols-outlined text-primary text-2xl">manage_accounts</span>
                <h3 class="text-lg font-bold text-on-surface">Tambah Akun Pengguna</h3>
            </div>

            <form action="/admin/users/store" method="post" class="space-y-4">
                <?= csrf_field() ?>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label for="username" class="block text-xs font-bold text-secondary uppercase mb-1">Username</label>
                        <input type="text" name="username" id="username" required placeholder="username"
                               class="block w-full rounded-lg bg-surface-container-lowest text-on-surface border-outline-variant shadow-sm focus:border-primary focus:ring-primary text-sm placeholder-outline"/>
                    </div>
                    <div>
                        <label for="password" class="block text-xs font-bold text-secondary uppercase mb-1">Password</label>
                        <div class="relative">
                            <input type="password" name="password" id="password" required placeholder="••••••••"
                                   class="block w-full rounded-lg bg-surface-container-lowest text-on-surface border-outline-variant shadow-sm focus:border-primary focus:ring-primary text-sm pr-10 placeholder-outline"/>
                            <button type="button" onclick="togglePassword()" class="absolute inset-y-0 right-0 pr-3 flex items-center text-outline hover:text-secondary">
                                <span class="material-symbols-outlined text-[20px]" id="toggle-icon">visibility</span>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label for="role" class="block text-xs font-bold text-secondary uppercase mb-1">Role Akses</label>
                        <select name="role" id="role" required class="block w-full rounded-lg bg-surface-container-lowest text-on-surface border-outline-variant shadow-sm focus:border-primary focus:ring-primary text-sm">
                            <option value="wali">Wali Santri</option>
                            <option value="kesantrian">Kesantrian</option>
                            <option value="satpam">Satpam (Gerbang)</option>
                            <option value="admin">Administrator</option>
                        </select>
                    </div>
                    <div>
                        <label for="nama_lengkap" class="block text-xs font-bold text-secondary uppercase mb-1">Nama Lengkap</label>
                        <input type="text" name="nama_lengkap" id="nama_lengkap" required placeholder="Contoh: H. Slamet"
                               class="block w-full rounded-lg bg-surface-container-lowest text-on-surface border-outline-variant shadow-sm focus:border-primary focus:ring-primary text-sm placeholder-outline"/>
                    </div>
                </div>

                <button type="submit" class="w-full py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-extrabold text-white bg-primary hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition">
                    Simpan Akun
                </button>
            </form>
        </div>

        <!-- Section 2: List Users -->
        <div class="bg-surface p-6 rounded-xl border border-outline shadow-sm">
            <div class="flex items-center space-x-2 pb-4 mb-4 border-b border-outline">
                <span class="material-symbols-outlined text-primary text-2xl">group</span>
                <h3 class="text-lg font-bold text-on-surface">Daftar Akun Pengguna</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-[#272b31] text-sm">
                    <thead>
                        <tr class="text-left text-outline font-bold uppercase text-[11px] tracking-wider">
                            <th class="py-2.5 px-4">Nama Lengkap</th>
                            <th class="py-2.5 px-4">Username</th>
                            <th class="py-2.5 px-4">Role</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-[#272b31] text-on-surface-variant font-medium">
                        <?php foreach ($users as $u): ?>
                            <tr>
                                <td class="py-2.5 px-4 font-bold"><?= esc($u['nama_lengkap']) ?></td>
                                <td class="py-2.5 px-4 font-mono text-xs"><?= esc($u['username']) ?></td>
                                <td class="py-2.5 px-4 capitalize">
                                    <span class="inline-block px-2 py-0.5 rounded text-xs font-semibold
                                        <?= $u['role'] === 'admin' ? 'bg-purple-100 text-purple-800' : '' ?>
                                        <?= $u['role'] === 'kesantrian' ? 'bg-emerald-100 text-emerald-800' : '' ?>
                                        <?= $u['role'] === 'satpam' ? 'bg-blue-100 text-blue-800' : '' ?>
                                        <?= $u['role'] === 'wali' ? 'bg-surface-dim text-on-surface-variant' : '' ?>
                                    ">
                                        <?= esc($u['role']) ?>
                                    </span>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

<script>
    function togglePassword() {
        const input = document.getElementById('password');
        const icon = document.getElementById('toggle-icon');
        if (input.type === 'password') {
            input.type = 'text';
            icon.innerText = 'visibility_off';
        } else {
            input.type = 'password';
            icon.innerText = 'visibility';
        }
    }
</script>

<?= $this->endSection() ?>
