@php
    $tabMeta = [
        'search' => ['label' => __('Search'), 'icon' => 'magnifying-glass'],
        'log' => ['label' => __('Search log'), 'icon' => 'list-bullet'],
    ];
    $metrics = [
        ['label' => __('Searches today'), 'value' => number_format($usage['today']), 'icon' => 'magnifying-glass', 'accent' => '#6366f1', 'sub' => __('of :cap a day', ['cap' => number_format($usage['daily_cap'])])],
        ['label' => __('Searches this month'), 'value' => number_format($usage['month']), 'icon' => 'calendar-days', 'accent' => '#0ea5e9', 'sub' => __('of :cap a month', ['cap' => number_format($usage['monthly_cap'])])],
        ['label' => __('Searches left today'), 'value' => number_format($usage['left']), 'icon' => 'fa-solid fa-gauge', 'accent' => $usage['left'] > 0 ? '#10b981' : '#f43f5e', 'sub' => $usage['left'] > 0 ? __('Within the budget') : __('Budget used up')],
        ['label' => __('Prospects added this month'), 'value' => number_format($addedThisMonth), 'icon' => 'user-plus', 'accent' => '#f59e0b', 'sub' => __('From Lead Finder searches')],
    ];
    $checkMeta = [
        'new' => ['label' => __('New'), 'color' => 'indigo'],
        'possible' => ['label' => __('Possible duplicate'), 'color' => 'amber'],
        'exact' => ['label' => __('Already in the CRM'), 'color' => 'slate'],
    ];
    $statusColor = ['completed' => 'emerald', 'refused' => 'amber', 'failed' => 'rose'];
    $showMap = $activeSource->mayShowOnMap();
    $keepsDetails = $resultsSourceObject?->mayKeepDetails() ?? true;
    $selectedCount = count($selected);
    $tz = config('app.display_timezone', 'Africa/Harare');
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <x-page-header :title="__('Lead Finder')">
            @can('createOrganisation', \App\Models\Customer::class)
                <a href="{{ route('crm.card-scanner') }}" wire:navigate>
                    <x-secondary-button type="button">
                        <x-icon name="camera" class="mr-1.5 h-4 w-4" /> {{ __('Scan a card') }}
                    </x-secondary-button>
                </a>
            @endcan
        </x-page-header>

        <section class="grid grid-cols-2 gap-4 lg:grid-cols-4">
            @foreach ($metrics as $m)
                <x-card class="group relative flex flex-col overflow-hidden p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40">
                    <div class="flex items-start justify-between gap-2">
                        <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400" title="{{ $m['label'] }}">{{ $m['label'] }}</p>
                        <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                            <x-icon :name="$m['icon']" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $m['value'] }}</p>
                    <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">{{ $m['sub'] }}</span>
                </x-card>
            @endforeach
        </section>

        <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium sm:w-fit">
            @foreach ($tabMeta as $key => $meta)
                <button type="button" wire:click="switchTab('{{ $key }}')"
                    class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $tab === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                    <x-icon :name="$meta['icon']" class="h-4 w-4" />
                    {{ $meta['label'] }}
                </button>
            @endforeach
        </div>

        @if ($tab === 'search')
            {{-- Search form --}}
            <x-card class="p-4 sm:p-5">
                <form wire:submit="search" class="space-y-4">
                    @if (count($sources) > 1)
                        <div>
                            <x-label :value="__('Search')" />
                            <div class="mt-1 flex w-fit flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                                @foreach ($sources as $key => $src)
                                    <button type="button" wire:click="$set('source', '{{ $key }}')"
                                        class="rounded-lg px-3 py-1.5 transition {{ $source === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">{{ $src->label() }}</button>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-12">
                        <div class="sm:col-span-4">
                            <x-label for="lf-category" :value="__('Looking for')" />
                            <select id="lf-category" wire:model="category" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">{{ __('Choose a kind of organisation') }}</option>
                                @foreach ($categories as $key => $cat)
                                    <option value="{{ $key }}">{{ __($cat['label']) }}</option>
                                @endforeach
                            </select>
                            <x-input-error for="category" class="mt-2" />
                        </div>
                        <div class="sm:col-span-5">
                            <x-label for="lf-area" :value="__('In')" />
                            <x-input id="lf-area" type="text" list="lf-area-suggestions" autocomplete="off" wire:model="area" class="mt-1 block w-full placeholder:text-xs" placeholder="{{ __('A town or suburb, for example Borrowdale, Harare') }}" />
                            <datalist id="lf-area-suggestions">
                                @foreach ($suggestions as $place)
                                    <option value="{{ $place }}"></option>
                                @endforeach
                            </datalist>
                            <x-input-error for="area" class="mt-2" />
                        </div>
                        <div class="flex items-end sm:col-span-3">
                            <x-button type="submit" class="w-full justify-center" wire:loading.attr="disabled" wire:target="search,searchMapArea" :disabled="$usage['left'] === 0">
                                <span wire:loading.remove wire:target="search" class="inline-flex items-center"><x-icon name="magnifying-glass" class="mr-1.5 h-4 w-4" /> {{ __('Search') }}</span>
                                <span wire:loading wire:target="search">{{ __('Searching…') }}</span>
                            </x-button>
                        </div>
                    </div>

                    <p class="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-500">
                        <span class="inline-flex items-center gap-1"><x-icon name="fa-solid fa-gauge" class="h-3.5 w-3.5" /> {{ trans_choice(':count search left today|:count searches left today', $usage['left'], ['count' => number_format($usage['left'])]) }}</span>
                        @if ($source === 'osm')
                            <span>{{ __('OpenStreetMap is free and open. Coverage in Zimbabwe is patchy and phone numbers are often missing, so each result shows how complete it is.') }}</span>
                        @else
                            <span>{{ __('Google results are shown as a list, not on the map, and only Google\'s place ID is kept. You confirm each organisation\'s details as you add it.') }}</span>
                        @endif
                    </p>
                </form>
            </x-card>

            <div class="grid grid-cols-1 gap-6 {{ $showMap ? 'lg:grid-cols-5' : '' }}">
                {{-- Map (OpenStreetMap results only) --}}
                @if ($showMap)
                    <div class="lg:order-2 lg:col-span-2">
                        <x-card class="overflow-hidden lg:sticky lg:top-20">
                            <div wire:ignore
                                x-data="crmLeadMap(@js([
                                    'tiles' => config('crm.lead_finder.osm.tile_url', 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'),
                                    'attribution' => '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors',
                                    'selectLabel' => __('Select or unselect'),
                                ]))"
                                x-on:crm-lead-map.window="receive($event.detail)">
                                <div class="relative">
                                    <div x-ref="canvas" class="h-64 w-full bg-slate-100 sm:h-80 lg:h-[30rem]" style="z-index: 0;"></div>
                                    <div x-show="loading" class="absolute inset-0 flex items-center justify-center text-sm text-slate-400">{{ __('Loading the map…') }}</div>
                                    <div x-show="failed" x-cloak class="absolute inset-0 flex items-center justify-center p-6 text-center text-sm text-slate-500">{{ __('The map could not load. Searching by typed area still works.') }}</div>
                                </div>
                                <div class="flex flex-col gap-2 border-t border-slate-100 p-3 sm:flex-row sm:items-center sm:justify-between">
                                    <p class="text-xs text-slate-500">{{ __('Move the map to the area you want, then search it.') }}</p>
                                    <x-secondary-button type="button" x-on:click="searchHere()" x-bind:disabled="loading || failed" wire:loading.attr="disabled" wire:target="search,searchMapArea">
                                        <x-icon name="map-pin" class="mr-1.5 h-4 w-4" />
                                        <span wire:loading.remove wire:target="searchMapArea">{{ __('Search this map area') }}</span>
                                        <span wire:loading wire:target="searchMapArea">{{ __('Searching…') }}</span>
                                    </x-secondary-button>
                                </div>
                            </div>
                            <div class="flex flex-wrap items-center gap-3 border-t border-slate-100 px-3 py-2 text-[11px] text-slate-500">
                                @foreach (['new' => ['#4f46e5', __('New')], 'possible' => ['#f59e0b', __('Possible duplicate')], 'exact' => ['#94a3b8', __('In the CRM')], 'added' => ['#10b981', __('Added')]] as [$colour, $label])
                                    <span class="inline-flex items-center gap-1"><span class="inline-block h-2.5 w-2.5 rounded-full" style="background: {{ $colour }}"></span>{{ $label }}</span>
                                @endforeach
                            </div>
                        </x-card>
                    </div>
                @endif

                {{-- Results --}}
                <div class="{{ $showMap ? 'lg:order-1 lg:col-span-3' : '' }}">
                    <x-card class="overflow-hidden">
                        @if ($search === null)
                            <x-empty-state icon="map-pin" :title="__('Search for prospects')"
                                :message="__('Pick a kind of organisation and an area. Results are checked against the CRM before you add anything.')"
                                class="border-0 bg-transparent py-12" />
                        @else
                            <div class="space-y-3 border-b border-slate-100 p-4 sm:p-5">
                                <div class="flex flex-col gap-1 sm:flex-row sm:items-baseline sm:justify-between">
                                    <div>
                                        <h2 class="text-base font-semibold text-slate-900">
                                            {{ trans_choice(':count result|:count results', $totalResults, ['count' => number_format($totalResults)]) }}
                                            <span class="font-normal text-slate-500">{{ __('for :category in :area', ['category' => __($categories[$search->category]['label'] ?? $search->category), 'area' => $searchedLabel]) }}</span>
                                        </h2>
                                        <p class="text-xs text-slate-400">
                                            {{ __('Data :credit', ['credit' => $resultsSourceObject?->attribution() === 'Google Maps' ? __('from Google Maps') : '© OpenStreetMap contributors']) }}@if ($fromCache) · {{ __('from today\'s saved results, no new search was sent') }}@endif
                                        </p>
                                    </div>
                                </div>

                                <div class="flex flex-wrap items-center gap-2 text-xs font-medium">
                                    @foreach (['hasPhone' => __('Has a phone'), 'hasWebsite' => __('Has a website'), 'hideInCrm' => __('Hide those in the CRM')] as $prop => $label)
                                        <label class="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-slate-200 px-2.5 py-1.5 text-slate-600 transition has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                            <input type="checkbox" wire:model.live="{{ $prop }}" class="sr-only" />
                                            {{ $label }}
                                        </label>
                                    @endforeach
                                </div>

                                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                                    <div class="flex items-center gap-3 text-xs">
                                        <button type="button" wire:click="selectVisible" class="font-medium text-indigo-600 hover:text-indigo-800">{{ __('Select all shown') }}</button>
                                        @if ($selectedCount > 0)
                                            <button type="button" wire:click="clearSelection" class="font-medium text-slate-500 hover:text-slate-700">{{ __('Clear') }}</button>
                                        @endif
                                    </div>
                                    <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
                                        @if ($portfolios !== [])
                                            <select wire:model="portfolioId" aria-label="{{ __('Portfolio') }}" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:w-56">
                                                <option value="">{{ __('No portfolio') }}</option>
                                                @foreach ($portfolios as $id => $name)
                                                    <option value="{{ $id }}">{{ __('Add to :portfolio', ['portfolio' => $name]) }}</option>
                                                @endforeach
                                            </select>
                                        @endif
                                        @can('createOrganisation', \App\Models\Customer::class)
                                            <x-button type="button" wire:click="addSelected" wire:loading.attr="disabled" wire:target="addSelected" :disabled="$selectedCount === 0" class="justify-center">
                                                <x-icon name="user-plus" class="mr-1.5 h-4 w-4" />
                                                <span wire:loading.remove wire:target="addSelected">{{ trans_choice('Add :count selected as a prospect|Add :count selected as prospects', $selectedCount, ['count' => $selectedCount]) }}</span>
                                                <span wire:loading wire:target="addSelected">{{ __('Adding…') }}</span>
                                            </x-button>
                                        @endcan
                                    </div>
                                </div>
                            </div>

                            <ul class="divide-y divide-slate-100">
                                @forelse ($rows as $key => $row)
                                    @php
                                        $l = $row['listing'];
                                        $check = $row['check'];
                                        $done = $added[$key] ?? null;
                                        $isSelected = in_array($key, $selected, true);
                                        $canPick = $done === null && $check['status'] !== 'exact';
                                        $have = collect(\App\Services\Crm\LeadFinder\Listing::DETAILS)->filter(fn ($f) => filled($l[$f] ?? null))->count();
                                        $of = count(\App\Services\Crm\LeadFinder\Listing::DETAILS);
                                        $sourceUrl = \App\Services\Crm\LeadFinder\Listing::fromArray($l)->sourceUrl();
                                    @endphp
                                    <li wire:key="lf-{{ md5($key) }}" class="flex gap-3 px-4 py-4 transition sm:px-5 {{ $isSelected ? 'bg-indigo-50/60' : 'hover:bg-slate-50/70' }}">
                                        <div class="pt-0.5">
                                            @if ($canPick)
                                                <button type="button" wire:click="toggle(@js($key))" aria-pressed="{{ $isSelected ? 'true' : 'false' }}" aria-label="{{ __('Select :name', ['name' => $l['name']]) }}"
                                                    class="flex h-6 w-6 items-center justify-center rounded-md border-2 transition {{ $isSelected ? 'border-indigo-600 bg-indigo-600 text-white' : 'border-slate-300 bg-white text-transparent hover:border-indigo-400' }}">
                                                    <x-icon name="fa-solid fa-check" class="h-3.5 w-3.5" />
                                                </button>
                                            @else
                                                <span class="flex h-6 w-6 items-center justify-center rounded-md {{ $done ? 'bg-emerald-100 text-emerald-600' : 'bg-slate-100 text-slate-400' }}">
                                                    <x-icon :name="$done ? 'fa-solid fa-check' : 'fa-solid fa-minus'" class="h-3.5 w-3.5" />
                                                </span>
                                            @endif
                                        </div>

                                        <div class="min-w-0 flex-1 space-y-1.5">
                                            <div class="flex flex-wrap items-start justify-between gap-2">
                                                <p class="font-semibold text-slate-900">{{ $l['name'] }}</p>
                                                <div class="flex flex-wrap items-center gap-1.5">
                                                    <x-badge :color="$have >= 3 ? 'emerald' : ($have >= 1 ? 'sky' : 'slate')">{{ __(':have of :of details', ['have' => $have, 'of' => $of]) }}</x-badge>
                                                    @if ($done)
                                                        <x-badge color="emerald">{{ $done['status'] === 'created' ? __('Added') : __('In the CRM') }}</x-badge>
                                                    @else
                                                        <x-badge :color="$checkMeta[$check['status']]['color'] ?? 'slate'">{{ $checkMeta[$check['status']]['label'] ?? $check['status'] }}</x-badge>
                                                    @endif
                                                </div>
                                            </div>

                                            @if ($l['address'])
                                                <p class="text-sm text-slate-500">{{ $l['address'] }}</p>
                                            @endif

                                            <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-600">
                                                @if ($l['phone'])
                                                    <a href="tel:{{ preg_replace('/[^0-9+]/', '', $l['phone']) }}" class="inline-flex items-center gap-1 hover:text-indigo-600"><x-icon name="phone" class="h-3.5 w-3.5 text-slate-400" /> {{ $l['phone'] }}</a>
                                                @endif
                                                @if ($l['website'])
                                                    <a href="{{ \Illuminate\Support\Str::startsWith($l['website'], ['http://', 'https://']) ? $l['website'] : 'https://'.$l['website'] }}" target="_blank" rel="noopener noreferrer" class="inline-flex min-w-0 items-center gap-1 break-all hover:text-indigo-600"><x-icon name="link" class="h-3.5 w-3.5 text-slate-400" /> {{ \Illuminate\Support\Str::limit(preg_replace('#^https?://(www\.)?#', '', $l['website']), 40) }}</a>
                                                @endif
                                                @if ($l['email'])
                                                    <a href="mailto:{{ $l['email'] }}" class="inline-flex min-w-0 items-center gap-1 break-all hover:text-indigo-600"><x-icon name="envelope" class="h-3.5 w-3.5 text-slate-400" /> {{ $l['email'] }}</a>
                                                @endif
                                                @if ($sourceUrl)
                                                    <a href="{{ $sourceUrl }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 text-slate-400 hover:text-indigo-600"><x-icon name="fa-solid fa-arrow-up-right-from-square" class="h-3 w-3" /> {{ $l['source'] === 'google' ? __('Google Maps') : __('OpenStreetMap') }}</a>
                                                @endif
                                            </div>

                                            @if ($done && $done['customer_id'])
                                                <a href="{{ route('crm.organisations.show', $done['customer_id']) }}" wire:navigate class="inline-flex items-center gap-1 text-xs font-medium text-emerald-700 hover:text-emerald-900">{{ __('Open the organisation') }} <x-icon name="chevron-right" class="h-3 w-3" /></a>
                                            @elseif ($check['status'] === 'exact' && $check['customer_id'])
                                                <a href="{{ route('crm.organisations.show', $check['customer_id']) }}" wire:navigate class="inline-flex items-center gap-1 text-xs text-slate-500 hover:text-indigo-600">{{ __('Already in the CRM as :name', ['name' => $check['customer_name']]) }} <x-icon name="chevron-right" class="h-3 w-3" /></a>
                                            @elseif ($check['status'] === 'possible')
                                                <div class="flex flex-wrap items-center gap-2 text-xs">
                                                    <span class="text-amber-700">{{ __('Looks like :name, already in the CRM.', ['name' => $check['customer_name']]) }}</span>
                                                    <a href="{{ route('crm.organisations.show', $check['customer_id']) }}" wire:navigate class="text-slate-500 underline hover:text-indigo-600">{{ __('Compare') }}</a>
                                                    <button type="button" wire:click="toggleAddAnyway(@js($key))"
                                                        class="rounded-md border px-2 py-0.5 font-medium transition {{ ($addAnyway[$key] ?? false) ? 'border-amber-400 bg-amber-50 text-amber-800' : 'border-slate-200 text-slate-600 hover:border-amber-300' }}">
                                                        {{ ($addAnyway[$key] ?? false) ? __('Will add anyway') : __('Add anyway') }}
                                                    </button>
                                                </div>
                                            @endif
                                        </div>

                                        @if ($canPick)
                                            @can('createOrganisation', \App\Models\Customer::class)
                                                <div class="shrink-0">
                                                    <button type="button" wire:click="addOne(@js($key))" wire:loading.attr="disabled" class="whitespace-nowrap text-sm font-medium text-indigo-600 transition hover:text-indigo-800">{{ $keepsDetails ? __('Add') : __('Confirm and add') }}</button>
                                                </div>
                                            @endcan
                                        @endif
                                    </li>
                                @empty
                                    <li class="px-6 py-12">
                                        <x-empty-state icon="magnifying-glass" :title="__('Nothing to show')"
                                            :message="$totalResults > 0 ? __('The filters hide every result. Clear a filter to see them.') : __('Nothing was found. Try a larger area or another category.')"
                                            class="border-0 bg-transparent py-0" />
                                    </li>
                                @endforelse
                            </ul>

                            @if ($resultsSourceObject && ! $resultsSourceObject->mayShowOnMap())
                                <div class="flex items-center justify-end border-t border-slate-100 px-4 py-2.5">
                                    {{-- Google's attribution for Places data shown without a Google map. --}}
                                    <span class="text-xs font-medium text-slate-500" style="font-family: Roboto, Arial, sans-serif;">Google Maps</span>
                                </div>
                            @endif
                        @endif
                    </x-card>
                </div>
            </div>
        @else
            {{-- Search log --}}
            <x-card class="overflow-hidden">
                <div class="border-b border-slate-100 p-4 sm:p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Search log') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Every search, who ran it and how many prospects it produced. The results themselves are not kept.') }}</p>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 py-3.5 lg:px-4">{{ __('When') }}</th>
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Who') }}</th>
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Search') }}</th>
                                <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Results') }}</th>
                                <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Prospects added') }}</th>
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Status') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($log as $entry)
                                <tr wire:key="lf-log-{{ $entry->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">{{ $entry->searched_at?->timezone($tz)->format('j M Y, H:i') }}</td>
                                    <td class="px-3 py-4 text-sm text-slate-900 lg:px-4">{{ $entry->user?->name ?? __('Not available') }}</td>
                                    <td class="px-3 py-4 text-sm text-slate-700 lg:px-4">
                                        {{ $entry->query }}
                                        @if ($entry->error)
                                            <p class="mt-0.5 text-xs text-slate-400">{{ $entry->error }}</p>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums text-slate-900 lg:px-4">{{ $entry->status === 'completed' ? number_format($entry->results_count) : __('Not applicable') }}</td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums text-slate-900 lg:px-4">{{ $entry->status === 'completed' ? number_format($entry->prospects_added) : __('Not applicable') }}</td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm lg:px-4"><x-badge :color="$statusColor[$entry->status] ?? 'slate'">{{ __(\App\Models\Crm\LeadFinderSearch::STATUSES[$entry->status] ?? $entry->status) }}</x-badge></td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-12">
                                        <x-empty-state icon="list-bullet" :title="__('No searches yet')" :message="__('Each Lead Finder search is listed here with who ran it and what it produced.')" class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if ($log->hasPages())
                    <div class="border-t border-slate-100 px-4 py-3 sm:px-6">{{ $log->links() }}</div>
                @endif
            </x-card>
        @endif
    </div>

    {{-- Confirm step for Google results: only the place ID is kept, so the officer confirms the details. --}}
    <x-dialog-modal wire:model.live="showConfirm" maxWidth="2xl">
        <x-slot name="title">
            {{ __('Confirm the organisation\'s details') }}
            @if (count($confirmQueue) > 1)
                <span class="ml-1 text-sm font-normal text-slate-400">{{ __(':count still to confirm', ['count' => count($confirmQueue)]) }}</span>
            @endif
        </x-slot>

        <x-slot name="content">
            <p class="text-sm text-slate-500">{{ __('Google lets BillPro keep only its place ID. Check these details, ideally with a call or the organisation\'s own website, and correct them. What you save becomes the company\'s own record.') }}</p>

            <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <x-label for="lf-c-name" :value="__('Organisation name')" />
                    <x-input id="lf-c-name" type="text" wire:model="confirm.name" class="mt-1 block w-full" />
                    <x-input-error for="confirm.name" class="mt-2" />
                </div>
                <div>
                    <x-label for="lf-c-phone" :value="__('Phone')" />
                    <x-input id="lf-c-phone" type="tel" wire:model="confirm.phone" class="mt-1 block w-full" />
                    <x-input-error for="confirm.phone" class="mt-2" />
                </div>
                <div>
                    <x-label for="lf-c-email" :value="__('Email')" />
                    <x-input id="lf-c-email" type="email" wire:model="confirm.email" class="mt-1 block w-full" />
                    <x-input-error for="confirm.email" class="mt-2" />
                </div>
                <div>
                    <x-label for="lf-c-website" :value="__('Website')" />
                    <x-input id="lf-c-website" type="text" wire:model="confirm.website" class="mt-1 block w-full" />
                    <x-input-error for="confirm.website" class="mt-2" />
                </div>
                <div>
                    <x-label for="lf-c-sector" :value="__('Sector')" />
                    <select id="lf-c-sector" wire:model="confirm.sector" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Not set') }}</option>
                        @foreach ($sectors as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="sm:col-span-2">
                    <x-label for="lf-c-address" :value="__('Address')" />
                    <x-input id="lf-c-address" type="text" wire:model="confirm.address" class="mt-1 block w-full" />
                    <x-input-error for="confirm.address" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <label class="flex items-start gap-2 text-sm text-slate-700">
                        <input type="checkbox" wire:model="confirmChecked" class="mt-0.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                        <span>{{ __('I have checked these details and they are correct.') }}</span>
                    </label>
                    <x-input-error for="confirmChecked" class="mt-2" />
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <div class="flex w-full flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-3">
                <x-secondary-button type="button" wire:click="closeConfirm">{{ __('Cancel') }}</x-secondary-button>
                @if (count($confirmQueue) > 1)
                    <x-secondary-button type="button" wire:click="skipConfirm">{{ __('Skip this one') }}</x-secondary-button>
                @endif
                <x-button type="button" wire:click="confirmAndAdd" wire:loading.attr="disabled" wire:target="confirmAndAdd" class="justify-center">
                    <span wire:loading.remove wire:target="confirmAndAdd">{{ __('Add as a prospect') }}</span>
                    <span wire:loading wire:target="confirmAndAdd">{{ __('Adding…') }}</span>
                </x-button>
            </div>
        </x-slot>
    </x-dialog-modal>
</div>