<?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="{ showPasswordModal: false, showFreezeModal: false }">
 <?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 sm:space-y-6 pb-12">
 <!-- Header & Quick Stats -->
 <div class="flex flex-col gap-4 sm:gap-6">
 <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-5 px-1">
 <div class="flex items-center gap-3 sm:gap-4">
 <a href="<?php echo url('admin/students'); ?>" class="h-10 w-10 sm:h-12 sm:w-12 flex items-center justify-center rounded-xl sm:rounded-2xl bg-white border border-gray-200 text-gray-400 hover:text-blue-600 hover:border-blue-600 transition-all active:scale-95">
 <i class="fa-solid fa-arrow-left"></i>
 </a>
 <div class="flex items-center gap-3 sm:gap-4">
 <?php if($student['photo']): ?>
 <div class="relative group">
 <img src="<?php echo url($student['photo']); ?>" class="h-12 w-12 sm:h-16 sm:w-16 rounded-2xl object-cover border-2 border-white">
 <div class="absolute inset-0 rounded-2xl bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
 </div>
 <?php else: ?>
 <div class="h-12 w-12 sm:h-16 sm:w-16 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white text-lg sm:text-xl font-bold">
 <?php echo substr($student['name'], 0, 1); ?>
 </div>
 <?php endif; ?>
 <div>
 <h1 class="text-lg sm:text-2xl font-bold text-gray-900 leading-tight"><?php echo $student['name']; ?></h1>
 <p class="text-[9px] sm:text-xs font-bold text-gray-400 uppercase tracking-widest mt-0.5">
 ID: <?php echo $student['student_id']; ?> <span class="mx-1.5 opacity-30">•</span> <?php echo date('M Y', strtotime($student['created_at'])); ?>
 </p>
 </div>
 </div>
 </div>
 
 <!-- Mobile Optimized Actions -->
 <div class="grid grid-cols-2 sm:flex items-center gap-2 sm:gap-3">
 <button @click="showFreezeModal = true" class="col-span-1 sm:flex-none justify-center px-4 py-3.5 sm:py-3 <?php echo $student['status'] === 'Frozen' ? 'bg-emerald-600 text-white' : 'bg-amber-500 text-white'; ?> text-[10px] font-bold rounded-2xl sm:rounded-xl hover:opacity-90 transition-all flex items-center gap-2 active:scale-[0.98]">
 <i class="fa-solid <?php echo $student['status'] === 'Frozen' ? 'fa-play' : 'fa-snowflake'; ?>"></i>
 <span class="truncate"><?php echo $student['status'] === 'Frozen' ? 'Unfreeze' : 'Freeze'; ?></span>
 </button>
 <a href="<?php echo url('admin/students/edit?id=' . $student['id']); ?>" class="col-span-1 sm:flex-none justify-center px-4 py-3.5 sm:py-3 bg-blue-600 text-white text-[10px] font-bold rounded-2xl sm:rounded-xl hover:bg-blue-700 transition-all flex items-center gap-2 active:scale-[0.98]">
 <i class="fa-solid fa-pen-to-square"></i>
 <span class="truncate">Edit Profile</span>
 </a>
 <button @click="showPasswordModal = true" class="col-span-2 sm:flex-none justify-center px-6 py-3.5 sm:py-3 bg-red-600 text-white text-[10px] font-bold rounded-2xl sm:rounded-xl hover:bg-red-700 transition-all flex items-center gap-2 active:scale-[0.98] -100">
 <i class="fa-solid fa-shield-halved"></i>
 Reset Password
 </button>
 </div>
 </div>

 <!-- Quick Stats Grid -->
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
 <!-- Stat 1 -->
 <div class="bg-white border border-gray-100 rounded-3xl p-5 group hover:border-emerald-200 transition-all">
 <div class="flex items-center gap-4">
 <div class="h-12 w-12 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center text-xl group-hover:bg-emerald-600 group-hover:text-white transition-all">
 <i class="fa-solid fa-indian-rupee-sign"></i>
 </div>
 <div>
 <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Total Paid</p>
 <p class="text-xl font-black text-emerald-600">₹<?php echo number_format($totalPaid, 0); ?></p>
 </div>
 </div>
 </div>
 <!-- Stat 2 -->
 <div class="bg-white border border-gray-100 rounded-3xl p-5 group hover:border-red-200 transition-all">
 <div class="flex items-center gap-4">
 <div class="h-12 w-12 rounded-2xl bg-red-50 text-red-600 flex items-center justify-center text-xl group-hover:bg-red-500 group-hover:text-white transition-all">
 <i class="fa-solid fa-clock-rotate-left"></i>
 </div>
 <div>
 <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Total Due</p>
 <p class="text-xl font-black text-red-600">₹<?php echo number_format($totalDue, 0); ?></p>
 </div>
 </div>
 </div>
 <!-- Stat 3 -->
 <div class="bg-white border border-gray-100 rounded-3xl p-5 group hover:border-blue-300 transition-all">
 <div class="flex items-center gap-4">
 <div class="h-12 w-12 rounded-2xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl group-hover:bg-blue-500 group-hover:text-white transition-all">
 <i class="fa-solid fa-file-invoice"></i>
 </div>
 <div>
 <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Invoices</p>
 <p class="text-xl font-black text-gray-900"><?php echo $invoiceCount; ?></p>
 </div>
 </div>
 </div>
 </div>
 </div>

 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
 <!-- Sidebar Info -->
 <div class="space-y-6">
 <!-- Basic Info -->
 <div class="bg-white border border-gray-200 rounded-3xl overflow-hidden">
 <div class="px-6 py-4 border-b border-gray-50 bg-gray-50/30 flex items-center justify-between">
 <h2 class="text-[10px] font-bold text-gray-900 uppercase tracking-widest">Student Info</h2>
 <span class="px-2.5 py-1 rounded-lg text-[9px] font-black uppercase <?php echo $student['status'] === 'Active' ? 'bg-emerald-100 text-emerald-700' : ($student['status'] === 'Frozen' ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-700'); ?>"><?php echo $student['status']; ?></span>
 </div>
 <div class="p-6 space-y-5">
 <div class="flex items-center justify-between sm:block sm:space-y-1">
 <p class="text-[9px] font-bold text-gray-400 uppercase tracking-widest">Phone</p>
 <p class="text-xs font-bold text-gray-700"><?php echo $student['phone']; ?></p>
 </div>
 <div class="flex items-center justify-between sm:block sm:space-y-1">
 <p class="text-[9px] font-bold text-gray-400 uppercase tracking-widest text-right sm:text-left">Email</p>
 <p class="text-xs font-bold text-gray-700 lowercase"><?php echo $student['email'] ?: 'N/A'; ?></p>
 </div>
 <?php if($student['alt_phone']): ?>
 <div class="flex items-center justify-between sm:block sm:space-y-1">
 <p class="text-[9px] font-bold text-gray-400 uppercase tracking-widest text-right sm:text-left">Alt Phone</p>
 <p class="text-xs font-bold text-gray-700"><?php echo $student['alt_phone']; ?></p>
 </div>
 <?php endif; ?>
 <div class="space-y-1.5 pt-4 border-t border-gray-50">
 <p class="text-[9px] font-bold text-gray-400 uppercase tracking-widest">Address</p>
 <p class="text-xs font-medium text-gray-600 leading-relaxed"><?php echo $student['address'] ?: 'Not provided'; ?></p>
 </div>
 </div>
 </div>

 <!-- Guardian Info -->
 <div class="bg-white border border-gray-200 rounded-3xl overflow-hidden">
 <div class="px-6 py-4 border-b border-gray-50 bg-gray-50/30">
 <h2 class="text-[10px] font-bold text-gray-900 uppercase tracking-widest">Guardian Info</h2>
 </div>
 <div class="p-6 space-y-5">
 <div class="flex items-center justify-between sm:block sm:space-y-1">
 <p class="text-[9px] font-bold text-gray-400 uppercase tracking-widest">Guardian Name</p>
 <p class="text-xs font-bold text-gray-700"><?php echo $student['guardian_name'] ?: 'N/A'; ?></p>
 </div>
 <div class="flex items-center justify-between sm:block sm:space-y-1">
 <p class="text-[9px] font-bold text-gray-400 uppercase tracking-widest text-right sm:text-left">Guardian Phone</p>
 <p class="text-xs font-bold text-gray-700"><?php echo $student['guardian_phone'] ?: 'N/A'; ?></p>
 </div>
 </div>
 </div>

 <!-- Admission Details -->
 <div class="bg-white border border-gray-200 rounded-3xl overflow-hidden">
 <div class="px-6 py-4 border-b border-gray-50 bg-gray-50/30 flex items-center justify-between">
 <h2 class="text-[10px] font-bold text-gray-900 uppercase tracking-widest">Enrolled Courses</h2>
 <a href="<?php echo url('admin/admissions?student_id=' . $student['id']); ?>" class="h-8 w-8 flex items-center justify-center rounded-xl bg-blue-600 text-white hover:bg-blue-700 transition-all active:scale-95 -100">
 <i class="fa-solid fa-plus text-xs"></i>
 </a>
 </div>
 <div class="p-6 space-y-4">
 <?php if(empty($student['admissions'])): ?>
 <div class="flex flex-col items-center justify-center py-4 space-y-2 opacity-40">
 <i class="fa-solid fa-graduation-cap text-2xl"></i>
 <p class="text-[10px] font-bold uppercase tracking-widest">No courses enrolled</p>
 </div>
 <?php else: ?>
 <?php foreach($student['admissions'] as $admission): ?>
 <div class="p-4 bg-gray-50 rounded-2xl border border-gray-100 space-y-3">
 <div class="flex items-center justify-between">
 <p class="text-xs font-bold text-gray-900"><?php echo $admission['course_name']; ?></p>
 <span class="px-1.5 py-0.5 rounded text-[8px] font-black uppercase <?php echo $admission['status'] === 'Active' ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-100 text-gray-700'; ?>"><?php echo $admission['status']; ?></span>
 </div>
 <?php if($admission['batch_id']): ?>
 <div class="flex flex-col gap-1.5">
 <div class="flex items-center gap-2 text-[9px] font-bold text-gray-400">
 <i class="fa-solid fa-users-rectangle text-blue-600"></i>
 Batch Assigned
 </div>
 </div>
 <?php endif; ?>
 </div>
 <?php endforeach; ?>
 <?php endif; ?>
 </div>
 </div>
 </div>

 <!-- Main History Content -->
 <div class="lg:col-span-2 space-y-6">
 <!-- Invoices -->
 <div class="bg-white border border-gray-200 rounded-3xl overflow-hidden">
 <div class="px-6 py-4 border-b border-gray-50 bg-gray-50/30 flex items-center justify-between">
 <h2 class="text-[10px] font-bold text-gray-900 uppercase tracking-widest">Billing Ledger</h2>
 <a href="<?php echo url('admin/invoices?search=' . $student['student_id']); ?>" class="text-[10px] font-bold text-blue-600 hover:underline tracking-widest uppercase">Full Ledger</a>
 </div>
 
 <div class="divide-y divide-gray-50">
 <?php if(empty($recentInvoices)): ?>
 <div class="p-12 text-center text-gray-400">
 <i class="fa-solid fa-file-invoice text-3xl mb-3 opacity-20"></i>
 <p class="text-xs font-bold">No invoices generated yet</p>
 </div>
 <?php else: ?>
 <?php foreach($recentInvoices as $inv): ?>
 <div class="p-4 flex items-center justify-between hover:bg-gray-50 transition-colors">
 <div class="flex flex-col gap-1">
 <span class="text-xs font-bold text-gray-900"><?php echo $inv['title']; ?></span>
 <span class="text-[9px] font-bold text-gray-400 uppercase tracking-widest"><?php echo date('d/m/Y', strtotime($inv['created_at'])); ?></span>
 </div>
 <div class="flex items-center gap-2">
 <div class="text-right">
 <p class="text-xs font-black text-gray-900">₹<?php echo number_format($inv['total_amount'], 0); ?></p>
 <span class="text-[8px] font-black uppercase px-1.5 py-0.5 rounded <?php echo $inv['status'] === 'Paid' ? 'bg-emerald-100 text-emerald-700' : ($inv['status'] === 'Partial' ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-700'); ?>">
 <?php echo $inv['status']; ?>
 </span>
 </div>
 <div class="flex items-center gap-1.5 ml-2">
 <?php if($inv['status'] === 'Paid'): ?>
 <a href="<?php echo url('admin/invoices/download?id=' . $inv['id']); ?>" target="_blank" class="h-8 w-8 rounded-xl bg-emerald-50 text-emerald-600 border border-emerald-100 flex items-center justify-center hover:bg-emerald-600 hover:text-white transition-all" title="Download PDF">
 <i class="fa-solid fa-file-pdf text-[10px]"></i>
 </a>
 <?php else: ?>
 <a href="<?php echo url('admin/fees/view?id=' . $student['id']); ?>" class="h-8 px-3 rounded-xl bg-blue-600 text-white flex items-center justify-center gap-1.5 hover:bg-blue-700 transition-all active:scale-95" title="Collect Fee">
 <i class="fa-solid fa-wallet text-[10px]"></i>
 <span class="text-[9px] font-bold uppercase">Collect</span>
 </a>
 <?php endif; ?>
 </div>
 </div>
 </div>
 <?php endforeach; ?>
 <?php endif; ?>
 </div>
 </div>

 <!-- Recent Payments -->
 <div class="bg-white border border-gray-200 rounded-3xl overflow-hidden">
 <div class="px-6 py-4 border-b border-gray-50 bg-gray-50/30 flex items-center justify-between">
 <h2 class="text-[10px] font-bold text-gray-900 uppercase tracking-widest">Recent Payments</h2>
 <a href="<?php echo url('admin/fees?search=' . $student['student_id']); ?>" class="text-[10px] font-bold text-blue-600 hover:underline tracking-widest uppercase">History</a>
 </div>
 
 <div class="divide-y divide-gray-50">
 <?php if(empty($recentPayments)): ?>
 <div class="p-12 text-center text-gray-400">
 <i class="fa-solid fa-indian-rupee-sign text-3xl mb-3 opacity-20"></i>
 <p class="text-xs font-bold">No payments recorded</p>
 </div>
 <?php else: ?>
 <?php foreach($recentPayments as $pay): ?>
 <div class="p-4 flex items-center justify-between hover:bg-gray-50 transition-colors">
 <div class="flex flex-col gap-1">
 <span class="text-xs font-bold text-gray-900"><?php echo $pay['invoice_title']; ?></span>
 <div class="flex items-center gap-2">
 <span class="text-[9px] font-bold text-gray-400 uppercase tracking-widest"><?php echo date('d M, Y', strtotime($pay['payment_date'])); ?></span>
 <span class="text-[8px] font-black text-blue-600 bg-blue-50 px-1 py-0.5 rounded"><?php echo $pay['payment_method']; ?></span>
 </div>
 </div>
 <div class="text-right">
 <p class="text-xs font-black text-emerald-600">+₹<?php echo number_format($pay['amount'], 0); ?></p>
 <?php if($pay['discount'] > 0): ?>
 <p class="text-[8px] font-bold text-amber-500">Disc: ₹<?php echo number_format($pay['discount'], 0); ?></p>
 <?php endif; ?>
 </div>
 </div>
 <?php endforeach; ?>
 <?php endif; ?>
 </div>
 </div>
 </div>
 </div>
 </div>
 </main>

 <!-- Password Reset Modal -->
 <div x-show="showPasswordModal" class="fixed inset-0 z-[60] 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/60 backdrop-blur-sm transition-opacity" @click="showPasswordModal = false"></div>
 <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 <div x-show="showPasswordModal" 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 align-bottom bg-white rounded-3xl text-left overflow-hidden transform transition-all sm:my-8 sm:align-middle max-w-[360px] w-full border border-gray-100 relative z-10">
 <div class="bg-white p-6 sm:p-8">
 <div class="flex items-center justify-between mb-6 border-b border-gray-50 pb-4">
 <div class="flex items-center gap-4">
 <div class="h-10 w-10 rounded-xl bg-red-50 text-red-600 flex items-center justify-center text-lg">
 <i class="fa-solid fa-key"></i>
 </div>
 <div>
 <h3 class="text-lg font-bold text-gray-900 leading-tight">Reset Password</h3>
 <p class="text-[9px] font-bold text-gray-400 uppercase tracking-widest mt-0.5">Set a new login password</p>
 </div>
 </div>
 </div>

 <form action="<?php echo url('admin/students/reset-password'); ?>" method="POST" class="space-y-5">
 <input type="hidden" name="id" value="<?php echo $student['id']; ?>">
 <div class="space-y-1.5" x-data="{ showNewPass: false }">
 <label class="text-[9px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">New Password</label>
 <div class="relative group">
 <input name="new_password" :type="showNewPass ? 'text' : 'password'" required minlength="6" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-xs font-bold text-gray-900 focus:bg-white focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 transition-all outline-none" placeholder="Min 6 characters">
 <div class="absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-2">
 <button type="button" @click="showNewPass = !showNewPass" class="text-gray-400 hover:text-gray-600 focus:outline-none">
 <i class="fa-solid text-xs" :class="showNewPass ? 'fa-eye-slash' : 'fa-eye'"></i>
 </button>
 </div>
 </div>
 </div>

 <p class="text-[9px] font-bold text-gray-400 leading-relaxed bg-gray-50 p-3 rounded-xl border border-gray-100">
 <i class="fa-solid fa-circle-info text-amber-500 mr-1"></i> Student login will update immediately.
 </p>

 <div class="flex justify-end gap-2 pt-2">
 <button type="button" @click="showPasswordModal = 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>
 <button type="submit" class="px-5 py-2.5 bg-red-600 text-white text-[10px] font-bold rounded-xl hover:bg-red-700 transition-all -200 active:scale-95 flex items-center justify-center">
 Reset Password
 </button>
 </div>
 </form>
 </div>
 </div>
 </div>
 </div>

 <!-- Freeze Modal Overlay -->
 <div x-show="showFreezeModal" class="fixed inset-0 z-[60] 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 transition-opacity" @click="showFreezeModal = false"></div>
 <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 <div x-show="showFreezeModal" 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 align-bottom bg-white rounded-3xl text-left overflow-hidden transform transition-all sm:my-8 sm:align-middle max-w-[440px] w-full border border-gray-100 relative z-10">
 <div class="p-6">
 <div class="flex items-start gap-5">
 <div class="w-12 h-12 <?php echo $student['status'] === 'Frozen' ? 'bg-emerald-50 text-emerald-600' : 'bg-amber-50 text-amber-500'; ?> rounded-2xl flex items-center justify-center flex-none text-lg">
 <i class="fa-solid <?php echo $student['status'] === 'Frozen' ? 'fa-play' : 'fa-snowflake'; ?>"></i>
 </div>
 <div class="flex-1">
 <h3 class="text-lg font-black text-gray-900"><?php echo $student['status'] === 'Frozen' ? 'Unfreeze' : 'Freeze'; ?> Account?</h3>
 <p class="text-[11px] font-medium text-gray-400 leading-relaxed mt-1">
 <?php echo $student['status'] === 'Frozen' ? 'The student will regain access to their account and enrolled courses.' : 'The student will be temporarily blocked from logging in. No data will be deleted.'; ?>
 </p>
 
 <div class="flex justify-end gap-2 mt-6">
 <button @click="showFreezeModal = 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/students/toggle-freeze?id=' . $student['id']); ?>" class="px-5 py-2.5 <?php echo $student['status'] === 'Frozen' ? 'bg-emerald-600 hover:bg-emerald-700 -200' : 'bg-amber-500 hover:bg-amber-600 -200'; ?> text-white text-[10px] font-bold rounded-xl transition-all active:scale-95 flex items-center justify-center">
 Yes, <?php echo $student['status'] === 'Frozen' ? 'Unfreeze' : 'Freeze'; ?>
 </a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

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