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

<div class="py-4 sm:py-8 px-3 sm:px-8">
 <div class="max-w-6xl mx-auto space-y-4 sm:space-y-6">
 
 <!-- Header -->
 <div class="px-1">
 <h1 class="text-xl sm:text-3xl font-black text-gray-900 tracking-tight uppercase">My Profile</h1>
 <p class="text-[9px] sm:text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Verification and Personal Records</p>
 </div>

 <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6 items-start">
 <!-- Left: Avatar & Identity -->
 <div class="bg-white p-8 rounded-2xl border border-gray-200 flex flex-col items-center gap-6 lg:sticky lg:top-24">
 <div class="w-40 aspect-[3/4] rounded-xl overflow-hidden bg-gray-50 border border-gray-200 relative group">
 <?php if(!empty($student['photo'])): ?>
 <img src="<?php echo url($student['photo']); ?>" class="h-full w-full object-cover">
 <?php else: ?>
 <div class="h-full w-full flex items-center justify-center bg-emerald-50 text-emerald-300">
 <i class="fa-solid fa-user-circle text-6xl"></i>
 </div>
 <?php endif; ?>
 </div>

 
 <div class="text-center">
 <h2 class="text-lg sm:text-xl font-black text-gray-900 leading-tight"><?php echo $student['name']; ?></h2>
 <p class="text-[9px] sm:text-[10px] font-black text-emerald-600 uppercase tracking-widest mt-1"><?php echo $student['student_id']; ?></p>
 </div>

 <div class="w-full pt-4 sm:pt-6 border-t border-gray-100 flex items-center justify-center">
 <span class="px-3 py-1 rounded-lg text-[8px] sm:text-[9px] font-black bg-emerald-600 text-white uppercase tracking-widest">Verified Student</span>
 </div>
 </div>

 <!-- Details Section -->
 <div class="lg:col-span-2 space-y-4 sm:space-y-6">
 <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden">
 <div class="px-5 py-3 sm:px-6 sm:py-4 border-b border-gray-100 bg-slate-50/50">
 <h3 class="text-[10px] sm:text-xs font-black text-gray-900 uppercase tracking-widest flex items-center gap-2">
 <i class="fa-solid fa-address-card text-emerald-600 text-[9px] sm:text-xs"></i>
 General Information
 </h3>
 </div>
 <div class="p-5 sm:p-8 grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-8">
 <div class="space-y-1">
 <p class="text-[8px] sm:text-[9px] font-black text-gray-400 uppercase tracking-widest">Phone Number</p>
 <p class="text-xs sm:text-sm font-black text-gray-900"><?php echo $student['phone']; ?></p>
 </div>
 <div class="space-y-1">
 <p class="text-[8px] sm:text-[9px] font-black text-gray-400 uppercase tracking-widest">Email Address</p>
 <p class="text-xs sm:text-sm font-black text-gray-900 truncate"><?php echo $student['email']; ?></p>
 </div>
 <div class="space-y-1">
 <p class="text-[8px] sm:text-[9px] font-black text-gray-400 uppercase tracking-widest">Guardian Info</p>
 <p class="text-xs sm:text-sm font-black text-gray-900"><?php echo $student['guardian_name'] ?: 'N/A'; ?></p>
 </div>
 <div class="space-y-1">
 <p class="text-[8px] sm:text-[9px] font-black text-gray-400 uppercase tracking-widest">Guardian Contact</p>
 <p class="text-xs sm:text-sm font-black text-gray-900"><?php echo $student['guardian_phone'] ?: 'N/A'; ?></p>
 </div>
 <div class="sm:col-span-2 space-y-1">
 <p class="text-[8px] sm:text-[9px] font-black text-gray-400 uppercase tracking-widest">Residential Address</p>
 <p class="text-xs sm:text-sm font-bold text-gray-700 leading-relaxed"><?php echo $student['address'] ?: 'No address recorded'; ?></p>
 </div>
 </div>
 </div>

 <!-- Academic Info -->
 <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden">
 <div class="px-5 py-3 sm:px-6 sm:py-4 border-b border-gray-100 bg-slate-50/50">
 <h3 class="text-[10px] sm:text-xs font-black text-gray-900 uppercase tracking-widest flex items-center gap-2">
 <i class="fa-solid fa-graduation-cap text-emerald-600 text-[9px] sm:text-xs"></i>
 Program Enrollment
 </h3>
 </div>
 <div class="divide-y divide-gray-50">
 <?php if(empty($admissions)): ?>
 <div class="p-8 text-center text-gray-400 text-[9px] font-bold uppercase tracking-widest">No enrollment records</div>
 <?php else: ?>
 <?php foreach($admissions as $adm): ?>
 <div class="p-5 sm:p-6 flex items-center justify-between group hover:bg-slate-50/50 transition-all">
 <div class="flex items-center gap-4">
 <div class="h-9 w-9 sm:h-10 sm:w-10 bg-emerald-50 text-emerald-600 rounded-lg flex items-center justify-center border border-emerald-100 flex-none group-hover:scale-105 transition-transform">
 <i class="fa-solid fa-award text-sm sm:text-base"></i>
 </div>
 <div class="min-w-0">
 <h4 class="text-xs sm:text-sm font-black text-gray-900 uppercase tracking-tight truncate max-w-[150px] sm:max-w-none"><?php echo $adm['course_name']; ?></h4>
 <p class="text-[8px] sm:text-[9px] font-bold text-gray-400 uppercase mt-1">Enroll Date: <?php echo date('d/m/Y', strtotime($adm['admission_date'])); ?></p>
 </div>
 </div>
 <span class="px-2 py-0.5 bg-emerald-50 text-emerald-600 text-[7px] sm:text-[8px] font-black rounded border border-emerald-100 uppercase flex-none ml-3"><?php echo $adm['status']; ?></span>
 </div>
 <?php endforeach; ?>
 <?php endif; ?>
 </div>
 </div>
 </div>
 </div>

 </div>
</div>

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