@php
    $lifecycleColours = ['prospect' => 'indigo', 'active' => 'emerald', 'dormant' => 'amber', 'partner' => 'cyan', 'do_not_contact' => 'rose'];
    $facts = array_filter([
        __('Sector') => $organisation->sector ? ($sectors[$organisation->sector] ?? $organisation->sector) : null,
        __('Type') => $organisation->organisation_type ? ($types[$organisation->organisation_type] ?? $organisation->organisation_type) : null,
        __('First source') => $organisation->source ? ($sources[$organisation->source] ?? $organisation->source) : null,
        __('Country') => $organisation->country,
        __('TIN') => $organisation->tin_number,
        __('Procurement cycle') => $organisation->procurement_cycle,
        __('Supplier registration') => $organisation->supplier_registration_status,
        __('Next account review') => $organisation->next_review_on?->format('j M Y'),
    ], fn ($value) => $value !== null && $value !== '');
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <div>
            <a href="{{ 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" /> {{ __('Organisations') }}
            </a>

            <x-page-header :title="$organisation->name" class="!mb-0 mt-1">
                <x-notes-button variant="button" type="customer" :id="$organisation->id" :title="$organisation->name" />
                @if ($canDelete)
                    <x-secondary-button type="button" wire:click="deleteOrganisation" wire:confirm="{{ __('Delete :name? It can be restored later from Recently Deleted.', ['name' => $organisation->name]) }}">
                        <x-icon name="trash" class="mr-1.5 h-4 w-4" /> {{ __('Delete') }}
                    </x-secondary-button>
                @endif
                @if ($canMerge)
                    <x-secondary-button type="button" wire:click="openMerge">
                        <x-icon name="arrows-pointing-in" class="mr-1.5 h-4 w-4" /> {{ __('Merge into another') }}
                    </x-secondary-button>
                @endif
                @if ($canEdit)
                    <a href="{{ route('crm.organisations.edit', $organisation) }}" wire:navigate>
                        <x-button type="button"><x-icon name="pencil-square" class="mr-1.5 h-4 w-4" /> {{ __('Edit') }}</x-button>
                    </a>
                @endif
            </x-page-header>

            <div class="mt-2 flex flex-wrap items-center gap-2 text-sm">
                <x-badge :color="$lifecycleColours[$organisation->lifecycle] ?? 'slate'">{{ __(\App\Models\Customer::LIFECYCLES[$organisation->lifecycle] ?? $organisation->lifecycle) }}</x-badge>
                @if ($organisation->priority_tier)
                    <x-badge color="slate">{{ __(\App\Models\Customer::PRIORITY_TIERS[$organisation->priority_tier] ?? '') }}</x-badge>
                @endif
                @if ($organisation->is_strategic)
                    <x-badge color="amber"><x-icon name="star" class="mr-1 h-3 w-3" /> {{ __('Strategic account') }}</x-badge>
                @endif
                @foreach ($organisation->tags ?? [] as $tag)
                    <x-badge color="sky">{{ $tag }}</x-badge>
                @endforeach
                <x-crm.signal kind="health" :value="$organisation->health_label" :reasons="$organisation->health_signals" />
                <x-crm.signal kind="score" :value="$organisation->lead_score" :reasons="$organisation->lead_score_breakdown" />
            </div>
        </div>

        <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
            <x-card class="p-5">
                <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Ownership') }}</p>
                <dl class="mt-3 space-y-2 text-sm">
                    <div class="flex justify-between gap-3">
                        <dt class="text-slate-500">{{ __('Relationship owner') }}</dt>
                        <dd class="text-right font-medium {{ $organisation->relationshipOwner ? 'text-slate-900' : 'text-amber-700' }}">{{ $organisation->relationshipOwner?->name ?? __('No owner') }}</dd>
                    </div>
                    <div class="flex justify-between gap-3">
                        <dt class="text-slate-500">{{ __('Brought in by') }}</dt>
                        <dd class="text-right text-slate-700">{{ $organisation->originator?->name ?? __('Not recorded') }}</dd>
                    </div>
                    <div class="flex justify-between gap-3">
                        <dt class="text-slate-500">{{ __('Open opportunities') }}</dt>
                        <dd class="text-right tabular-nums text-slate-700">{{ number_format($openOpportunities) }}</dd>
                    </div>
                    <div class="flex justify-between gap-3">
                        <dt class="text-slate-500">{{ __('On record since') }}</dt>
                        <dd class="whitespace-nowrap text-right text-slate-700">{{ $organisation->created_at?->timezone(config('app.display_timezone'))->format('j M Y') }}</dd>
                    </div>
                </dl>
            </x-card>

            <x-card class="p-5">
                <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Reaching them') }}</p>
                <dl class="mt-3 space-y-2 text-sm">
                    @if ($primaryContact)
                        <div class="flex justify-between gap-3">
                            <dt class="text-slate-500">{{ $primaryContact->is_primary ? __('Main contact') : __('Contact') }}</dt>
                            <dd class="text-right">
                                @can('view', $primaryContact)
                                    <a href="{{ route('crm.contacts.show', $primaryContact) }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-800">{{ $primaryContact->name }}</a>
                                @else
                                    <span class="font-medium text-slate-700">{{ $primaryContact->name }}</span>
                                @endcan
                            </dd>
                        </div>
                    @endif
                    @if ($organisation->email)
                        <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Email') }}</dt><dd class="break-all text-right"><a href="mailto:{{ $organisation->email }}" class="text-slate-700 hover:text-indigo-600">{{ $organisation->email }}</a></dd></div>
                    @endif
                    @if ($organisation->phone)
                        <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Phone') }}</dt><dd class="whitespace-nowrap text-right text-slate-700">{{ $organisation->phone }}</dd></div>
                    @endif
                    @if ($organisation->website)
                        <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Website') }}</dt><dd class="break-all text-right text-slate-700">{{ $organisation->website }}</dd></div>
                    @endif
                    @if ($organisation->address)
                        <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Address') }}</dt><dd class="whitespace-pre-line text-right text-slate-700">{{ $organisation->address }}</dd></div>
                    @endif
                    @if (! $primaryContact && ! $organisation->email && ! $organisation->phone && ! $organisation->website && ! $organisation->address)
                        <p class="text-slate-400">{{ __('No contact details yet.') }}</p>
                    @endif
                </dl>
            </x-card>

            <x-card class="p-5">
                <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('About them') }}</p>
                <dl class="mt-3 space-y-2 text-sm">
                    @forelse ($facts as $label => $value)
                        <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ $label }}</dt><dd class="text-right text-slate-700">{{ $value }}</dd></div>
                    @empty
                        <p class="text-slate-400">{{ __('Sector, type and buying details have not been filled in.') }}</p>
                    @endforelse
                </dl>
                @if ($organisation->buying_needs)
                    <p class="mt-3 border-t border-slate-100 pt-3 text-sm text-slate-600"><span class="font-medium text-slate-700">{{ __('Buys:') }}</span> {{ $organisation->buying_needs }}</p>
                @endif
            </x-card>
        </div>

        @if ($tabs !== [])
            <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
                @foreach ($tabs 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 {{ $currentTab === $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>

            <x-card class="p-4 sm:p-5">
                @livewire($tabs[$currentTab]['component'], ['organisationId' => $organisation->id], key('org-tab-'.$currentTab.'-'.$organisation->id))
            </x-card>
        @endif
    </div>

    @if ($canMerge)
        <x-dialog-modal wire:model.live="showMerge" maxWidth="2xl">
            <x-slot name="title">{{ __('Merge :name into another organisation', ['name' => $organisation->name]) }}</x-slot>

            <x-slot name="content">
                <div class="space-y-4">
                    <p class="text-sm text-slate-600">{{ __('Use this when the same organisation is on record twice. Choose the record to keep. Everything on this one (contacts, opportunities, activity, quotes, invoices, jobs, tasks, notes and files) moves onto it, and this record is removed. The merge is written to the kept record\'s history.') }}</p>

                    <div>
                        <x-label for="merge-search" value="{{ __('Organisation to keep') }}" />
                        <x-input id="merge-search" type="text" class="mt-1 block w-full placeholder:text-xs" wire:model.live.debounce.300ms="mergeSearch" placeholder="{{ __('Type part of the name') }}" />
                        <div class="mt-2 max-h-56 divide-y divide-slate-100 overflow-y-auto rounded-xl border border-slate-200">
                            @forelse ($mergeCandidates as $candidate)
                                <label wire:key="merge-candidate-{{ $candidate->id }}" class="flex cursor-pointer items-center gap-3 px-3 py-2 text-sm hover:bg-slate-50 has-[:checked]:bg-indigo-50">
                                    <input type="radio" wire:model.live="mergeIntoId" value="{{ $candidate->id }}" class="border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                    <span class="min-w-0 flex-1 text-slate-800">{{ $candidate->name }}</span>
                                    <x-badge :color="$lifecycleColours[$candidate->lifecycle] ?? 'slate'">{{ __(\App\Models\Customer::LIFECYCLES[$candidate->lifecycle] ?? $candidate->lifecycle) }}</x-badge>
                                </label>
                            @empty
                                <p class="px-3 py-3 text-sm text-slate-400">{{ __('No organisation matches that name.') }}</p>
                            @endforelse
                        </div>
                        <x-input-error for="mergeIntoId" class="mt-2" />
                    </div>

                    @if ($mergeTarget)
                        <div class="rounded-xl border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900">
                            <p class="font-semibold">{{ __(':from will be merged into :to.', ['from' => $organisation->name, 'to' => $mergeTarget->name]) }}</p>
                            @if ($mergePreview === [])
                                <p class="mt-1">{{ __('Nothing is linked to :from, so only its details move across where :to has none.', ['from' => $organisation->name, 'to' => $mergeTarget->name]) }}</p>
                            @else
                                <ul class="mt-1 list-inside list-disc">
                                    @foreach ($mergePreview as $table => $rows)
                                        <li>{{ trans_choice('{1}:count :what record|[2,*]:count :what records', $rows, ['count' => $rows, 'what' => str_replace(['crm_', '_'], ['', ' '], $table)]) }}</li>
                                    @endforeach
                                </ul>
                            @endif
                        </div>
                    @endif

                    <div>
                        <x-label for="merge-reason" value="{{ __('Why are these the same organisation?') }}" />
                        <textarea id="merge-reason" rows="2" wire:model="mergeReason" 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="mergeReason" class="mt-2" />
                    </div>
                </div>
            </x-slot>

            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showMerge', false)">{{ __('Cancel') }}</x-secondary-button>
                <x-danger-button class="ms-3" wire:click="merge" wire:loading.attr="disabled" wire:target="merge">
                    <span wire:loading.remove wire:target="merge">{{ __('Merge') }}</span>
                    <span wire:loading wire:target="merge">{{ __('Merging…') }}</span>
                </x-danger-button>
            </x-slot>
        </x-dialog-modal>
    @endif
</div>