<?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">
 <?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-6 pb-12">
 <!-- Header -->
 <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-5 px-1">
 <div class="flex items-center gap-4">
 <a href="<?php echo url('/admin/leads'); ?>" class="h-10 w-10 sm:h-12 sm:w-12 flex items-center justify-center rounded-2xl bg-white border border-gray-200 text-gray-400 hover:text-blue-600 transition-all">
 <i class="fa-solid fa-arrow-left"></i>
 </a>
 <div>
 <h1 class="text-xl sm:text-2xl font-bold text-gray-900 leading-tight"><?php echo $lead['name']; ?></h1>
 <p class="text-[10px] sm:text-xs font-bold text-gray-400 uppercase tracking-widest mt-0.5">
 Source: <?php echo $lead['source'] ?: 'Unknown'; ?> <span class="mx-2 opacity-30">•</span> Joined <?php echo date('d M, Y', strtotime($lead['created_at'])); ?>
 </p>
 </div>
 </div>
 <div class="flex items-center gap-2 sm:gap-3 w-full sm:w-auto">
 <a href="tel:<?php echo $lead['phone']; ?>" class="flex-1 sm:w-40 flex items-center justify-center gap-2 px-4 py-3 sm:py-2.5 bg-emerald-600 text-white text-[10px] sm:text-xs font-bold rounded-xl -200 hover:bg-emerald-700 transition-all active:scale-[0.98]">
 <i class="fa-solid fa-phone text-sm"></i> 
 <span class="uppercase tracking-widest">Call</span>
 </a>
 <a href="https://wa.me/<?php echo preg_replace('/[^0-9]/', '', $lead['phone']); ?>" target="_blank" class="flex-1 sm:w-40 flex items-center justify-center gap-2 px-4 py-3 sm:py-2.5 bg-emerald-500 text-white text-[10px] sm:text-xs font-bold rounded-xl -100 hover:bg-emerald-600 transition-all active:scale-[0.98]">
 <i class="fa-brands fa-whatsapp text-base"></i> 
 <span class="uppercase tracking-widest">WhatsApp</span>
 </a>
 </div>
 </div>

 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
 <!-- Sidebar: Lead Info -->
 <div class="space-y-6">
 <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">Lead Details</h2>
 <?php 
 $statusColors = [
 'New' => 'bg-blue-100 text-blue-700',
 'Contacted' => 'bg-indigo-100 text-indigo-700',
 'Interested' => 'bg-amber-100 text-amber-700',
 'Follow-up' => 'bg-purple-100 text-purple-700',
 'Converted' => 'bg-emerald-100 text-emerald-700',
 'Lost' => 'bg-red-100 text-red-700'
 ];
 ?>
 <span class="px-2.5 py-1 rounded-lg text-[9px] font-black uppercase <?php echo $statusColors[$lead['status']] ?? 'bg-gray-100'; ?>"><?php echo $lead['status']; ?></span>
 </div>
 <div class="p-6 space-y-5">
 <div class="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 $lead['phone']; ?></p>
 </div>
 <div class="space-y-1">
 <p class="text-[9px] font-bold text-gray-400 uppercase tracking-widest">Email</p>
 <p class="text-xs font-bold text-gray-700 lowercase"><?php echo $lead['email'] ?: 'N/A'; ?></p>
 </div>
 <div class="space-y-1">
 <p class="text-[9px] font-bold text-gray-400 uppercase tracking-widest">Interested Course</p>
 <p class="text-xs font-bold text-blue-600"><?php echo $lead['course_name'] ?: 'Not Specified'; ?></p>
 </div>
 <div class="pt-4 border-t border-gray-50">
 <p class="text-[9px] font-bold text-gray-400 uppercase tracking-widest">Initial Notes</p>
 <p class="text-xs font-medium text-gray-600 leading-relaxed mt-1"><?php echo $lead['notes'] ?: 'No notes provided.'; ?></p>
 </div>
 </div>
 </div>

 <!-- Follow-up Form -->
 <div class="bg-white border border-gray-200 rounded-3xl overflow-hidden p-6">
 <h3 class="text-sm font-bold text-gray-900 mb-6">Record Interaction</h3>
 <form action="<?php echo url('/admin/leads/followup'); ?>" method="POST" class="space-y-5">
 <input type="hidden" name="lead_id" value="<?php echo $lead['id']; ?>">
 
 <div class="space-y-1.5">
 <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest ml-1">Type</label>
 <select name="type" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-xs font-bold text-gray-900 outline-none focus:bg-white focus:border-blue-600 transition-all">
 <option value="Note">Note / Internal</option>
 <option value="Call">Phone Call</option>
 <option value="WhatsApp">WhatsApp Chat</option>
 <option value="Meeting">Face-to-Face Meeting</option>
 <option value="Email">Email Sent</option>
 </select>
 </div>

 <div class="space-y-1.5">
 <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest ml-1">Notes / Summary</label>
 <textarea name="notes" rows="4" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-xs font-bold text-gray-900 outline-none focus:bg-white focus:border-blue-600 transition-all" placeholder="What was discussed?"></textarea>
 </div>

 <div class="space-y-1.5">
 <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest ml-1 text-amber-600">Next Reminder (Optional)</label>
 <input name="next_reminder_date" type="datetime-local" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-xs font-bold text-gray-900 outline-none focus:bg-white focus:border-blue-600 transition-all">
 </div>

 <div class="space-y-1.5">
 <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest ml-1">Update Lead Status</label>
 <select name="update_status" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-xs font-bold text-gray-900 outline-none focus:bg-white focus:border-blue-600 transition-all">
 <option value="">Keep current status</option>
 <option value="Contacted">Mark as Contacted</option>
 <option value="Interested">Mark as Interested</option>
 <option value="Follow-up">Need Follow-up</option>
 <option value="Converted">Converted to Student</option>
 <option value="Lost">Lost / Not Interested</option>
 </select>
 </div>

 <button type="submit" class="w-full py-3.5 bg-blue-600 text-white text-[10px] font-bold rounded-xl -200 hover:bg-blue-700 transition-all active:scale-[0.98] uppercase tracking-widest">Save Interaction</button>
 </form>
 </div>
 </div>

 <!-- Main: Timeline -->
 <div class="lg:col-span-2">
 <div class="bg-white border border-gray-200 rounded-3xl overflow-hidden">
 <div class="px-6 py-5 border-b border-gray-50 bg-gray-50/30">
 <h2 class="text-[10px] font-bold text-gray-900 uppercase tracking-widest">Activity Timeline</h2>
 </div>
 <div class="p-6">
 <?php if(empty($followups)): ?>
 <div class="py-12 text-center text-gray-400">
 <i class="fa-solid fa-clock-rotate-left text-3xl mb-3 opacity-20"></i>
 <p class="text-xs font-bold">No activity history yet.</p>
 </div>
 <?php else: ?>
 <div class="relative pl-6 space-y-8 before:absolute before:left-0 before:top-2 before:bottom-2 before:w-0.5 before:bg-gray-100">
 <?php foreach($followups as $f): ?>
 <div class="relative">
 <!-- Icon -->
 <?php 
 $icons = [
 'Call' => 'fa-phone bg-emerald-50 text-emerald-600',
 'WhatsApp' => 'fa-whatsapp bg-emerald-50 text-emerald-600',
 'Email' => 'fa-envelope bg-blue-50 text-blue-600',
 'Meeting' => 'fa-users bg-purple-50 text-purple-600',
 'Note' => 'fa-note-sticky bg-gray-50 text-gray-400'
 ];
 $iconData = $icons[$f['type']] ?? $icons['Note'];
 ?>
 <div class="absolute -left-[31px] top-0 h-6 w-6 rounded-full border-4 border-white <?php echo $iconData; ?> flex items-center justify-center text-[10px]">
 <i class="fa-solid <?php echo explode(' ', $iconData)[0]; ?>"></i>
 </div>

 <div class="bg-gray-50/50 border border-gray-100 rounded-2xl p-4 space-y-2">
 <div class="flex items-center justify-between">
 <span class="text-[10px] font-bold text-gray-900 uppercase tracking-widest"><?php echo $f['type']; ?></span>
 <span class="text-[9px] font-bold text-gray-400"><?php echo date('d M, Y h:i A', strtotime($f['interaction_date'])); ?></span>
 </div>
 <p class="text-xs font-medium text-gray-700 leading-relaxed"><?php echo nl2br(htmlspecialchars($f['notes'])); ?></p>
 
 <?php if($f['next_reminder_date']): ?>
 <div class="flex items-center gap-2 pt-2 mt-2 border-t border-gray-200/50">
 <span class="text-[8px] font-bold text-amber-500 uppercase tracking-widest">Next Reminder:</span>
 <span class="text-[9px] font-bold text-gray-600"><?php echo date('d/m/Y h:i A', strtotime($f['next_reminder_date'])); ?></span>
 </div>
 <?php endif; ?>
 </div>
 </div>
 <?php endforeach; ?>
 </div>
 <?php endif; ?>
 </div>
 </div>
 </div>
 </div>
 </div>
 </main>
</div>

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