<?php require_once 'layouts/header.php'; ?>
<?php require_once 'layouts/sidebar.php'; ?>

<div class="flex-1 flex flex-col min-w-0 h-full overflow-hidden" x-data="userManagement">
 <?php require_once 'layouts/topbar.php'; ?>

 <main class="flex-1 relative overflow-y-auto py-4 sm:py-6 px-3 sm:px-6 lg:px-8 bg-gray-50 custom-scrollbar">
 <div class="max-w-6xl mx-auto space-y-4 pb-6">
 
 <!-- Header -->
 <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 px-1 py-2">
 <div>
 <h1 class="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">Staff Management</h1>
 <p class="text-[10px] sm:text-xs font-medium text-gray-400 mt-0.5 uppercase tracking-widest">Control access and module permissions</p>
 </div>
 <button @click="openModal()" class="w-full sm:w-auto px-6 py-3 bg-blue-600 text-white text-[10px] font-black uppercase tracking-widest rounded-xl hover:bg-blue-700 transition-all flex items-center justify-center gap-2 active:scale-95 -600/20">
 <i class="fa-solid fa-user-plus text-xs"></i>
 <span>Add New Staff</span>
 </button>
 </div>

 <!-- Modern List Table -->
 <div class="bg-white border border-gray-200 rounded-3xl overflow-hidden">
 <div class="overflow-x-auto">
 <table class="w-full text-left border-collapse">
 <thead>
 <tr class="bg-gray-50/80 border-b border-gray-200">
 <th class="px-6 py-4 text-[10px] font-black text-gray-500 uppercase tracking-widest w-16 text-center">SL</th>
 <th class="px-6 py-4 text-[10px] font-black text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Staff Member</th>
 <th class="px-6 py-4 text-[10px] font-black text-gray-500 uppercase tracking-widest border-l border-gray-100/50 text-center">Role</th>
 <th class="px-6 py-4 text-[10px] font-black text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Modules Access</th>
 <th class="px-6 py-4 text-[10px] font-black text-gray-500 uppercase tracking-widest text-right border-l border-gray-100/50">Actions</th>
 </tr>
 </thead>
 <tbody class="divide-y divide-gray-100">
 <?php if(empty($users)): ?>
 <tr><td colspan="5" class="px-6 py-12 text-center text-gray-400 text-xs font-bold italic">No staff accounts found</td></tr>
 <?php else: ?>
 <?php foreach($users as $index => $user): ?>
 <tr class="hover:bg-gray-50/30 transition-colors group">
 <td class="px-6 py-4 text-center">
 <span class="text-[10px] font-bold text-gray-400"><?php echo str_pad($index + 1, 2, '0', STR_PAD_LEFT); ?></span>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <div class="flex items-center gap-3">
 <div class="h-10 w-10 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center font-black text-sm group-hover:scale-110 transition-transform">
 <?php echo strtoupper(substr($user['name'], 0, 1)); ?>
 </div>
 <div class="flex flex-col">
 <span class="text-xs font-black text-gray-900 group-hover:text-blue-600 transition-colors"><?php echo $user['name']; ?></span>
 <span class="text-[9px] font-bold text-gray-400 mt-0.5 tracking-tight"><?php echo $user['email']; ?></span>
 </div>
 </div>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50 text-center">
 <span class="px-2.5 py-1 rounded-lg text-[9px] font-black uppercase border <?php echo $user['role'] === 'admin' ? 'bg-red-50 text-red-600 border-red-100' : 'bg-purple-50 text-purple-600 border-purple-100'; ?>">
 <?php echo $user['role']; ?>
 </span>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <?php if($user['role'] === 'admin'): ?>
 <div class="flex items-center gap-1.5 text-emerald-600 bg-emerald-50 px-2.5 py-1 rounded-lg border border-emerald-100 w-fit">
 <i class="fa-solid fa-check-double text-[10px]"></i>
 <span class="text-[9px] font-black uppercase tracking-widest">Full System Access</span>
 </div>
 <?php else: ?>
 <?php 
 $perms = json_decode($user['permissions'] ?? '[]', true);
 if(empty($perms)): ?>
 <span class="text-[9px] font-bold text-gray-400 italic">No permissions set</span>
 <?php else: ?>
 <div class="flex items-center gap-2">
 <span class="text-[10px] font-black text-blue-600 bg-blue-50 px-2 py-0.5 rounded border border-blue-100"><?php echo count($perms); ?> Modules</span>
 <div class="flex -space-x-1 overflow-hidden">
 <?php foreach(array_slice($perms, 0, 3) as $p): ?>
 <div class="inline-block h-4 w-4 rounded-full bg-white border border-gray-200 flex items-center justify-center">
 <i class="fa-solid <?php echo $availableModules[$p]['icon'] ?? 'fa-circle'; ?> text-[6px] text-gray-400"></i>
 </div>
 <?php endforeach; ?>
 <?php if(count($perms) > 3): ?>
 <span class="text-[7px] font-black text-gray-400 pl-2 mt-0.5">+<?php echo count($perms)-3; ?></span>
 <?php endif; ?>
 </div>
 </div>
 <?php endif; ?>
 <?php endif; ?>
 </td>
 <td class="px-6 py-4 text-right border-l border-gray-100/50">
 <div class="flex items-center justify-end gap-2">
 <button @click="openModal(<?php echo htmlspecialchars(json_encode($user)); ?>)" class="h-8 w-8 flex items-center justify-center rounded-xl bg-blue-50 text-blue-600 border border-blue-100 hover:bg-blue-600 hover:text-white transition-all" title="Edit Permissions">
 <i class="fa-solid fa-pen-to-square text-[10px]"></i>
 </button>
 <?php if($user['role'] !== 'admin'): ?>
 <button @click="confirmDelete(<?php echo $user['id']; ?>)" class="h-8 w-8 flex items-center justify-center rounded-xl bg-red-50 text-red-600 border border-red-100 hover:bg-red-600 hover:text-white transition-all active:scale-95" title="Remove Staff">
 <i class="fa-solid fa-trash-can text-[10px]"></i>
 </button>
 <?php endif; ?>
 </div>
 </td>
 </tr>
 <?php endforeach; ?>
 <?php endif; ?>
 </tbody>
 </table>
 </div>
 </div>
 </div>
 </main>

 <!-- Normal Modal for Staff Add/Edit -->
 <div x-show="showModal" class="fixed inset-0 z-50 overflow-y-auto" x-cloak>
 <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
 <div class="fixed inset-0 bg-gray-900/40 backdrop-blur-sm transition-opacity" @click="showModal = false"></div>
 <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
 
 <div class="inline-block align-bottom bg-white rounded-3xl text-left overflow-hidden transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full border-none">
 <div class="bg-white px-6 py-6 sm:p-10">
 <div class="flex items-center justify-between mb-8 border-b border-gray-50 pb-6">
 <div>
 <h3 class="text-xl font-bold text-gray-900 leading-tight" x-text="editId ? 'Edit Staff Account' : 'Add New Staff'"></h3>
 <p class="text-[10px] font-medium text-gray-400 mt-1 uppercase tracking-widest">Provision and manage module permissions</p>
 </div>
 <button @click="showModal = false" class="h-10 w-10 flex items-center justify-center rounded-xl bg-gray-50 text-gray-400 hover:text-gray-600 transition-all border border-gray-200">
 <i class="fa-solid fa-xmark text-lg"></i>
 </button>
 </div>

 <form action="<?php echo url('admin/users/save'); ?>" method="POST" class="space-y-8">
 <input type="hidden" name="id" :value="editId">
 
 <!-- Basic Info -->
 <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
 <div class="space-y-1.5">
 <label class="text-[9px] font-bold text-gray-400 ml-0.5 uppercase tracking-tighter">Full Name</label>
 <input name="name" type="text" x-model="formData.name" required placeholder="Staff name" class="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-xs font-medium text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none">
 </div>
 <div class="space-y-1.5">
 <label class="text-[9px] font-bold text-gray-400 ml-0.5 uppercase tracking-tighter">Email Address</label>
 <input name="email" type="email" x-model="formData.email" required placeholder="email@institute.com" class="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-xs font-medium text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none">
 </div>
 <div class="sm:col-span-2 space-y-1.5">
 <label class="text-[9px] font-bold text-gray-400 ml-0.5 uppercase tracking-tighter">Account Role</label>
 <div class="grid grid-cols-2 gap-4">
 <label class="relative flex flex-col p-4 border rounded-2xl cursor-pointer transition-all" :class="formData.role === 'staff' ? 'border-blue-600 bg-blue-50/20' : 'border-gray-100 bg-gray-50/50 hover:border-gray-200'">
 <input type="radio" name="role" value="staff" x-model="formData.role" class="sr-only">
 <span class="text-[10px] font-black" :class="formData.role === 'staff' ? 'text-blue-700' : 'text-gray-400'">STAFF</span>
 <span class="text-[8px] font-bold text-gray-400 mt-0.5">Limited Access</span>
 <i class="fa-solid fa-circle-check absolute top-3 right-3 text-blue-600" x-show="formData.role === 'staff'"></i>
 </label>
 <label class="relative flex flex-col p-4 border rounded-2xl cursor-pointer transition-all" :class="formData.role === 'admin' ? 'border-red-600 bg-red-50/20' : 'border-gray-100 bg-gray-50/50 hover:border-gray-200'">
 <input type="radio" name="role" value="admin" x-model="formData.role" class="sr-only">
 <span class="text-[10px] font-black" :class="formData.role === 'admin' ? 'text-red-700' : 'text-gray-400'">ADMIN</span>
 <span class="text-[8px] font-bold text-gray-400 mt-0.5">Full System Access</span>
 <i class="fa-solid fa-circle-check absolute top-3 right-3 text-red-600" x-show="formData.role === 'admin'"></i>
 </label>
 </div>
 </div>
 </div>

 <!-- Security -->
 <div class="p-6 bg-gray-50/50 border border-gray-100 rounded-3xl space-y-5">
 <div class="flex items-center gap-2 mb-1">
 <i class="fa-solid fa-shield-halved text-emerald-600 text-[10px]"></i>
 <span class="text-[9px] font-black text-emerald-600 uppercase tracking-widest">Security</span>
 </div>
 <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 <div class="space-y-1.5 relative" x-data="{ show: false }">
 <label class="text-[9px] font-bold text-gray-400 ml-0.5 uppercase tracking-tighter" x-text="editId ? 'New Password' : 'Password'"></label>
 <input name="password" :type="show ? 'text' : 'password'" :required="!editId" class="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-xl text-xs font-bold text-gray-900 outline-none focus:border-blue-600 transition-all">
 <button type="button" @click="show = !show" class="absolute right-3 top-[32px] text-gray-300 hover:text-blue-600">
 <i class="fa-solid" :class="show ? 'fa-eye-slash' : 'fa-eye'"></i>
 </button>
 </div>
 <div class="space-y-1.5 relative" x-data="{ show: false }">
 <label class="text-[9px] font-bold text-gray-400 ml-0.5 uppercase tracking-tighter" x-text="editId ? 'Confirm New' : 'Confirm'"></label>
 <input name="confirm_password" :type="show ? 'text' : 'password'" :required="!editId" class="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-xl text-xs font-bold text-gray-900 outline-none focus:border-blue-600 transition-all">
 <button type="button" @click="show = !show" class="absolute right-3 top-[32px] text-gray-300 hover:text-blue-600">
 <i class="fa-solid" :class="show ? 'fa-eye-slash' : 'fa-eye'"></i>
 </button>
 </div>
 </div>
 </div>

 <!-- Permissions Grid -->
 <div class="space-y-4" x-show="formData.role === 'staff'">
 <div class="flex items-center justify-between mb-1">
 <div class="flex items-center gap-2">
 <i class="fa-solid fa-key text-purple-600 text-[10px]"></i>
 <span class="text-[9px] font-black text-purple-600 uppercase tracking-widest">Module Access</span>
 </div>
 <button type="button" @click="formData.permissions = <?php echo htmlspecialchars(json_encode(array_keys($availableModules))); ?>" class="text-[8px] font-black text-blue-600 hover:underline uppercase">Grant All</button>
 </div>
 
 <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar">
 <?php foreach($availableModules as $key => $module): ?>
 <label class="flex items-center gap-3 p-3 border rounded-xl cursor-pointer transition-all group"
 :class="formData.permissions.includes('<?php echo $key; ?>') ? 'border-blue-600 bg-blue-50/20' : 'border-gray-100 bg-gray-50/30 hover:border-gray-200'">
 <input type="checkbox" name="permissions[]" value="<?php echo $key; ?>" x-model="formData.permissions" class="w-3.5 h-3.5 rounded border-gray-300 text-blue-600 focus:ring-blue-600/20">
 <span class="text-[10px] font-bold text-gray-700 group-hover:text-blue-600 transition-colors"><?php echo $module['label']; ?></span>
 </label>
 <?php endforeach; ?>
 </div>
 </div>

 <div class="pt-8 flex items-center justify-end gap-3 border-t border-gray-50">
 <button type="button" @click="showModal = false" class="px-6 py-2.5 bg-white border border-gray-200 text-gray-500 text-[11px] font-bold rounded-xl hover:bg-gray-50 transition-all uppercase tracking-widest">Cancel</button>
 <button type="submit" class="px-8 py-2.5 bg-blue-600 text-white text-[11px] font-bold rounded-xl hover:bg-blue-700 transition-all -200 active:scale-95 uppercase tracking-widest">
 Confirm & Save Account
 </button>
 </div>
 </form>
 </div>
 </div>
 </div>
 </div>

 <!-- Confirmation Delete Modal -->
 <div x-show="deleteId" class="fixed inset-0 z-[110] overflow-y-auto" x-cloak>
 <div class="flex items-center justify-center min-h-screen px-4">
 <div class="fixed inset-0 bg-gray-900/40 backdrop-blur-sm" @click="deleteId = null"></div>
 <div class="bg-white rounded-3xl p-6 max-w-[440px] w-full relative z-[120] border border-gray-100">
 <div class="flex items-start gap-5">
 <div class="w-12 h-12 bg-red-50 text-red-500 rounded-2xl flex items-center justify-center flex-none text-lg">
 <i class="fa-solid fa-trash-can"></i>
 </div>
 <div class="flex-1">
 <h3 class="text-lg font-black text-gray-900 leading-tight">Revoke Staff Access?</h3>
 <p class="text-[11px] font-medium text-gray-400 leading-relaxed mt-1">This action will permanently remove the staff member from the system and revoke all their module permissions. This cannot be undone.</p>
 <div class="flex justify-end gap-2 mt-6">
 <button @click="deleteId = null" class="px-5 py-2.5 bg-white border border-gray-200 text-gray-500 text-[10px] font-bold rounded-xl hover:bg-gray-50 transition-all uppercase tracking-widest">Cancel</button>
 <a :href="'<?php echo url('admin/users/delete'); ?>?id=' + deleteId" class="px-5 py-2.5 bg-red-500 text-white text-[10px] font-bold rounded-xl hover:bg-red-600 transition-all active:scale-95 flex items-center justify-center uppercase tracking-widest">Yes, Revoke</a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

<?php require_once 'layouts/footer.php'; ?>

<script>
document.addEventListener('alpine:init', () => {
 Alpine.data('userManagement', () => ({
 showModal: false,
 editId: null,
 deleteId: null,
 formData: {
 name: '',
 email: '',
 role: 'staff',
 permissions: []
 },
 openModal(user = null) {
 if (user) {
 this.editId = user.id;
 this.formData = {
 name: user.name,
 email: user.email,
 role: user.role,
 permissions: user.permissions ? JSON.parse(user.permissions) : []
 };
 } else {
 this.editId = null;
 this.formData = { name: '', email: '', role: 'staff', permissions: [] };
 }
 this.showModal = true;
 },
 confirmDelete(id) {
 this.deleteId = id;
 }
 }));
});
</script>

<style>
@keyframes bounce-in {
 0% { transform: scale(0.9); opacity: 0; }
 50% { transform: scale(1.05); }
 100% { transform: scale(1); opacity: 1; }
}
.animate-bounce-in { animation: bounce-in 0.3s ease-out; }
</style>
