@extends('layouts.app')

@section('title', 'DEWA Gram Udhyog • Leads CRM')

@section('content')
<div class="space-y-6">

    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-xl font-bold text-slate-900">Leads CRM & Customer Enquiries</h1>
            <p class="text-xs text-slate-500">Track and convert incoming customer inquiries generated from WhatsApp marketing campaigns</p>
        </div>
    </div>

    <!-- Pipeline Table -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="p-5 border-b border-slate-100 flex items-center justify-between">
            <h3 class="font-bold text-slate-900 text-sm">Active Customer Opportunities</h3>
            <span class="text-xs font-semibold text-emerald-700 bg-emerald-50 px-2.5 py-1 rounded-full border border-emerald-200">
                Pipeline Value: ₹{{ number_format($leads->sum('conversion_value')) }}
            </span>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-slate-600">
                <thead class="bg-slate-50 text-slate-400 uppercase font-bold text-[10px] tracking-wider border-b border-slate-100">
                    <tr>
                        <th class="py-3 px-4">Customer Name</th>
                        <th class="py-3 px-4">WhatsApp Phone</th>
                        <th class="py-3 px-4">Product Interest</th>
                        <th class="py-3 px-4">Pipeline Status</th>
                        <th class="py-3 px-4">Deal Value</th>
                        <th class="py-3 px-4">Assigned Desk</th>
                        <th class="py-3 px-4">Notes</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($leads as $lead)
                    <tr class="hover:bg-slate-50/70 transition">
                        <td class="py-3.5 px-4 font-bold text-slate-900">{{ $lead->customer_name }}</td>
                        <td class="py-3.5 px-4 font-mono font-medium text-slate-800">{{ $lead->phone_number }}</td>
                        <td class="py-3.5 px-4">{{ $lead->product_interest }}</td>
                        <td class="py-3.5 px-4">
                            <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold {{ $lead->status === 'WON' ? 'bg-emerald-100 text-emerald-800' : ($lead->status === 'IN_NEGOTIATION' ? 'bg-amber-100 text-amber-800' : 'bg-sky-100 text-sky-800') }}">
                                {{ str_replace('_', ' ', $lead->status) }}
                            </span>
                        </td>
                        <td class="py-3.5 px-4 font-bold text-slate-900">₹{{ number_format($lead->conversion_value) }}</td>
                        <td class="py-3.5 px-4 text-slate-500">{{ $lead->assigned_to ?: 'Bhiwani Sales Desk' }}</td>
                        <td class="py-3.5 px-4 text-slate-400 truncate max-w-xs">{{ $lead->notes }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="py-8 text-center text-slate-400">No leads recorded yet. Customer replies from campaigns will auto-populate here.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="p-4 border-t border-slate-100">
            {{ $leads->links() }}
        </div>
    </div>

</div>
@endsection