<?php require_once __DIR__ . '/layouts/header.php'; ?>
<?php require_once __DIR__ . '/layouts/sidebar.php'; ?>

<div class="flex-1 flex flex-col min-w-0 h-full overflow-hidden" x-data="{ 
 showModal: false, 
 isEditing: false,
 deleteModalOpen: false,
 deleteId: null,
 id: '',
 name: '',
 description: '',
 default_amount: '',
 frequency: 'One-time',
 is_active: true,
 is_mandatory: false,
 openAddModal() {
 this.isEditing = false;
 this.id = '';
 this.name = '';
 this.description = '';
 this.default_amount = '';
 this.frequency = 'One-time';
 this.is_active = true;
 this.is_mandatory = false;
 this.showModal = true;
 },
 editHead(head) {
 this.isEditing = true;
 this.id = head.id;
 this.name = head.name;
 this.description = head.description;
 this.default_amount = head.default_amount;
 this.frequency = head.frequency || 'One-time';
 this.is_active = head.is_active == 1;
 this.is_mandatory = head.is_mandatory == 1;
 this.showModal = true;
 },
 confirmDelete(id) {
 this.deleteId = id;
 this.deleteModalOpen = true;
 }
}">
 <?php require_once __DIR__ . '/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">Fee Heads Master</h1>
 <p class="text-[10px] sm:text-xs font-medium text-gray-400 mt-0.5">Manage global fee categories and default amounts</p>
 </div>
 <button @click="openAddModal()" class="w-full sm:w-auto px-6 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">
 <i class="fa-solid fa-plus text-sm"></i>
 <span>Add New Fee Head</span>
 </button>
 </div>

 <!-- Search and Filters -->
 <div class="bg-white border border-gray-200 rounded-2xl p-4 flex flex-col sm:flex-row gap-4 items-center">
 <form action="<?php echo url('admin/fee-heads'); ?>" method="GET" class="w-full flex flex-col sm:flex-row gap-4 items-center">
 <div class="relative w-full sm:flex-1">
 <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-2.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 transition-all outline-none" placeholder="Search fee heads...">
 </div>
 
 <div class="flex items-center gap-3 w-full sm:w-auto">
 <div class="relative w-full sm:w-40">
 <select name="is_active" onchange="this.form.submit()" class="w-full px-4 py-2.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 transition-all outline-none appearance-none cursor-pointer">
 <option value="">All Status</option>
 <option value="1"<?php echo $params['is_active'] === '1' ? 'selected' : ''; ?>>Active</option>
 <option value="0"<?php echo $params['is_active'] === '0' ? 'selected' : ''; ?>>Inactive</option>
 </select>
 <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400 border-l border-gray-100 ml-2 pl-2">
 <i class="fa-solid fa-chevron-down text-[10px]"></i>
 </div>
 </div>
 
 <div class="relative w-full sm:w-40">
 <select name="is_mandatory" onchange="this.form.submit()" class="w-full px-4 py-2.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 transition-all outline-none appearance-none cursor-pointer">
 <option value="">All Types</option>
 <option value="1"<?php echo $params['is_mandatory'] === '1' ? 'selected' : ''; ?>>Mandatory</option>
 <option value="0"<?php echo $params['is_mandatory'] === '0' ? 'selected' : ''; ?>>Optional</option>
 </select>
 <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400 border-l border-gray-100 ml-2 pl-2">
 <i class="fa-solid fa-chevron-down text-[10px]"></i>
 </div>
 </div>
 </div>
 </form>
 </div>

 <!-- 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">Fee Head Details</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Amount & Frequency</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Settings</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest 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($feeHeads)): ?>
 <tr>
 <td colspan="6" class="px-6 py-12 text-center text-xs font-bold text-gray-400">No fee heads found</td>
 </tr>
 <?php else: ?>
 <?php foreach($feeHeads as $index => $head): ?>
 <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-4 border-l border-gray-100/50">
 <div class="flex flex-col">
 <span class="text-xs font-semibold text-gray-900 group-hover:text-blue-600 transition-colors"><?php echo $head['name']; ?></span>
 <span class="text-[10px] font-medium text-gray-400 mt-0.5 line-clamp-1"><?php echo $head['description'] ?: 'No description'; ?></span>
 </div>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <div class="flex flex-col">
 <span class="text-xs font-bold text-gray-900">
 <?php echo $head['default_amount'] ? ($siteSettings['currency_symbol'] ?? '₹') . number_format($head['default_amount'], 2) : 'N/A'; ?>
 </span>
 <span class="text-[9px] font-bold text-blue-600 uppercase mt-0.5"><?php echo $head['frequency'] ?? 'One-time'; ?></span>
 </div>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <?php if($head['is_mandatory']): ?>
 <span class="px-2 py-0.5 rounded-full text-[9px] font-bold bg-amber-50 text-amber-600 border border-amber-100">Mandatory</span>
 <?php else: ?>
 <span class="px-2 py-0.5 rounded-full text-[9px] font-bold bg-gray-50 text-gray-400 border border-gray-100">Optional</span>
 <?php endif; ?>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <a href="<?php echo url('admin/fee-heads/toggle-status?id=' . $head['id']); ?>" class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none <?php echo $head['is_active'] ? 'bg-blue-600' : 'bg-gray-200'; ?>">
 <span class="inline-block h-3 w-3 transform rounded-full bg-white transition-transform <?php echo $head['is_active'] ? 'translate-x-5' : 'translate-x-1'; ?>"></span>
 </a>
 </td>
 <td class="px-6 py-4 text-right border-l border-gray-100/50">
 <div class="flex items-center justify-end gap-2">
 <button @click="editHead(<?php echo htmlspecialchars(json_encode($head)); ?>)" 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 active:scale-95">
 <i class="fa-solid fa-pen-to-square text-xs"></i>
 </button>
 <button @click="confirmDelete(<?php echo $head['id']; ?>)" class="h-8 w-8 flex items-center justify-center rounded-lg bg-red-50 text-red-500 hover:bg-red-500 hover:text-white transition-all border border-red-100 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($feeHeads as $index => $head): ?>
 <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 text-[9px] font-bold text-gray-400">
 #<?php echo str_pad($index + 1, 2, '0', STR_PAD_LEFT); ?>
 </div>
 <div class="flex items-start justify-between">
 <div class="flex flex-col pr-8">
 <span class="text-sm font-bold text-gray-900 leading-none"><?php echo $head['name']; ?></span>
 <span class="text-[10px] font-medium text-gray-400 mt-2 line-clamp-2"><?php echo $head['description'] ?: 'No description'; ?></span>
 </div>
 <a href="<?php echo url('admin/fee-heads/toggle-status?id=' . $head['id']); ?>" class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none <?php echo $head['is_active'] ? 'bg-blue-600' : 'bg-gray-200'; ?>">
 <span class="inline-block h-3 w-3 transform rounded-full bg-white transition-transform <?php echo $head['is_active'] ? 'translate-x-5' : 'translate-x-1'; ?>"></span>
 </a>
 </div>

 <div class="grid grid-cols-2 gap-4 py-3 border-y border-gray-50">
 <div>
 <p class="text-[8px] font-bold text-gray-400 uppercase tracking-widest">Amount & Frequency</p>
 <p class="text-xs font-bold text-gray-900 mt-1"><?php echo $head['default_amount'] ? ($siteSettings['currency_symbol'] ?? '₹') . number_format($head['default_amount'], 2) : 'N/A'; ?></p>
 <p class="text-[9px] font-bold text-blue-600 uppercase mt-0.5"><?php echo $head['frequency'] ?? 'One-time'; ?></p>
 </div>
 <div>
 <p class="text-[8px] font-bold text-gray-400 uppercase tracking-widest">Requirement</p>
 <?php if($head['is_mandatory']): ?>
 <span class="inline-block mt-1 px-2 py-0.5 rounded-full text-[9px] font-bold bg-amber-50 text-amber-600 border border-amber-100">Mandatory</span>
 <?php else: ?>
 <span class="inline-block mt-1 px-2 py-0.5 rounded-full text-[9px] font-bold bg-gray-50 text-gray-400 border border-gray-100">Optional</span>
 <?php endif; ?>
 </div>
 </div>

 <div class="flex items-center justify-end gap-2 pt-1">
 <button @click="editHead(<?php echo htmlspecialchars(json_encode($head)); ?>)" class="h-10 w-10 flex items-center justify-center rounded-xl bg-blue-600/10 text-blue-600 border border-blue-600/20 active:scale-95">
 <i class="fa-solid fa-pen-to-square text-xs"></i>
 </button>
 <button @click="confirmDelete(<?php echo $head['id']; ?>)" class="h-10 w-10 flex items-center justify-center rounded-xl bg-red-50 text-red-500 border border-red-100 active:scale-95">
 <i class="fa-solid fa-trash-can text-xs"></i>
 </button>
 </div>
 </div>
 <?php endforeach; ?>
 </div>
 </div>
 </main>

 <!-- Modal (Add/Edit) -->
 <div x-show="showModal"
 class="fixed inset-0 z-[60] overflow-y-auto"
 x-cloak>
 <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
 <div x-show="showModal"
 x-transition:enter="ease-out duration-300"
 x-transition:enter-start="opacity-0"
 x-transition:enter-end="opacity-100"
 x-transition:leave="ease-in duration-200"
 x-transition:leave-start="opacity-100"
 x-transition:leave-end="opacity-0"
 @click="showModal = false"
 class="fixed inset-0 transition-opacity bg-gray-900/40 backdrop-blur-sm"></div>

 <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
 <div x-show="showModal"
 x-transition:enter="ease-out duration-300"
 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
 x-transition:leave="ease-in duration-200"
 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 class="inline-block w-full max-w-xl overflow-hidden text-left align-bottom transition-all transform bg-white rounded-3xl sm:my-8 sm:align-middle">
 
 <div class="px-6 py-6 sm:px-10 border-b border-gray-100">
 <div class="flex items-center justify-between">
 <h3 class="text-lg font-bold text-gray-900" x-text="isEditing ? 'Edit Fee Head' : 'Add New Fee Head'"></h3>
 <button @click="showModal = false" 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-100 active:scale-95">
 <i class="fa-solid fa-xmark text-lg"></i>
 </button>
 </div>
 </div>

 <form action="<?php echo url('admin/fee-heads/save'); ?>" method="POST" class="p-6 sm:p-10 space-y-6">
 <input type="hidden" name="id" x-model="id">
 <div class="space-y-1.5">
 <label class="text-[9px] font-semibold text-gray-400 ml-0.5 uppercase tracking-widest">Fee Head Name</label>
 <input name="name" x-model="name" type="text" required 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" placeholder="e.g. Admission Fee">
 </div>

 <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 <div class="space-y-1.5">
 <label class="text-[9px] font-semibold text-gray-400 ml-0.5 uppercase tracking-widest">Default Amount</label>
 <div class="relative group">
 <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-xs font-bold"><?php echo $siteSettings['currency_symbol'] ?? '₹'; ?></span>
 <input name="default_amount" x-model="default_amount" type="number" step="0.01" class="w-full pl-8 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="0.00">
 </div>
 </div>

 <div class="space-y-1.5">
 <label class="text-[9px] font-semibold text-gray-400 ml-0.5 uppercase tracking-widest">Fee Frequency</label>
 <div class="relative">
 <select name="frequency" x-model="frequency" 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="One-time">One-time</option>
 <option value="Monthly">Monthly</option>
 <option value="Yearly">Yearly</option>
 </select>
 <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400 border-l border-gray-100 ml-2 pl-2">
 <i class="fa-solid fa-chevron-down text-[10px]"></i>
 </div>
 </div>
 </div>
 </div>

 <div class="space-y-1.5">
 <label class="text-[9px] font-semibold text-gray-400 ml-0.5 uppercase tracking-widest">Description</label>
 <textarea name="description" x-model="description" rows="2" 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 resize-none" placeholder="Short description..."></textarea>
 </div>

 <div class="grid grid-cols-2 gap-4">
 <div class="flex items-center justify-between p-3 border border-gray-200 rounded-xl bg-gray-50/30">
 <span class="text-[10px] font-bold text-gray-600 uppercase tracking-widest">Active</span>
 <div class="relative inline-flex items-center cursor-pointer">
 <input type="checkbox" name="is_active" x-model="is_active" class="sr-only peer">
 <div @click="is_active = !is_active" class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
 </div>
 </div>
 <div class="flex items-center justify-between p-3 border border-gray-200 rounded-xl bg-gray-50/30">
 <span class="text-[10px] font-bold text-gray-600 uppercase tracking-widest">Mandatory</span>
 <div class="relative inline-flex items-center cursor-pointer">
 <input type="checkbox" name="is_mandatory" x-model="is_mandatory" class="sr-only peer">
 <div @click="is_mandatory = !is_mandatory" class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
 </div>
 </div>
 </div>

 <div class="pt-6 flex items-center justify-end gap-3 border-t border-gray-50">
 <button type="button" @click="showModal = false" class="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 active:scale-95">Cancel</button>
 <button type="submit" class="px-8 py-2.5 bg-blue-600 text-white text-[11px] font-bold rounded-xl hover:bg-blue-700 transition-all active:scale-95 -600/20">
 <span x-text="isEditing ? 'Update Fee Head' : 'Create Fee Head'"></span>
 </button>
 </div>
 </form>
 </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 Fee Head?</h3>
 <p class="text-[11px] font-medium text-gray-400 leading-relaxed mt-1">Are you sure you want to remove this fee head? This will not affect existing invoices but it won't be available for new courses or admissions.</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/fee-heads/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 __DIR__ . '/layouts/footer.php'; ?>
