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

@section('content')
<div class="flex flex-wrap items-center justify-between gap-3">
    <nav class="flex gap-1 text-sm" aria-label="View">
        <a href="{{ route('leads.index', array_merge($filters, ['view' => 'board'])) }}" class="btn-quiet px-3 py-1.5">Pipeline</a>
        <a href="{{ route('leads.index', array_merge($filters, ['view' => 'list'])) }}" class="btn-primary px-3 py-1.5" aria-current="page">List</a>
    </nav>
    @can('leads.create')<a href="{{ route('leads.create') }}" class="btn-primary">Add lead</a>@endcan
</div>
<div class="mt-4">@include('leads._filters')</div>

<div class="mt-4 overflow-x-auto rounded-lg border border-line bg-panel">
    <table class="min-w-full text-left text-sm">
        <caption class="sr-only">Leads</caption>
        <thead class="border-b border-line bg-ground text-xs text-muted"><tr>
            <th scope="col" class="px-3 py-2 font-medium">Customer</th><th scope="col" class="px-3 py-2 font-medium">Stage</th><th scope="col" class="px-3 py-2 font-medium">Interest</th>
            <th scope="col" class="px-3 py-2 font-medium">Source</th><th scope="col" class="px-3 py-2 font-medium">Owner</th><th scope="col" class="px-3 py-2 font-medium">Response</th><th scope="col" class="px-3 py-2 font-medium">Created</th></tr></thead>
        <tbody class="divide-y divide-line">
        @forelse ($leads as $l)
            <tr class="hover:bg-ground/60">
                <td class="px-3 py-2 font-medium"><a class="underline decoration-line underline-offset-2" href="{{ route('leads.show', $l) }}">{{ $l->customer->name }}</a><span class="block text-xs text-muted">{{ $l->customer->display_phone }}</span></td>
                <td class="px-3 py-2"><span class="inline-flex rounded-full border px-2.5 py-0.5 text-xs font-semibold {{ $l->stage->badge() }}">{{ $l->stage->label() }}</span></td>
                <td class="px-3 py-2">{{ $l->interestVehicle?->display_name ?? \Illuminate\Support\Str::limit($l->interest_notes, 40) ?: 'Not specified' }}</td>
                <td class="px-3 py-2">{{ config('crm.sources')[$l->source] ?? $l->source }}</td>
                <td class="px-3 py-2">{{ $l->assignee?->name ?? 'Unassigned' }}</td>
                <td class="px-3 py-2"><x-sla-chip :lead="$l" /></td>
                <td class="px-3 py-2 text-muted">{{ $l->created_at->format('d M Y') }}</td>
            </tr>
        @empty
            <tr><td colspan="7" class="px-3 py-10 text-center text-muted">No leads match.</td></tr>
        @endforelse
        </tbody>
    </table>
</div>
<div class="mt-3">{{ $leads->links() }}</div>
@endsection