<div class="p-6 max-w-full mx-auto space-y-6">

    <!-- Header & Summary Bar -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white tracking-tight">Sales Pipeline</h1>
            <p class="text-slate-400 text-xs">Drag and drop deals across stages to track revenue velocity.</p>
        </div>
        <div class="flex items-center space-x-3">
            <button onclick="Kanban.openCreateModal()" class="bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold text-xs px-4 py-2.5 rounded-xl shadow-lg shadow-emerald-500/20 transition flex items-center space-x-2">
                <i class="fa-solid fa-plus text-xs"></i>
                <span>Create New Deal</span>
            </button>
        </div>
    </div>

    <!-- Pipeline Revenue Metrics -->
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4">
            <div class="text-slate-400 text-xs uppercase font-semibold">Total Pipeline</div>
            <div class="text-xl font-bold text-white mt-1">$<?= number_format($summary['total_pipeline_value'], 2) ?></div>
            <div class="text-[10px] text-slate-500"><?= $summary['total_deals'] ?> total deals</div>
        </div>
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4">
            <div class="text-amber-400 text-xs uppercase font-semibold">Open Deals</div>
            <div class="text-xl font-bold text-white mt-1">$<?= number_format($summary['open_value'], 2) ?></div>
            <div class="text-[10px] text-slate-500">In negotiation</div>
        </div>
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4">
            <div class="text-emerald-400 text-xs uppercase font-semibold">Closed Won</div>
            <div class="text-xl font-bold text-emerald-400 mt-1">$<?= number_format($summary['won_value'], 2) ?></div>
            <div class="text-[10px] text-slate-500">Revenue secured</div>
        </div>
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4">
            <div class="text-red-400 text-xs uppercase font-semibold">Closed Lost</div>
            <div class="text-xl font-bold text-slate-400 mt-1">$<?= number_format($summary['lost_value'], 2) ?></div>
            <div class="text-[10px] text-slate-500">Unconverted</div>
        </div>
    </div>

    <!-- Kanban Board (Horizontal Scrolling Columns) -->
    <div class="flex space-x-4 overflow-x-auto custom-scrollbar pb-6 items-start min-h-[calc(100vh-18rem)]">
        <?php foreach ($stages as $stage): ?>
            <div class="w-80 flex-shrink-0 bg-slate-900/70 border border-slate-800/80 rounded-2xl flex flex-col max-h-[calc(100vh-18rem)]">
                
                <!-- Stage Header -->
                <div class="p-3.5 border-b border-slate-800 flex items-center justify-between" style="border-top: 3px solid <?= $stage['color'] ?>">
                    <div class="flex items-center space-x-2">
                        <span class="w-2 h-2 rounded-full" style="background-color: <?= $stage['color'] ?>"></span>
                        <h3 class="font-bold text-white text-xs tracking-wide"><?= htmlspecialchars($stage['name']) ?></h3>
                        <span class="bg-slate-800 text-slate-400 text-[10px] font-semibold px-2 py-0.5 rounded-full"><?= $stage['count'] ?></span>
                    </div>
                    <span class="text-xs font-bold text-slate-300">$<?= number_format($stage['total_value'], 0) ?></span>
                </div>

                <!-- Drop Target List -->
                <div id="stage-column-<?= $stage['id'] ?>" data-stage-id="<?= $stage['id'] ?>" 
                     ondragover="Kanban.onDragOver(event)" ondragleave="Kanban.onDragLeave(event)" ondrop="Kanban.onDrop(event, <?= $stage['id'] ?>)"
                     class="flex-1 p-3 space-y-3 overflow-y-auto custom-scrollbar transition-colors">
                    
                    <?php if (empty($stage['deals'])): ?>
                        <div class="h-24 border border-dashed border-slate-800 rounded-xl flex items-center justify-center text-slate-600 text-xs">
                            Drop deals here
                        </div>
                    <?php else: ?>
                        <?php foreach ($stage['deals'] as $deal): ?>
                            <div id="deal-card-<?= $deal['id'] ?>" data-deal-id="<?= $deal['id'] ?>" draggable="true" ondragstart="Kanban.onDragStart(event, <?= $deal['id'] ?>)"
                                 class="p-4 bg-slate-950 border border-slate-800/90 hover:border-emerald-500/40 rounded-xl shadow-md cursor-grab active:cursor-grabbing transition space-y-2 group">
                                
                                <div class="flex items-start justify-between">
                                    <h4 class="font-bold text-white text-xs group-hover:text-emerald-400 transition leading-snug">
                                        <?= htmlspecialchars($deal['title']) ?>
                                    </h4>
                                    <span class="text-xs font-bold text-emerald-400 ml-2">$<?= number_format($deal['value'], 2) ?></span>
                                </div>

                                <div class="text-[11px] text-slate-400 flex items-center justify-between">
                                    <span class="flex items-center space-x-1 truncate">
                                        <i class="fa-solid fa-user text-slate-500 text-[10px]"></i>
                                        <span class="truncate"><?= htmlspecialchars($deal['contact_name']) ?></span>
                                    </span>
                                    <a href="/chat?conv_id=<?= $deal['contact_id'] ?>" title="Open WhatsApp Chat" class="text-emerald-400 hover:text-emerald-300 p-1 rounded hover:bg-slate-800 transition">
                                        <i class="fa-brands fa-whatsapp text-sm"></i>
                                    </a>
                                </div>

                                <div class="flex items-center justify-between pt-2 border-t border-slate-800/60 text-[10px] text-slate-500">
                                    <span>👤 <?= htmlspecialchars($deal['assigned_user_name'] ?? 'Unassigned') ?></span>
                                    <?php if (!empty($deal['closing_date'])): ?>
                                        <span>📅 <?= date('M d', strtotime($deal['closing_date'])) ?></span>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>

                </div>
            </div>
        <?php endforeach; ?>
    </div>

</div>

<!-- Create Deal Modal -->
<div id="kanban-create-deal-modal" class="hidden fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-3xl max-w-md w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-slate-800 pb-3">
            <h3 class="font-bold text-white text-base">New Sales Deal</h3>
            <button onclick="Kanban.closeCreateModal()" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <form onsubmit="Kanban.submitDeal(event)" class="space-y-4">
            <div>
                <label class="block text-xs text-slate-400 mb-1">Deal Title</label>
                <input type="text" name="title" required placeholder="e.g. Annual Cloud Subscription" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Select Contact / Lead</label>
                <select name="contact_id" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                    <option value="">-- Choose Contact --</option>
                    <?php foreach ($contacts as $c): ?>
                        <option value="<?= $c['id'] ?>"><?= htmlspecialchars($c['name']) ?> (<?= htmlspecialchars($c['phone_number']) ?>)</option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Value ($)</label>
                    <input type="number" step="0.01" name="value" required placeholder="2500.00" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Stage</label>
                    <select name="stage_id" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                        <?php foreach ($stages as $st): ?>
                            <option value="<?= $st['id'] ?>"><?= htmlspecialchars($st['name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Assign Agent</label>
                    <select name="assigned_to" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                        <option value="">Unassigned</option>
                        <?php foreach ($agents as $ag): ?>
                            <option value="<?= $ag['id'] ?>"><?= htmlspecialchars($ag['name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Closing Date</label>
                    <input type="date" name="closing_date" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                </div>
            </div>
            <button type="submit" class="w-full bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold py-2.5 rounded-xl transition">
                Create Deal
            </button>
        </form>
    </div>
</div>

<script src="/assets/js/kanban.js"></script>
