@php
    $tz = config('app.display_timezone');
    $statusColors = ['draft' => 'slate', 'submitted' => 'amber', 'accepted' => 'emerald', 'returned' => 'rose', 'cancelled' => 'slate'];
@endphp
<div class="space-y-4">
    {{-- Who holds it now --}}
    <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
        <div class="rounded-xl border border-slate-200 bg-slate-50/60 p-4">
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Owner now') }}</p>
            <p class="mt-1 text-sm font-semibold text-slate-900">{{ $opportunity->owner?->name ?? __('Nobody') }}</p>
        </div>
        <div class="rounded-xl border border-slate-200 bg-slate-50/60 p-4">
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Originator') }}</p>
            <p class="mt-1 text-sm font-semibold text-slate-900">{{ $opportunity->originator?->name ?? __('Not recorded') }}</p>
            <p class="text-xs text-slate-500">{{ __('Never changes on a handover.') }}</p>
        </div>
        <div class="rounded-xl border p-4 {{ $pending ? 'border-amber-200 bg-amber-50/60' : 'border-slate-200 bg-slate-50/60' }}">
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Handover') }}</p>
            <p class="mt-1 text-sm font-semibold text-slate-900">{{ $pending ? __('Waiting for :who', ['who' => $pendingTo]) : __('None waiting') }}</p>
        </div>
    </div>

    @if ($pending)
        <x-card class="p-5">
            <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                <div class="min-w-0">
                    <p class="text-sm font-semibold text-slate-900">{{ __(':from to :to', ['from' => $pending->sender?->name ?? __('a former member'), 'to' => $pendingTo]) }}</p>
                    <p class="text-xs text-slate-500">{{ __('Sent :date. :owner stays the owner until it is accepted.', ['date' => $pending->submitted_at?->copy()->timezone($tz)->format('D j M Y, H:i'), 'owner' => $opportunity->owner?->name ?? __('The sender')]) }}</p>
                    <p class="mt-3 whitespace-pre-line text-sm text-slate-700">{{ $pending->brief }}</p>
                </div>
                <div class="flex shrink-0 flex-wrap gap-2">
                    @if ($canCancel)
                        <x-secondary-button type="button" wire:click="cancel" wire:confirm="{{ __('Cancel this handover?') }}">{{ __('Cancel handover') }}</x-secondary-button>
                    @endif
                    @if ($canRespond)
                        <x-secondary-button type="button" wire:click="openReturn">
                            <x-icon name="arrow-uturn-left" class="-ms-1 me-1.5 h-4 w-4" />
                            {{ __('Return') }}
                        </x-secondary-button>
                        <x-button type="button" wire:click="accept" wire:loading.attr="disabled" wire:target="accept">
                            <x-icon name="check-circle" class="-ms-1 me-1.5 h-4 w-4" />
                            {{ __('Accept and take it on') }}
                        </x-button>
                    @endif
                </div>
            </div>
        </x-card>
    @elseif ($canSubmit)
        <div class="flex flex-col gap-3 rounded-xl border border-slate-200 p-4 sm:flex-row sm:items-center sm:justify-between">
            <p class="text-sm text-slate-600">{{ __('Pass this opportunity to another officer, or to Administration for closing. You stay the owner until they accept.') }}</p>
            <x-button type="button" wire:click="openSubmit">
                <x-icon name="arrows-right-left" class="-ms-1 me-1.5 h-4 w-4" />
                {{ __('Hand over') }}
            </x-button>
        </div>
    @endif

    {{-- Every handover on this opportunity --}}
    <x-card class="overflow-hidden">
        <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 lg:px-4 py-3.5">{{ __('Sent') }}</th>
                        <th class="px-3 lg:px-4 py-3.5">{{ __('From and to') }}</th>
                        <th class="px-3 lg:px-4 py-3.5">{{ __('Brief') }}</th>
                        <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 bg-white">
                    @forelse ($history as $h)
                        <tr wire:key="opp-handover-{{ $h->id }}" class="transition hover:bg-slate-50/70">
                            <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $h->submitted_at?->copy()->timezone($tz)->format('j M Y') }}</td>
                            <td class="px-3 lg:px-4 py-4 text-sm text-slate-700">
                                {{ $h->sender?->name ?? __('a former member') }}
                                <span class="text-slate-400">→</span>
                                {{ $h->recipient?->name ?? __($groups[$h->recipient_group] ?? 'Administration') }}
                            </td>
                            <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">
                                <p class="whitespace-pre-line">{{ \Illuminate\Support\Str::limit((string) $h->brief, 200) }}</p>
                                @if ($h->response_note)
                                    <p class="mt-1 text-xs text-slate-500">{{ __('Answer: :note', ['note' => $h->response_note]) }}</p>
                                @endif
                            </td>
                            <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                <x-badge :color="$statusColors[$h->status] ?? 'slate'">{{ __($statuses[$h->status] ?? $h->status) }}</x-badge>
                                @if ($h->responded_at)
                                    <p class="mt-1 text-xs text-slate-500">{{ $h->respondedBy?->name }}, {{ $h->responded_at->copy()->timezone($tz)->format('j M Y') }}</p>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-6 py-10">
                                <x-empty-state icon="arrows-right-left" :title="__('Never handed over')" :message="__('Handovers to another officer or to Administration appear here.')" class="border-0 bg-transparent py-0" />
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @include('livewire.crm.partials.paginator', ['rows' => $history])
    </x-card>

    <x-dialog-modal wire:model.live="showSubmit">
        <x-slot name="title">{{ __('Hand over this opportunity') }}</x-slot>
        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <x-label for="handover-recipient" value="{{ __('Hand it to') }}" />
                    <select id="handover-recipient" wire:model="recipient" 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…') }}</option>
                        @foreach ($groups as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }} {{ __('(anyone in it)') }}</option>
                        @endforeach
                        @foreach ($recipients as $member)
                            <option value="{{ $member->id }}">{{ $member->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="recipient" class="mt-2" />
                </div>
                <div>
                    <x-label for="handover-brief" value="{{ __('Brief') }}" />
                    <textarea id="handover-brief" rows="6" wire:model="brief" 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="{{ __('Where it stands, what the client wants, who to talk to, and what to do next') }}"></textarea>
                    <x-input-error for="brief" class="mt-2" />
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showSubmit', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="submit" wire:loading.attr="disabled" wire:target="submit">
                <span wire:loading.remove wire:target="submit">{{ __('Send handover') }}</span>
                <span wire:loading wire:target="submit">{{ __('Sending…') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>

    <x-dialog-modal wire:model.live="showReturn">
        <x-slot name="title">{{ __('Return the handover') }}</x-slot>
        <x-slot name="content">
            <x-label for="handover-return" value="{{ __('Why it is coming back') }}" />
            <textarea id="handover-return" rows="4" wire:model="responseNote" 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="responseNote" class="mt-2" />
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showReturn', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="returnHandover" wire:loading.attr="disabled" wire:target="returnHandover">{{ __('Return it') }}</x-button>
        </x-slot>
    </x-dialog-modal>
</div>