<?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">
 
 <!-- Welcome Section -->
 <div class="bg-white p-4 sm:p-8 rounded-2xl border border-gray-200 flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
 <div class="flex flex-col sm:flex-row items-center gap-4 sm:gap-5 w-full">
 <div class="w-16 sm:w-20 aspect-[3/4] rounded-xl overflow-hidden bg-gray-50 border border-gray-200 flex-shrink-0">
 <?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 text-2xl sm:text-3xl"></i>
 </div>
 <?php endif; ?>
 </div>
 <div class="text-center sm:text-left flex-1">
 <h1 class="text-xl sm:text-2xl font-black text-gray-900 leading-tight">Welcome, <span class="text-emerald-600"><?php echo explode(' ', $_SESSION['user_name'])[0]; ?></span></h1>
 <p class="text-[9px] sm:text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-0.5">ID: <?php echo $student['student_id']; ?></p>
 </div>
 <a href="<?php echo url('/student/materials'); ?>" class="w-full sm:w-auto px-6 py-2.5 bg-emerald-600 text-white text-[10px] font-black uppercase tracking-widest rounded-xl hover:bg-emerald-700 transition-all active:scale-95 flex items-center justify-center gap-2">
 <i class="fa-solid fa-book-open"></i>
 <span>Materials</span>
 </a>
 </div>
 </div>

 <!-- Flat Stats Cards -->
 <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
 <div class="bg-white p-4 rounded-xl border border-gray-200 flex flex-col sm:flex-row items-center sm:items-start gap-2 sm:gap-4 group hover:border-emerald-600/30 transition-all text-center sm:text-left">
 <div class="h-9 w-9 bg-emerald-50 text-emerald-600 rounded-lg flex items-center justify-center text-base flex-none">
 <i class="fa-solid fa-graduation-cap"></i>
 </div>
 <div class="min-w-0">
 <p class="text-[8px] sm:text-[9px] font-black text-gray-400 uppercase tracking-widest">Enrolled</p>
 <p class="text-sm sm:text-xl font-black text-gray-900 truncate"><?php echo $stats['courses']; ?> Courses</p>
 </div>
 </div>
 
 <div class="bg-white p-4 rounded-xl border border-gray-200 flex flex-col sm:flex-row items-center sm:items-start gap-2 sm:gap-4 group hover:border-emerald-600/30 transition-all text-center sm:text-left">
 <div class="h-9 w-9 bg-emerald-50 text-emerald-600 rounded-lg flex items-center justify-center text-base flex-none">
 <i class="fa-solid fa-check-double"></i>
 </div>
 <div class="min-w-0">
 <p class="text-[8px] sm:text-[9px] font-black text-gray-400 uppercase tracking-widest">Paid</p>
 <p class="text-sm sm:text-xl font-black text-gray-900 truncate">₹<?php echo number_format($stats['total_paid'], 0); ?></p>
 </div>
 </div>

 <div class="bg-white p-4 rounded-xl border border-gray-200 flex flex-col sm:flex-row items-center sm:items-start gap-2 sm:gap-4 group hover:border-red-600/30 transition-all text-center sm:text-left">
 <div class="h-9 w-9 bg-red-50 text-red-600 rounded-lg flex items-center justify-center text-base flex-none">
 <i class="fa-solid fa-clock-rotate-left"></i>
 </div>
 <div class="min-w-0">
 <p class="text-[8px] sm:text-[9px] font-black text-gray-400 uppercase tracking-widest text-red-500">Due</p>
 <p class="text-sm sm:text-xl font-black text-red-600 truncate">₹<?php echo number_format($stats['total_due'], 0); ?></p>
 </div>
 </div>

 <div class="bg-white p-4 rounded-xl border border-gray-200 flex flex-col sm:flex-row items-center sm:items-start gap-2 sm:gap-4 group hover:border-emerald-600/30 transition-all text-center sm:text-left">
 <div class="h-9 w-9 bg-emerald-50 text-emerald-600 rounded-lg flex items-center justify-center text-base flex-none">
 <i class="fa-solid fa-percent"></i>
 </div>
 <div class="min-w-0">
 <p class="text-[8px] sm:text-[9px] font-black text-gray-400 uppercase tracking-widest">Saved</p>
 <p class="text-sm sm:text-xl font-black text-gray-900 truncate">₹<?php echo number_format($stats['total_discount'], 0); ?></p>
 </div>
 </div>
 </div>

 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
 <!-- Schedule Section -->
 <div class="lg:col-span-2 space-y-6">
 <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden">
 <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between bg-emerald-50/20">
 <h3 class="text-xs font-black text-gray-900 uppercase tracking-widest flex items-center gap-2">
 <i class="fa-solid fa-calendar-day text-emerald-600"></i>
 Class Schedule
 </h3>
 <span class="text-[9px] font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-lg"><?php echo date('d/m/Y'); ?></span>
 </div>
 <div class="p-4 space-y-3">
 <?php if(empty($todaySchedule)): ?>
 <div class="py-10 text-center">
 <p class="text-[10px] font-black text-gray-300 uppercase tracking-widest">No classes scheduled today</p>
 </div>
 <?php else: ?>
 <?php foreach($todaySchedule as $sch): ?>
 <div class="flex items-center justify-between p-4 rounded-xl border border-gray-100 hover:border-emerald-200 hover:bg-emerald-50/10 transition-all group">
 <div class="flex items-center gap-4">
 <div class="h-10 w-10 bg-gray-50 rounded-lg flex items-center justify-center text-gray-400 group-hover:text-emerald-600 border border-gray-100 transition-all">
 <i class="fa-regular fa-clock"></i>
 </div>
 <div>
 <h4 class="text-xs font-black text-gray-900"><?php echo $sch['name']; ?></h4>
 <p class="text-[9px] font-bold text-gray-400 uppercase tracking-tight"><?php echo $sch['course_name']; ?> • <?php echo $sch['teacher_name']; ?></p>
 </div>
 </div>
 <span class="px-3 py-1.5 bg-emerald-600 text-white text-[9px] font-black rounded-lg">
 <?php echo date('h:i A', strtotime($sch['start_time'])); ?>
 </span>
 </div>
 <?php endforeach; ?>
 <?php endif; ?>
 </div>
 </div>

 <!-- Recent Study Materials -->
 <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden">
 <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between bg-emerald-50/20">
 <h3 class="text-xs font-black text-gray-900 uppercase tracking-widest flex items-center gap-2">
 <i class="fa-solid fa-file-invoice text-emerald-600"></i>
 Recent Materials
 </h3>
 <a href="<?php echo url('/student/materials'); ?>" class="text-[9px] font-black text-emerald-600 uppercase hover:underline">View All</a>
 </div>
 <div class="divide-y divide-gray-50">
 <?php foreach($recentMaterials as $mat): ?>
 <a href="<?php echo $mat['type'] === 'link' ? $mat['link_url'] : $mat['file_path']; ?>" target="_blank" class="px-6 py-4 flex items-center justify-between hover:bg-emerald-50/20 transition-colors group">
 <div class="flex items-center gap-4">
 <div class="h-9 w-9 <?php echo $mat['type'] === 'link' ? 'bg-emerald-50 text-emerald-600 border-emerald-100' : 'bg-red-50 text-red-600 border-red-100'; ?> rounded-lg flex items-center justify-center border transition-all">
 <i class="fa-solid <?php echo $mat['type'] === 'link' ? 'fa-link' : 'fa-file-pdf'; ?> text-sm"></i>
 </div>
 <div>
 <p class="text-xs font-black text-gray-900 group-hover:text-emerald-600 transition-colors"><?php echo $mat['title']; ?></p>
 <p class="text-[8px] font-bold text-gray-400 uppercase tracking-tighter"><?php echo $mat['course_name']; ?></p>
 </div>
 </div>
 <i class="fa-solid fa-chevron-right text-gray-200 text-[10px]"></i>
 </a>
 <?php endforeach; ?>
 </div>
 </div>
 </div>

 <!-- Financial Summary Card -->
 <div class="space-y-6">
 <div class="bg-white p-6 rounded-2xl border border-gray-200">
 <h3 class="text-[10px] font-black text-gray-900 uppercase tracking-widest mb-6 flex items-center gap-2">
 <i class="fa-solid fa-chart-pie text-emerald-600"></i>
 Fees Progress
 </h3>
 
 <div class="space-y-6">
 <div class="flex flex-col gap-2">
 <div class="flex items-center justify-between text-[9px] font-black uppercase tracking-widest">
 <span class="text-gray-400">Completion</span>
 <span class="text-emerald-600"><?php echo $payProgress; ?>%</span>
 </div>
 <div class="h-2 w-full bg-gray-50 rounded-full border border-gray-100 p-0.5">
 <div class="h-full bg-emerald-500 rounded-full transition-all duration-1000" style="width: <?php echo $payProgress; ?>%"></div>
 </div>
 </div>

 <div class="bg-gray-50 p-4 rounded-xl border border-gray-100">
 <p class="text-[8px] font-black text-gray-400 uppercase tracking-widest mb-2">Recent Payment</p>
 <?php if($lastPayment): ?>
 <div class="flex items-center justify-between">
 <span class="text-sm font-black text-gray-900">₹<?php echo number_format($lastPayment['amount'], 0); ?></span>
 <span class="text-[9px] font-bold text-gray-400 uppercase"><?php echo date('d M, Y', strtotime($lastPayment['payment_date'])); ?></span>
 </div>
 <?php else: ?>
 <p class="text-[9px] font-bold text-gray-400 italic">No history</p>
 <?php endif; ?>
 </div>

 <a href="<?php echo url('/student/fees'); ?>" class="block w-full py-3.5 bg-emerald-600 text-white text-[10px] font-black rounded-xl text-center hover:bg-emerald-700 transition-all uppercase tracking-widest active:scale-95">
 Manage Ledger
 </a>
 </div>
 </div>

 <!-- Simple Support Link -->
 <div class="bg-emerald-700 rounded-2xl p-6 text-white border border-emerald-800 relative overflow-hidden group">
 <div class="absolute -right-4 -top-4 h-24 w-24 bg-white/10 rounded-full blur-2xl group-hover:bg-white/20 transition-all"></div>
 <h3 class="text-xs font-black mb-1 uppercase tracking-widest relative z-10">Support</h3>
 <p class="text-[10px] text-emerald-100 leading-relaxed mb-4 relative z-10">Need help? Contact institute admin.</p>
 <a href="#" class="inline-flex items-center gap-2 text-[9px] font-black uppercase tracking-widest bg-white/20 hover:bg-white/30 px-3 py-1.5 rounded-lg transition-all relative z-10">
 Help Desk
 <i class="fa-solid fa-arrow-right text-[8px]"></i>
 </a>
 </div>
 </div>
 </div>

 </div>
</div>

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