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

@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-primary px-3 py-1.5" aria-current="page">Pipeline</a>
        <a href="{{ route('leads.index', array_merge($filters, ['view' => 'list'])) }}" class="btn-quiet px-3 py-1.5">List</a>
    </nav>
    @can('leads.create')<a href="{{ route('leads.create') }}" class="btn-primary">Add lead</a>@endcan
</div>

{{-- What needs attention right now. Each count filters the board. --}}
<ul class="mt-4 flex flex-wrap gap-3 text-sm">
    <li><a href="{{ route('leads.index', ['sla' => 'breached']) }}" class="inline-flex items-center gap-2 rounded-md border px-3 py-1.5 {{ $counts['breached'] ? 'border-red-300 bg-red-50 text-red-900 font-semibold' : 'border-line bg-panel text-muted' }}">{{ $counts['breached'] }} overdue replies</a></li>
    <li><a href="{{ route('leads.index', ['sla' => 'follow_up']) }}" class="inline-flex items-center gap-2 rounded-md border px-3 py-1.5 {{ $counts['followups'] ? 'border-amber-300 bg-amber-50 text-amber-900 font-semibold' : 'border-line bg-panel text-muted' }}">{{ $counts['followups'] }} follow-ups due</a></li>
    <li><a href="{{ route('leads.index', ['assignee' => 'unassigned']) }}" class="inline-flex items-center gap-2 rounded-md border px-3 py-1.5 {{ $counts['unassigned'] ? 'border-sky-300 bg-sky-50 text-sky-900 font-semibold' : 'border-line bg-panel text-muted' }}">{{ $counts['unassigned'] }} unassigned</a></li>
</ul>

<div class="mt-4">@include('leads._filters')</div>

<div class="mt-5 flex snap-x gap-3 overflow-x-auto pb-4" tabindex="0" role="region" aria-label="Pipeline columns, scroll sideways">
    @foreach (\App\Enums\LeadStage::cases() as $stage)
        @php $items = $columns[$stage->value]; @endphp
        <section class="w-72 shrink-0 snap-start rounded-lg border border-line border-t-4 bg-ground p-2 {{ $stage->accent() }}" aria-labelledby="col-{{ $stage->value }}">
            <h2 id="col-{{ $stage->value }}" class="flex items-center justify-between px-1 pb-2 text-sm font-semibold">
                {{ $stage->label() }}
                <span class="rounded-full bg-white px-2 py-0.5 text-xs font-medium text-muted">{{ $items->count() }}</span>
            </h2>
            @unless ($stage->isOpen())<p class="px-1 pb-2 text-xs text-muted">Last 30 days</p>@endunless
            <div class="space-y-2">
                @forelse ($items as $lead)
                    @include('leads._card', ['lead' => $lead])
                @empty
                    <p class="px-1 py-4 text-center text-xs text-muted">Nothing here</p>
                @endforelse
            </div>
        </section>
    @endforeach
</div>
@endsection