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

<div class="flex-1 flex flex-col min-w-0 h-full overflow-hidden">
 <?php require_once '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-6xl mx-auto space-y-4 pb-6">
 <!-- Page Header -->
 <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 px-1 py-2">
 <div>
 <h1 class="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">Certificates</h1>
 <p class="text-[10px] sm:text-xs font-medium text-gray-400 mt-0.5 uppercase tracking-wider">Issue and track professional course completion certificates</p>
 </div>
 <a href="<?php echo url('admin/certificates/create'); ?>" class="w-full sm:w-auto px-6 py-3 <?php echo $theme['bg']; ?> text-white text-xs font-semibold rounded-xl <?php echo $theme['hover-bg']; ?> transition-all flex items-center justify-center gap-2 active:scale-95 shadow-lg shadow-<?php echo $theme['accent']; ?>-600/20">
 <i class="fa-solid fa-plus text-sm"></i>
 <span>Generate Certificate</span>
 </a>
 </div>

 <!-- Search and Filters -->
 <form action="<?php echo url('admin/certificates'); ?>" method="GET" class="bg-white border border-gray-200 rounded-2xl p-4 flex flex-col sm:flex-row gap-4 items-center">
 <div class="relative w-full sm:w-96">
 <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
 <input name="search" type="text" value="<?php echo htmlspecialchars($_GET['search'] ?? ''); ?>" class="w-full pl-10 pr-4 py-3 bg-white border border-gray-200 rounded-xl text-xs font-medium text-gray-900 focus:ring-4 focus:ring-<?php echo $theme['accent']; ?>-600/5 focus:border-<?php echo $theme['accent']; ?>-600 transition-all outline-none" placeholder="Search by student name or certificate ID...">
 </div>
 </form>

 <!-- Issued Certificates Table -->
 <div class="hidden md:block bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
 <div class="overflow-x-auto custom-scrollbar">
 <table class="w-full text-left border-collapse">
 <thead>
 <tr class="bg-gray-50/80 border-b border-gray-200">
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest w-16 text-center">SL</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Issue Date</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Certificate ID</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Student Info</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Course Details</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest text-right border-l border-gray-100/50">Action</th>
 </tr>
 </thead>
 <tbody class="divide-y divide-gray-100">
 <?php if(empty($issued_certificates)): ?>
 <tr>
 <td colspan="6" class="px-6 py-12 text-center">
 <div class="flex flex-col items-center justify-center text-gray-400 space-y-2">
 <i class="fa-solid fa-file-circle-exclamation text-3xl"></i>
 <p class="text-xs font-semibold">No certificates found</p>
 </div>
 </td>
 </tr>
 <?php else: ?>
 <?php foreach($issued_certificates as $index => $cert): ?>
 <tr class="hover:bg-gray-50/30 transition-colors group">
 <td class="px-6 py-4 text-center">
 <span class="text-[10px] font-bold text-gray-400"><?php echo str_pad($index + 1, 2, '0', STR_PAD_LEFT); ?></span>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <div class="flex flex-col">
 <span class="text-xs font-bold text-gray-700"><?php echo date('d/m/Y', strtotime($cert['issue_date'])); ?></span>
 <span class="text-[9px] font-medium text-gray-400 mt-0.5">Issued At <?php echo date('h:i A', strtotime($cert['created_at'])); ?></span>
 </div>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <span class="inline-flex items-center px-2 py-1 bg-gray-100 text-gray-600 text-[10px] font-bold rounded-lg uppercase tracking-tight">
 <?php echo htmlspecialchars($cert['certificate_no']); ?>
 </span>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <div class="flex items-center gap-3">
 <div class="w-8 h-8 rounded-lg bg-<?php echo $theme['accent']; ?>-600/10 text-<?php echo $theme['accent']; ?>-600 flex items-center justify-center font-bold text-xs">
 <?php echo substr($cert['student_name'], 0, 1); ?>
 </div>
 <span class="text-xs font-bold text-gray-900 group-hover:text-<?php echo $theme['accent']; ?>-600 transition-colors"><?php echo htmlspecialchars($cert['student_name']); ?></span>
 </div>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <div class="flex flex-col">
 <span class="text-xs font-bold text-gray-700"><?php echo htmlspecialchars($cert['course_name']); ?></span>
 <span class="text-[9px] font-bold text-gray-400 mt-0.5 uppercase"><?php echo htmlspecialchars($cert['duration']); ?></span>
 </div>
 </td>
 <td class="px-6 py-4 text-right border-l border-gray-100/50">
 <a href="<?php echo url('admin/certificates/download?id=' . $cert['id']); ?>" target="_blank" 
 class="h-9 w-9 inline-flex items-center justify-center rounded-xl bg-gray-900 text-white hover:bg-gray-800 transition-all active:scale-95 shadow-sm" title="Download PDF">
 <i class="fa-solid fa-download text-xs"></i>
 </a>
 </td>
 </tr>
 <?php endforeach; ?>
 <?php endif; ?>
 </tbody>
 </table>
 </div>
 </div>

 <!-- Mobile View (Cards) -->
 <div class="md:hidden space-y-4">
 <?php if(empty($issued_certificates)): ?>
 <div class="bg-white border border-gray-200 rounded-2xl p-12 text-center text-gray-400 text-xs font-bold">No certificates found</div>
 <?php else: ?>
 <?php foreach($issued_certificates as $index => $cert): ?>
 <div class="bg-white border border-gray-200 rounded-2xl p-4 space-y-4 relative overflow-hidden shadow-sm">
 <div class="absolute top-0 right-0 px-3 py-1 bg-gray-50 border-b border-l border-gray-100 rounded-bl-xl">
 <span class="text-[9px] font-bold text-gray-400">#<?php echo str_pad($index + 1, 2, '0', STR_PAD_LEFT); ?></span>
 </div>
 <div class="flex items-center gap-3">
 <div class="w-10 h-10 rounded-xl bg-<?php echo $theme['accent']; ?>-600/10 text-<?php echo $theme['accent']; ?>-600 flex items-center justify-center font-bold text-sm">
 <?php echo substr($cert['student_name'], 0, 1); ?>
 </div>
 <div class="flex flex-col">
 <span class="text-sm font-bold text-gray-900"><?php echo htmlspecialchars($cert['student_name']); ?></span>
 <span class="text-[10px] font-bold text-gray-400 uppercase tracking-tighter"><?php echo htmlspecialchars($cert['certificate_no']); ?></span>
 </div>
 </div>

 <div class="flex flex-col gap-2 pt-2 border-t border-gray-50">
 <div class="flex items-center justify-between text-[10px]">
 <span class="font-bold text-gray-400 uppercase tracking-widest">Course</span>
 <span class="font-bold text-gray-700"><?php echo htmlspecialchars($cert['course_name']); ?></span>
 </div>
 <div class="flex items-center justify-between text-[10px]">
 <span class="font-bold text-gray-400 uppercase tracking-widest">Issued Date</span>
 <span class="font-bold text-gray-700"><?php echo date('d/m/Y', strtotime($cert['issue_date'])); ?></span>
 </div>
 </div>

 <div class="pt-3 border-t border-gray-50">
 <a href="<?php echo url('admin/certificates/download?id=' . $cert['id']); ?>" target="_blank" 
 class="w-full h-11 flex items-center justify-center gap-2 rounded-xl bg-gray-900 text-white font-bold text-[10px] uppercase tracking-widest hover:bg-gray-800 active:scale-[0.98] transition-all">
 <i class="fa-solid fa-download text-sm"></i>
 Download PDF
 </a>
 </div>
 </div>
 <?php endforeach; ?>
 <?php endif; ?>
 </div>
 </div>

 </div>
 </main>
</div>

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