<?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" x-data="{ showGenModal: false }">
 <?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>
 <h1 class="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">Fees Management</h1>
 <p class="text-[10px] sm:text-xs font-medium text-gray-400 mt-0.5">Track student dues and collect payments</p>
 </div>
 <div class="flex items-center gap-3">
 <button @click="showGenModal = true" class="w-full sm:w-auto px-5 py-3 bg-white border border-gray-200 text-gray-600 text-xs font-bold rounded-xl hover:bg-gray-50 transition-all flex items-center justify-center gap-2 active:scale-95">
 <i class="fa-solid fa-wand-magic-sparkles text-blue-500"></i>
 <span>Generate Monthly Fees</span>
 </button>
 </div>
 </div>

 <!-- Filters & Search -->
 <form action="<?php echo url('admin/fees'); ?>" method="GET" class="bg-white border border-gray-200 rounded-2xl p-3">
 <div class="flex flex-col lg:flex-row items-center gap-3">
 <div class="flex-1 w-full relative group">
 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400 group-focus-within:text-blue-600 transition-colors">
 <i class="fa-solid fa-magnifying-glass text-[10px]"></i>
 </div>
 <input name="search" type="text" value="<?php echo htmlspecialchars($params['search']); ?>" class="w-full pl-9 pr-4 py-2.5 bg-gray-50/50 border border-gray-100 rounded-xl text-[11px] font-medium text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none" placeholder="Search student...">
 </div>

 <div class="w-full lg:w-48 relative">
 <select name="course_id" onchange="this.form.submit()" class="w-full px-3 py-2.5 bg-gray-50/50 border border-gray-100 rounded-xl text-[11px] font-medium text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none appearance-none cursor-pointer">
 <option value="">All Courses</option>
 <?php foreach($courses as $course): ?>
 <option value="<?php echo $course['id']; ?>"<?php echo $params['course_id'] == $course['id'] ? 'selected' : ''; ?>><?php echo $course['name']; ?></option>
 <?php endforeach; ?>
 </select>
 <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400">
 <i class="fa-solid fa-chevron-down text-[8px]"></i>
 </div>
 </div>

 <div class="w-full lg:w-48 relative">
 <select name="batch_id" onchange="this.form.submit()" class="w-full px-3 py-2.5 bg-gray-50/50 border border-gray-100 rounded-xl text-[11px] font-medium text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none appearance-none cursor-pointer">
 <option value="">All Batches</option>
 <?php foreach($batches as $batch): ?>
 <option value="<?php echo $batch['id']; ?>"<?php echo $params['batch_id'] == $batch['id'] ? 'selected' : ''; ?>><?php echo $batch['name']; ?></option>
 <?php endforeach; ?>
 </select>
 <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400">
 <i class="fa-solid fa-chevron-down text-[8px]"></i>
 </div>
 </div>

 <button type="submit" class="hidden lg:flex h-10 w-10 items-center justify-center rounded-xl bg-blue-600 text-white hover:bg-blue-700 transition-all active:scale-95 -600/20">
 <i class="fa-solid fa-filter text-xs"></i>
 </button>
 </div>
 </form>

 <!-- Desktop View (Table) -->
 <div class="hidden md:block 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-5 py-3.5 text-[9px] font-bold text-gray-500 uppercase tracking-widest w-14 text-center">SL</th>
 <th class="px-5 py-3.5 text-[9px] font-bold text-gray-500 uppercase tracking-widest min-w-[250px] border-l border-gray-100/50">Student Details</th>
 <th class="px-5 py-3.5 text-[9px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50 text-right">Invoiced</th>
 <th class="px-5 py-3.5 text-[9px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50 text-right">Paid</th>
 <th class="px-5 py-3.5 text-[9px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50 text-right">Discount</th>
 <th class="px-5 py-3.5 text-[9px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50 text-right">Outstanding</th>
 <th class="px-5 py-3.5 text-[9px] font-bold text-gray-500 uppercase tracking-widest text-right w-32 border-l border-gray-100/50">Actions</th>
 </tr>
 </thead>
 <tbody class="divide-y divide-gray-100">
 <?php if(empty($students)): ?>
 <tr><td colspan="6" class="px-5 py-10 text-center text-xs font-bold text-gray-400">No students found</td></tr>
 <?php else: ?>
 <?php foreach($students as $index => $student): ?>
 <?php 
 $invoiced = $student['total_invoiced'] ?: 0;
 $paid = $student['total_paid'] ?: 0;
 $discount = $student['total_discount'] ?: 0;
 $due = max(0, $invoiced - $paid - $discount);
 ?>
 <tr class="group hover:bg-gray-50/50 transition-colors">
 <td class="px-5 py-3.5 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-5 py-3.5 border-l border-gray-100/50">
 <div class="flex items-center gap-3">
 <?php if(!empty($student['photo'])): ?>
 <img src="<?php echo url($student['photo']); ?>" class="w-8 h-8 rounded-lg object-cover border border-gray-100">
 <?php else: ?>
 <div class="w-8 h-8 rounded-lg bg-blue-600/10 text-blue-600 flex items-center justify-center font-bold text-[10px]">
 <?php echo substr($student['name'], 0, 1); ?>
 </div>
 <?php endif; ?>
 <div class="flex items-center gap-2">
 <span class="text-[11px] font-bold text-gray-900 group-hover:text-blue-600 transition-colors"><?php echo $student['name']; ?></span>
 <span class="text-[9px] font-bold text-gray-300">|</span>
 <span class="text-[9px] font-black text-gray-400 uppercase tracking-tighter"><?php echo $student['student_id']; ?></span>
 <span class="hidden lg:inline text-[9px] font-medium text-gray-400 italic"><?php echo $student['phone']; ?></span>
 </div>
 </div>
 </td>
 <td class="px-5 py-3.5 text-right border-l border-gray-100/50">
 <div class="flex flex-col items-end">
 <span class="text-[11px] font-bold text-gray-900">₹<?php echo number_format($invoiced - $discount, 2); ?></span>
 <span class="text-[8px] font-medium text-gray-400 uppercase tracking-tighter mt-0.5">Gross: ₹<?php echo number_format($invoiced, 2); ?></span>
 </div>
 </td>
 <td class="px-5 py-3.5 text-right border-l border-gray-100/50">
 <span class="text-[11px] font-bold text-emerald-600">₹<?php echo number_format($paid, 2); ?></span>
 </td>
 <td class="px-5 py-3.5 text-right border-l border-gray-100/50">
 <span class="text-[11px] font-bold text-amber-500">₹<?php echo number_format($discount, 2); ?></span>
 </td>
 <td class="px-5 py-3.5 text-right border-l border-gray-100/50">
 <div class="inline-flex items-center gap-1.5 px-2 py-1 rounded-lg <?php echo $due > 0 ? 'bg-red-50 text-red-600' : 'bg-gray-50 text-gray-400'; ?>">
 <span class="text-[11px] font-black">₹<?php echo number_format($due, 2); ?></span>
 </div>
 </td>
 <td class="px-5 py-3.5 border-l border-gray-100/50 text-right">
 <a href="<?php echo url('admin/fees/view?id=' . $student['id']); ?>" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 text-white text-[9px] font-black rounded-lg hover:bg-blue-700 transition-all -600/10 active:scale-95 uppercase tracking-wider">
 <i class="fa-solid fa-wallet text-[9px]"></i>
 <span>Manage</span>
 </a>
 </td>
 </tr>
 <?php endforeach; ?>
 <?php endif; ?>
 </tbody>
 </table>
 </div>
 </div>

 <!-- Mobile View (Cards) -->
 <div class="md:hidden space-y-4">
 <?php foreach($students as $index => $student): ?>
 <?php 
 $due = max(0, ($student['total_invoiced'] ?: 0) - ($student['total_paid'] ?: 0) - ($student['total_discount'] ?: 0));
 ?>
 <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 relative overflow-hidden">
 <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-start gap-4">
 <?php if(!empty($student['photo'])): ?>
 <img src="<?php echo url($student['photo']); ?>" class="w-12 h-12 rounded-2xl object-cover border border-gray-100">
 <?php else: ?>
 <div class="w-12 h-12 rounded-2xl bg-blue-600/10 text-blue-600 flex items-center justify-center font-bold text-sm">
 <?php echo substr($student['name'], 0, 1); ?>
 </div>
 <?php endif; ?>
 <div class="min-w-0 pr-8">
 <h3 class="text-sm font-bold text-gray-900 truncate"><?php echo $student['name']; ?></h3>
 <p class="text-[10px] font-bold text-gray-400 uppercase tracking-tighter"><?php echo $student['student_id']; ?></p>
 <p class="text-[10px] font-medium text-gray-400 mt-0.5"><?php echo $student['phone']; ?></p>
 </div>
 </div>

 <div class="grid grid-cols-2 gap-4 py-3 border-y border-gray-50">
 <div class="space-y-0.5">
 <p class="text-[8px] font-bold text-gray-400 uppercase tracking-widest">Outstanding Due</p>
 <p class="text-sm font-bold <?php echo $due > 0 ? 'text-red-500' : 'text-gray-900'; ?>">₹<?php echo number_format($due, 2); ?></p>
 </div>
 <div class="flex justify-end items-center">
 <a href="<?php echo url('admin/fees/view?id=' . $student['id']); ?>" class="h-9 px-4 flex items-center justify-center gap-2 bg-blue-50 text-blue-600 text-[10px] font-bold rounded-xl border border-blue-100">
 <i class="fa-solid fa-eye"></i>
 View
 </a>
 </div>
 </div>
 </div>
 <?php endforeach; ?>
 </div>
 </div>
 </main>

 <!-- Generation Confirmation Modal -->
 <div x-show="showGenModal" class="fixed inset-0 z-[110] overflow-y-auto" x-cloak>
 <div class="flex items-center justify-center min-h-screen px-4">
 <div class="fixed inset-0 bg-gray-900/40 backdrop-blur-sm" @click="showGenModal = false"></div>
 <div class="bg-white rounded-3xl p-6 max-w-[440px] w-full relative z-[120] border border-gray-100">
 <div class="flex items-start gap-5">
 <div class="w-12 h-12 bg-blue-50 text-blue-500 rounded-2xl flex items-center justify-center flex-none text-lg">
 <i class="fa-solid fa-wand-magic-sparkles"></i>
 </div>
 <div class="flex-1">
 <h3 class="text-lg font-black text-gray-900">Generate Monthly Fees?</h3>
 <p class="text-[11px] font-medium text-gray-400 leading-relaxed mt-1">This will create new invoices for all active students for the current month. Existing invoices won't be duplicated.</p>
 <div class="flex justify-end gap-2 mt-6">
 <button @click="showGenModal = false" class="px-5 py-2.5 bg-white border border-gray-200 text-gray-500 text-[10px] font-bold rounded-xl hover:bg-gray-50 transition-all">Cancel</button>
 <a href="<?php echo url('admin/fees/generate'); ?>" class="px-5 py-2.5 bg-blue-600 text-white text-[10px] font-bold rounded-xl hover:bg-blue-700 transition-all active:scale-95 -600/20 flex items-center justify-center">Yes, Generate</a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

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