<?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="{ leadModalOpen: false, deleteModalOpen: false, deleteId: null, editingLead: null }">
 <?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">
 <!-- 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">Lead Management</h1>
 <p class="text-[10px] sm:text-xs font-medium text-gray-400 mt-0.5">Track inquiries and convert them to students</p>
 </div>
 <button @click="leadModalOpen = true; editingLead = null" 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 -600/20">
 <i class="fa-solid fa-user-plus text-sm"></i>
 <span>Add New Lead</span>
 </button>
 </div>

 <!-- Filters -->
 <form action="<?php echo url('admin/leads'); ?>" 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 by name, phone or email...">
 </div>
 <div class="relative w-full sm:w-48">
 <select name="status" 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">
 <option value="">All Statuses</option>
 <option value="New"<?php echo $params['status'] === 'New' ? 'selected' : ''; ?>>New</option>
 <option value="Contacted"<?php echo $params['status'] === 'Contacted' ? 'selected' : ''; ?>>Contacted</option>
 <option value="Interested"<?php echo $params['status'] === 'Interested' ? 'selected' : ''; ?>>Interested</option>
 <option value="Follow-up"<?php echo $params['status'] === 'Follow-up' ? 'selected' : ''; ?>>Follow-up</option>
 <option value="Converted"<?php echo $params['status'] === 'Converted' ? 'selected' : ''; ?>>Converted</option>
 <option value="Lost"<?php echo $params['status'] === 'Lost' ? 'selected' : ''; ?>>Lost</option>
 </select>
 <div class="absolute inset-y-0 right-0 pr-3.5 flex items-center pointer-events-none text-gray-400">
 <i class="fa-solid fa-chevron-down text-[10px]"></i>
 </div>
 </div>
 </form>

 <!-- Lead List (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">Lead Info</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Quick Connect</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Next Follow-up</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($leads)): ?>
 <tr>
 <td colspan="6" class="px-6 py-12 text-center text-gray-400 text-xs font-bold">No leads found</td>
 </tr>
 <?php else: ?>
 <?php foreach($leads as $index => $lead): ?>
 <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-bold text-gray-900 group-hover:text-blue-600 transition-colors"><?php echo $lead['name']; ?></span>
 <span class="text-[9px] font-bold text-gray-400 mt-0.5 uppercase tracking-tighter"><?php echo $lead['phone']; ?></span>
 <?php if($lead['course_name']): ?>
 <span class="text-[8px] font-bold px-1.5 py-0.5 bg-blue-50 text-blue-600 rounded-md border border-blue-100 w-fit mt-1"><?php echo $lead['course_name']; ?></span>
 <?php endif; ?>
 </div>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <div class="flex items-center gap-2">
 <a href="tel:<?php echo $lead['phone']; ?>" 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="Call">
 <i class="fa-solid fa-phone text-xs"></i>
 </a>
 <a href="https://wa.me/<?php echo preg_replace('/[^0-9]/', '', $lead['phone']); ?>" 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="WhatsApp">
 <i class="fa-brands fa-whatsapp text-sm"></i>
 </a>
 </div>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <?php if($lead['next_reminder']): ?>
 <div class="flex items-center gap-2 text-amber-600 bg-amber-50 px-2 py-1 rounded-lg border border-amber-100 w-fit">
 <i class="fa-solid fa-bell text-[10px]"></i>
 <span class="text-[10px] font-bold"><?php echo date('d/m/Y h:i A', strtotime($lead['next_reminder'])); ?></span>
 </div>
 <?php else: ?>
 <span class="text-[9px] font-bold text-gray-400 italic">No reminder set</span>
 <?php endif; ?>
 </td>
 <td class="px-6 py-4 text-center border-l border-gray-100/50">
 <?php 
 $statusColors = [
 'New' => 'bg-blue-50 text-blue-600 border-blue-100',
 'Contacted' => 'bg-indigo-50 text-indigo-600 border-indigo-100',
 'Interested' => 'bg-amber-50 text-amber-600 border-amber-100',
 'Follow-up' => 'bg-purple-50 text-purple-600 border-purple-100',
 'Converted' => 'bg-emerald-50 text-emerald-600 border-emerald-100',
 'Lost' => 'bg-red-50 text-red-600 border-red-100'
 ];
 $color = $statusColors[$lead['status']] ?? 'bg-gray-50 text-gray-600';
 ?>
 <span class="px-2 py-1 rounded-lg text-[10px] font-bold <?php echo $color; ?> border">
 <?php echo $lead['status']; ?>
 </span>
 </td>
 <td class="px-6 py-4 text-right border-l border-gray-100/50">
 <div class="flex items-center justify-end gap-2">
 <a href="<?php echo url('admin/leads/view?id=' . $lead['id']); ?>" class="h-8 w-8 flex items-center justify-center rounded-lg bg-blue-50 text-blue-500 hover:bg-blue-500 hover:text-white transition-all border border-blue-100" title="View Timeline">
 <i class="fa-solid fa-clock-rotate-left text-xs"></i>
 </a>
 <button @click="leadModalOpen = true; editingLead = <?php echo htmlspecialchars(json_encode($lead)); ?>" class="h-8 w-8 flex items-center justify-center rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-all" title="Edit Lead">
 <i class="fa-solid fa-pen-to-square text-xs"></i>
 </button>
 <button @click="deleteModalOpen = true; deleteId = <?php echo $lead['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" title="Delete">
 <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($leads as $lead): ?>
 <div class="bg-white border border-gray-200 rounded-2xl p-4 space-y-4">
 <div class="flex justify-between items-start">
 <div class="flex flex-col">
 <span class="text-sm font-bold text-gray-900"><?php echo $lead['name']; ?></span>
 <span class="text-[10px] font-bold text-gray-400"><?php echo $lead['phone']; ?></span>
 </div>
 <span class="px-2 py-1 rounded-lg text-[9px] font-bold border <?php echo $statusColors[$lead['status']] ?? 'bg-gray-50'; ?>">
 <?php echo $lead['status']; ?>
 </span>
 </div>
 <div class="flex items-center gap-2 pt-2 border-t border-gray-50">
 <a href="tel:<?php echo $lead['phone']; ?>" class="flex-1 h-11 flex items-center justify-center gap-2 rounded-xl bg-emerald-50 text-emerald-600 font-bold text-[10px] uppercase tracking-widest border border-emerald-100 active:bg-emerald-600 active:text-white transition-all">
 <i class="fa-solid fa-phone text-sm"></i>
 Call
 </a>
 <a href="https://wa.me/<?php echo preg_replace('/[^0-9]/', '', $lead['phone']); ?>" target="_blank" class="flex-1 h-11 flex items-center justify-center gap-2 rounded-xl bg-emerald-50 text-emerald-600 font-bold text-[10px] uppercase tracking-widest border border-emerald-100 active:bg-emerald-600 active:text-white transition-all">
 <i class="fa-brands fa-whatsapp text-sm"></i>
 WhatsApp
 </a>
 </div>
 <div class="flex items-center gap-2">
 <a href="<?php echo url('admin/leads/view?id=' . $lead['id']); ?>" class="flex-1 h-11 flex items-center justify-center gap-2 rounded-xl bg-blue-50 text-blue-600 font-bold text-[10px] uppercase tracking-widest border border-blue-100 active:bg-blue-600 active:text-white transition-all">
 <i class="fa-solid fa-clock-rotate-left text-sm"></i>
 Timeline
 </a>
 <button @click="leadModalOpen = true; editingLead = <?php echo htmlspecialchars(json_encode($lead)); ?>" class="flex-1 h-11 flex items-center justify-center gap-2 rounded-xl bg-blue-600 text-white font-bold text-[10px] uppercase tracking-widest hover:bg-blue-700 active:scale-[0.98] transition-all">
 <i class="fa-solid fa-pen-to-square text-sm"></i>
 Edit
 </button>
 </div>
 </div>
 <?php endforeach; ?>
 </div>
 </div>
 </main>

 <!-- Lead Modal -->
 <div x-show="leadModalOpen" class="fixed inset-0 z-50 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" @click="leadModalOpen = false"></div>
 <div class="bg-white rounded-3xl p-6 sm:p-8 max-w-lg w-full relative z-50 border border-gray-100">
 <div class="flex items-center justify-between mb-6 border-b border-gray-50 pb-4">
 <h3 class="text-lg font-bold text-gray-900" x-text="editingLead ? 'Edit Lead' : 'Add New Lead'"></h3>
 <button @click="leadModalOpen = false" class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-xmark"></i></button>
 </div>

 <form action="<?php echo url('admin/leads/save'); ?>" method="POST" class="space-y-4">
 <input type="hidden" name="id" :value="editingLead ? editingLead.id : ''">
 
 <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 <div class="space-y-1">
 <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest ml-1">Full Name</label>
 <input name="name" type="text" :value="editingLead ? editingLead.name : ''" required 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">
 </div>
 <div class="space-y-1">
 <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest ml-1">Phone Number</label>
 <input name="phone" type="text" :value="editingLead ? editingLead.phone : ''" required 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">
 </div>
 </div>

 <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 <div class="space-y-1">
 <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest ml-1">Email (Optional)</label>
 <input name="email" type="email" :value="editingLead ? editingLead.email : ''" 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">
 </div>
 <div class="space-y-1">
 <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest ml-1">Lead Source</label>
 <input name="source" type="text" :value="editingLead ? editingLead.source : ''" placeholder="e.g. Facebook, Walk-in" 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">
 </div>
 </div>

 <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 <div class="space-y-1">
 <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest ml-1">Interested Course</label>
 <select name="course_id" 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 appearance-none">
 <option value="">Select Course</option>
 <?php foreach($courses as $course): ?>
 <option value="<?php echo $course['id']; ?>" :selected="editingLead && editingLead.course_id == <?php echo $course['id']; ?>"><?php echo $course['name']; ?></option>
 <?php endforeach; ?>
 </select>
 </div>
 <div class="space-y-1">
 <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest ml-1">Status</label>
 <select name="status" 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 appearance-none">
 <option value="New" :selected="editingLead && editingLead.status == 'New'">New</option>
 <option value="Contacted" :selected="editingLead && editingLead.status == 'Contacted'">Contacted</option>
 <option value="Interested" :selected="editingLead && editingLead.status == 'Interested'">Interested</option>
 <option value="Follow-up" :selected="editingLead && editingLead.status == 'Follow-up'">Follow-up</option>
 <option value="Converted" :selected="editingLead && editingLead.status == 'Converted'">Converted</option>
 <option value="Lost" :selected="editingLead && editingLead.status == 'Lost'">Lost</option>
 </select>
 </div>
 </div>

 <div class="space-y-1">
 <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest ml-1">Initial Notes</label>
 <textarea name="notes" rows="3" 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" x-text="editingLead ? editingLead.notes : ''"></textarea>
 </div>

 <div class="flex justify-end gap-3 pt-4 border-t border-gray-50">
 <button type="button" @click="leadModalOpen = false" class="px-6 py-2.5 bg-white border border-gray-200 text-gray-500 text-[10px] font-bold rounded-xl hover:bg-gray-50 transition-all uppercase tracking-widest">Cancel</button>
 <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white text-[10px] font-bold rounded-xl hover:bg-blue-700 transition-all -200 active:scale-95 uppercase tracking-widest">Save Lead</button>
 </div>
 </form>
 </div>
 </div>
 </div>

 <!-- Delete Modal -->
 <div x-show="deleteModalOpen" 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" @click="deleteModalOpen = false"></div>
 <div class="bg-white rounded-3xl p-6 max-w-[440px] w-full relative z-[70] 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 Lead?</h3>
 <p class="text-[11px] font-medium text-gray-400 leading-relaxed mt-1">This will permanently remove the lead and all its follow-up 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/leads/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'; ?>
