<?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="feeCollection">
 <?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-6 pb-6">
 <!-- Back Button -->
 <div class="px-1">
 <a href="<?php echo url('/admin/fees'); ?>" class="inline-flex items-center gap-2 text-xs font-bold text-gray-400 hover:text-gray-600 transition-colors">
 <i class="fa-solid fa-arrow-left"></i>
 Back to Fees List
 </a>
 </div>

 <!-- Student Profile Header -->
 <div class="bg-white border border-gray-200 rounded-3xl p-6">
 <div class="flex items-center gap-5">
 <div class="h-16 w-16 rounded-2xl bg-blue-600/10 text-blue-600 flex items-center justify-center text-2xl font-black">
 <?php echo substr($student['name'], 0, 1); ?>
 </div>
 <div class="flex-1">
 <h2 class="text-xl font-black text-gray-900 leading-tight"><?php echo $student['name']; ?></h2>
 <div class="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1">
 <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest"><?php echo $student['student_id']; ?></span>
 <span class="h-1 w-1 rounded-full bg-gray-300"></span>
 <span class="text-[10px] font-bold text-gray-400"><?php echo $student['phone']; ?></span>
 <span class="h-1 w-1 rounded-full bg-gray-300"></span>
 <span class="text-[10px] font-bold text-gray-400"><?php echo $student['email']; ?></span>
 </div>
 </div>
 </div>
 </div>

 <!-- Financial Summary Cards -->
 <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
 <div class="bg-white border border-gray-200 rounded-2xl p-4">
 <p class="text-[8px] font-black text-gray-400 uppercase tracking-widest mb-1">Total Invoiced</p>
 <p class="text-lg font-black text-gray-900">₹<?php echo number_format($student['total_invoiced'], 2); ?></p>
 </div>
 <div class="bg-white border border-gray-200 rounded-2xl p-4">
 <p class="text-[8px] font-black text-gray-400 uppercase tracking-widest mb-1">Total Paid</p>
 <p class="text-lg font-black text-emerald-600">₹<?php echo number_format($student['total_paid'], 2); ?></p>
 </div>
 <div class="bg-white border border-gray-200 rounded-2xl p-4">
 <p class="text-[8px] font-black text-gray-400 uppercase tracking-widest mb-1">Total Discount</p>
 <p class="text-lg font-black text-amber-500">₹<?php echo number_format($student['total_discount'], 2); ?></p>
 </div>
 <div class="bg-white border border-gray-200 rounded-2xl p-4">
 <p class="text-[8px] font-black text-gray-400 uppercase tracking-widest mb-1">Net Outstanding</p>
 <p class="text-lg font-black text-red-600">₹<?php echo number_format($student['total_due'], 2); ?></p>
 </div>
 </div>

 <!-- Outstanding Dues Section -->
 <div class="space-y-4">
 <h3 class="text-xs font-black text-gray-400 uppercase tracking-widest px-1 flex items-center gap-2">
 <i class="fa-solid fa-clock-rotate-left text-red-500"></i>
 Pending Invoices
 </h3>
 
 <div class="grid grid-cols-1 gap-4">
 <?php if(empty($pendingInvoices)): ?>
 <div class="bg-emerald-50 border border-emerald-100 rounded-2xl p-8 text-center">
 <div class="h-12 w-12 bg-white rounded-2xl flex items-center justify-center mx-auto mb-3 -600/10">
 <i class="fa-solid fa-check text-emerald-500 text-lg"></i>
 </div>
 <p class="text-xs font-bold text-emerald-600 uppercase tracking-widest">No outstanding dues</p>
 <p class="text-[10px] font-medium text-emerald-500/60 mt-1">This student is all caught up!</p>
 </div>
 <?php else: ?>
 <?php foreach($pendingInvoices as $inv): ?>
 <?php 
 $balance = $inv['total_amount'] - $inv['paid_amount'] - $inv['discount_amount']; 
 $waMsg ="Hello". $student['name'] .", this is a reminder from". ($siteSettings['institute_name'] ?? 'our institute') ." regarding your pending fee of ₹". number_format($balance, 0) ." for '". $inv['title'] ."'. Please clear the due by". date('d M', strtotime($inv['due_date'])) .". Thank you!";
 $waUrl ="https://wa.me/". preg_replace('/[^0-9]/', '', $student['phone']) ."?text=". urlencode($waMsg);
 ?>
 <div class="bg-white border border-gray-200 rounded-2xl p-5 hover:border-blue-200 transition-all group">
 <div class="flex flex-col sm:flex-row justify-between gap-4">
 <div class="flex-1">
 <div class="flex items-center gap-3 mb-2">
 <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">#<?php echo $inv['id']; ?></span>
 <span class="h-1 w-1 rounded-full bg-gray-200"></span>
 <span class="text-[10px] font-black text-blue-600 uppercase tracking-tight"><?php echo $inv['course_name'] ?: 'General'; ?></span>
 </div>
 <h4 class="text-sm font-black text-gray-900 group-hover:text-blue-600 transition-colors"><?php echo $inv['title']; ?></h4>
 <p class="text-[10px] font-bold text-gray-400 mt-1">Due on <?php echo date('d/m/Y', strtotime($inv['due_date'])); ?></p>
 </div>
 <div class="flex items-center justify-between sm:justify-end gap-3 sm:gap-4 border-t sm:border-t-0 pt-4 sm:pt-0 border-gray-50">
 <div class="text-left sm:text-right mr-4">
 <p class="text-[8px] font-black text-gray-400 uppercase tracking-widest">Balance Due</p>
 <p class="text-base font-black text-red-500">₹<?php echo number_format($balance, 2); ?></p>
 </div>
 <a href="<?php echo $waUrl; ?>" target="_blank" class="h-10 px-4 bg-emerald-50 text-emerald-600 text-[10px] font-black rounded-xl hover:bg-emerald-600 hover:text-white transition-all border border-emerald-100 flex items-center gap-2" title="Send WhatsApp Reminder">
 <i class="fa-brands fa-whatsapp text-sm"></i>
 <span class="hidden sm:inline">Remind</span>
 </a>
 <button @click="openCollectModal(<?php echo htmlspecialchars(json_encode($inv)); ?>)" class="h-10 px-6 bg-blue-600 text-white text-[10px] font-black rounded-xl hover:bg-blue-700 transition-all -600/20 active:scale-95 flex items-center gap-2">
 <i class="fa-solid fa-wallet text-[10px]"></i>
 Collect
 </button>
 </div>
 </div>
 </div>
 <?php endforeach; ?>
 <?php endif; ?>
 </div>
 </div>

 <!-- Recent Payments Section -->
 <?php if(!empty($payments)): ?>
 <div class="space-y-4">
 <div class="flex items-center justify-between px-1">
 <h3 class="text-xs font-black text-gray-400 uppercase tracking-widest flex items-center gap-2">
 <i class="fa-solid fa-history text-blue-500"></i>
 Payment History
 </h3>
 <span class="text-[10px] font-bold text-gray-400 bg-gray-100 px-2 py-0.5 rounded-lg"><?php echo count($payments); ?> Records</span>
 </div>
 
 <div class="bg-white border border-gray-200 rounded-3xl overflow-hidden">
 <div class="overflow-x-auto">
 <table class="w-full text-left border-collapse">
 <thead>
 <tr class="bg-gray-50/50 border-b border-gray-100">
 <th class="px-6 py-4 text-[9px] font-black text-gray-400 uppercase tracking-widest w-32">Date</th>
 <th class="px-6 py-4 text-[9px] font-black text-gray-400 uppercase tracking-widest border-l border-gray-100/50">Transaction Details</th>
 <th class="px-6 py-4 text-[9px] font-black text-gray-400 uppercase tracking-widest border-l border-gray-100/50 text-right w-32">Amount</th>
 <th class="px-6 py-4 text-[9px] font-black text-gray-400 uppercase tracking-widest border-l border-gray-100/50 text-center w-24">Status</th>
 <th class="px-6 py-4 text-[9px] font-black text-gray-400 uppercase tracking-widest border-l border-gray-100/50 text-right w-20">Docs</th>
 </tr>
 </thead>
 <tbody class="divide-y divide-gray-50">
 <?php foreach($payments as $pm): ?>
 <tr class="group hover:bg-gray-50/50 transition-colors">
 <td class="px-6 py-4">
 <div class="flex flex-col">
 <span class="text-[11px] font-black text-gray-900"><?php echo date('d M, Y', strtotime($pm['payment_date'])); ?></span>
 <span class="text-[9px] font-medium text-gray-400"><?php echo date('h:i A', strtotime($pm['created_at'] ?? $pm['payment_date'])); ?></span>
 </div>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <div class="flex flex-col">
 <span class="text-[11px] font-bold text-gray-700 group-hover:text-blue-600 transition-colors"><?php echo $pm['invoice_title']; ?></span>
 <div class="flex items-center gap-2 mt-0.5">
 <span class="text-[8px] font-black px-1.5 py-0.5 rounded bg-blue-50 text-blue-600 uppercase tracking-tighter border border-blue-100/50"><?php echo $pm['payment_method']; ?></span>
 <?php if(!empty($pm['remarks'])): ?>
 <span class="text-[9px] text-gray-400 italic truncate max-w-[200px]">• <?php echo $pm['remarks']; ?></span>
 <?php endif; ?>
 </div>
 </div>
 </td>
 <td class="px-6 py-4 text-right border-l border-gray-100/50">
 <div class="flex flex-col items-end">
 <span class="text-[11px] font-black text-emerald-600">₹<?php echo number_format($pm['amount'], 2); ?></span>
 <?php if($pm['discount'] > 0): ?>
 <span class="text-[8px] font-bold text-amber-500 uppercase tracking-tighter mt-0.5">Disc: ₹<?php echo number_format($pm['discount'], 2); ?></span>
 <?php endif; ?>
 </div>
 </td>
 <td class="px-6 py-4 text-center border-l border-gray-100/50">
 <div class="inline-flex items-center gap-1 text-[8px] font-black text-emerald-600 bg-emerald-50 px-2 py-1 rounded-lg uppercase tracking-widest border border-emerald-100">
 <i class="fa-solid fa-circle-check text-[7px]"></i>
 Success
 </div>
 </td>
 <td class="px-6 py-4 text-right border-l border-gray-100/50">
 <a href="<?php echo url('/admin/invoices/download?id=' . $pm['invoice_id']); ?>" target="_blank" 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-file-pdf text-[10px]"></i>
 <span>Invoice</span>
 </a>
 </td>
 </tr>
 <?php endforeach; ?>
 </tbody>
 </table>
 </div>
 </div>
 </div>
 <?php endif; ?>
 </div>
 </main>

 <!-- Collect Payment Modal -->
 <div x-show="showCollectModal" class="fixed inset-0 z-50 overflow-y-auto" x-cloak>
 <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
 <div class="fixed inset-0 bg-gray-900/40 backdrop-blur-sm transition-opacity" @click="showCollectModal = false"></div>
 <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
 
 <div class="inline-block align-bottom bg-white rounded-3xl text-left overflow-hidden transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full border-none">
 <div class="bg-white px-6 py-6 sm:p-10">
 <div class="flex items-center justify-between mb-8">
 <div>
 <h3 class="text-xl font-black text-gray-900 leading-tight">Collect Payment</h3>
 <p class="text-[10px] font-bold text-blue-600 uppercase tracking-widest mt-1" x-text="selectedInvoice.title"></p>
 </div>
 <button @click="showCollectModal = false" type="button" class="h-10 w-10 flex items-center justify-center rounded-xl bg-gray-50 text-gray-400 hover:text-gray-600 transition-all border border-gray-200">
 <i class="fa-solid fa-xmark"></i>
 </button>
 </div>

 <form action="<?php echo url('/admin/fees/collect'); ?>" method="POST" class="space-y-6">
 <input type="hidden" name="invoice_id" :value="selectedInvoice.id">

 <div class="p-4 bg-gray-50 rounded-2xl border border-gray-100 space-y-3">
     <div class="flex items-center justify-between">
         <span class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Initial Balance</span>
         <span class="text-xs font-black text-gray-900" x-text="'₹' + initialBalance.toFixed(2)"></span>
     </div>
     <div class="flex items-center justify-between pt-3 border-t border-gray-100">
         <span class="text-[10px] font-black text-red-600 uppercase tracking-widest">Remaining After This</span>
         <span class="text-lg font-black text-red-600" x-text="'₹' + (initialBalance - (parseFloat(amount) || 0) - (parseFloat(discount) || 0)).toFixed(2)"></span>
     </div>
 </div>

 <div class="grid grid-cols-2 gap-4">
 <div class="space-y-2">
 <label class="text-[10px] font-black text-gray-400 ml-0.5 uppercase tracking-widest">Paying Amount</label>
 <input name="amount" x-model="amount" type="number" step="0.01" required class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-black text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 outline-none" placeholder="0.00">
 </div>
 <div class="space-y-2">
 <label class="text-[10px] font-black text-gray-400 ml-0.5 uppercase tracking-widest">Discount</label>
 <input name="discount" x-model="discount" type="number" step="0.01" class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-black text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 outline-none" placeholder="0.00">
 </div>
 </div>

 <div class="grid grid-cols-2 gap-4">
 <div class="space-y-2">
 <label class="text-[10px] font-black text-gray-400 ml-0.5 uppercase tracking-widest">Payment Date</label>
 <input name="payment_date" type="date" value="<?php echo date('Y-m-d'); ?>" required class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-bold text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 outline-none">
 </div>
 <div class="space-y-2">
 <label class="text-[10px] font-black text-gray-400 ml-0.5 uppercase tracking-widest">Method</label>
 <select name="payment_method" required class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-bold text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 outline-none appearance-none">
 <option value="Cash">Cash</option>
 <option value="UPI">UPI</option>
 <option value="Bank Transfer">Bank Transfer</option>
 <option value="Cheque">Cheque</option>
 </select>
 </div>
 </div>

 <div class="space-y-2">
 <label class="text-[10px] font-black text-gray-400 ml-0.5 uppercase tracking-widest">Remarks</label>
 <textarea name="remarks" rows="2" class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-medium text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 outline-none resize-none" placeholder="Optional notes..."></textarea>
 </div>

 <div class="pt-6 flex gap-3">
 <button type="button" @click="showCollectModal = false" class="flex-1 px-6 py-3.5 bg-white border border-gray-200 text-gray-500 text-[10px] font-black rounded-xl hover:bg-gray-50 transition-all uppercase tracking-widest">Cancel</button>
 <button type="submit" class="flex-1 px-6 py-3.5 bg-blue-600 text-white text-[10px] font-black rounded-xl hover:bg-blue-700 transition-all -600/20 active:scale-95 uppercase tracking-widest flex items-center justify-center gap-2">
 <i class="fa-solid fa-check-double"></i>
 Save Collection
 </button>
 </div>
 </form>
 </div>
 </div>
 </div>
 </div>
</div>

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

<script>
 document.addEventListener('alpine:init', () => {
 Alpine.data('feeCollection', () => ({
 showCollectModal: false,
 selectedInvoice: {},
 amount: '',
 discount: 0,
 initialBalance: 0,
 
 init() {
 this.$watch('discount', (value) => {
 let d = parseFloat(value) || 0;
 this.amount = Math.max(0, this.initialBalance - d).toFixed(2);
 });
 },
 
 openCollectModal(invoice) {
 this.selectedInvoice = invoice;
 this.initialBalance = parseFloat(invoice.total_amount) - parseFloat(invoice.paid_amount) - parseFloat(invoice.discount_amount);
 this.amount = this.initialBalance.toFixed(2);
 this.discount = 0;
 this.showCollectModal = true;
 }
 }));
 });
</script>
