<?php $__env->startSection('title', 'Sales pipeline - Centipid ISP CRM'); ?>
<?php $__env->startSection('breadcrumb_parent', 'CUSTOMERS'); ?>
<?php $__env->startSection('breadcrumb_current', 'Leads'); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-6">
    <!-- Header & Action Row -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-extrabold text-white tracking-tight">Sales <span class="text-orange-500">pipeline.</span></h1>
            <p class="text-xs text-slate-400 mt-1">
                <span class="font-bold text-white"><?php echo e($inFunnelCount); ?> prospects</span> worth a projected <span class="text-emerald-400 font-bold">Rs <?php echo e(number_format($pipelineValue, 2)); ?> MRR</span>.
            </p>
        </div>
        <div class="flex items-center gap-3">
            <button onclick="alert('Exporting leads CSV...')" class="flex items-center gap-2 bg-[#1c1c1f] hover:bg-[#26262a] text-slate-300 font-semibold text-xs px-4 py-2.5 rounded-xl border border-[#2a2a2e] transition-all">
                <i data-lucide="download" class="w-4 h-4 text-slate-400"></i>
                <span>Export</span>
            </button>
            <button onclick="openAddLeadModal()" class="flex items-center gap-2 btn-orange font-bold text-xs px-4 py-2.5 rounded-xl shadow-lg shadow-orange-500/20">
                <i data-lucide="plus" class="w-4 h-4"></i>
                <span>Add lead</span>
            </button>
        </div>
    </div>

    <!-- Pipeline KPI Cards -->
    <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
        <div class="custom-card p-4 rounded-2xl">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">PIPELINE VALUE</p>
            <p class="text-2xl font-extrabold text-white mt-1">Rs <?php echo e(number_format($pipelineValue, 0)); ?></p>
            <p class="text-[11px] text-slate-500 mt-1">MRR if all convert</p>
        </div>

        <div class="custom-card p-4 rounded-2xl">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">IN FUNNEL</p>
            <p class="text-2xl font-extrabold text-white mt-1"><?php echo e($inFunnelCount); ?></p>
            <p class="text-[11px] text-slate-500 mt-1">all time</p>
        </div>

        <div class="custom-card p-4 rounded-2xl">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">CONVERSION</p>
            <p class="text-2xl font-extrabold text-emerald-400 mt-1"><?php echo e($conversionRate); ?>%</p>
            <p class="text-[11px] text-slate-500 mt-1">of all leads</p>
        </div>

        <div class="custom-card p-4 rounded-2xl">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">HOT LEADS</p>
            <p class="text-2xl font-extrabold text-orange-500 mt-1"><?php echo e($hotLeadsCount); ?></p>
            <p class="text-[11px] text-slate-500 mt-1">click to filter</p>
        </div>

        <div class="custom-card p-4 rounded-2xl">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">AVG CYCLE</p>
            <p class="text-2xl font-extrabold text-white mt-1">4.2d</p>
            <p class="text-[11px] text-slate-500 mt-1">first contact &rarr; won</p>
        </div>
    </div>

    <!-- View Toggle & Search Filter -->
    <div class="flex flex-col md:flex-row gap-4 items-center justify-between">
        <div class="flex items-center gap-1 bg-[#161618] p-1 rounded-xl border border-[#2a2a2e]">
            <button class="px-4 py-1.5 rounded-lg text-xs font-bold bg-[#2a2a2e] text-white flex items-center gap-1.5">
                <i data-lucide="layout-grid" class="w-3.5 h-3.5 text-orange-500"></i> Kanban
            </button>
            <button class="px-4 py-1.5 rounded-lg text-xs font-bold text-slate-400 hover:text-white flex items-center gap-1.5">
                <i data-lucide="list" class="w-3.5 h-3.5"></i> List
            </button>
        </div>

        <div class="relative w-80">
            <i data-lucide="search" class="w-4 h-4 absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500"></i>
            <input type="text" placeholder="Filter by name, phone, or city..." class="w-full bg-[#161618] border border-[#2a2a2e] text-slate-200 text-xs rounded-xl pl-10 pr-4 py-2 focus:outline-none focus:border-orange-500">
        </div>
    </div>

    <!-- Kanban Pipeline Board -->
    <div class="grid grid-cols-1 md:grid-cols-5 gap-4 overflow-x-auto min-h-[450px]">
        <?php
            $stages = [
                'New' => 'New',
                'Contacted' => 'Contacted',
                'Qualified' => 'Qualified',
                'Site survey' => 'Site survey',
                'Converted' => 'Converted',
            ];
        ?>

        <?php $__currentLoopData = $stages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $stageKey => $stageLabel): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?php $columnLeads = $leadsByStatus[$stageKey] ?? collect(); ?>
            <div class="bg-[#161618] border border-[#2a2a2e] rounded-2xl p-3 flex flex-col justify-between">
                <div>
                    <!-- Column Header -->
                    <div class="flex items-center justify-between pb-3 border-b border-[#2a2a2e] mb-3">
                        <div class="flex items-center gap-2">
                            <span class="w-2 h-2 rounded-full bg-orange-500"></span>
                            <h3 class="text-xs font-extrabold text-white"><?php echo e($stageLabel); ?></h3>
                        </div>
                        <span class="text-[11px] font-mono text-slate-500 bg-[#222226] px-2 py-0.5 rounded-full font-bold">
                            <?php echo e($columnLeads->count()); ?>

                        </span>
                    </div>

                    <!-- Column Cards List -->
                    <div class="space-y-3">
                        <?php $__empty_1 = true; $__currentLoopData = $columnLeads; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $lead): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <div class="bg-[#1c1c1f] hover:bg-[#222226] border border-[#2a2a2e] rounded-xl p-3.5 shadow-sm transition-all space-y-2 cursor-pointer">
                                <div class="flex items-center justify-between">
                                    <h4 class="text-xs font-extrabold text-white truncate max-w-[130px]"><?php echo e($lead->name); ?></h4>
                                    <span class="text-[10px] font-mono text-emerald-400 font-bold">Rs <?php echo e(number_format($lead->mrr_projected, 0)); ?></span>
                                </div>
                                <p class="text-[11px] text-slate-400 flex items-center gap-1">
                                    <i data-lucide="map-pin" class="w-3 h-3 text-slate-500"></i>
                                    <span><?php echo e($lead->area ?? 'Main Area'); ?></span>
                                </p>
                                <div class="flex items-center justify-between pt-2 border-t border-[#2a2a2e] text-[10px] text-slate-500">
                                    <span><?php echo e($lead->plan_interested ?? 'Home 10 Mbps'); ?></span>
                                    <span class="font-bold text-slate-400"><?php echo e($lead->phone); ?></span>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <div class="py-8 text-center text-slate-600 text-[11px]">
                                No prospects in <?php echo e(strtolower($stageLabel)); ?>

                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>
