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

<div class="flex-1 flex flex-col min-w-0 h-full overflow-hidden" x-data="{ 
 showPassword: false
}">
 <?php require_once __DIR__ . '/../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-4xl mx-auto space-y-4 pb-12">
 <!-- Header -->
 <div class="flex items-center justify-between px-1 py-2">
 <div class="flex items-center gap-3">
 <a href="<?php echo url('/admin/students'); ?>" class="h-10 w-10 flex items-center justify-center rounded-xl bg-white border border-gray-200 text-gray-400 hover:text-blue-600 hover:border-blue-600 transition-all">
 <i class="fa-solid fa-arrow-left"></i>
 </a>
 <div>
 <h1 class="text-xl font-bold text-gray-900">Update Student Profile</h1>
 <p class="text-[10px] font-medium text-gray-400 uppercase tracking-widest">Edit student information</p>
 </div>
 </div>
 </div>

 <form action="<?php echo url('/admin/students/save'); ?>" method="POST" enctype="multipart/form-data" class="space-y-6">
 <input type="hidden" name="id" value="<?php echo $student['id']; ?>">
 <input type="hidden" name="existing_photo" value="<?php echo $student['photo']; ?>">

 <!-- Section 1: Personal Identity -->
 <div class="bg-white border border-gray-200 rounded-3xl overflow-hidden">
 <div class="px-6 py-4 border-b border-gray-50 bg-gray-50/30 flex items-center gap-3">
 <div class="h-8 w-8 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
 <i class="fa-solid fa-user-tag text-xs"></i>
 </div>
 <h2 class="text-[10px] font-bold text-gray-900 uppercase tracking-widest">Personal Identity</h2>
 </div>
 <div class="p-6 sm:p-8 space-y-6">
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <div class="space-y-1.5">
 <label class="text-[9px] font-semibold text-gray-400 ml-0.5 uppercase tracking-tighter">Student User ID (Mobile No)</label>
 <div class="relative">
 <input type="text" value="<?php echo $student['student_id']; ?>" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-2xl text-xs font-bold text-gray-500 outline-none cursor-not-allowed" readonly>
 <div class="absolute right-4 top-1/2 -translate-y-1/2">
 <i class="fa-solid fa-lock text-[10px] text-gray-300"></i>
 </div>
 </div>
 </div>
 <div class="space-y-1.5">
 <label class="text-[9px] font-semibold text-gray-400 ml-0.5 uppercase tracking-tighter">Full Name</label>
 <input name="name" type="text" value="<?php echo htmlspecialchars($student['name']); ?>" required class="w-full px-4 py-3 bg-white border border-gray-200 rounded-2xl text-xs font-medium text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none" placeholder="e.g. John Doe">
 </div>
 </div>

 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <div class="space-y-1.5">
 <label class="text-[9px] font-semibold text-gray-400 ml-0.5 uppercase tracking-tighter">Primary Phone (Mobile No)</label>
 <input name="phone" type="text" value="<?php echo htmlspecialchars($student['phone']); ?>" required class="w-full px-4 py-3 bg-white border border-gray-200 rounded-2xl text-xs font-medium text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none" placeholder="Enter 10-digit mobile number">
 </div>
 <div class="space-y-1.5">
 <label class="text-[9px] font-semibold text-gray-400 ml-0.5 uppercase tracking-tighter">Reset Password (Optional)</label>
 <div class="relative">
 <input :type="showPassword ? 'text' : 'password'" name="password" class="w-full pl-4 pr-12 py-3 bg-white border border-gray-200 rounded-2xl text-xs font-bold text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none" placeholder="Leave blank to keep current">
 <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center">
 <button type="button" @click="showPassword = !showPassword" class="h-8 w-8 rounded-lg hover:bg-gray-100 flex items-center justify-center text-gray-400 transition-colors">
 <i class="fa-solid text-xs" :class="showPassword ? 'fa-eye-slash' : 'fa-eye'"></i>
 </button>
 </div>
 </div>
 </div>
 </div>

 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <div class="space-y-1.5">
 <label class="text-[9px] font-semibold text-gray-400 ml-0.5 uppercase tracking-tighter">Alternative Phone</label>
 <input name="alt_phone" type="text" value="<?php echo htmlspecialchars($student['alt_phone'] ?? ''); ?>" class="w-full px-4 py-3 bg-white border border-gray-200 rounded-2xl text-xs font-medium text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none" placeholder="Secondary contact...">
 </div>
 <div class="space-y-1.5">
 <label class="text-[9px] font-semibold text-gray-400 ml-0.5 uppercase tracking-tighter">Initial Status</label>
 <select name="status" class="w-full px-4 py-3 bg-white border border-gray-200 rounded-2xl text-xs font-medium text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none appearance-none cursor-pointer">
 <option value="Active"<?php echo $student['status'] === 'Active' ? 'selected' : ''; ?>>Active</option>
 <option value="Inactive"<?php echo $student['status'] === 'Inactive' ? 'selected' : ''; ?>>Inactive</option>
 </select>
 </div>
 </div>

 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <div class="space-y-1.5">
 <label class="text-[9px] font-semibold text-gray-400 ml-0.5 uppercase tracking-tighter">Current Address</label>
 <textarea name="address" rows="3" class="w-full px-4 py-3 bg-white border border-gray-200 rounded-2xl text-xs font-medium text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none resize-none" placeholder="Enter full address..."><?php echo htmlspecialchars($student['address'] ?? ''); ?></textarea>
 </div>
 <div class="space-y-1.5">
 <label class="text-[9px] font-semibold text-gray-400 ml-0.5 uppercase tracking-tighter">Student Photo (Optional)</label>
 <div class="flex items-center gap-4">
 <?php if($student['photo']): ?>
 <img src="<?php echo url($student['photo']); ?>" class="w-16 h-16 rounded-xl object-cover border border-gray-200">
 <?php endif; ?>
 <input name="photo" type="file" accept="image/*" class="w-full px-4 py-3 bg-white border border-gray-200 rounded-2xl 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>
 </div>
 </div>
 </div>

 <!-- Section 2: Guardian Info -->
 <div class="bg-white border border-gray-200 rounded-3xl overflow-hidden">
 <div class="px-6 py-4 border-b border-gray-50 bg-gray-50/30 flex items-center gap-3">
 <div class="h-8 w-8 rounded-lg bg-amber-100 text-amber-600 flex items-center justify-center">
 <i class="fa-solid fa-users text-xs"></i>
 </div>
 <h2 class="text-[10px] font-bold text-gray-900 uppercase tracking-widest">Guardian / Parent Details</h2>
 </div>
 <div class="p-6 sm:p-8 space-y-6">
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <div class="space-y-1.5">
 <label class="text-[9px] font-semibold text-gray-400 ml-0.5 uppercase tracking-tighter">Guardian Name</label>
 <input name="guardian_name" type="text" value="<?php echo htmlspecialchars($student['guardian_name'] ?? ''); ?>" class="w-full px-4 py-3 bg-white border border-gray-200 rounded-2xl text-xs font-medium text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none" placeholder="Father or Mother's name">
 </div>
 <div class="space-y-1.5">
 <label class="text-[9px] font-semibold text-gray-400 ml-0.5 uppercase tracking-tighter">Guardian Phone</label>
 <input name="guardian_phone" type="text" value="<?php echo htmlspecialchars($student['guardian_phone'] ?? ''); ?>" class="w-full px-4 py-3 bg-white border border-gray-200 rounded-2xl text-xs font-medium text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none" placeholder="Emergency contact...">
 </div>
 </div>
 </div>
 </div>

 <!-- Action Buttons -->
 <div class="flex flex-col sm:flex-row items-center justify-end gap-3 pt-4">
 <a href="<?php echo url('/admin/students'); ?>" class="w-full sm:w-auto px-8 py-3 bg-white border border-gray-200 text-gray-600 text-xs font-bold rounded-2xl hover:bg-gray-50 transition-all text-center">Cancel</a>
 <button type="submit" class="w-full sm:w-auto px-10 py-3 bg-blue-600 text-white text-xs font-bold rounded-2xl hover:bg-blue-700 transition-all flex items-center justify-center gap-2">
 <i class="fa-solid fa-check text-sm"></i>
 <span>Update Profile</span>
 </button>
 </div>
 </form>
 </div>
 </main>
</div>

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