@php
    $selectClass = 'mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
    $matchLabels = ['name' => __('similar name'), 'email' => __('same email'), 'phone' => __('same phone'), 'website' => __('same website')];
@endphp

<div class="mx-auto max-w-5xl px-4 py-6 sm:px-6 lg:px-8">
    <div class="mb-6">
        <a href="{{ $organisation ? route('crm.organisations.show', $organisation) : route('crm.organisations.index') }}" wire:navigate class="inline-flex items-center gap-1 text-xs font-medium text-slate-500 transition hover:text-slate-700">
            <x-icon name="chevron-left" class="h-3.5 w-3.5" /> {{ $organisation ? __('Back to :name', ['name' => $organisation->name]) : __('Back to organisations') }}
        </a>
        <h1 class="mt-1 text-2xl font-bold text-slate-900">{{ $organisation ? __('Edit organisation') : __('New organisation') }}</h1>
    </div>

    <form wire:submit="save" class="space-y-6">
        @if ($duplicates !== [])
            <div class="rounded-2xl border border-amber-200 bg-amber-50 p-4 sm:p-5" role="alert">
                <div class="flex items-start gap-3">
                    <x-icon name="exclamation-triangle" class="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
                    <div class="min-w-0 flex-1">
                        <p class="text-sm font-semibold text-amber-900">{{ __('This may already be on record') }}</p>
                        <p class="text-sm text-amber-800">{{ __('Check these before saving. If one of them is the same organisation, open it instead, so two people do not chase it without knowing.') }}</p>
                        <ul class="mt-3 divide-y divide-amber-200/70 rounded-xl border border-amber-200 bg-white">
                            @foreach ($duplicates as $match)
                                <li wire:key="duplicate-{{ $match['id'] }}" class="flex flex-col gap-2 px-3 py-2.5 sm:flex-row sm:items-center sm:justify-between">
                                    <div class="min-w-0">
                                        <p class="text-sm font-medium text-slate-900">{{ $match['name'] }}</p>
                                        <p class="text-xs text-slate-500">
                                            {{ __($match['lifecycle']) }} ·
                                            {{ $match['owner'] ? __('owned by :name', ['name' => $match['owner']]) : __('no owner') }} ·
                                            {{ collect($match['matched_on'])->map(fn ($field) => $matchLabels[$field] ?? $field)->implode(', ') }}
                                        </p>
                                    </div>
                                    <div class="flex shrink-0 items-center gap-3">
                                        <x-badge :color="$match['confidence'] === 'exact' ? 'rose' : 'amber'">{{ $match['confidence'] === 'exact' ? __('Likely the same') : __('Possibly the same') }}</x-badge>
                                        <a href="{{ route('crm.organisations.show', $match['id']) }}" wire:navigate class="text-sm font-medium text-indigo-600 hover:text-indigo-800">{{ __('Open') }}</a>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                        <div class="mt-3 flex flex-wrap items-center gap-3">
                            <x-secondary-button type="button" wire:click="saveAnyway" wire:loading.attr="disabled" wire:target="saveAnyway">
                                {{ __('It is a different organisation: save it') }}
                            </x-secondary-button>
                            <button type="button" wire:click="dismissDuplicates" class="text-sm font-medium text-amber-800 hover:text-amber-950">{{ __('Keep editing') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Who they are --}}
        <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>
                <h2 class="text-sm font-bold text-slate-900">{{ __('Who they are') }}</h2>
            </div>
            <div class="grid grid-cols-1 gap-4 p-5 sm:grid-cols-12">
                <div class="sm:col-span-12">
                    <x-label for="org-name" value="{{ __('Name') }}" />
                    <x-input id="org-name" type="text" class="mt-1 block w-full placeholder:text-xs" wire:model="form.name" placeholder="{{ __('The name they trade under') }}" />
                    <x-input-error for="form.name" class="mt-2" />
                </div>
                <div class="sm:col-span-6">
                    <x-label for="org-email" value="{{ __('General email') }}" />
                    <x-input id="org-email" type="email" class="mt-1 block w-full" wire:model="form.email" />
                    <x-input-error for="form.email" class="mt-2" />
                </div>
                <div class="sm:col-span-6">
                    <x-label for="org-phone" value="{{ __('Main phone') }}" />
                    <x-input id="org-phone" type="text" class="mt-1 block w-full" wire:model="form.phone" />
                    <x-input-error for="form.phone" class="mt-2" />
                </div>
                <div class="sm:col-span-6">
                    <x-label for="org-website" value="{{ __('Website') }}" />
                    <x-input id="org-website" type="text" class="mt-1 block w-full placeholder:text-xs" wire:model="form.website" placeholder="example.co.zw" />
                    <x-input-error for="form.website" class="mt-2" />
                </div>
                <div class="sm:col-span-3">
                    <x-label for="org-country" value="{{ __('Country') }}" />
                    <x-input id="org-country" type="text" class="mt-1 block w-full" wire:model="form.country" />
                    <x-input-error for="form.country" class="mt-2" />
                </div>
                <div class="sm:col-span-3">
                    <x-label for="org-tin" value="{{ __('TIN') }}" />
                    <x-input id="org-tin" type="text" class="mt-1 block w-full" wire:model="form.tin_number" />
                    <x-input-error for="form.tin_number" class="mt-2" />
                </div>
                <div class="sm:col-span-12">
                    <x-label for="org-address" value="{{ __('Address') }}" />
                    <textarea id="org-address" rows="2" wire:model="form.address" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="form.address" class="mt-2" />
                </div>
            </div>
        </x-card>

        {{-- Where they fit --}}
        <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="tag" class="h-4 w-4" /></span>
                <h2 class="text-sm font-bold text-slate-900">{{ __('Where they fit') }}</h2>
            </div>
            <div class="grid grid-cols-1 gap-4 p-5 sm:grid-cols-12">
                <div class="sm:col-span-4">
                    <x-label for="org-sector" value="{{ __('Sector') }}" />
                    <select id="org-sector" wire:model="form.sector" class="{{ $selectClass }}">
                        <option value="">{{ __('Not set') }}</option>
                        @foreach ($sectors as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="form.sector" class="mt-2" />
                </div>
                <div class="sm:col-span-4">
                    <x-label for="org-type" value="{{ __('Type of organisation') }}" />
                    <select id="org-type" wire:model="form.organisation_type" class="{{ $selectClass }}">
                        <option value="">{{ __('Not set') }}</option>
                        @foreach ($types as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="form.organisation_type" class="mt-2" />
                </div>
                <div class="sm:col-span-4">
                    <x-label for="org-tier" value="{{ __('Priority tier') }}" />
                    <select id="org-tier" wire:model="form.priority_tier" class="{{ $selectClass }}">
                        <option value="">{{ __('Not tiered') }}</option>
                        @foreach (\App\Models\Customer::PRIORITY_TIERS as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="form.priority_tier" class="mt-2" />
                </div>
                <div class="sm:col-span-8">
                    <x-label for="org-tags" value="{{ __('Tags') }}" />
                    <x-input id="org-tags" type="text" class="mt-1 block w-full placeholder:text-xs" wire:model="form.tags" placeholder="{{ __('Separate with commas, for example: banners, annual report') }}" />
                    <x-input-error for="form.tags" class="mt-2" />
                </div>
                <div class="flex items-end sm:col-span-4">
                    <label class="flex w-full cursor-pointer items-center gap-2 rounded-xl border border-slate-200 px-3 py-2.5 text-sm text-slate-600 transition has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                        <input type="checkbox" wire:model="form.is_strategic" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                        {{ __('Strategic account') }}
                    </label>
                </div>
            </div>
        </x-card>

        {{-- The relationship --}}
        <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>
                <h2 class="text-sm font-bold text-slate-900">{{ __('The relationship') }}</h2>
            </div>
            <div class="grid grid-cols-1 gap-4 p-5 sm:grid-cols-12">
                <div class="sm:col-span-4">
                    <x-label for="org-lifecycle" value="{{ __('Lifecycle') }}" />
                    <select id="org-lifecycle" wire:model="form.lifecycle" class="{{ $selectClass }}">
                        @foreach (\App\Models\Customer::LIFECYCLES as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-400">{{ __('A prospect becomes an Active Customer by itself on its first invoice.') }}</p>
                    <x-input-error for="form.lifecycle" class="mt-2" />
                </div>
                <div class="sm:col-span-4">
                    <x-label for="org-owner" value="{{ __('Relationship owner') }}" />
                    @if ($canReassign)
                        <select id="org-owner" wire:model="form.relationship_owner_id" class="{{ $selectClass }}">
                            <option value="">{{ __('Nobody yet') }}</option>
                            @foreach ($members as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="form.relationship_owner_id" class="mt-2" />
                    @else
                        <p class="mt-1 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-700">
                            {{ $organisation ? ($currentOwner ?? __('Nobody yet')) : __('You') }}
                        </p>
                        <p class="mt-1 text-xs text-slate-400">{{ __('Only a director can reassign an organisation.') }}</p>
                    @endif
                </div>
                <div class="sm:col-span-4">
                    <x-label for="org-source" value="{{ __('First source') }}" />
                    <select id="org-source" wire:model="form.source" class="{{ $selectClass }}">
                        <option value="">{{ __('Not known') }}</option>
                        @foreach ($sources as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="form.source" class="mt-2" />
                </div>
                @if ($organisation)
                    <div class="sm:col-span-4">
                        <x-label value="{{ __('Brought in by') }}" />
                        <p class="mt-1 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-700">{{ $originator ?? __('Not recorded') }}</p>
                    </div>
                @endif
                <div class="sm:col-span-4">
                    <x-label for="org-review" value="{{ __('Next account review') }}" />
                    <x-input id="org-review" type="date" class="mt-1 block w-full" wire:model="form.next_review_on" />
                    <x-input-error for="form.next_review_on" class="mt-2" />
                </div>
                <div class="sm:col-span-12">
                    <x-label for="org-notes" value="{{ __('Notes') }}" />
                    <textarea id="org-notes" rows="3" wire:model="form.notes" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="form.notes" class="mt-2" />
                </div>
            </div>
        </x-card>

        {{-- How they buy --}}
        <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="clipboard-document-check" class="h-4 w-4" /></span>
                <h2 class="text-sm font-bold text-slate-900">{{ __('How they buy') }}</h2>
            </div>
            <div class="grid grid-cols-1 gap-4 p-5 sm:grid-cols-12">
                <div class="sm:col-span-12">
                    <x-label for="org-needs" value="{{ __('What they buy, or could') }}" />
                    <textarea id="org-needs" rows="2" wire:model="form.buying_needs" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:border-indigo-500 focus:ring-indigo-500" placeholder="{{ __('For example: branded stationery each January, banners for two trade fairs a year') }}"></textarea>
                    <x-input-error for="form.buying_needs" class="mt-2" />
                </div>
                <div class="sm:col-span-6">
                    <x-label for="org-procurement" value="{{ __('Procurement cycle') }}" />
                    <x-input id="org-procurement" type="text" class="mt-1 block w-full placeholder:text-xs" wire:model="form.procurement_cycle" placeholder="{{ __('For example: annual tender in March') }}" />
                    <x-input-error for="form.procurement_cycle" class="mt-2" />
                </div>
                <div class="sm:col-span-6">
                    <x-label for="org-supplier" value="{{ __('Our supplier registration') }}" />
                    <x-input id="org-supplier" type="text" class="mt-1 block w-full placeholder:text-xs" wire:model="form.supplier_registration_status" placeholder="{{ __('For example: registered until December 2027') }}" />
                    <x-input-error for="form.supplier_registration_status" class="mt-2" />
                </div>
            </div>
        </x-card>

        <div class="sticky bottom-3 z-20 mt-1 flex items-center justify-end 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">
            <a href="{{ $organisation ? route('crm.organisations.show', $organisation) : route('crm.organisations.index') }}" wire:navigate><x-secondary-button type="button">{{ __('Cancel') }}</x-secondary-button></a>
            <x-button type="submit" wire:loading.attr="disabled" wire:target="save">
                <span wire:loading.remove wire:target="save">{{ $organisation ? __('Save changes') : __('Add organisation') }}</span>
                <span wire:loading wire:target="save">{{ __('Saving…') }}</span>
            </x-button>
        </div>
    </form>
</div>