</div>

<!-- Modal: Add New Lead -->
<div id="addLeadModal" class="fixed inset-0 z-[9999] hidden bg-black/80 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="custom-panel rounded-2xl max-w-md w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-[#2a2a2e] pb-3">
            <h3 class="text-base font-bold text-white flex items-center gap-2">
                <i data-lucide="user-plus" class="w-5 h-5 text-orange-500"></i>
                <span>Add Prospect Lead</span>
            </h3>
            <button onclick="closeAddLeadModal()" class="text-slate-400 hover:text-white">&times;</button>
        </div>

        <form action="<?php echo e(route('admin.leads.store')); ?>" method="POST" class="space-y-4">
            <?php echo csrf_field(); ?>
            <div>
                <label class="block text-xs font-semibold text-slate-300 mb-1">Prospect / Company Name *</label>
                <input type="text" name="name" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Phone Number *</label>
                    <input type="text" name="phone" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Area / Sector</label>
                    <input type="text" name="area" placeholder="Sector 14" class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Interested Plan</label>
                    <input type="text" name="plan_interested" value="Fiber Pro 25 Mbps" class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Projected MRR (Rs)</label>
                    <input type="number" name="mrr_projected" value="999" class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                </div>
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-300 mb-1">Pipeline Stage *</label>
                <select name="status" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                    <option value="New">New</option>
                    <option value="Contacted">Contacted</option>
                    <option value="Qualified">Qualified</option>
                    <option value="Site survey">Site survey</option>
                    <option value="Converted">Converted</option>
                </select>
            </div>

            <div class="flex items-center justify-end gap-3 pt-3 border-t border-[#2a2a2e]">
                <button type="button" onclick="closeAddLeadModal()" class="px-4 py-2 text-xs font-semibold text-slate-400 hover:text-white">Cancel</button>
                <button type="submit" class="btn-orange text-xs px-5 py-2.5 rounded-xl">Save Prospect Lead</button>
            </div>
        </form>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
    function openAddLeadModal() {
        document.getElementById('addLeadModal').classList.remove('hidden');
    }
    function closeAddLeadModal() {
        document.getElementById('addLeadModal').classList.add('hidden');
    }
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\RentEz\Desktop\projects\billingCRM\resources\views/admin/leads/index.blade.php ENDPATH**/ ?>