<?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">
 <!-- Header -->
 <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 px-1 py-2">
 <div class="flex items-center gap-4">
 <a href="<?php echo url('/admin/attendance'); ?>" class="h-10 w-10 sm:h-12 sm:w-12 flex items-center justify-center rounded-xl sm:rounded-2xl bg-white border border-gray-200 text-gray-400 hover:text-blue-600 hover:border-blue-600 transition-all active:scale-95">
 <i class="fa-solid fa-arrow-left"></i>
 </a>
 <div>
 <h1 class="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">Attendance Report</h1>
 <p class="text-[10px] sm:text-xs font-medium text-gray-400 mt-0.5">Filter and export attendance logs</p>
 </div>
 </div>
 <div class="flex items-center gap-2">
 <a href="<?php echo url('/admin/attendance/export?' . http_build_query($params)); ?>" target="_blank" class="w-full sm:w-auto px-5 py-3 bg-emerald-600 text-white text-xs font-semibold rounded-xl hover:bg-emerald-700 transition-all flex items-center justify-center gap-2 active:scale-95 -600/20">
 <i class="fa-solid fa-file-pdf text-sm"></i>
 <span>Export PDF</span>
 </a>
 </div>
 </div>

 <!-- Filters -->
 <form action="<?php echo url('/admin/attendance/report'); ?>" method="GET" class="bg-white border border-gray-200 rounded-2xl p-5">
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
 <div class="space-y-1.5">
 <label class="text-[9px] font-bold text-gray-400 uppercase tracking-widest ml-1">From Date</label>
 <input name="from_date" type="date" value="<?php echo $params['from_date']; ?>" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-xs font-bold text-gray-900 outline-none focus:bg-white focus:border-blue-600 transition-all">
 </div>
 <div class="space-y-1.5">
 <label class="text-[9px] font-bold text-gray-400 uppercase tracking-widest ml-1">To Date</label>
 <input name="to_date" type="date" value="<?php echo $params['to_date']; ?>" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-xs font-bold text-gray-900 outline-none focus:bg-white focus:border-blue-600 transition-all">
 </div>
 <div class="space-y-1.5">
 <label class="text-[9px] font-bold text-gray-400 uppercase tracking-widest ml-1">Batch</label>
 <select name="batch_id" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-xs font-bold text-gray-900 outline-none appearance-none">
 <option value="">All Batches</option>
 <?php foreach($batches as $b): ?>
 <option value="<?php echo $b['id']; ?>"<?php echo $params['batch_id'] == $b['id'] ? 'selected' : ''; ?>><?php echo $b['name']; ?></option>
 <?php endforeach; ?>
 </select>
 </div>
 <div class="flex items-end">
 <button type="submit" class="w-full py-2.5 bg-blue-600 text-white text-xs font-bold rounded-xl hover:bg-blue-700 transition-all active:scale-[0.98] -100 uppercase tracking-widest">Filter</button>
 </div>
 </div>
 </form>

 <!-- Report Table -->
 <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden">
 <div class="overflow-x-auto">
 <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 border-l border-gray-100/50">Date</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Student</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Batch</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest text-center border-l border-gray-100/50">Status</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">In/Out</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Remarks</th>
 </tr>
 </thead>
 <tbody class="divide-y divide-gray-100">
 <?php if(empty($report)): ?>
 <tr><td colspan="6" class="px-6 py-12 text-center text-gray-400 text-xs font-bold italic">No records found for selected filters</td></tr>
 <?php else: ?>
 <?php foreach($report as $r): ?>
 <tr class="hover:bg-gray-50/30 transition-colors">
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="text-xs font-bold text-gray-900"><?php echo date('d/m/Y', strtotime($r['date'])); ?></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-900"><?php echo $r['student_name']; ?></span>
 <span class="text-[9px] font-bold text-gray-400"><?php echo $r['student_code']; ?></span>
 </div>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <span class="text-xs font-medium text-gray-600"><?php echo $r['batch_name'] ?: 'N/A'; ?></span>
 </td>
 <td class="px-6 py-4 text-center border-l border-gray-100/50">
 <?php 
 $colors = [
 'Present' => 'bg-emerald-50 text-emerald-600 border-emerald-100',
 'Absent' => 'bg-red-50 text-red-600 border-red-100',
 'Late' => 'bg-amber-50 text-amber-600 border-amber-100',
 'Half-Day' => 'bg-purple-50 text-purple-600 border-purple-100'
 ];
 ?>
 <span class="px-2 py-1 rounded-lg text-[9px] font-black uppercase border <?php echo $colors[$r['status']] ?? 'bg-gray-50'; ?>">
 <?php echo $r['status']; ?>
 </span>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <div class="flex flex-col gap-0.5">
 <span class="text-[10px] font-bold text-emerald-600">IN: <?php echo $r['in_time'] ? date('h:i A', strtotime($r['in_time'])) : '--:--'; ?></span>
 <span class="text-[10px] font-bold text-red-400">OUT: <?php echo $r['out_time'] ? date('h:i A', strtotime($r['out_time'])) : '--:--'; ?></span>
 </div>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <span class="text-[10px] font-medium text-gray-500"><?php echo htmlspecialchars($r['remarks'] ?: '-'); ?></span>
 </td>
 </tr>
 <?php endforeach; ?>
 <?php endif; ?>
 </tbody>
 </table>
 </div>
 </div>
 </div>
 </main>
</div>

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