<?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='{ 
 showModal: <?php echo isset($editingCourse) ? "true" : "false"; ?>,
 deleteModalOpen: false,
 deleteId: null,
 fees: <?php echo isset($editingCourse) ? json_encode($editingCourse["fees"]) : "[{\"fee_type\":\"Admission Fee\",\"amount\":0,\"frequency\":\"One-time\"}]"; ?>,
 addFee() {
 this.fees.push({fee_type:"", amount: 0, frequency:"One-time"});
 },
 removeFee(index) {
 this.fees.splice(index, 1);
 },
 confirmDelete(id) {
 this.deleteId = id;
 this.deleteModalOpen = true;
 },
 handleHeadChange(index, event) {
 const option = event.target.options[event.target.selectedIndex];
 if (option.dataset.amount) this.fees[index].amount = option.dataset.amount;
 if (option.dataset.frequency) this.fees[index].frequency = option.dataset.frequency;
 }
}'>
 <?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">
 <!-- Page 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">Courses</h1>
 <p class="text-[10px] sm:text-xs font-medium text-gray-400 mt-0.5">Define programs and how the fees work</p>
 </div>
 <button @click="showModal = true" class="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 -600/20 active:scale-95">
 <i class="fa-solid fa-plus text-sm"></i>
 <span>Add New Course</span>
 </button>
 </div>

 <!-- Filters & Search -->
 <form action="<?php echo url('admin/courses'); ?>" method="GET" class="bg-white border border-gray-200 rounded-2xl p-4 flex flex-col sm:flex-row gap-4 items-center">
 <div class="relative w-full sm:w-96">
 <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
 <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 courses or category...">
 </div>
 
 <div class="flex items-center gap-3 w-full sm:w-auto">
 <div class="relative w-full sm:w-48">
 <select name="filter_category" 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 Categories</option>
 <?php foreach($categories as $cat): ?>
 <option value="<?php echo $cat['name']; ?>"<?php echo $params['filter_category'] === $cat['name'] ? 'selected' : ''; ?>><?php echo $cat['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 border-l border-gray-100/50">Course Details</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Fee Structure</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 border-l border-gray-100/50">Actions</th>
 </tr>
 </thead>
 <tbody class="divide-y divide-gray-100">
 <?php if(empty($courses)): ?>
 <tr>
 <td colspan="5" class="px-6 py-12 text-center">
 <div class="flex flex-col items-center">
 <i class="fa-solid fa-layer-group text-gray-200 text-4xl mb-4"></i>
 <p class="text-xs font-bold text-gray-400">No courses found</p>
 </div>
 </td>
 </tr>
 <?php else: ?>
 <?php foreach($courses as $index => $course): ?>
 <tr class="hover:bg-gray-50/30 transition-colors group">
 <td class="px-6 py-4 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-6 py-5 border-l border-gray-100/50">
 <div class="flex items-center gap-4">
 <div class="h-10 w-10 bg-blue-600/10 rounded-xl flex items-center justify-center text-blue-600 flex-none">
 <i class="fa-solid fa-book-open text-sm"></i>
 </div>
 <div class="flex flex-col">
 <span class="text-xs font-bold text-gray-900 group-hover:text-blue-600 transition-colors"><?php echo $course['name']; ?></span>
 <div class="flex items-center gap-2 mt-0.5">
 <span class="text-[10px] font-medium text-gray-400"><?php echo $course['category'] ?: 'General'; ?></span>
 <span class="h-1 w-1 rounded-full bg-gray-300"></span>
 <span class="text-[10px] font-bold text-blue-600"><?php echo $course['duration_months']; ?> Months</span>
 </div>
 </div>
 </div>
 </td>
 <td class="px-6 py-5 border-l border-gray-100/50">
 <div class="flex flex-wrap gap-2">
 <?php foreach($course['fees'] as $fee): ?>
 <div class="flex flex-col bg-gray-50 border border-gray-200 rounded-lg px-2 py-1">
 <span class="text-[9px] font-bold text-gray-900"><?php echo $fee['fee_type']; ?></span>
 <div class="flex items-center gap-1.5 mt-0.5">
 <span class="text-[9px] font-bold text-blue-600">₹<?php echo number_format($fee['amount']); ?></span>
 <span class="text-[8px] font-medium text-gray-400 uppercase tracking-tighter"><?php echo $fee['frequency']; ?></span>
 </div>
 </div>
 <?php endforeach; ?>
 </div>
 </td>
 <td class="px-6 py-5 text-center border-l border-gray-100/50">
 <span class="px-2 py-0.5 rounded-full text-[9px] font-bold bg-emerald-50 text-emerald-500 border border-emerald-100"><?php echo $course['status']; ?></span>
 </td>
 <td class="px-6 py-5 text-right border-l border-gray-100/50">
 <div class="flex items-center justify-end gap-2">
 <a href="<?php echo url('/admin/courses?edit_id=' . $course['id']); ?>" class="h-8 w-8 flex items-center justify-center rounded-lg bg-blue-600/10 text-blue-600 hover:bg-blue-600 hover:text-white transition-all border border-blue-600/20">
 <i class="fa-solid fa-pen-to-square text-xs"></i>
 </a>
 <button @click="confirmDelete(<?php echo $course['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>
 </td>
 </tr>
 <?php endforeach; ?>
 <?php endif; ?>
 </tbody>
 </table>
 </div>
 </div>

 <!-- Mobile View (Cards) -->
 <div class="md:hidden space-y-4">
 <?php foreach($courses as $index => $course): ?>
 <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 justify-between">
 <div class="flex items-center gap-3">
 <div class="h-10 w-10 bg-blue-600/10 rounded-xl flex items-center justify-center text-blue-600">
 <i class="fa-solid fa-book-open"></i>
 </div>
 <div class="flex flex-col">
 <span class="text-sm font-bold text-gray-900 leading-none"><?php echo $course['name']; ?></span>
 <span class="text-[10px] font-medium text-gray-400 mt-1"><?php echo $course['category'] ?: 'General'; ?></span>
 </div>
 </div>
 <span class="text-[9px] font-bold px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-500 border border-emerald-100"><?php echo $course['status']; ?></span>
 </div>

 <div class="space-y-3 border-t border-gray-50 pt-3">
 <p class="text-[8px] font-bold text-gray-400 uppercase tracking-widest mb-2">Fee Structure</p>
 <div class="flex flex-col gap-2">
 <?php foreach($course['fees'] as $fee): ?>
 <div class="flex items-center justify-between w-full px-3 py-2 bg-gray-50/50 rounded-xl border border-gray-100">
 <div class="flex flex-col">
 <span class="text-[10px] font-bold text-gray-700 leading-none"><?php echo $fee['fee_type']; ?></span>
 <span class="text-[8px] font-medium text-gray-400 uppercase tracking-tighter mt-1"><?php echo $fee['frequency']; ?></span>
 </div>
 <span class="text-[10px] font-bold text-gray-900">₹<?php echo number_format($fee['amount']); ?></span>
 </div>
 <?php endforeach; ?>
 </div>
 </div>

 <div class="flex items-center justify-end gap-2 pt-2 border-t border-gray-50">
 <a href="<?php echo url('/admin/courses?edit_id=' . $course['id']); ?>" class="h-10 w-10 flex items-center justify-center rounded-xl bg-blue-600/10 text-blue-600 border border-blue-600/20">
 <i class="fa-solid fa-pen-to-square text-xs"></i>
 </a>
 <button @click="confirmDelete(<?php echo $course['id']; ?>)" class="h-10 w-10 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>
 <?php endforeach; ?>
 </div>
 </div>
 </main>

 <!-- Create/Edit 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/courses'); ?>'"></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($editingCourse) ? 'Update' : 'Configure' ?> Course</h3>
 <p class="text-[11px] font-medium text-gray-400 mt-1 tracking-wide uppercase">Define program details and fee structures</p>
 </div>
 <button @click="showModal = false; window.location.href='<?php echo url('admin/courses'); ?>'" 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/courses/save'); ?>" method="POST" class="space-y-8">
 <?php if(isset($editingCourse)): ?>
 <input type="hidden" name="id" value="<?php echo $editingCourse['id']; ?>">
 <?php endif; ?>

 <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-12 gap-y-8">
 <!-- Left Column: Primary Details -->
 <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">Course Name</label>
 <input name="name" type="text" value="<?php echo $editingCourse['name'] ?? ''; ?>" 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" placeholder="e.g. Physics Pro">
 </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">Category</label>
 <select name="category" 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="">Select Category</option>
 <?php foreach($categories as $cat): ?>
 <option value="<?php echo $cat['name']; ?>"<?php echo (isset($editingCourse) && $editingCourse['category'] == $cat['name']) ? 'selected' : ''; ?>><?php echo $cat['name']; ?></option>
 <?php endforeach; ?>
 </select>
 </div>
 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Duration (Months)</label>
 <select name="duration_months" 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="">Select Duration</option>
 <?php foreach([1, 3, 6, 9, 12, 18, 24] as $months): ?>
 <option value="<?php echo $months; ?>"<?php echo (isset($editingCourse) && $editingCourse['duration_months'] == $months) ? 'selected' : ''; ?>><?php echo $months; ?> Months</option>
 <?php endforeach; ?>
 </select>
 </div>
 </div>
 </div>

 <!-- Right Column: Fees Module -->
 <div class="space-y-4">
 <div class="flex items-center justify-between">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Fee Structure</label>
 <button type="button" @click="addFee" class="text-[10px] font-bold text-blue-600 hover:underline uppercase">+ Add Fee Head</button>
 </div>
 
 <div class="space-y-3 max-h-64 overflow-y-auto pr-1 custom-scrollbar">
 <template x-for="(fee, index) in fees" :key="index">
 <div class="space-y-1">
 <div class="flex flex-col gap-2 bg-gray-50/50 p-3 rounded-xl border border-gray-200">
 <div class="flex items-center gap-2">
 <div class="flex-1">
 <select 
 :name="'fees['+index+'][fee_type]'"
 x-model="fee.fee_type"
 @change="handleHeadChange(index, $event)"
 required 
 class="w-full px-3 py-2 bg-white border border-gray-200 rounded-lg text-[10px] font-medium text-gray-900 focus:ring-2 focus:ring-blue-600/10 focus:border-blue-600 transition-all outline-none appearance-none cursor-pointer"
 >
 <option value="">Select Head</option>
 <?php foreach($feeHeads as $head): ?>
 <option value="<?php echo $head['name']; ?>" data-amount="<?php echo $head['default_amount']; ?>" data-frequency="<?php echo $head['frequency']; ?>"><?php echo $head['name']; ?></option>
 <?php endforeach; ?>
 </select>
 </div>
 <button type="button" @click="removeFee(index)" class="text-gray-300 hover:text-red-500 transition-colors p-1">
 <i class="fa-solid fa-trash-can text-xs"></i>
 </button>
 </div>
 <div class="flex items-center gap-3">
 <div class="flex-1">
 <select :name="'fees['+index+'][frequency]'" x-model="fee.frequency" class="w-full px-3 py-2 bg-white border border-gray-200 rounded-lg text-[10px] font-medium text-gray-900 focus:ring-2 focus:ring-blue-600/10 focus:border-blue-600 transition-all outline-none appearance-none">
 <option value="One-time">One-time</option>
 <option value="Monthly">Monthly</option>
 <option value="Yearly">Yearly</option>
 </select>
 </div>
 <div class="w-32 relative">
 <span class="absolute left-3 top-1/2 -translate-y-1/2 text-[10px] font-bold text-gray-400">₹</span>
 <input :name="'fees['+index+'][amount]'" type="number" x-model="fee.amount" required class="w-full pl-6 pr-3 py-2 bg-white border border-gray-200 rounded-lg text-[10px] font-medium text-gray-900 focus:ring-2 focus:ring-blue-600/10 focus:border-blue-600 transition-all outline-none" placeholder="Amount">
 </div>
 </div>
 </div>
 </div>
 </template>
 </div>
 </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/courses'); ?>'" class="w-full sm:w-auto px-8 py-3.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-8 py-3.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($editingCourse) ? 'Confirm Changes' : 'Initialize Course' ?></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">Delete Course?</h3>
 <p class="text-[11px] font-medium text-gray-400 leading-relaxed mt-1">This action is permanent. Any students enrolled in this course might lose access to their curriculum data.</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/courses/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'; ?>
