@php
    $fieldMeta = [
        'name' => ['label' => __('Name'), 'type' => 'text', 'auto' => 'name', 'span' => 'sm:col-span-2'],
        'title' => ['label' => __('Job title'), 'type' => 'text', 'auto' => 'organization-title', 'span' => ''],
        'company' => ['label' => __('Company'), 'type' => 'text', 'auto' => 'organization', 'span' => ''],
        'phone' => ['label' => __('Phone'), 'type' => 'tel', 'auto' => 'tel', 'span' => ''],
        'mobile' => ['label' => __('Mobile or WhatsApp'), 'type' => 'tel', 'auto' => 'tel', 'span' => ''],
        'email' => ['label' => __('Email'), 'type' => 'email', 'auto' => 'email', 'span' => ''],
        'website' => ['label' => __('Website'), 'type' => 'url', 'auto' => 'url', 'span' => ''],
        'address' => ['label' => __('Address'), 'type' => 'text', 'auto' => 'street-address', 'span' => 'sm:col-span-2'],
    ];
    $matchedOn = ['email' => __('email'), 'phone' => __('phone'), 'website' => __('website'), 'name' => __('similar name')];
    $chosenEvent = $events->firstWhere('id', (int) $eventId);
@endphp

<div class="px-4 py-6 sm:px-6 sm:py-8 lg:px-8">
    <div class="mx-auto max-w-2xl space-y-5">
        <x-page-header :title="__('Scan a Business Card')" class="!mb-0" />

        {{-- The event, kept between scans --}}
        <x-card class="p-4">
            <x-label for="cs-event" :value="__('Event')" />
            <select id="cs-event" wire:model.live="eventId" class="mt-1 block w-full rounded-xl border-slate-300 py-3 text-base shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:py-2 sm:text-sm">
                <option value="">{{ __('Not at an event') }}</option>
                @foreach ($events as $event)
                    <option value="{{ $event->id }}">{{ $event->title }} · {{ $event->starts_at?->timezone($tz)->format('j M') }}</option>
                @endforeach
            </select>
            <p class="mt-1.5 text-xs text-slate-500">
                @if ($events->isEmpty())
                    {{ __('No events in the commercial calendar from two weeks ago to a month ahead.') }}
                @else
                    {{ __('Kept for every card you scan, so pick it once.') }}
                @endif
                @if ($scanned > 0)
                    <span class="font-medium text-slate-700">{{ trans_choice(':count card scanned so far.|:count cards scanned so far.', $scanned, ['count' => $scanned]) }}</span>
                @endif
            </p>
        </x-card>

        @if ($step === 'capture')
            <x-card class="p-5">
                <div class="flex flex-col items-center gap-4 py-4 text-center" x-data="crmCardCapture({ failedMessage: @js(__('The photo did not upload. Check the connection and try again.')) })">
                    <span class="flex h-16 w-16 items-center justify-center rounded-2xl bg-indigo-100 text-indigo-700">
                        <x-icon name="identification" class="h-8 w-8" />
                    </span>
                    <div>
                        <p class="text-base font-semibold text-slate-900">{{ __('Photograph the card') }}</p>
                        <p class="mt-1 text-sm text-slate-500">{{ __('Lay it flat in good light and fill the frame with it.') }}</p>
                    </div>

                    <div class="w-full space-y-3" x-show="!busy">
                        <label class="flex h-14 w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-indigo-600 text-base font-semibold text-white shadow-sm transition hover:bg-indigo-700 active:bg-indigo-800">
                            <x-icon name="camera" class="h-5 w-5" /> {{ __('Take a photo') }}
                            <input type="file" accept="image/*" capture="environment" class="sr-only" x-on:change="pick($event)" />
                        </label>
                        <label class="flex h-12 w-full cursor-pointer items-center justify-center gap-2 rounded-xl border border-slate-300 bg-white text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50">
                            <x-icon name="photo" class="h-4 w-4" /> {{ __('Choose a photo') }}
                            <input type="file" accept="image/jpeg,image/png,image/webp" class="sr-only" x-on:change="pick($event)" />
                        </label>
                        <button type="button" wire:click="typeInstead" class="text-sm font-medium text-slate-500 underline-offset-2 hover:text-slate-700 hover:underline">{{ __('No photo: type the details') }}</button>
                    </div>

                    <div class="w-full space-y-2" x-show="busy" x-cloak>
                        <div class="h-2 w-full overflow-hidden rounded-full bg-slate-100">
                            <div class="h-full rounded-full bg-indigo-500 transition-all" x-bind:style="'width: ' + Math.max(progress, 5) + '%'"></div>
                        </div>
                        <p class="text-sm text-slate-500" x-text="progress < 100 ? @js(__('Uploading the photo…')) : @js(__('Reading the card…'))"></p>
                    </div>
                    <div wire:loading wire:target="photo" class="text-sm text-slate-500">{{ __('Reading the card…') }}</div>

                    <p x-show="failed" x-text="failed" x-cloak class="text-sm text-rose-600"></p>
                    <x-input-error for="photo" class="mt-1" />

                    @unless ($readerReady)
                        <p class="rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-800">{{ __('Card reading is not set up, so you will type the details next to the photo. The photo is still kept on the contact.') }}</p>
                    @endunless
                </div>
            </x-card>
        @elseif ($step === 'review')
            <form wire:submit="save" class="space-y-5">
                @if ($photo)
                    <x-card class="overflow-hidden">
                        <img src="{{ $photo->temporaryUrl() }}" alt="{{ __('The business card') }}" class="max-h-64 w-full bg-slate-100 object-contain" />
                        <div class="flex items-center justify-between gap-3 border-t border-slate-100 px-4 py-2.5 text-xs">
                            @if ($wasRead)
                                <span class="inline-flex items-center gap-1.5 text-emerald-700"><x-icon name="sparkles" class="h-3.5 w-3.5" /> {{ __('Read by AI. Check every field.') }}</span>
                            @elseif ($readError)
                                <span class="text-amber-700">{{ $readError }}</span>
                            @else
                                <span class="text-slate-500">{{ __('Type the details from the card.') }}</span>
                            @endif
                            <div class="flex shrink-0 items-center gap-3">
                                @if ($readerReady)
                                    <button type="button" wire:click="readAgain" wire:loading.attr="disabled" wire:target="readAgain" class="font-medium text-indigo-600 hover:text-indigo-800">
                                        <span wire:loading.remove wire:target="readAgain">{{ __('Read again') }}</span>
                                        <span wire:loading wire:target="readAgain">{{ __('Reading…') }}</span>
                                    </button>
                                @endif
                                <button type="button" wire:click="scanAnother" class="font-medium text-slate-500 hover:text-slate-700">{{ __('Retake') }}</button>
                            </div>
                        </div>
                    </x-card>
                @endif

                <x-card class="overflow-hidden !p-0">
                    <div class="flex items-center gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-3">
                        <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700"><x-icon name="user" class="h-4 w-4" /></span>
                        <p class="text-sm font-bold text-slate-900">{{ __('The person') }}</p>
                    </div>
                    <div class="grid grid-cols-1 gap-4 p-5 sm:grid-cols-2">
                        @foreach ($fieldMeta as $field => $meta)
                            <div class="{{ $meta['span'] }}">
                                <x-label for="cs-{{ $field }}" :value="$meta['label']" />
                                <x-input id="cs-{{ $field }}" :type="$meta['type']" :autocomplete="$meta['auto']" wire:model.blur="card.{{ $field }}" class="mt-1 block w-full py-3 text-base sm:py-2 sm:text-sm" />
                                <x-input-error for="card.{{ $field }}" class="mt-2" />
                            </div>
                        @endforeach
                    </div>
                </x-card>

                <x-card class="overflow-hidden !p-0">
                    <div class="flex items-center gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-3">
                        <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700"><x-icon name="building-office" class="h-4 w-4" /></span>
                        <p class="text-sm font-bold text-slate-900">{{ __('Their organisation') }}</p>
                    </div>
                    <div class="space-y-2 p-5" wire:loading.class="opacity-60" wire:target="card">
                        @foreach ($matches as $match)
                            <label wire:key="cs-match-{{ $match['id'] }}" class="flex cursor-pointer items-start gap-3 rounded-xl border border-slate-200 p-3 transition has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50">
                                <input type="radio" wire:model.live="organisation" value="{{ $match['id'] }}" class="mt-1 border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                <span class="min-w-0 flex-1">
                                    <span class="block text-sm font-semibold text-slate-900">{{ __('Link to :name', ['name' => $match['name']]) }}</span>
                                    <span class="block text-xs text-slate-500">
                                        {{ $match['confidence'] === 'exact' ? __('Already in the CRM, same :fields.', ['fields' => collect($match['matched_on'])->map(fn ($f) => $matchedOn[$f] ?? $f)->implode(', ')]) : __('Possibly the same organisation: similar name.') }}
                                        @if ($match['owner']) {{ __('Owner: :name.', ['name' => $match['owner']]) }} @endif
                                    </span>
                                </span>
                            </label>
                        @endforeach

                        @if ($canCreateOrganisation)
                            <label class="flex cursor-pointer items-start gap-3 rounded-xl border border-slate-200 p-3 transition has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50">
                                <input type="radio" wire:model.live="organisation" value="new" class="mt-1 border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                <span class="min-w-0 flex-1">
                                    <span class="block text-sm font-semibold text-slate-900">
                                        {{ filled($card['company'] ?? '') ? __('Create :name as a new prospect', ['name' => $card['company']]) : __('Create a new organisation') }}
                                    </span>
                                    <span class="block text-xs text-slate-500">{{ __('Named from the Company field above, owned by you.') }}</span>
                                </span>
                            </label>
                        @endif
                        <x-input-error for="organisation" class="mt-2" />
                    </div>
                </x-card>

                <x-card class="p-5">
                    <x-label for="cs-follow-up" :value="__('Follow up on')" />
                    <x-input id="cs-follow-up" type="date" wire:model="followUpOn" class="mt-1 block w-full py-3 text-base sm:w-56 sm:py-2 sm:text-sm" />
                    <p class="mt-1.5 text-xs text-slate-500">{{ __('A follow-up task is set for you on this day.') }}</p>
                    <x-input-error for="followUpOn" class="mt-2" />
                </x-card>

                <div class="sticky bottom-3 z-20 flex items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-white/90 px-4 py-3 shadow-[0_8px_30px_-8px_rgba(15,23,42,0.25)] backdrop-blur">
                    <x-secondary-button type="button" wire:click="scanAnother">{{ __('Start again') }}</x-secondary-button>
                    <x-button type="submit" class="h-12 flex-1 justify-center text-base sm:h-auto sm:flex-none sm:text-sm" wire:loading.attr="disabled" wire:target="save">
                        <span wire:loading.remove wire:target="save" class="inline-flex items-center"><x-icon name="check-circle" class="mr-1.5 h-4 w-4" /> {{ __('Save contact') }}</span>
                        <span wire:loading wire:target="save">{{ __('Saving…') }}</span>
                    </x-button>
                </div>
            </form>
        @else
            <x-card class="p-6 text-center">
                <span class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-100 text-emerald-700">
                    <x-icon name="check-circle" class="h-7 w-7" />
                </span>
                <p class="mt-4 text-lg font-semibold text-slate-900">{{ $saved['created_contact'] ? __(':name is in the CRM', ['name' => $saved['contact']]) : __(':name was already in the CRM', ['name' => $saved['contact']]) }}</p>
                <ul class="mx-auto mt-3 max-w-sm space-y-1 text-left text-sm text-slate-600">
                    <li class="flex gap-2"><x-icon name="building-office" class="mt-0.5 h-4 w-4 shrink-0 text-slate-400" /> {{ $saved['created_organisation'] ? __(':organisation added as a new prospect', ['organisation' => $saved['organisation']]) : __('Linked to :organisation', ['organisation' => $saved['organisation']]) }}</li>
                    @if ($chosenEvent)
                        <li class="flex gap-2"><x-icon name="calendar-days" class="mt-0.5 h-4 w-4 shrink-0 text-slate-400" /> {{ __('Met at :event', ['event' => $chosenEvent->title]) }}</li>
                    @endif
                    <li class="flex gap-2"><x-icon name="clock" class="mt-0.5 h-4 w-4 shrink-0 text-slate-400" /> {{ __('Follow-up set for :date', ['date' => $saved['follow_up']]) }}</li>
                    @if ($saved['photo_kept'])
                        <li class="flex gap-2"><x-icon name="identification" class="mt-0.5 h-4 w-4 shrink-0 text-slate-400" /> {{ __('Card photo kept on the contact') }}</li>
                    @endif
                </ul>

                <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:justify-center">
                    <x-button type="button" wire:click="scanAnother" class="h-12 justify-center text-base sm:h-auto sm:text-sm">
                        <x-icon name="camera" class="mr-1.5 h-4 w-4" /> {{ __('Scan the next card') }}
                    </x-button>
                    <a href="{{ route('crm.contacts.show', $saved['contact_id']) }}" wire:navigate>
                        <x-secondary-button type="button" class="h-12 w-full justify-center sm:h-auto">{{ __('Open the contact') }}</x-secondary-button>
                    </a>
                </div>
            </x-card>
        @endif
    </div>
</div>