<?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">Fees & Ledger</h1>
 <p class="text-[9px] sm:text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">Financial Records and Outstanding Invoices</p>
 </div>

 <!-- Summary Grid -->
 <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-6">
 <div class="bg-white p-4 sm:p-6 rounded-xl sm:rounded-2xl border border-gray-200 flex sm:flex-col justify-between sm:justify-start items-center sm:items-start group hover:border-emerald-600/30 transition-all">
 <p class="text-[8px] sm:text-[9px] font-black text-gray-400 uppercase tracking-widest mb-0 sm:mb-1">Billed</p>
 <p class="text-base sm:text-2xl font-black text-gray-900">₹<?php echo number_format($student['total_billed'], 0); ?></p>
 </div>
 <div class="bg-white p-4 sm:p-6 rounded-xl sm:rounded-2xl border border-gray-200 flex sm:flex-col justify-between sm:justify-start items-center sm:items-start group hover:border-emerald-600/30 transition-all">
 <p class="text-[8px] sm:text-[9px] font-black text-gray-400 uppercase tracking-widest mb-0 sm:mb-1">Paid</p>
 <p class="text-base sm:text-2xl font-black text-emerald-600">₹<?php echo number_format($student['total_paid'], 0); ?></p>
 </div>
 <div class="bg-white p-4 sm:p-6 rounded-xl sm:rounded-2xl border border-gray-200 flex sm:flex-col justify-between sm:justify-start items-center sm:items-start group hover:border-red-600/30 transition-all">
 <p class="text-[8px] sm:text-[9px] font-black text-gray-400 uppercase tracking-widest mb-0 sm:mb-1">Due</p>
 <p class="text-base sm:text-2xl font-black text-red-600">₹<?php echo number_format($student['total_due'], 0); ?></p>
 </div>
 </div>

 <!-- Invoices Section -->
 <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden">
 <div class="px-5 py-3 sm:px-6 sm:py-4 border-b border-gray-100 flex items-center justify-between bg-slate-50/50">
 <h2 class="text-[10px] sm:text-xs font-black text-gray-900 uppercase tracking-widest">Recent Invoices</h2>
 <i class="fa-solid fa-file-invoice text-gray-400 text-xs sm:text-base"></i>
 </div>
 <div class="divide-y divide-gray-50">
 <?php if(empty($invoices)): ?>
 <div class="p-10 sm:p-12 text-center text-gray-400 text-[9px] sm:text-[10px] font-bold uppercase tracking-widest">No invoices found</div>
 <?php else: ?>
 <?php foreach($invoices as $index => $inv): ?>
 <div class="p-5 sm:p-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-6 hover:bg-slate-50/50 transition-colors group relative">
 <div class="absolute top-0 right-0 px-2 py-0.5 bg-gray-50 text-[8px] font-bold text-gray-300 rounded-bl-lg">#<?php echo str_pad($index + 1, 2, '0', STR_PAD_LEFT); ?></div>
 
 <div class="flex items-center gap-4 sm:gap-5">
 <div class="h-10 w-10 sm:h-12 sm:w-12 bg-emerald-50 text-emerald-600 rounded-lg sm:rounded-xl flex items-center justify-center border border-emerald-100 flex-none group-hover:scale-105 transition-transform">
 <i class="fa-solid fa-file-lines text-base sm:text-lg"></i>
 </div>
 <div class="min-w-0">
 <h4 class="text-sm font-black text-gray-900 group-hover:text-emerald-600 transition-colors leading-tight truncate max-w-[200px] sm:max-w-none"><?php echo $inv['title']; ?></h4>
 <div class="flex items-center gap-2 mt-1">
 <span class="text-[8px] sm:text-[9px] font-black text-gray-400 uppercase tracking-widest"><?php echo date('d M, Y', strtotime($inv['created_at'])); ?></span>
 <span class="px-1.5 py-0.5 rounded text-[7px] sm:text-[8px] font-black uppercase border <?php 
 echo match($inv['status']) {
 'Paid' => 'bg-emerald-50 text-emerald-600 border-emerald-100',
 'Partial' => 'bg-amber-50 text-amber-600 border-amber-100',
 default => 'bg-red-50 text-red-600 border-red-100'
 };
 ?>"><?php echo $inv['status']; ?></span>
 </div>
 </div>
 </div>
 <div class="flex items-center justify-between sm:justify-end gap-6 border-t sm:border-t-0 pt-3 sm:pt-0 border-gray-100">
 <div class="text-left sm:text-right">
 <p class="text-[7px] sm:text-[8px] font-black text-gray-400 uppercase tracking-widest">Amount</p>
 <p class="text-sm font-black text-gray-900">₹<?php echo number_format($inv['total_amount'], 0); ?></p>
 </div>
 <a href="<?php echo url('/admin/invoices/download?id=' . $inv['id']); ?>" target="_blank" class="px-5 py-2 sm:px-6 sm:py-2.5 bg-emerald-600 text-white text-[9px] sm:text-[10px] font-black uppercase tracking-widest rounded-lg hover:bg-emerald-700 transition-all active:scale-95 flex items-center justify-center gap-2">
 <i class="fa-solid fa-download"></i>
 <span>PDF</span>
 </a>
 </div>
 </div>
 <?php endforeach; ?>
 <?php endif; ?>
 </div>
 </div>

 <!-- History Section -->
 <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden">
 <div class="px-5 py-3 sm:px-6 sm:py-4 border-b border-gray-100 flex items-center justify-between bg-slate-50/50">
 <h2 class="text-[10px] sm:text-xs font-black text-gray-900 uppercase tracking-widest">Payment History</h2>
 <i class="fa-solid fa-receipt text-gray-400 text-xs sm:text-base"></i>
 </div>
 <div class="divide-y divide-gray-50">
 <?php if(empty($payments)): ?>
 <div class="p-10 sm:p-12 text-center text-gray-400 text-[9px] sm:text-[10px] font-bold uppercase tracking-widest">No payment records</div>
 <?php else: ?>
 <?php foreach($payments as $pm): ?>
 <div class="p-5 flex items-center justify-between hover:bg-slate-50/50 transition-colors group">
 <div class="flex items-center gap-4 sm:gap-5">
 <div class="h-9 w-9 sm:h-10 sm:w-10 bg-emerald-50 text-emerald-600 rounded-lg flex items-center justify-center border border-emerald-100 flex-none">
 <i class="fa-solid fa-check text-xs sm:text-sm"></i>
 </div>
 <div class="min-w-0">
 <p class="text-sm font-black text-gray-900 leading-tight truncate max-w-[150px] sm:max-w-none"><?php echo $pm['invoice_title']; ?></p>
 <p class="text-[8px] sm:text-[9px] font-bold text-gray-400 uppercase tracking-tighter mt-1"><?php echo date('d/m/Y', strtotime($pm['payment_date'])); ?> • <?php echo $pm['payment_method']; ?></p>
 </div>
 </div>
 <div class="text-right flex flex-col items-end gap-1">
 <p class="text-sm font-black text-emerald-600">₹<?php echo number_format($pm['amount'], 0); ?></p>
 <a href="<?php echo url('/admin/invoices/download?id=' . $pm['invoice_id']); ?>" target="_blank" class="text-[8px] font-black text-emerald-700 uppercase tracking-widest hover:underline px-2 py-0.5 bg-emerald-50 rounded border border-emerald-100">Receipt</a>
 </div>
 </div>
 <?php endforeach; ?>
 <?php endif; ?>
 </div>
 </div>

 </div>
</div>

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