<?php $__env->startSection('title', 'Manajemen Pengguna'); ?>
<?php $__env->startSection('page-title', 'Manajemen Pengguna'); ?>

<?php $__env->startSection('content'); ?>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

    
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-5">
        <h3 class="font-bold text-slate-800 mb-4">➕ Tambah Pengguna</h3>
        <form method="POST" action="<?php echo e(route('users.store')); ?>" class="space-y-3">
            <?php echo csrf_field(); ?>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Nama Lengkap</label>
                <input type="text" name="name" value="<?php echo e(old('name')); ?>" required
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Username</label>
                <input type="text" name="username" value="<?php echo e(old('username')); ?>" required
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Email (opsional)</label>
                <input type="email" name="email" value="<?php echo e(old('email')); ?>"
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Role</label>
                <select name="role" class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 bg-white">
                    <option value="kasir">Kasir</option>
                    <option value="manajer">Manajer</option>
                    <option value="admin">Admin</option>
                </select>
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Password</label>
                <input type="password" name="password" required minlength="6"
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Konfirmasi Password</label>
                <input type="password" name="password_confirmation" required
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">PIN Kasir (6 digit, opsional)</label>
                <input type="text" name="pin" maxlength="6" pattern="\d{6}" value="<?php echo e(old('pin')); ?>"
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                    placeholder="123456">
            </div>
            <button type="submit" class="w-full py-2.5 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-xl text-sm transition">
                Tambah Pengguna
            </button>
        </form>
    </div>

    
    <div class="lg:col-span-2 bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="px-5 py-4 border-b border-slate-200">
            <h3 class="font-bold text-slate-800">Daftar Pengguna</h3>
        </div>
        <div class="divide-y divide-slate-100">
            <?php $__empty_1 = true; $__currentLoopData = $users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $user): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <div class="px-5 py-4 flex items-center gap-4 <?php echo e($user->trashed() ? 'opacity-50 bg-slate-50' : ''); ?>">
                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-indigo-600 flex items-center justify-center text-white font-bold flex-shrink-0">
                    <?php echo e(strtoupper(substr($user->name,0,1))); ?>

                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2">
                        <span class="font-semibold text-slate-800"><?php echo e($user->name); ?></span>
                        <span class="px-2 py-0.5 rounded-full text-xs font-semibold
                            <?php echo e($user->role==='admin' ? 'bg-red-100 text-red-700' : ($user->role==='manajer' ? 'bg-purple-100 text-purple-700' : 'bg-blue-100 text-blue-700')); ?>">
                            <?php echo e(ucfirst($user->role)); ?>

                        </span>
                        <?php if(!$user->is_active || $user->trashed()): ?>
                        <span class="px-2 py-0.5 rounded-full text-xs bg-slate-100 text-slate-500">Nonaktif</span>
                        <?php endif; ?>
                    </div>
                    <div class="text-xs text-slate-500">{{ $user->username }} <?php echo e($user->email ? '· '.$user->email : ''); ?></div>
                </div>
                <?php if(!$user->trashed() && $user->id !== auth()->id()): ?>
                <div class="flex gap-2">
                    <button onclick="showEditUser(<?php echo e($user->id); ?>, '<?php echo e(addslashes($user->name)); ?>', '<?php echo e($user->username); ?>', '<?php echo e($user->email); ?>', '<?php echo e($user->role); ?>')"
                        class="px-2.5 py-1.5 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg text-xs transition">Edit</button>
                    <form method="POST" action="<?php echo e(route('users.destroy', $user)); ?>" onsubmit="return confirm('Nonaktifkan user ini?')">
                        <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                        <button class="px-2.5 py-1.5 bg-red-50 hover:bg-red-100 text-red-500 rounded-lg text-xs transition">Hapus</button>
                    </form>
                </div>
                <?php endif; ?>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <div class="px-5 py-12 text-center text-slate-400">Tidak ada pengguna</div>
            <?php endif; ?>
        </div>
        <div class="px-4 py-3 border-t border-slate-200">
            <?php echo e($users->links()); ?>

        </div>
    </div>
</div>


<div id="editUserModal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 hidden">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-sm p-6">
        <h3 class="font-bold text-slate-800 mb-4">Edit Pengguna</h3>
        <form id="editUserForm" method="POST" class="space-y-3">
            <?php echo csrf_field(); ?> <?php echo method_field('PUT'); ?>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Nama</label>
                <input type="text" name="name" id="editName" required
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Username</label>
                <input type="text" name="username" id="editUsername" required
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Email</label>
                <input type="email" name="email" id="editEmail"
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Role</label>
                <select name="role" id="editRole" class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
                    <option value="kasir">Kasir</option>
                    <option value="manajer">Manajer</option>
                    <option value="admin">Admin</option>
                </select>
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Password Baru (kosongkan jika tidak diubah)</label>
                <input type="password" name="password" minlength="6"
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Konfirmasi Password</label>
                <input type="password" name="password_confirmation"
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <label class="flex items-center gap-2">
                <input type="checkbox" name="is_active" value="1" id="editIsActive" checked class="rounded">
                <span class="text-sm text-slate-700">Akun Aktif</span>
            </label>
            <div class="flex gap-2 pt-2">
                <button type="button" onclick="document.getElementById('editUserModal').classList.add('hidden')"
                    class="flex-1 py-2 bg-slate-100 hover:bg-slate-200 rounded-xl text-sm font-semibold transition">Batal</button>
                <button type="submit" class="flex-1 py-2 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-xl text-sm transition">Simpan</button>
            </div>
        </form>
    </div>
</div>

<?php $__env->startPush('scripts'); ?>
<script>
function showEditUser(id, name, username, email, role) {
    document.getElementById('editName').value = name;
    document.getElementById('editUsername').value = username;
    document.getElementById('editEmail').value = email;
    document.getElementById('editRole').value = role;
    document.getElementById('editUserForm').action = `/users/${id}`;
    document.getElementById('editUserModal').classList.remove('hidden');
}
</script>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\pos-umkm\resources\views/users/index.blade.php ENDPATH**/ ?>