<?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="admissionForm">
 <?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">Admissions</h1>
 <p class="text-[10px] sm:text-xs font-medium text-gray-400 mt-0.5">Enroll students into courses and batches</p>
 </div>
 <button @click="showModal = true; student_id=''; course_id=''; batch_id='';" class="w-full sm:w-auto px-5 py-3 bg-blue-600 text-white text-xs font-semibold rounded-xl hover:bg-blue-700 transition-all flex items-center justify-center gap-2 active:scale-95 -600/20">
 <i class="fa-solid fa-plus text-sm"></i>
 <span>New Enrollment</span>
 </button>
 </div>

 <!-- Filters & Search -->
 <form action="<?php echo url('admin/admissions'); ?>" method="GET" class="bg-white border border-gray-200 rounded-2xl p-4 space-y-4">
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
 <div class="relative group">
 <div class="absolute inset-y-0 left-0 pl-3.5 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-xs"></i>
 </div>
 <input name="search" type="text" value="<?php echo htmlspecialchars($params['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-blue-600/5 focus:border-blue-600 transition-all outline-none" placeholder="Search by student name or ID...">
 </div>

 <div class="relative">
 <select name="filter_course" onchange="this.form.submit()" class="w-full px-4 py-3 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 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['filter_course'] == $course['id'] ? 'selected' : ''; ?>><?php echo $course['name']; ?></option>
 <?php endforeach; ?>
 </select>
 <div class="absolute inset-y-0 right-0 pr-3.5 flex items-center pointer-events-none text-gray-400 border-l border-gray-100 ml-2 pl-3">
 <i class="fa-solid fa-chevron-down text-[10px]"></i>
 </div>
 </div>
 </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-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 min-w-[200px] 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">Course & Batch</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50 text-center">Admission Date</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 text-right w-44 border-l border-gray-100/50">Actions</th>
 </tr>
 </thead>
 <tbody class="divide-y divide-gray-100">
 <?php if(empty($admissions)): ?>
 <tr><td colspan="6" class="px-5 py-12 text-center text-xs font-bold text-gray-400">No admissions found</td></tr>
 <?php else: ?>
 <?php foreach($admissions as $index => $admission): ?>
 <tr class="group hover:bg-gray-50 transition-colors">
 <td class="px-6 py-4 text-center">
 <span class="text-[10px] font-bold text-gray-400"><?php echo str_pad(($paginatedAdmissions['page'] - 1) * $paginatedAdmissions['per_page'] + $index + 1, 2, '0', STR_PAD_LEFT); ?></span>
 </td>
 <td class="px-6 py-5 border-l border-gray-100/50">
 <div class="flex items-center gap-3">
 <?php if($admission['student_photo']): ?>
 <img src="<?php echo url($admission['student_photo']); ?>" class="w-10 h-10 rounded-xl object-cover border border-gray-200">
 <?php else: ?>
 <div class="w-10 h-10 rounded-xl bg-blue-600/10 text-blue-600 flex items-center justify-center font-bold text-sm">
 <?php echo substr($admission['student_name'], 0, 1); ?>
 </div>
 <?php endif; ?>
 <div class="flex flex-col">
 <span class="text-xs font-bold text-gray-900 group-hover:text-blue-600 transition-colors"><?php echo $admission['student_name']; ?></span>
 <span class="text-[9px] font-bold text-gray-400 uppercase tracking-tighter"><?php echo $admission['student_id_code']; ?></span>
 </div>
 </div>
 </td>
 <td class="px-6 py-5 border-l border-gray-100/50">
 <div class="flex flex-col">
 <span class="text-xs font-bold text-gray-700"><?php echo $admission['course_name']; ?></span>
 <span class="text-[9px] font-medium text-gray-400 mt-0.5"><?php echo $admission['batch_name'] ?? 'No Batch'; ?></span>
 </div>
 </td>
 <td class="px-6 py-5 text-center border-l border-gray-100/50">
 <span class="text-xs font-bold text-gray-700"><?php echo date('d/m/Y', strtotime($admission['admission_date'])); ?></span>
 </td>
 <td class="px-6 py-5 text-center border-l border-gray-100/50">
 <span class="inline-flex items-center px-2 py-1 rounded-lg text-[9px] font-bold border <?php echo $admission['status'] === 'Active' ? 'bg-emerald-50 text-emerald-600 border-emerald-200' : 'bg-red-50 text-red-600 border-red-200'; ?>">
 <?php echo $admission['status']; ?>
 </span>
 </td>
 <td class="px-6 py-5 border-l border-gray-100/50 text-right">
 <div class="flex items-center justify-end gap-2">
 <a href="<?php echo url('admin/admissions/download?id=' . $admission['id']); ?>" target="_blank" class="h-8 w-8 flex items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-600 hover:text-white transition-all border border-emerald-100" title="Admission Form PDF">
 <i class="fa-solid fa-file-pdf text-xs"></i>
 </a>

 <a href="<?php echo url('admin/admissions?edit_id=' . $admission['id']); ?>" class="h-8 w-8 flex items-center justify-center rounded-lg bg-amber-50 text-amber-500 hover:bg-amber-500 hover:text-white transition-all border border-amber-100">
 <i class="fa-solid fa-pen-to-square text-xs"></i>
 </a>
 <button @click="confirmDelete(<?php echo $admission['id']; ?>)" class="h-8 w-8 flex items-center justify-center rounded-lg bg-red-50 text-red-600 border border-red-100 hover:bg-red-600 hover:text-white transition-all active:scale-95">
 <i class="fa-solid fa-trash-can text-xs"></i>
 </button>
 </div>
 </td>
 </tr>
 <?php endforeach; ?>
 <?php endif; ?>
 </tbody>
 </table>
 </div>
 </div>

 <!-- Mobile View (Cards) -->
 <div class="md:hidden space-y-4">
 <?php foreach($admissions as $index => $admission): ?>
 <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(($paginatedAdmissions['page'] - 1) * $paginatedAdmissions['per_page'] + $index + 1, 2, '0', STR_PAD_LEFT); ?></span>
 </div>

 <div class="flex items-start gap-4">
 <?php if($admission['student_photo']): ?>
 <img src="<?php echo url($admission['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($admission['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 $admission['student_name']; ?></h3>
 <p class="text-[10px] font-bold text-gray-400 uppercase tracking-tighter"><?php echo $admission['student_id_code']; ?></p>
 <span class="inline-flex items-center mt-2 px-2 py-0.5 rounded-lg text-[9px] font-bold border <?php echo $admission['status'] === 'Active' ? 'bg-emerald-50 text-emerald-600 border-emerald-200' : 'bg-red-50 text-red-600 border-red-200'; ?>">
 <?php echo $admission['status']; ?>
 </span>
 </div>
 </div>

 <div class="grid grid-cols-2 gap-4 py-4 border-y border-gray-50">
 <div class="space-y-1">
 <p class="text-[8px] font-bold text-gray-400 uppercase tracking-widest">Course</p>
 <p class="text-[10px] font-bold text-gray-700 truncate"><?php echo $admission['course_name']; ?></p>
 </div>
 <div class="space-y-1">
 <p class="text-[8px] font-bold text-gray-400 uppercase tracking-widest">Batch</p>
 <p class="text-[10px] font-bold text-gray-700 truncate"><?php echo $admission['batch_name'] ?? 'No Batch'; ?></p>
 </div>
 </div>

 <div class="flex items-center justify-between pt-1">
 <span class="text-[10px] font-bold text-gray-400"><?php echo date('d M, Y', strtotime($admission['admission_date'])); ?></span>
 <div class="flex items-center justify-end gap-2 pt-1">
 <a href="<?php echo url('admin/admissions/download?id=' . $admission['id']); ?>" target="_blank" class="h-9 w-9 flex items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 border border-emerald-100">
 <i class="fa-solid fa-file-pdf text-xs"></i>
 </a>
 <a href="<?php echo url('admin/admissions?edit_id=' . $admission['id']); ?>" class="h-9 w-9 flex items-center justify-center rounded-xl bg-amber-50 text-amber-500 border border-amber-100">
 <i class="fa-solid fa-pen-to-square text-xs"></i>
 </a>

 <button @click="confirmDelete(<?php echo $admission['id']; ?>)" class="h-9 w-9 flex items-center justify-center rounded-xl bg-red-50 text-red-600 border border-red-100 hover:bg-red-600 hover:text-white transition-all active:scale-95">
 <i class="fa-solid fa-trash-can text-xs"></i>
 </button>
 </div>
 </div>
 </div>
 <?php endforeach; ?>
 </div>

 <!-- Pagination (Basic static display) -->
 <?php if($paginatedAdmissions['last_page'] > 1): ?>
 <div class="px-5 py-4 flex justify-between items-center bg-white border border-gray-200 rounded-2xl">
 <span class="text-xs text-gray-500 font-medium">Page <?php echo $paginatedAdmissions['page']; ?> of <?php echo $paginatedAdmissions['last_page']; ?></span>
 <div class="flex gap-2">
 <?php if($paginatedAdmissions['page'] > 1): ?>
 <a href="?page=<?php echo $paginatedAdmissions['page'] - 1; ?>&search=<?php echo urlencode($params['search']); ?>&filter_course=<?php echo urlencode($params['filter_course']); ?>" class="px-3 py-1 bg-gray-50 border border-gray-200 rounded text-xs">Previous</a>
 <?php endif; ?>
 <?php if($paginatedAdmissions['page'] < $paginatedAdmissions['last_page']): ?>
 <a href="?page=<?php echo $paginatedAdmissions['page'] + 1; ?>&search=<?php echo urlencode($params['search']); ?>&filter_course=<?php echo urlencode($params['filter_course']); ?>" class="px-3 py-1 bg-gray-50 border border-gray-200 rounded text-xs">Next</a>
 <?php endif; ?>
 </div>
 </div>
 <?php endif; ?>
 </div>
 </main>

 <!-- Admission Modal -->
 <div x-show="showModal" 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="showModal = false; window.location.href='<?php echo url('admin/admissions'); ?>'"></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 lg:max-w-4xl sm:w-full border-none">
 <div class="bg-white px-6 py-6 sm:p-10">
 <div class="flex items-center justify-between mb-10 border-b border-gray-50 pb-6">
 <div>
 <h3 class="text-xl font-bold text-gray-900 leading-tight"><?php echo isset($editingAdmission) ? 'Update' : 'New' ?> Enrollment</h3>
 <p class="text-[11px] font-medium text-gray-400 mt-1 tracking-wide uppercase">Enroll students into courses and assign batches</p>
 </div>
 <button @click="showModal = false; window.location.href='<?php echo url('admin/admissions'); ?>'" type="button" class="h-12 w-12 flex items-center justify-center rounded-2xl bg-gray-50 text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-all border border-gray-200">
 <i class="fa-solid fa-xmark text-xl"></i>
 </button>
 </div>

 <form action="<?php echo url('admin/admissions/save'); ?>" method="POST" class="space-y-8">
 <?php if(isset($editingAdmission)): ?>
 <input type="hidden" name="id" value="<?php echo $editingAdmission['id']; ?>">
 <?php endif; ?>

 <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-12 gap-y-8">
 <!-- Left Column -->
 <div class="space-y-6">
 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Select Student</label>
 <div class="relative">
 <select name="student_id" x-model="student_id" required class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-semibold 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="">Choose a student...</option>
 <?php foreach($students as $st): ?>
 <option value="<?php echo $st['id']; ?>"><?php echo $st['name']; ?> (<?php echo $st['student_id']; ?>)</option>
 <?php endforeach; ?>
 </select>
 <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-gray-400 border-l border-gray-100 ml-2 pl-4">
 <i class="fa-solid fa-chevron-down text-[10px]"></i>
 </div>
 </div>
 </div>

 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-6">
 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest text-blue-600">Course</label>
 <div class="relative">
 <select name="course_id" x-model="course_id" required class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-semibold 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="">Choose a course...</option>
 <?php foreach($courses as $course): ?>
 <option value="<?php echo $course['id']; ?>"><?php echo $course['name']; ?></option>
 <?php endforeach; ?>
 </select>
 <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-gray-400 border-l border-gray-100 ml-2 pl-4">
 <i class="fa-solid fa-chevron-down text-[10px]"></i>
 </div>
 </div>
 </div>

 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest text-emerald-600">Batch (Optional)</label>
 <div class="relative">
 <select name="batch_id" x-model="batch_id" class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-semibold 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="">No Batch</option>
 <template x-for="batch in availableBatches" :key="batch.id">
 <option :value="String(batch.id)" x-text="batch.name"></option>
 </template>
 </select>
 <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-gray-400 border-l border-gray-100 ml-2 pl-4">
 <i class="fa-solid fa-chevron-down text-[10px]"></i>
 </div>
 </div>
 <div x-show="availableSeats !== null" class="mt-1 text-[9px] font-bold ml-1 uppercase" :class="availableSeats > 0 ? 'text-emerald-500' : 'text-red-500'" x-text="availableSeats + ' seats available'"></div>
 </div>
 </div>
 </div>

 <!-- Right Column -->
 <div class="space-y-6">
 <div class="grid grid-cols-2 gap-6">
 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Date</label>
 <input name="admission_date" type="date" value="<?php echo $editingAdmission['admission_date'] ?? date('Y-m-d'); ?>" required class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-semibold text-gray-900 focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none">
 </div>
 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Status</label>
 <div class="relative">
 <select name="status" class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-semibold 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="Active"<?php echo (isset($editingAdmission) && $editingAdmission['status'] == 'Active') ? 'selected' : ''; ?>>Active</option>
 <option value="Completed"<?php echo (isset($editingAdmission) && $editingAdmission['status'] == 'Completed') ? 'selected' : ''; ?>>Completed</option>
 <option value="Dropped"<?php echo (isset($editingAdmission) && $editingAdmission['status'] == 'Dropped') ? 'selected' : ''; ?>>Dropped</option>
 </select>
 <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-gray-400 border-l border-gray-100 ml-2 pl-4">
 <i class="fa-solid fa-chevron-down text-[10px]"></i>
 </div>
 </div>
 </div>
 </div>

 <div x-show="courseFees.length > 0" class="bg-gray-50/50 border border-gray-100 rounded-2xl p-4 space-y-3">
 <h4 class="text-[10px] font-bold text-gray-400 uppercase tracking-widest flex items-center gap-2">
 <i class="fa-solid fa-receipt text-blue-600/50"></i>
 Fee Breakdown
 </h4>
 <div class="space-y-2">
 <template x-for="fee in courseFees" :key="fee.fee_type">
 <div class="flex items-center justify-between gap-4 p-2 bg-white border border-gray-100 rounded-xl">
 <div class="flex flex-col">
 <span class="text-[10px] font-bold text-gray-700 leading-none" x-text="fee.fee_type"></span>
 <span class="text-[8px] font-medium text-gray-400 mt-1 uppercase" x-text="fee.frequency"></span>
 </div>
 <div class="relative w-24">
 <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-300 text-[9px] font-bold">₹</span>
 <input type="text" readonly :value="fee.amount" class="w-full pl-5 pr-2 py-1 bg-gray-50 border border-gray-100 rounded-lg text-[10px] font-bold text-gray-900 outline-none text-right">
 </div>
 </div>
 </template>
 </div>
 <div class="pt-2 border-t border-gray-100 flex items-center justify-between px-1">
 <span class="text-[9px] font-bold text-gray-500 uppercase tracking-widest">Initial Payable (One-time)</span>
 <span class="text-[11px] font-black text-blue-600" x-text="'₹' + initialPayment"></span>
 </div>
 </div>

 <?php if(!isset($editingAdmission)): ?>
 <div class="p-5 bg-blue-600/5 rounded-2xl border border-blue-600/10 space-y-5">
 <div class="flex items-center gap-3">
 <div class="h-8 w-8 rounded-lg bg-blue-600 text-white flex items-center justify-center">
 <i class="fa-solid fa-wallet text-xs"></i>
 </div>
 <h4 class="text-xs font-bold text-gray-900">Initial Payment</h4>
 </div>
 
 <div class="grid grid-cols-2 gap-4">
 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Amount Paid</label>
 <input name="initial_payment" type="number" step="0.01" 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" placeholder="0.00" :value="initialPayment">
 </div>
 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Method</label>
 <select name="payment_method" class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-semibold 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>
 </select>
 </div>
 </div>
 </div>
 <?php endif; ?>
 </div>
 </div>

 <div class="pt-8 flex flex-col sm:flex-row items-center justify-end gap-3 border-t border-gray-50">
 <button type="button" @click="showModal = false; window.location.href='<?php echo url('admin/admissions'); ?>'" class="w-full sm:w-auto px-6 py-2.5 bg-white border border-gray-200 text-gray-600 text-[11px] font-bold rounded-xl hover:bg-gray-50 transition-all">Discard</button>
 <button type="submit" class="w-full sm:w-auto px-6 py-2.5 bg-blue-600 text-white text-[11px] font-bold rounded-xl hover:bg-blue-700 transition-all flex items-center justify-center gap-2 active:scale-95 -600/20">
 <i class="fa-solid fa-check-double text-[10px]"></i>
 <span><?php echo isset($editingAdmission) ? 'Confirm Changes' : 'Record Admission' ?></span>
 </button>
 </div>
 </form>
 </div>
 </div>
 </div>
 </div>

 <!-- Delete Modal Overlay -->
 <div x-show="deleteModalOpen" 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="deleteModalOpen = 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-red-50 text-red-500 rounded-2xl flex items-center justify-center flex-none text-lg">
 <i class="fa-solid fa-trash-can"></i>
 </div>
 <div class="flex-1">
 <h3 class="text-lg font-black text-gray-900">Remove Admission?</h3>
 <p class="text-[11px] font-medium text-gray-400 leading-relaxed mt-1">Are you sure you want to remove this enrollment record? All linked fee records will remain in history.</p>
 <div class="flex justify-end gap-2 mt-6">
 <button @click="deleteModalOpen = 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/admissions/delete'); ?>?id=' + deleteId" class="px-5 py-2.5 bg-red-500 text-white text-[10px] font-bold rounded-xl hover:bg-red-600 transition-all active:scale-95 flex items-center justify-center">Yes, Delete</a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

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

