@php
    use App\Models\Activity;
    $seesAll = auth()->user()->seesAllRecords();
    $total = $activities->count() + $loans->count() + $contacts->count() + $zoho->count();
@endphp
<x-layouts.app title="Search" subtitle="Find a customer by mobile number, name or car registration number — in Top Gear CRM and Zoho CRM."
               :breadcrumbs="['Overview' => null, 'Search' => null]">

    <form method="GET" action="{{ route('search.index') }}" class="card flex flex-col gap-3 p-4 sm:flex-row sm:items-center">
        <div class="relative flex-1">
            <x-heroicon-o-magnifying-glass class="pointer-events-none absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2 text-ink-400" />
            <input type="search" name="q" value="{{ $term }}" autofocus minlength="3" maxlength="60" required
                   placeholder="e.g. 98250 12345, GJ05AB1234 or Ramesh Patel"
                   class="form-input py-3 pl-12 text-base {{ $errors->has('q') ? 'border-rose-400' : '' }}">
        </div>
        <button class="btn btn-brand px-6 py-3"><x-heroicon-m-magnifying-glass class="h-4 w-4" /> Search</button>
    </form>
    @error('q')<p class="form-error mt-2">{{ $message }}</p>@enderror

    @unless ($zohoConfigured)
        <div class="mt-4 flex items-start gap-3 rounded-xl border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-800 dark:border-sky-500/20 dark:bg-sky-500/10 dark:text-sky-300">
            <x-heroicon-s-information-circle class="mt-0.5 h-5 w-5 shrink-0" />
            <div>Zoho CRM is not connected, so only Top Gear CRM data is searched. Ask an administrator to configure the Zoho credentials to search Zoho contacts too.</div>
        </div>
    @endunless
    @if ($zohoError)
        <div class="mt-4 flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300">
            <x-heroicon-s-exclamation-triangle class="mt-0.5 h-5 w-5 shrink-0" /><div>{{ $zohoError }}</div>
        </div>
    @endif

    @if ($term === '')
        <x-empty-state class="mt-6 card" title="Start typing to search" message="Search by full or partial mobile number, the start of the registration number, or part of the customer name (at least 3 characters)." icon="heroicon-o-magnifying-glass" />
    @elseif ($total === 0)
        <x-empty-state class="mt-6 card" title="No matches for “{{ $term }}”" message="Check the number or try the registration number without spaces." icon="heroicon-o-face-frown" />
    @else
        <div class="mt-6 space-y-6" x-data="{ tab: '{{ $activities->isNotEmpty() ? 'activities' : ($loans->isNotEmpty() ? 'loans' : ($contacts->isNotEmpty() ? 'contacts' : 'zoho')) }}' }">
            <div class="flex gap-1 overflow-x-auto border-b border-ink-200 dark:border-ink-800">
                @foreach (array_filter([
                    'activities' => ['Activities', $activities->count()],
                    'loans' => ['Leads (loan data)', $loans->count()],
                    'contacts' => $seesAll ? ['Contacts', $contacts->count()] : null,
                    'zoho' => $zohoConfigured ? ['Zoho CRM', $zoho->count()] : null,
                ]) as $key => [$label, $count])
                    <button type="button" @click="tab = '{{ $key }}'"
                            class="-mb-px flex shrink-0 items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition"
                            :class="tab === '{{ $key }}' ? 'border-brand-500 text-ink-900 dark:text-white' : 'border-transparent text-ink-500 hover:text-ink-800 dark:hover:text-ink-200'">
                        {{ $label }} <span class="rounded-full bg-ink-100 px-2 py-0.5 text-xs tabular-nums dark:bg-ink-800">{{ $count }}{{ $count >= \App\Http\Controllers\Crm\SearchController::LOCAL_LIMIT && $key !== 'activities' ? '+' : '' }}</span>
                    </button>
                @endforeach
            </div>

            {{-- Activities --}}
            <div x-show="tab === 'activities'">
                <x-card :padded="false">
                    @if ($activities->isEmpty())
                        <x-empty-state title="No activities for these leads" message="{{ $seesAll ? 'The matching leads have not been assigned yet.' : 'None of the matching leads are assigned to you.' }}" icon="heroicon-o-clipboard-document-check" />
                    @else
                        <div class="table-wrap">
                            <table class="table">
                                <thead><tr><th>Contact</th><th>Subject</th><th>Status</th><th>Final remark</th><th>Due</th><th>Assigned to</th><th></th></tr></thead>
                                <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                                    @foreach ($activities as $a)
                                        <tr>
                                            <td>
                                                <a href="{{ route('activities.show', $a) }}" class="font-medium text-ink-900 hover:text-brand-600 dark:text-white">{{ $a->displayName() ?? 'Unnamed lead' }}</a>
                                                <div class="text-xs text-ink-500 tabular-nums">{{ $a->displayMobile() }} @if ($a->loanData?->car_reg_no) · {{ $a->loanData->car_reg_no }} @endif</div>
                                            </td>
                                            <td>{{ $a->subject ?: '—' }}</td>
                                            <td><span class="badge {{ $a->statusBadge() }}">{{ $a->status }}</span></td>
                                            <td>{{ $a->clean('final_remark_ins_loan') ?? '—' }}</td>
                                            <td class="tabular-nums {{ $a->isOverdue() ? 'text-rose-600' : '' }}">{{ $a->due_date?->format('d-m-Y') ?? '—' }}</td>
                                            <td>{{ $a->user?->name ?? '—' }}</td>
                                            <td class="text-right"><a href="{{ route('activities.show', $a) }}" class="btn btn-secondary btn-sm">Open follow-up</a></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </x-card>
            </div>

            {{-- Loan data leads --}}
            <div x-show="tab === 'loans'" x-cloak>
                <x-card :padded="false">
                    @if ($loans->isEmpty())
                        <x-empty-state title="No matching leads" icon="heroicon-o-identification" />
                    @else
                        <div class="table-wrap">
                            <table class="table">
                                <thead><tr><th>Name</th><th>Mobile</th><th>Reg no</th><th>Model</th><th>Location</th><th>Allocated</th><th>Activities</th></tr></thead>
                                <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                                    @foreach ($loans as $l)
                                        @php($acts = $activities->where('loantype_id', $l->id))
                                        <tr>
                                            <td class="font-medium text-ink-900 dark:text-white">{{ $l->contact_name ?: '—' }}</td>
                                            <td class="tabular-nums">{{ $l->mobile ?: '—' }}</td>
                                            <td class="tabular-nums">{{ $l->car_reg_no ?: '—' }}</td>
                                            <td>{{ collect([$l->model_picklist, $l->vahan_year_pick_list])->filter()->implode(' · ') ?: '—' }}</td>
                                            <td>{{ $l->location ?: '—' }}</td>
                                            <td class="tabular-nums">{{ $l->data_allocation_date && $l->data_allocation_date->year > 1970 ? $l->data_allocation_date->format('d-m-Y') : '—' }}</td>
                                            <td>
                                                <div class="flex flex-wrap gap-1">
                                                    @forelse ($acts as $a)
                                                        <a href="{{ route('activities.show', $a) }}" class="badge {{ $a->statusBadge() }} hover:opacity-80" title="{{ $a->status }}">{{ $a->user?->name ?? 'Activity #'.$a->id }}</a>
                                                    @empty
                                                        <span class="text-xs text-ink-400">Not assigned</span>
                                                    @endforelse
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </x-card>
            </div>

            {{-- Local contacts --}}
            @if ($seesAll)
                <div x-show="tab === 'contacts'" x-cloak>
                    <x-card :padded="false">
                        @if ($contacts->isEmpty())
                            <x-empty-state title="No matching contacts" icon="heroicon-o-user-group" />
                        @else
                            <div class="table-wrap">
                                <table class="table">
                                    <thead><tr><th>Name</th><th>Mobile</th><th>Reg no</th><th>Model</th><th>Location</th><th>Activities</th></tr></thead>
                                    <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                                        @foreach ($contacts as $c)
                                            @php($acts = $activities->where('contact_id', $c->contact_id))
                                            <tr>
                                                <td class="font-medium text-ink-900 dark:text-white">{{ Activity::firstFilled($c->contact_name, $c->company) ?? '—' }}
                                                    @if ($c->keyword)<span class="badge badge-gray ml-1">{{ $c->keyword }}</span>@endif</td>
                                                <td class="tabular-nums">{{ $c->mobile ?: '—' }}</td>
                                                <td class="tabular-nums">{{ $c->car_reg_no ?: '—' }}</td>
                                                <td>{{ $c->model_picklist ?: '—' }}</td>
                                                <td>{{ $c->location ?: '—' }}</td>
                                                <td>
                                                    @forelse ($acts as $a)
                                                        <a href="{{ route('activities.show', $a) }}" class="badge {{ $a->statusBadge() }}">{{ $a->user?->name ?? '#'.$a->id }}</a>
                                                    @empty
                                                        <span class="text-xs text-ink-400">—</span>
                                                    @endforelse
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif
                    </x-card>
                </div>
            @endif

            {{-- Zoho CRM --}}
            @if ($zohoConfigured)
                <div x-show="tab === 'zoho'" x-cloak x-data="{ picked: [] }">
                    <x-card :padded="false">
                        <form method="POST" action="{{ route('search.zoho.save') }}" x-data="confirmSubmit('Save the selected Zoho contacts to Top Gear CRM?')" @submit="submit">
                            @csrf
                            <input type="hidden" name="q" value="{{ $term }}">
                            <div class="flex items-center justify-between gap-3 border-b border-ink-100 px-4 py-2.5 text-sm dark:border-ink-800">
                                <span class="text-ink-500"><span x-text="picked.length"></span> selected</span>
                                <button class="btn btn-brand btn-sm" :disabled="!picked.length"><x-heroicon-m-arrow-down-on-square class="h-4 w-4" /> Save contact</button>
                            </div>
                            @if ($zoho->isEmpty())
                                <x-empty-state title="No Zoho contacts match" icon="heroicon-o-cloud" />
                            @else
                                <div class="table-wrap">
                                    <table class="table table-compact">
                                        <thead><tr><th class="w-10"></th><th>Last name</th><th>Mobile</th><th>Reg no</th><th>Vahan year</th><th>HPA</th><th>Location</th><th>Ins start month</th><th>Model</th><th>Segment</th><th>In CRM</th></tr></thead>
                                        <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                                            @foreach ($zoho as $z)
                                                <tr>
                                                    <td>@unless ($z['in_contacts'])<input type="checkbox" name="zoho_ids[]" value="{{ $z['id'] }}" x-model="picked" class="form-checkbox" aria-label="Select {{ $z['name'] }}">@endunless</td>
                                                    <td class="font-medium text-ink-900 dark:text-white">{{ $z['name'] ?? '—' }}</td>
                                                    <td class="tabular-nums">{{ $z['mobile'] ?? '—' }}</td>
                                                    <td class="tabular-nums">{{ $z['car_reg_no'] ?? '—' }}</td>
                                                    <td>{{ $z['vahan_year'] ?? '—' }}</td>
                                                    <td>{{ $z['hpa'] ?? '—' }}</td>
                                                    <td>{{ $z['location'] ?? '—' }}</td>
                                                    <td>{{ $z['ins_start_month'] ?? '—' }}</td>
                                                    <td>{{ $z['model'] ?? '—' }}</td>
                                                    <td>{{ $z['segment'] ?? '—' }}</td>
                                                    <td>
                                                        @if ($z['in_contacts'])<span class="badge badge-green">Contact</span>@endif
                                                        @if ($z['loan_id'])<span class="badge badge-blue">Lead #{{ $z['loan_id'] }}</span>@endif
                                                        @if (! $z['in_contacts'] && ! $z['loan_id'])<span class="text-xs text-ink-400">No</span>@endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                        </form>
                    </x-card>
                </div>
            @endif
        </div>
    @endif
</x-layouts.app>