@extends('layouts.app')
@section('title', 'CRM — Leads')

@push('styles')
<style>
.pipeline-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;}
.pipeline-col{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.pipeline-col-header{padding:12px 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.pipeline-col-header .count{background:rgba(0,0,0,0.06);border-radius:100px;padding:2px 8px;font-size:11px;}
.pipeline-cards{padding:8px;display:flex;flex-direction:column;gap:8px;min-height:80px;}
.lead-card{background:white;border:1px solid var(--border);border-radius:8px;padding:12px;cursor:pointer;transition:all .15s;}
.lead-card:hover{border-color:var(--primary);box-shadow:0 0 0 3px rgba(38,217,211,.08);}
.lead-card .name{font-size:13px;font-weight:600;margin-bottom:2px;}
.lead-card .company{font-size:12px;color:var(--text-muted);margin-bottom:6px;}
.lead-card .meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);}
.lead-card .value{font-size:12px;font-weight:600;color:var(--primary);}
.col-new .pipeline-col-header{border-top:3px solid #94a3b8;}
.col-contacted .pipeline-col-header{border-top:3px solid #3b82f6;}
.col-qualified .pipeline-col-header{border-top:3px solid #f59e0b;}
.col-converted .pipeline-col-header{border-top:3px solid #10b981;}
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <div class="page-title">CRM — Leads</div>
        <div class="page-subtitle">Track and convert sales leads</div>
    </div>
    <div class="page-actions">
        <a href="{{ route('crm.leads.create') }}" class="btn btn-primary"><i class="fas fa-plus"></i> New Lead</a>
        <a href="{{ route('crm.opportunities.index') }}" class="btn btn-secondary"><i class="fas fa-funnel-dollar"></i> Opportunities</a>
    </div>
</div>

<!-- STAT CARDS -->
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px;">
    <div class="stat-card blue"><div class="stat-icon blue"><i class="fas fa-users"></i></div><div class="stat-label">New Leads</div><div class="stat-value">{{ $stats['new'] }}</div></div>
    <div class="stat-card blue"><div class="stat-icon blue"><i class="fas fa-phone"></i></div><div class="stat-label">Contacted</div><div class="stat-value">{{ $stats['contacted'] }}</div></div>
    <div class="stat-card amber"><div class="stat-icon amber"><i class="fas fa-star"></i></div><div class="stat-label">Qualified</div><div class="stat-value">{{ $stats['qualified'] }}</div></div>
    <div class="stat-card green"><div class="stat-icon green"><i class="fas fa-check-circle"></i></div><div class="stat-label">Converted</div><div class="stat-value">{{ $stats['converted'] }}</div></div>
    <div class="stat-card blue"><div class="stat-icon blue"><i class="fas fa-funnel-dollar"></i></div><div class="stat-label">Pipeline Value</div><div class="stat-value" style="font-size:16px;">৳{{ number_format($stats['total_value'], 0) }}</div></div>
</div>

<!-- FILTERS -->
<div class="card mb-4">
    <div class="card-body" style="padding:14px 16px;">
        <form method="GET" style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:10px;align-items:end;">
            <input type="text" name="search" class="form-control" placeholder="Search by name, company, phone..." value="{{ request('search') }}">
            <select name="status" class="form-control"><option value="">All Status</option>@foreach(['new','contacted','qualified','unqualified','converted','lost'] as $s)<option value="{{ $s }}" {{ request('status')===$s?'selected':'' }}>{{ ucfirst($s) }}</option>@endforeach</select>
            <select name="source" class="form-control"><option value="">All Sources</option>@foreach(['website','referral','cold_call','email','social_media','exhibition','advertisement','other'] as $s)<option value="{{ $s }}" {{ request('source')===$s?'selected':'' }}>{{ ucfirst(str_replace('_',' ',$s)) }}</option>@endforeach</select>
            <select name="assigned_to" class="form-control"><option value="">All Users</option>@foreach($users as $u)<option value="{{ $u->id }}" {{ request('assigned_to')==$u->id?'selected':'' }}>{{ $u->name }}</option>@endforeach</select>
            <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
        </form>
    </div>
</div>

<!-- PIPELINE BOARD (if no filters) -->
@if(!request()->hasAny(['search','status','source','assigned_to']))
<div class="pipeline-bar">
    @php
    $stages = ['new'=>['label'=>'New','class'=>'col-new'],'contacted'=>['label'=>'Contacted','class'=>'col-contacted'],'qualified'=>['label'=>'Qualified','class'=>'col-qualified'],'converted'=>['label'=>'Converted','class'=>'col-converted']];
    @endphp
    @foreach($stages as $stage => $cfg)
    <div class="pipeline-col {{ $cfg['class'] }}">
        <div class="pipeline-col-header">
            {{ $cfg['label'] }}
            <span class="count">{{ $leads->where('status',$stage)->count() }}</span>
        </div>
        <div class="pipeline-cards">
            @foreach($leads->where('status',$stage)->take(5) as $lead)
            <div class="lead-card" onclick="window.location='{{ route('crm.leads.show',$lead) }}'">
                <div class="name">{{ $lead->lead_name }}</div>
                <div class="company">{{ $lead->company_name ?? '—' }}</div>
                <div class="meta">
                    <span>{{ $lead->phone ?? '—' }}</span>
                    @if($lead->estimated_value > 0)<span class="value">৳{{ number_format($lead->estimated_value,0) }}</span>@endif
                </div>
            </div>
            @endforeach
            @if($leads->where('status',$stage)->count() > 5)
            <div style="text-align:center;font-size:11px;color:var(--text-muted);padding:4px;">+{{ $leads->where('status',$stage)->count()-5 }} more</div>
            @endif
        </div>
    </div>
    @endforeach
</div>
@endif

<!-- LEADS TABLE -->
<div class="card">
    <div class="table-wrapper">
        <table>
            <thead><tr><th>Lead Name</th><th>Company</th><th>Source</th><th>Phone</th><th>Assigned To</th><th class="text-right">Est. Value</th><th>Status</th><th>Priority</th><th class="text-center">Actions</th></tr></thead>
            <tbody>
                @forelse($leads as $lead)
                <tr>
                    <td><a href="{{ route('crm.leads.show',$lead) }}" style="font-weight:600;color:var(--text);text-decoration:none;">{{ $lead->lead_name }}</a></td>
                    <td style="color:var(--text-muted);">{{ $lead->company_name ?? '—' }}</td>
                    <td><span class="badge badge-info" style="font-size:11px;">{{ ucfirst(str_replace('_',' ',$lead->source)) }}</span></td>
                    <td style="font-size:12px;">{{ $lead->phone ?? '—' }}</td>
                    <td style="font-size:12px;">{{ $lead->assignedTo->name ?? 'Unassigned' }}</td>
                    <td class="text-right font-semibold">{{ $lead->estimated_value > 0 ? '৳'.number_format($lead->estimated_value,0) : '—' }}</td>
                    <td>
                        @php $cls=['new'=>'info','contacted'=>'primary','qualified'=>'warning','unqualified'=>'secondary','converted'=>'success','lost'=>'danger']; @endphp
                        <span class="badge badge-{{ $cls[$lead->status]??'secondary' }}">{{ ucfirst($lead->status) }}</span>
                    </td>
                    <td>
                        @php $pcls=['low'=>'secondary','medium'=>'warning','high'=>'danger']; @endphp
                        <span class="badge badge-{{ $pcls[$lead->priority]??'secondary' }}">{{ ucfirst($lead->priority) }}</span>
                    </td>
                    <td class="text-center">
                        <div style="display:flex;gap:4px;justify-content:center;">
                            <a href="{{ route('crm.leads.show',$lead) }}" class="btn btn-xs btn-secondary"><i class="fas fa-eye"></i></a>
                            <a href="{{ route('crm.leads.edit',$lead) }}" class="btn btn-xs btn-secondary"><i class="fas fa-edit"></i></a>
                            @if($lead->status !== 'converted')
                            <form method="POST" action="{{ route('crm.leads.convert',$lead) }}" style="display:inline;">
                                @csrf
                                <button type="submit" class="btn btn-xs btn-success" title="Convert to Customer" onclick="return confirm('Convert this lead to a customer?')"><i class="fas fa-exchange-alt"></i></button>
                            </form>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="9" class="text-center text-muted" style="padding:40px;">No leads found. <a href="{{ route('crm.leads.create') }}">Add your first lead</a></td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($leads->hasPages())
    <div class="card-footer" style="display:flex;justify-content:space-between;align-items:center;">
        <div style="font-size:13px;color:var(--text-muted);">{{ $leads->firstItem() }}–{{ $leads->lastItem() }} of {{ $leads->total() }}</div>
        <div>{{ $leads->withQueryString()->links() }}</div>
    </div>
    @endif
</div>
@endsection