<?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">Study Materials</h1>
 <p class="text-[9px] sm:text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">E-Books, Notes and Class Resources</p>
 </div>

 <!-- Materials List -->
 <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden">
 <div class="divide-y divide-gray-50">
 <?php if(empty($materials)): ?>
 <div class="p-16 sm:p-24 text-center">
 <div class="h-16 w-16 sm:h-20 sm:w-20 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4 sm:mb-6 text-gray-200 border border-gray-100">
 <i class="fa-solid fa-folder-closed text-2xl sm:text-3xl"></i>
 </div>
 <p class="text-[10px] sm:text-[11px] font-black text-gray-400 uppercase tracking-widest">Library is empty</p>
 <p class="text-[9px] sm:text-[10px] font-medium text-gray-400 mt-2 uppercase tracking-tighter">Your teachers haven't uploaded any materials yet.</p>
 </div>
 <?php else: ?>
 <?php foreach($materials as $index => $mat): ?>
 <div class="p-4 sm:p-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-6 hover:bg-emerald-50/10 transition-all group relative overflow-hidden">
 <div class="flex items-start sm:items-center gap-4 sm:gap-6 min-w-0 relative z-10">
 <div class="h-12 w-12 sm:h-16 sm:w-16 <?php echo $mat['type'] === 'link' ? 'bg-emerald-50 text-emerald-600 border-emerald-100' : 'bg-red-50 text-red-600 border-red-100'; ?> rounded-2xl sm:rounded-3xl flex items-center justify-center flex-shrink-0 border group-hover:scale-105 transition-transform duration-500">
 <i class="fa-solid <?php echo $mat['type'] === 'link' ? 'fa-link' : 'fa-file-pdf'; ?> text-lg sm:text-2xl"></i>
 </div>
 <div class="min-w-0 space-y-1 sm:space-y-1.5">
 <p class="text-sm sm:text-base font-black text-gray-900 truncate group-hover:text-emerald-600 transition-colors"><?php echo $mat['title']; ?></p>
 <div class="flex flex-wrap items-center gap-2 sm:gap-3">
 <span class="text-[8px] sm:text-[9px] font-black bg-emerald-50 text-emerald-600 px-2 py-0.5 rounded-lg border border-emerald-100 uppercase tracking-tighter"><?php echo $mat['course_name']; ?></span>
 <div class="flex items-center gap-1.5 text-[8px] sm:text-[9px] font-bold text-gray-400 uppercase tracking-widest">
 <i class="fa-regular fa-clock text-[8px]"></i>
 <?php echo date('d/m/Y', strtotime($mat['created_at'])); ?>
 </div>
 </div>
 </div>
 </div>
 <div class="flex items-center gap-4 relative z-10 w-full sm:w-auto">
 <?php if($mat['type'] === 'link'): ?>
 <a href="<?php echo $mat['link_url']; ?>" target="_blank"
 class="flex-1 sm:flex-none px-6 sm:px-8 py-3 sm:py-3.5 bg-emerald-600 text-white text-[10px] sm:text-[11px] font-black uppercase tracking-widest rounded-xl sm:rounded-2xl transition-all active:scale-95 flex items-center justify-center gap-2">
 <i class="fa-solid fa-external-link text-[10px] sm:text-xs"></i>
 <span>Open Link</span>
 </a>
 <?php else: ?>
 <a href="<?php echo url('/student/materials/download?id=' . $mat['id']); ?>"
 class="flex-1 sm:flex-none px-6 sm:px-8 py-3 sm:py-3.5 bg-red-600 text-white text-[10px] sm:text-[11px] font-black uppercase tracking-widest rounded-xl sm:rounded-2xl transition-all active:scale-95 flex items-center justify-center gap-2">
 <i class="fa-solid fa-download text-[10px] sm:text-xs"></i>
 <span>Download PDF</span>
 </a>
 <?php endif; ?>
 </div>
 </div>
 <?php endforeach; ?>
 <?php endif; ?>
 </div>
 </div>

 </div>
</div>

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