<?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 Courses</h1>
 <p class="text-[9px] sm:text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Currently Enrolled Academic Programs</p>
 </div>

 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
 <?php if(empty($admissions)): ?>
 <div class="col-span-full py-20 bg-white rounded-2xl border border-dashed border-gray-200 flex flex-col items-center justify-center text-center px-6">
 <div class="h-16 w-16 sm:h-20 sm:w-20 bg-slate-50 rounded-full flex items-center justify-center text-gray-300 mb-6 border border-gray-100">
 <i class="fa-solid fa-graduation-cap text-2xl sm:text-3xl"></i>
 </div>
 <h3 class="text-lg font-bold text-gray-900 mb-1">No Courses Enrolled</h3>
 <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Contact office for enrollment details</p>
 </div>
 <?php else: ?>
 <?php foreach($admissions as $index => $adm): ?>
 <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden flex flex-col group hover:border-emerald-600/30 transition-all duration-300 relative">
 <!-- SL Badge -->
 <div class="absolute top-3 right-3 z-20 px-2 py-0.5 bg-white/80 backdrop-blur-md border border-gray-50 text-[8px] font-black text-gray-400 rounded-lg">#<?php echo str_pad($index + 1, 2, '0', STR_PAD_LEFT); ?></div>
 
 <!-- Course Banner -->
 <div class="h-24 sm:h-32 bg-slate-50 flex items-center justify-center relative overflow-hidden">
 <div class="absolute inset-0 bg-gradient-to-br from-emerald-600/5 to-transparent"></div>
 <div class="h-12 w-12 sm:h-14 sm:w-14 bg-white rounded-xl flex items-center justify-center text-emerald-600 relative z-10 border border-gray-100 group-hover:scale-110 transition-transform duration-500">
 <i class="fa-solid fa-book-bookmark text-lg sm:text-xl"></i>
 </div>
 </div>

 <!-- Course Details -->
 <div class="p-5 sm:p-6 flex-1 flex flex-col">
 <div class="flex items-center gap-2 mb-3">
 <span class="px-2 py-0.5 bg-emerald-50 text-emerald-600 text-[8px] font-black uppercase rounded border border-emerald-100">Course</span>
 <?php if($adm['status'] === 'Active'): ?>
 <span class="px-2 py-0.5 bg-emerald-600 text-white text-[8px] font-black uppercase rounded border border-emerald-700">Enrolled</span>
 <?php endif; ?>
 </div>

 <h3 class="text-base sm:text-lg font-black text-gray-900 leading-tight mb-4 sm:mb-6">
 <?php echo $adm['course_name']; ?>
 </h3>

 <!-- Info Grid -->
 <div class="mt-auto space-y-2.5 sm:space-y-3 pt-4 border-t border-gray-100">
 <div class="flex items-center justify-between">
 <span class="text-[8px] sm:text-[9px] font-black text-gray-400 uppercase tracking-widest">Batch</span>
 <span class="text-[9px] sm:text-[10px] font-black text-gray-900 uppercase tracking-tight"><?php echo $adm['batch_name'] ?: 'N/A'; ?></span>
 </div>
 <div class="flex items-center justify-between">
 <span class="text-[8px] sm:text-[9px] font-black text-gray-400 uppercase tracking-widest">Schedule</span>
 <span class="text-[9px] sm:text-[10px] font-bold text-gray-700">
 <?php if(!empty($adm['batch_start_time'])): ?>
 <?php echo date('h:i A', strtotime($adm['batch_start_time'])); ?>
 <?php else: ?>
 N/A
 <?php endif; ?>
 </span>
 </div>
 <div class="flex items-center justify-between">
 <span class="text-[8px] sm:text-[9px] font-black text-gray-400 uppercase tracking-widest">Duration</span>
 <span class="text-[9px] sm:text-[10px] font-bold text-gray-700"><?php echo $adm['course_duration'] ?: 'N/A'; ?> Mo</span>
 </div>
 </div>
 </div>

 <!-- Footer Action -->
 <div class="px-5 py-3 sm:px-6 sm:py-4 bg-slate-50/50 border-t border-gray-100">
 <a href="<?php echo url('/student/materials'); ?>" class="w-full py-2.5 bg-white border border-gray-200 text-gray-600 text-[10px] font-black uppercase rounded-lg hover:bg-emerald-600 hover:text-white hover:border-emerald-600 transition-all flex items-center justify-center gap-2 tracking-widest active:scale-95">
 <i class="fa-solid fa-folder-open text-xs"></i>
 <span>Resources</span>
 </a>
 </div>
 </div>
 <?php endforeach; ?>
 <?php endif; ?>
 </div>

 </div>
</div>

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