@extends('layouts.admin')

@section('title', 'Leads & Inquiries CRM – Admin Console')
@section('page_title', 'Inquiries & Customer Leads CRM')

@section('content')
<div class="space-y-6">
    
    <!-- Stats Row -->
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
        <div class="bg-slate-900 border border-white/10 rounded-xl p-4">
            <span class="text-[10px] uppercase font-bold text-blue-400 block">New Inquiries</span>
            <span class="text-2xl font-extrabold text-white mt-1 block">{{ $stats['new'] }}</span>
        </div>
        <div class="bg-slate-900 border border-white/10 rounded-xl p-4">
            <span class="text-[10px] uppercase font-bold text-amber-400 block">Contacted</span>
            <span class="text-2xl font-extrabold text-amber-400 mt-1 block">{{ $stats['contacted'] }}</span>
        </div>
        <div class="bg-slate-900 border border-white/10 rounded-xl p-4">
            <span class="text-[10px] uppercase font-bold text-purple-400 block">Hot & Interested</span>
            <span class="text-2xl font-extrabold text-purple-400 mt-1 block">{{ $stats['interested'] }}</span>
        </div>
        <div class="bg-slate-900 border border-white/10 rounded-xl p-4">
            <span class="text-[10px] uppercase font-bold text-emerald-400 block">Converted to Client</span>
            <span class="text-2xl font-extrabold text-emerald-400 mt-1 block">{{ $stats['converted'] }}</span>
        </div>
    </div>

    <!-- Filter & Search -->
    <div class="bg-slate-900 border border-white/10 rounded-2xl p-4 flex flex-col sm:flex-row items-center justify-between gap-4">
        <form method="GET" action="{{ route('admin.leads.index') }}" class="w-full sm:w-auto flex items-center gap-2 flex-1">
            <div class="relative flex-1">
                <i class="fa-solid fa-magnifying-glass absolute left-3 top-2.5 text-slate-400 text-xs"></i>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search lead name, phone, model..." class="w-full bg-slate-950 border border-white/10 rounded-xl pl-8 pr-3 py-1.5 text-white text-xs focus:border-red-500 focus:outline-none">
            </div>
            <select name="status" class="bg-slate-950 border border-white/10 rounded-xl px-3 py-1.5 text-white text-xs">
                <option value="">All Lead Statuses</option>
                <option value="new" {{ request('status') === 'new' ? 'selected' : '' }}>New</option>
                <option value="contacted" {{ request('status') === 'contacted' ? 'selected' : '' }}>Contacted</option>
                <option value="interested" {{ request('status') === 'interested' ? 'selected' : '' }}>Interested</option>
                <option value="follow_up" {{ request('status') === 'follow_up' ? 'selected' : '' }}>Follow Up</option>
                <option value="converted" {{ request('status') === 'converted' ? 'selected' : '' }}>Converted</option>
                <option value="lost" {{ request('status') === 'lost' ? 'selected' : '' }}>Lost</option>
            </select>
            <button type="submit" class="px-3 py-1.5 rounded-xl bg-white/10 hover:bg-white/20 text-white font-bold text-xs transition">
                Filter
            </button>
        </form>
    </div>

    <!-- Leads List -->
    <div class="bg-slate-900 border border-white/10 rounded-2xl overflow-hidden shadow-xl">
        <div class="divide-y divide-white/5">
            @forelse($leads as $lead)
                <div class="p-5 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-5 hover:bg-white/5 transition" x-data="{ editing: false }">
                    <div class="space-y-1.5 flex-1">
                        <div class="flex items-center gap-3">
                            <span class="text-sm font-bold text-white">{{ $lead->name }}</span>
                            <span class="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase {{ $lead->status === 'new' ? 'bg-blue-500/20 text-blue-300' : ($lead->status === 'converted' ? 'bg-emerald-500/20 text-emerald-300' : 'bg-slate-800 text-slate-300') }}">
                                {{ $lead->status }}
                            </span>
                            <span class="text-[10px] text-slate-500">Source: {{ $lead->source }}</span>
                        </div>
                        <p class="text-xs text-slate-300 flex items-center gap-4">
                            <span><i class="fa-solid fa-phone mr-1 text-slate-500"></i> {{ $lead->phone }}</span>
                            @if($lead->email) <span><i class="fa-solid fa-envelope mr-1 text-slate-500"></i> {{ $lead->email }}</span> @endif
                            <a href="https://wa.me/{{ $lead->phone }}" target="_blank" class="text-emerald-400 font-bold hover:underline flex items-center gap-1">
                                <i class="fa-brands fa-whatsapp"></i> WhatsApp
                            </a>
                        </p>
                        <p class="text-xs text-amber-400">
                            Vehicle Interest: <span class="font-bold">{{ $lead->vehicle_interest ?? 'General Pre-order' }}</span>
                            @if($lead->budget_bdt) · Budget: {{ $lead->budget_bdt }} @endif
                        </p>
                        @if($lead->message)
                            <p class="text-xs text-slate-400 italic bg-slate-950/60 p-2 rounded-lg border border-white/5 max-w-xl">
                                "{{ $lead->message }}"
                            </p>
                        @endif
                        @if($lead->sales_notes)
                            <p class="text-[11px] text-slate-300 bg-red-950/20 p-2 rounded-lg border border-red-500/20">
                                <span class="font-bold text-red-400">Sales Notes:</span> {{ $lead->sales_notes }}
                            </p>
                        @endif
                    </div>

                    <!-- Status & Assigned Staff Form -->
                    <div class="shrink-0 w-full lg:w-80">
                        <form method="POST" action="{{ route('admin.leads.update', $lead->id) }}" class="space-y-2 text-xs bg-slate-950 p-3 rounded-xl border border-white/5">
                            @csrf
                            <div class="grid grid-cols-2 gap-2">
                                <div>
                                    <label class="block text-[9px] uppercase font-bold text-slate-500 mb-0.5">Status</label>
                                    <select name="status" class="w-full bg-slate-900 border border-white/10 rounded-lg px-2 py-1 text-white text-xs">
                                        <option value="new" {{ $lead->status === 'new' ? 'selected' : '' }}>New</option>
                                        <option value="contacted" {{ $lead->status === 'contacted' ? 'selected' : '' }}>Contacted</option>
                                        <option value="interested" {{ $lead->status === 'interested' ? 'selected' : '' }}>Interested</option>
                                        <option value="follow_up" {{ $lead->status === 'follow_up' ? 'selected' : '' }}>Follow Up</option>
                                        <option value="converted" {{ $lead->status === 'converted' ? 'selected' : '' }}>Converted</option>
                                        <option value="lost" {{ $lead->status === 'lost' ? 'selected' : '' }}>Lost</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-[9px] uppercase font-bold text-slate-500 mb-0.5">Assigned To</label>
                                    <select name="assigned_to" class="w-full bg-slate-900 border border-white/10 rounded-lg px-2 py-1 text-white text-xs">
                                        <option value="">Unassigned</option>
                                        @foreach($staffMembers as $staff)
                                            <option value="{{ $staff->id }}" {{ $lead->assigned_to == $staff->id ? 'selected' : '' }}>{{ $staff->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <input type="text" name="sales_notes" value="{{ $lead->sales_notes }}" placeholder="Add quick update..." class="w-full bg-slate-900 border border-white/10 rounded-lg px-2.5 py-1 text-white text-xs">
                            <button type="submit" class="w-full py-1.5 rounded-lg bg-red-600 hover:bg-red-700 text-white font-bold text-[11px] transition">
                                Update Lead
                            </button>
                        </form>
                    </div>
                </div>
            @empty
                <div class="p-8 text-center text-slate-400 text-xs">
                    No leads found matching your criteria.
                </div>
            @endforelse
        </div>
        <div class="p-4 border-t border-white/10">
            {{ $leads->links() }}
        </div>
    </div>

</div>
@endsection