<?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">
 <?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-3xl mx-auto space-y-6 pb-6">
 <!-- Header -->
 <div class="px-1">
 <h1 class="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">My Profile</h1>
 <p class="text-[10px] sm:text-xs font-medium text-gray-400 mt-0.5 uppercase tracking-widest">Update your account credentials</p>
 </div>

 <div class="bg-white border border-gray-200 rounded-3xl overflow-hidden shadow-sm">
 <div class="p-6 sm:p-10">
 <form action="<?php echo url('admin/profile/update'); ?>" method="POST" class="space-y-8">
 
 <!-- Account Settings -->
 <div>
 <h3 class="text-sm font-bold text-gray-900 border-b border-gray-100 pb-3 mb-6">Account Settings</h3>
 <div class="space-y-5">
 <div class="space-y-1.5">
 <label class="text-[10px] font-black text-gray-400 ml-0.5 uppercase tracking-widest">Full Name</label>
 <input type="text" value="<?php echo htmlspecialchars($user['name']); ?>" disabled class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-xs font-bold text-gray-500 cursor-not-allowed">
 <p class="text-[9px] text-gray-400 mt-1 ml-1">Name cannot be changed here. Use Staff Management.</p>
 </div>

 <div class="space-y-1.5">
 <label class="text-[10px] font-black text-gray-400 ml-0.5 uppercase tracking-widest">Email Address</label>
 <input type="email" name="email" value="<?php echo htmlspecialchars($user['email']); ?>" required class="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-xs font-bold text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none">
 </div>
 </div>
 </div>

 <!-- Security -->
 <div>
 <h3 class="text-sm font-bold text-gray-900 border-b border-gray-100 pb-3 mb-6">Security (Optional)</h3>
 <p class="text-[10px] font-medium text-gray-400 mb-5">Leave password fields blank if you do not want to change your current password.</p>
 
 <div class="space-y-5">
 <!-- Current Password -->
 <div class="space-y-1.5" x-data="{ show: false }">
 <label class="text-[10px] font-black text-gray-400 ml-0.5 uppercase tracking-widest">Current Password</label>
 <div class="relative group">
 <input :type="show ? 'text' : 'password'" name="current_password" class="w-full pl-4 pr-12 py-3 bg-white border border-gray-200 rounded-xl text-xs font-bold text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none placeholder:font-medium placeholder:text-gray-300" placeholder="Enter current password to authorize changes">
 <button type="button" @click="show = !show" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-blue-600 transition-colors h-8 w-8 flex items-center justify-center rounded-lg">
 <i class="fa-solid text-[10px]" :class="show ? 'fa-eye-slash' : 'fa-eye'"></i>
 </button>
 </div>
 </div>

 <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
 <!-- New Password -->
 <div class="space-y-1.5" x-data="{ show: false }">
 <label class="text-[10px] font-black text-blue-600 ml-0.5 uppercase tracking-widest">New Password</label>
 <div class="relative group">
 <input :type="show ? 'text' : 'password'" name="new_password" class="w-full pl-4 pr-12 py-3 bg-white border border-gray-200 rounded-xl text-xs font-bold text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none placeholder:font-medium placeholder:text-gray-300" placeholder="Minimum 6 characters">
 <button type="button" @click="show = !show" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-blue-600 transition-colors h-8 w-8 flex items-center justify-center rounded-lg">
 <i class="fa-solid text-[10px]" :class="show ? 'fa-eye-slash' : 'fa-eye'"></i>
 </button>
 </div>
 </div>

 <!-- Confirm Password -->
 <div class="space-y-1.5" x-data="{ show: false }">
 <label class="text-[10px] font-black text-blue-600 ml-0.5 uppercase tracking-widest">Confirm New Password</label>
 <div class="relative group">
 <input :type="show ? 'text' : 'password'" name="confirm_password" class="w-full pl-4 pr-12 py-3 bg-white border border-gray-200 rounded-xl text-xs font-bold text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none placeholder:font-medium placeholder:text-gray-300" placeholder="Repeat new password">
 <button type="button" @click="show = !show" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-blue-600 transition-colors h-8 w-8 flex items-center justify-center rounded-lg">
 <i class="fa-solid text-[10px]" :class="show ? 'fa-eye-slash' : 'fa-eye'"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>

 <div class="pt-6 border-t border-gray-50 flex items-center justify-end">
 <button type="submit" class="w-full sm:w-auto px-10 py-3.5 bg-blue-600 text-white text-[11px] font-black uppercase tracking-widest rounded-xl hover:bg-blue-700 transition-all active:scale-95 shadow-lg shadow-blue-600/20">
 Update Profile
 </button>
 </div>
 </form>
 </div>
 </div>
 </div>
 </main>
</div>

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