<script>
 document.addEventListener('alpine:init', () => {
 Alpine.data('admissionForm', () => {
     const allBatches = <?php echo $batchesJson; ?>;
     const allCourseFees = <?php echo $courseFeesJson; ?>;
     const enrolledCounts = <?php echo $enrolledJson; ?>;
     const initialCourseId = '<?php echo $editingAdmission['course_id'] ?? ($preSelectedStudent ? '' : ''); ?>';
     const initialBatchId = '<?php echo $editingAdmission['batch_id'] ?? ''; ?>';
     
     // Pre-filter data for initial state
     const initialBatches = initialCourseId ? allBatches.filter(b => String(b.course_id) === String(initialCourseId)) : [];
     const initialFees = initialCourseId ? allCourseFees.filter(f => String(f.course_id) === String(initialCourseId)) : [];
     const initialPayable = initialFees.reduce((sum, fee) => {
         return fee.frequency === 'One-time' ? sum + parseFloat(fee.amount) : sum;
     }, 0);

     return {
         showModal: <?php echo isset($editingAdmission) || isset($preSelectedStudent) ? 'true' : 'false'; ?>,
         deleteModalOpen: false,
         deleteId: null,
         
         // Form Data
         student_id: '<?php echo $editingAdmission['student_id'] ?? ($preSelectedStudent ?? ''); ?>',
         course_id: initialCourseId,
         batch_id: '', // Start empty and restore in init()
         
         // Lookups
         allBatches: allBatches,
         allCourseFees: allCourseFees,
         enrolledCounts: enrolledCounts,
         
         // State
         availableBatches: initialBatches,
         courseFees: initialFees,
         initialPayment: initialPayable,
         availableSeats: null,
         
         init() {
             // Populate dependent data immediately
             this.updateCourseData();

             // Delay setting the batch_id to ensure options are rendered
             if (initialBatchId) {
                 this.$nextTick(() => {
                     this.batch_id = String(initialBatchId);
                     this.updateBatchSeats();
                 });
             }
         
             this.$watch('course_id', (value, oldValue) => {
                 if (oldValue && String(value) !== String(oldValue)) {
                     this.batch_id = '';
                 }
                 this.updateCourseData();
             });
             
             this.$watch('batch_id', value => {
                 this.updateBatchSeats();
             });
         },
         
         updateCourseData() {
             // Filter batches and fees for the selected course
             // Use loose equality or String() for ID comparison to handle potential type differences
             this.availableBatches = [...this.allBatches.filter(b => String(b.course_id) === String(this.course_id))];
             this.courseFees = [...this.allCourseFees.filter(f => String(f.course_id) === String(this.course_id))];
             
             // Calculate one-time initial payment
             this.initialPayment = this.courseFees.reduce((sum, fee) => {
                 return fee.frequency === 'One-time' ? sum + parseFloat(fee.amount) : sum;
             }, 0);
             
             this.updateBatchSeats();
         },
         
         updateBatchSeats() {
             if (!this.batch_id) {
                 this.availableSeats = null;
                 return;
             }
             
             let batch = this.allBatches.find(b => String(b.id) === String(this.batch_id));
             if (batch) {
                 let enrolledObj = this.enrolledCounts.find(e => String(e.batch_id) === String(this.batch_id));
                 let enrolled = enrolledObj ? parseInt(enrolledObj.enrolled) : 0;
                 this.availableSeats = Math.max(0, parseInt(batch.capacity) - enrolled);
             }
         },

         confirmDelete(id) {
             this.deleteId = id;
             this.deleteModalOpen = true;
         }
     };
 });
 });
</script>
