@php
    $stageBadge = [
        'prospect' => 'sky', 'contacted' => 'cyan', 'meeting' => 'indigo', 'requirement' => 'violet',
        'qualified' => 'fuchsia', 'proposal' => 'amber', 'negotiation' => 'orange',
        'won' => 'emerald', 'lost' => 'rose', 'deferred' => 'slate',
    ];
    $today = now()->startOfDay();
    $overdue = $opportunity->isOpen() && $opportunity->next_action_due && $opportunity->next_action_due->lt($today);
    $notGiven = __('Not recorded');
    $field = fn ($value) => filled($value) ? $value : null;
    $doneCount = collect($checklist)->where('done', true)->count();
    $select = 'mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">

        <a href="{{ route('crm.opportunities.index') }}" wire:navigate class="inline-flex items-center gap-1 text-xs font-medium text-slate-500 hover:text-slate-700">
            <x-icon name="chevron-left" class="h-3.5 w-3.5" /> {{ __('Opportunities') }}
        </a>

        <x-page-header :title="$opportunity->title" :subtitle="$opportunity->customer?->name">
            @if ($canEdit)
                <x-secondary-button type="button" wire:click="openInteractions('opportunity', {{ $opportunity->id }})">
                    <x-icon name="chat-bubble-left-right" class="-ms-1 me-1.5 h-4 w-4" /> {{ __('Log activity') }}
                </x-secondary-button>
                @if ($opportunity->customer?->phone)
                    <x-secondary-button type="button" wire:click="openCompose('opportunity', {{ $opportunity->id }})">
                        <x-icon name="paper-airplane" class="-ms-1 me-1.5 h-4 w-4" /> {{ __('Message') }}
                    </x-secondary-button>
                @endif
                <a href="{{ route('crm.opportunities.edit', $opportunity->id) }}" wire:navigate>
                    <x-button type="button">
                        <x-icon name="pencil-square" class="-ms-1 me-1.5 h-4 w-4" /> {{ __('Edit') }}
                    </x-button>
                </a>
            @endif
        </x-page-header>

        {{-- Stage strip: where it stands, and the Change Stage action. --}}
        <x-card class="p-4 sm:p-5">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <div class="flex flex-wrap items-center gap-2">
                    <x-badge :color="$stageBadge[$opportunity->stage] ?? 'slate'">{{ \App\Models\Opportunity::STAGES[$opportunity->stage] ?? $opportunity->stage }}</x-badge>
                    @if ($opportunity->isOpen() && $opportunity->accepted_at !== null)
                        <x-badge color="amber">{{ __('Accepted, awaiting confirmation') }}</x-badge>
                    @endif
                    <x-badge color="slate">{{ \App\Models\Opportunity::TYPES[$opportunity->type] ?? $opportunity->type }}</x-badge>
                    <x-badge :color="$opportunity->priority === 'high' ? 'rose' : ($opportunity->priority === 'low' ? 'slate' : 'amber')">{{ __(':p priority', ['p' => \App\Models\Opportunity::PRIORITIES[$opportunity->priority] ?? $opportunity->priority]) }}</x-badge>
                    <x-crm.signal kind="score" :value="$opportunity->lead_score" :reasons="$opportunity->lead_score_breakdown" />
                    @if ($opportunity->stage_entered_at)
                        <span class="text-xs text-slate-400">{{ __('In this stage since :date', ['date' => $opportunity->stage_entered_at->timezone(config('app.display_timezone'))->format('j M Y')]) }}</span>
                    @endif
                </div>
                @if ($canEdit)
                    <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                        @foreach (\App\Models\Opportunity::STAGES as $key => $label)
                            @continue($key === 'won' && $opportunity->stage !== 'won')
                            <button type="button" wire:key="stage-btn-{{ $key }}" wire:click="requestStage({{ $opportunity->id }}, '{{ $key }}')"
                                @disabled($opportunity->stage === $key)
                                class="rounded-lg px-2.5 py-1.5 transition {{ $opportunity->stage === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                                {{ $label }}
                            </button>
                        @endforeach
                    </div>
                @endif
            </div>
            @if ($opportunity->isOpen())
                <p class="mt-3 text-xs text-slate-400">{{ __('Won is reached when Administration links the confirmed job for this opportunity.') }}</p>
            @endif
        </x-card>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
            <div class="space-y-6 lg:col-span-2">

                {{-- Next action, or the outcome --}}
                @if ($opportunity->isOpen())
                    <x-card class="p-5 {{ $overdue ? 'ring-rose-200' : '' }}">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Next action') }}</p>
                        <p class="mt-1 text-base font-semibold {{ $overdue ? 'text-rose-700' : 'text-slate-900' }}">{{ $opportunity->next_action ?: __('No next action recorded') }}</p>
                        <p class="mt-0.5 text-sm {{ $overdue ? 'font-semibold text-rose-600' : 'text-slate-500' }}">
                            @if ($opportunity->next_action_due)
                                {{ $overdue ? __('Overdue since :date', ['date' => $opportunity->next_action_due->format('j M Y')]) : __('Due :date', ['date' => $opportunity->next_action_due->format('l j M Y')]) }}
                            @else
                                {{ __('No date given') }}
                            @endif
                        </p>
                    </x-card>
                @else
                    <x-card class="p-5">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Outcome') }}</p>
                        <p class="mt-1 text-base font-semibold text-slate-900">
                            {{ \App\Models\Opportunity::STAGES[$opportunity->stage] }}
                            @if ($opportunity->outcome_at)
                                <span class="text-sm font-normal text-slate-500">· {{ $opportunity->outcome_at->timezone(config('app.display_timezone'))->format('j M Y') }}</span>
                            @endif
                        </p>
                        @if ($reasonLabel)
                            <p class="mt-1 text-sm text-slate-600">{{ $reasonLabel }}</p>
                        @endif
                        @if ($opportunity->reason_note)
                            <p class="mt-1 whitespace-pre-line text-sm text-slate-500">{{ $opportunity->reason_note }}</p>
                        @endif
                        @if ($opportunity->stage === 'deferred' && $opportunity->review_on)
                            <p class="mt-2 text-sm text-slate-600">{{ __('Review again on :date.', ['date' => $opportunity->review_on->format('j M Y')]) }}</p>
                        @endif
                    </x-card>
                @endif

                {{-- Requirement --}}
                <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="document-text" class="h-4 w-4" /></span>
                        <h2 class="text-sm font-bold text-slate-900">{{ __('Requirement') }}</h2>
                    </div>
                    <dl class="grid grid-cols-1 gap-x-6 gap-y-4 p-5 text-sm sm:grid-cols-2">
                        <div class="sm:col-span-2">
                            <dt class="text-xs font-medium text-slate-500">{{ __('Need') }}</dt>
                            <dd class="mt-0.5 whitespace-pre-line text-slate-900">{{ $field($opportunity->need) ?? $notGiven }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs font-medium text-slate-500">{{ __('Products') }}</dt>
                            <dd class="mt-0.5 whitespace-pre-line text-slate-900">{{ $field($opportunity->products) ?? $notGiven }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs font-medium text-slate-500">{{ __('Quantity or scope') }}</dt>
                            <dd class="mt-0.5 whitespace-pre-line text-slate-900">{{ $field($opportunity->quantity_scope) ?? $notGiven }}</dd>
                        </div>
                        <div class="sm:col-span-2">
                            <dt class="text-xs font-medium text-slate-500">{{ __('Specifications') }}</dt>
                            <dd class="mt-0.5 whitespace-pre-line text-slate-900">{{ $field($opportunity->specifications) ?? $notGiven }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs font-medium text-slate-500">{{ __('Wanted by') }}</dt>
                            <dd class="mt-0.5 text-slate-900">{{ $opportunity->desired_delivery_on?->format('j M Y') ?? $notGiven }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs font-medium text-slate-500">{{ __('Budget') }}</dt>
                            <dd class="mt-0.5 text-slate-900">
                                @if ($opportunity->budget !== null)
                                    {{ $opportunity->currency_code }} {{ number_format((float) $opportunity->budget, 2) }}
                                @else
                                    {{ __('Not known') }}
                                @endif
                                @if ($opportunity->budget_note)
                                    <span class="block text-xs text-slate-500">{{ $opportunity->budget_note }}</span>
                                @endif
                            </dd>
                        </div>
                    </dl>
                </x-card>

                {{-- Catalogue lines. The Products note above stays for anything not in the catalogue. --}}
                <x-card class="overflow-hidden !p-0">
                    <div class="flex flex-col gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-3 sm:flex-row sm:items-center sm:justify-between">
                        <div class="flex items-center gap-3">
                            <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700"><x-icon name="cube" class="h-4 w-4" /></span>
                            <h2 class="text-sm font-bold text-slate-900">{{ __('Catalogue lines') }}</h2>
                        </div>
                        <button type="button" wire:click="switchTab('products')" class="text-xs font-semibold text-indigo-600 hover:text-indigo-800">{{ __('Open the Products tab') }}</button>
                    </div>
                    @php
                        $catalogueLines = $opportunity->lines;
                        $linesPriced = $catalogueLines->isNotEmpty() && $catalogueLines->every(fn ($line) => $line->unit_price !== null);
                    @endphp
                    <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 py-3.5 lg:px-4">{{ __('Item') }}</th>
                                    <th class="px-3 py-3.5 lg:px-4">{{ __('Size or variant') }}</th>
                                    <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Qty') }}</th>
                                    <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Unit price') }}</th>
                                    <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Total') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100 bg-white">
                                @forelse ($catalogueLines as $line)
                                    <tr wire:key="show-line-{{ $line->id }}" class="transition hover:bg-slate-50/70">
                                        <td class="px-3 py-4 text-sm font-medium text-slate-900 lg:px-4">{{ $line->description }}</td>
                                        <td class="px-3 py-4 text-sm text-slate-600 lg:px-4">{{ $line->variant ?: __('None') }}</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums text-slate-700 lg:px-4">{{ (float) $line->quantity }}</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums text-slate-700 lg:px-4">
                                            @if ($line->unit_price === null)
                                                {{ __('Not estimated') }}
                                            @else
                                                {{ $opportunity->currency_code }} {{ number_format((float) $line->unit_price, 2) }}
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums text-slate-900 lg:px-4">
                                            @if ($line->estimatedTotal() === null)
                                                {{ __('Not estimated') }}
                                            @else
                                                {{ $opportunity->currency_code }} {{ number_format($line->estimatedTotal(), 2) }}
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="px-6 py-8">
                                            <x-empty-state icon="cube" :title="__('No catalogue lines yet')"
                                                :message="__('Add them on the Products tab. The Products note above is for anything not in the catalogue.')" class="border-0 bg-transparent py-0" />
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if ($catalogueLines->isNotEmpty())
                        <div class="border-t border-slate-100 px-5 py-3 text-sm">
                            @if ($linesPriced)
                                <p class="text-right font-semibold tabular-nums text-slate-900">{{ __('Line total: :amount', ['amount' => $opportunity->currency_code.' '.number_format($catalogueLines->sum(fn ($line) => $line->estimatedTotal()), 2)]) }}</p>
                            @else
                                <p class="text-right text-slate-500">{{ __('Line total: Not estimated') }}</p>
                            @endif
                            <p class="mt-1 text-xs text-slate-400">{{ __('The Products note above is for anything not in the catalogue. The estimated value can follow these lines and can still be changed.') }}</p>
                        </div>
                    @endif
                </x-card>

                {{-- Buying process --}}
                <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">{{ __('Buying process') }}</h2>
                    </div>
                    <dl class="grid grid-cols-1 gap-x-6 gap-y-4 p-5 text-sm sm:grid-cols-2">
                        <div>
                            <dt class="text-xs font-medium text-slate-500">{{ __('Decision-maker') }}</dt>
                            <dd class="mt-0.5 text-slate-900">{{ $field($opportunity->decision_maker) ?? $notGiven }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs font-medium text-slate-500">{{ __('Tender deadline') }}</dt>
                            <dd class="mt-0.5 text-slate-900">{{ $opportunity->tender_deadline?->format('j M Y') ?? __('Not applicable') }}</dd>
                        </div>
                        <div class="sm:col-span-2">
                            <dt class="text-xs font-medium text-slate-500">{{ __('Procurement process') }}</dt>
                            <dd class="mt-0.5 whitespace-pre-line text-slate-900">{{ $field($opportunity->procurement_process) ?? $notGiven }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs font-medium text-slate-500">{{ __('Decision criteria') }}</dt>
                            <dd class="mt-0.5 whitespace-pre-line text-slate-900">{{ $field($opportunity->decision_criteria) ?? $notGiven }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs font-medium text-slate-500">{{ __('Competitors') }}</dt>
                            <dd class="mt-0.5 whitespace-pre-line text-slate-900">{{ $field($opportunity->competitors) ?? $notGiven }}</dd>
                        </div>
                    </dl>
                </x-card>
            </div>

            <div class="space-y-6">
                {{-- Value and dates --}}
                <x-card class="p-5">
                    <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Estimated value') }}</p>
                    @if ($opportunity->estimated_value === null)
                        <p class="mt-1 font-bold text-slate-400" style="font-size: 19px;">{{ __('Not estimated') }}</p>
                    @else
                        <p class="mt-1 font-bold tabular-nums text-slate-900" style="font-size: 19px;">{{ $opportunity->currency_code }} {{ number_format((float) $opportunity->estimated_value, 2) }}</p>
                        @if ($baseCode && $opportunity->currency_code !== $baseCode)
                            <p class="text-xs tabular-nums text-slate-500">{{ $baseCode }} {{ number_format($opportunity->estimatedValueBaseOrNull(), 2) }} {{ __('at the rate when opened') }}</p>
                        @endif
                    @endif
                    <dl class="mt-4 space-y-2 text-sm">
                        <div class="flex justify-between gap-3">
                            <dt class="text-slate-500">{{ __('Expected close') }}</dt>
                            <dd class="text-right text-slate-900">{{ $opportunity->expected_close_date?->format('j M Y') ?? $notGiven }}</dd>
                        </div>
                        <div class="flex justify-between gap-3">
                            <dt class="text-slate-500">{{ __('Source') }}</dt>
                            <dd class="text-right text-slate-900">{{ $sources[$opportunity->source] ?? ($opportunity->source ?: __('Unknown')) }}</dd>
                        </div>
                        @if ($opportunity->campaign)
                            <div class="flex justify-between gap-3">
                                <dt class="text-slate-500">{{ __('Campaign') }}</dt>
                                <dd class="text-right text-slate-900">{{ $opportunity->campaign->name }}</dd>
                            </div>
                        @endif
                        @if ($opportunity->portfolio)
                            <div class="flex justify-between gap-3">
                                <dt class="text-slate-500">{{ __('Portfolio') }}</dt>
                                <dd class="text-right text-slate-900">{{ $opportunity->portfolio->name }}</dd>
                            </div>
                        @endif
                    </dl>
                </x-card>

                {{-- People --}}
                <x-card class="p-5">
                    <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('People') }}</p>
                    <dl class="mt-3 space-y-3 text-sm">
                        <div>
                            <dt class="text-xs font-medium text-slate-500">{{ __('Originator') }}</dt>
                            <dd class="text-slate-900">{{ $opportunity->originator?->name ?? __('Not recorded') }}</dd>
                            <dd class="text-[11px] text-slate-400">{{ __('Who brought it in. Never changes.') }}</dd>
                        </div>
                        <div>
                            <dt class="flex items-center justify-between text-xs font-medium text-slate-500">
                                {{ __('Owner') }}
                                @if ($canReassign)
                                    <button type="button" wire:click="openReassign" class="font-semibold text-indigo-600 hover:text-indigo-800">{{ __('Reassign') }}</button>
                                @endif
                            </dt>
                            <dd class="text-slate-900">{{ $opportunity->owner?->name ?? __('No owner') }}</dd>
                        </div>
                        <div>
                            <dt class="flex items-center justify-between text-xs font-medium text-slate-500">
                                {{ __('Collaborators') }}
                                @if ($canCollaborate)
                                    <button type="button" wire:click="openCollaborator" class="font-semibold text-indigo-600 hover:text-indigo-800">{{ __('Add') }}</button>
                                @endif
                            </dt>
                            @forelse ($opportunity->collaborators as $collaborator)
                                <dd class="mt-1 flex items-center justify-between gap-2" wire:key="collab-{{ $collaborator->id }}">
                                    <span class="text-slate-900">{{ $collaborator->user?->name ?? __('Former member') }} <span class="text-xs text-slate-500">· {{ $collaboratorRoles[$collaborator->role] ?? $collaborator->role }}</span></span>
                                    @if ($canCollaborate)
                                        <button type="button" wire:click="removeCollaborator({{ $collaborator->id }})" wire:confirm="{{ __('Remove this collaborator?') }}" class="text-xs text-rose-600 hover:text-rose-800">{{ __('Remove') }}</button>
                                    @endif
                                </dd>
                            @empty
                                <dd class="text-slate-400">{{ __('Nobody yet') }}</dd>
                            @endforelse
                        </div>
                        <div>
                            <dt class="text-xs font-medium text-slate-500">{{ __('Contacts') }}</dt>
                            @forelse ($opportunity->contacts as $contact)
                                <dd class="mt-1 text-slate-900" wire:key="contact-{{ $contact->id }}">
                                    {{ $contact->name }}
                                    @if ($contact->pivot->is_primary)
                                        <span class="text-xs text-slate-500">· {{ __('Primary') }}</span>
                                    @endif
                                    @if ($contact->phone || $contact->email)
                                        <span class="block text-xs text-slate-500">{{ collect([$contact->phone, $contact->email])->filter()->implode(' · ') }}</span>
                                    @endif
                                </dd>
                            @empty
                                <dd class="text-slate-400">{{ __('No contact linked') }}</dd>
                            @endforelse
                        </div>
                    </dl>
                </x-card>

                {{-- Qualification checklist --}}
                <x-card class="p-5">
                    <div class="flex items-center justify-between">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Qualification checklist') }}</p>
                        <span class="text-xs font-semibold {{ $doneCount === count($checklist) ? 'text-emerald-600' : 'text-slate-500' }}">{{ $doneCount }}/{{ count($checklist) }}</span>
                    </div>
                    <ul class="mt-3 space-y-2 text-sm">
                        @foreach ($checklist as $key => $item)
                            <li class="flex items-start gap-2" wire:key="check-{{ $key }}">
                                <x-icon :name="$item['done'] ? 'check-circle' : 'x-circle'" class="mt-0.5 h-4 w-4 shrink-0 {{ $item['done'] ? 'text-emerald-500' : 'text-slate-300' }}" />
                                <span class="{{ $item['done'] ? 'text-slate-700' : 'text-slate-500' }}">{{ $item['label'] }}</span>
                            </li>
                        @endforeach
                    </ul>
                    <p class="mt-3 text-xs text-slate-400">{{ __('All six are needed before Qualified, and before a quote stage.') }}</p>
                </x-card>

                @if ($canDelete)
                    <button type="button" wire:click="delete" wire:confirm="{{ __('Delete this opportunity? It can be restored by a director.') }}" class="text-xs font-semibold text-rose-600 hover:text-rose-800">
                        {{ __('Delete opportunity') }}
                    </button>
                @endif
            </div>
        </div>

        {{-- Tabs --}}
        @if (count($tabs) > 0)
            <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 => $class)
                    <button type="button" wire:click="switchTab('{{ $key }}')" wire:key="tab-{{ $key }}"
                        class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $tab === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                        <x-icon :name="$class::ICON" class="h-4 w-4" />
                        {{ __($class::LABEL) }}
                    </button>
                @endforeach
            </div>

            <div>
                @switch($tab)
                    @case('timeline')
                        <livewire:crm.opportunities.tabs.timeline :opportunity-id="$opportunity->id" :key="'opp-timeline-'.$opportunity->id" />
                        @break
                    @case('tasks')
                        <livewire:crm.opportunities.tabs.tasks :opportunity-id="$opportunity->id" :key="'opp-tasks-'.$opportunity->id" />
                        @break
                    @case('quotes')
                        <livewire:crm.opportunities.tabs.quotes :opportunity-id="$opportunity->id" :key="'opp-quotes-'.$opportunity->id" />
                        @break
                    @case('handover')
                        <livewire:crm.opportunities.tabs.handover :opportunity-id="$opportunity->id" :key="'opp-handover-'.$opportunity->id" />
                        @break
                    @case('files')
                        <livewire:crm.opportunities.tabs.files :opportunity-id="$opportunity->id" :key="'opp-files-'.$opportunity->id" />
                        @break
                    @case('outcome')
                        <livewire:crm.opportunities.tabs.outcome :opportunity-id="$opportunity->id" :key="'opp-outcome-'.$opportunity->id" />
                        @break
                    @case('products')
                        <livewire:crm.opportunities.tabs.products :opportunity-id="$opportunity->id" :key="'opp-products-'.$opportunity->id" />
                        @break
                    @case('voice-notes')
                        <livewire:crm.opportunities.tabs.voice-notes :opportunity-id="$opportunity->id" :key="'opp-voice-notes-'.$opportunity->id" />
                        @break
                @endswitch
            </div>
        @endif
    </div>

    @include('livewire.crm.opportunities.partials.stage-dialog')

    {{-- Reassign: a director's act, with a reason. --}}
    <x-dialog-modal wire:model.live="showReassign" maxWidth="md">
        <x-slot name="title">{{ __('Reassign opportunity') }}</x-slot>
        <x-slot name="content">
            <div class="space-y-4">
                <p class="text-sm text-slate-600">{{ __('The originator stays the same. The new and old owners are told, and the reason is kept on the timeline.') }}</p>
                <div>
                    <x-label for="reassign-owner" value="{{ __('New owner') }}" />
                    <select id="reassign-owner" wire:model="newOwnerId" class="{{ $select }}">
                        <option value="">{{ __('Choose a person') }}</option>
                        @foreach ($members as $member)
                            @continue($member->id === $opportunity->owner_id)
                            <option value="{{ $member->id }}">{{ $member->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="newOwnerId" class="mt-2" />
                </div>
                <div>
                    <x-label for="reassign-reason" value="{{ __('Reason') }}" />
                    <textarea id="reassign-reason" rows="2" wire:model="reassignReason" class="{{ $select }}"></textarea>
                    <x-input-error for="reassignReason" class="mt-2" />
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showReassign', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="reassign" wire:loading.attr="disabled" wire:target="reassign">{{ __('Reassign') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- Add a collaborator --}}
    <x-dialog-modal wire:model.live="showCollaborator" maxWidth="md">
        <x-slot name="title">{{ __('Add a collaborator') }}</x-slot>
        <x-slot name="content">
            <div class="space-y-4">
                <p class="text-sm text-slate-600">{{ __('Collaborators support the owner and can work on the opportunity. They are credited under "supported", never added to the owner\'s figures.') }}</p>
                <div>
                    <x-label for="collab-user" value="{{ __('Person') }}" />
                    <select id="collab-user" wire:model="collaboratorUserId" class="{{ $select }}">
                        <option value="">{{ __('Choose a person') }}</option>
                        @foreach ($members as $member)
                            @continue($member->id === $opportunity->owner_id)
                            <option value="{{ $member->id }}">{{ $member->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="collaboratorUserId" class="mt-2" />
                </div>
                <div>
                    <x-label for="collab-role" value="{{ __('Role') }}" />
                    <select id="collab-role" wire:model="collaboratorRole" class="{{ $select }}">
                        @foreach ($collaboratorRoles as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="collaboratorRole" class="mt-2" />
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showCollaborator', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="addCollaborator" wire:loading.attr="disabled" wire:target="addCollaborator">{{ __('Add') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    @include('livewire.partials.interactions-modal')
    @include('livewire.partials.compose-message-modal')
</div>