@php
    $tz = config('app.display_timezone');
    $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>
    <x-dialog-modal wire:model.live="open" maxWidth="2xl">
        <x-slot name="title">{{ __('Log activity') }}</x-slot>

        <x-slot name="content">
            {{-- Who it was with --}}
            @if ($opportunity || $organisation)
                <div class="mb-4 flex items-start justify-between gap-3 rounded-xl border border-slate-200 bg-slate-50/70 p-3">
                    <div>
                        <p class="text-sm font-semibold text-slate-900">{{ $opportunity?->title ?? $organisation?->name }}</p>
                        <p class="text-xs text-slate-500">
                            @if ($opportunity)
                                {{ $organisation?->name }} · {{ __(\App\Models\Opportunity::STAGES[$opportunity->stage] ?? $opportunity->stage) }}
                            @else
                                {{ __('Organisation') }}
                            @endif
                        </p>
                    </div>
                    <button type="button" wire:click="clearSubject" class="text-xs font-medium text-indigo-600 hover:text-indigo-800">{{ __('Change') }}</button>
                </div>
            @else
                <div class="mb-4">
                    <x-label for="activity-search" value="{{ __('Who was it with?') }}" />
                    <x-input id="activity-search" type="text" class="mt-1 block w-full" wire:model.live.debounce.300ms="search" placeholder="{{ __('Search an opportunity or organisation') }}" />
                    <x-input-error for="search" class="mt-2" />
                    <div class="mt-2 max-h-56 divide-y divide-slate-100 overflow-y-auto rounded-xl border border-slate-200">
                        @forelse ($matches as $match)
                            <button type="button" wire:key="match-{{ $match['kind'] }}-{{ $match['id'] }}"
                                wire:click="{{ $match['kind'] === 'opportunity' ? 'pickOpportunity' : 'pickOrganisation' }}({{ $match['id'] }})"
                                class="flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm transition hover:bg-slate-50">
                                <span class="font-medium text-slate-800">{{ $match['label'] }}</span>
                                <span class="shrink-0 text-xs text-slate-400">{{ $match['hint'] }}</span>
                            </button>
                        @empty
                            <p class="px-3 py-4 text-center text-xs text-slate-400">
                                {{ trim($search) === '' ? __('You have no open opportunities. Type to search the organisations.') : __('Nothing matches that search.') }}
                            </p>
                        @endforelse
                    </div>
                </div>
            @endif

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <x-label for="activity-type" value="{{ __('Channel') }}" />
                    <select id="activity-type" wire:model.live="type" class="{{ $select }}">
                        @foreach (\App\Models\Interaction::CRM_TYPES as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="type" class="mt-2" />
                </div>
                <div>
                    <x-label for="activity-direction" value="{{ __('Direction') }}" />
                    <select id="activity-direction" wire:model="direction" class="{{ $select }}" @disabled($type === 'note')>
                        @foreach (\App\Models\Interaction::DIRECTIONS as $key => $label)
                            <option value="{{ $key }}">{{ $key === 'outbound' ? __('Outbound: we reached out') : __('Inbound: they came to us') }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="direction" class="mt-2" />
                </div>
                <div>
                    <x-label for="activity-when" value="{{ __('When') }}" />
                    <x-input id="activity-when" type="datetime-local" class="mt-1 block w-full" wire:model="occurredAt" />
                    <x-input-error for="occurredAt" class="mt-2" />
                </div>
                <div>
                    <x-label for="activity-contact" value="{{ __('Contact') }}" />
                    <select id="activity-contact" wire:model="contactId" class="{{ $select }}">
                        <option value="">{{ $contacts->isEmpty() ? __('No contacts on record') : __('Not recorded') }}</option>
                        @foreach ($contacts as $contact)
                            <option value="{{ $contact->id }}">{{ $contact->name }}{{ $contact->title ? ', '.$contact->title : '' }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="contactId" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="activity-body" value="{{ __('What was discussed') }}" />
                    <textarea id="activity-body" rows="3" wire:model="body" class="{{ $select }}"></textarea>
                    <x-input-error for="body" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="activity-outcome" value="{{ __('Outcome') }}" />
                    <x-input id="activity-outcome" type="text" class="mt-1 block w-full" wire:model="outcome" placeholder="{{ __('e.g. Wants a quote for 500 brochures by the 30th') }}" />
                    <x-input-error for="outcome" class="mt-2" />
                </div>

                @if ($openTasks->isNotEmpty())
                    <div class="sm:col-span-2">
                        <x-label for="activity-task" value="{{ __('Does this complete a task?') }}" />
                        <select id="activity-task" wire:model="completesTaskId" class="{{ $select }}">
                            <option value="">{{ __('No') }}</option>
                            @foreach ($openTasks as $openTask)
                                <option value="{{ $openTask->id }}">{{ $openTask->title }}{{ $openTask->due_at ? ' ('.$openTask->due_at->copy()->timezone($tz)->format('j M').')' : '' }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="completesTaskId" class="mt-2" />
                    </div>
                @endif

                <div class="sm:col-span-2 border-t border-slate-100 pt-4">
                    <p class="text-sm font-semibold text-slate-900">{{ __('Next action') }}</p>
                    <p class="text-xs text-slate-500">
                        @if ($needsNext)
                            {{ __('Required: no open opportunity is left without a dated next action. Keep the current one or change it; a change becomes one follow-up task.') }}
                        @else
                            {{ __('Optional. If you give one, it becomes a follow-up task.') }}
                        @endif
                    </p>
                </div>
                <div class="sm:col-span-2">
                    <x-label for="activity-next" value="{{ __('What happens next') }}" />
                    <x-input id="activity-next" type="text" class="mt-1 block w-full" wire:model="nextAction" />
                    <x-input-error for="nextAction" class="mt-2" />
                </div>
                <div>
                    <x-label for="activity-next-due" value="{{ __('By when') }}" />
                    <x-input id="activity-next-due" type="date" class="mt-1 block w-full" wire:model="nextDue" />
                    <x-input-error for="nextDue" class="mt-2" />
                </div>
                <div>
                    <x-label for="activity-next-assignee" value="{{ __('Who does it') }}" />
                    <select id="activity-next-assignee" wire:model="nextAssigneeId" class="{{ $select }}">
                        @foreach ($members as $member)
                            <option value="{{ $member->id }}">{{ $member->name }}{{ $member->id === auth()->id() ? ' ('.__('me').')' : '' }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="close" wire:loading.attr="disabled">{{ __('Close') }}</x-secondary-button>
            <x-button wire:click="save" wire:loading.attr="disabled" wire:target="save">
                <span wire:loading.remove wire:target="save">{{ __('Log activity') }}</span>
                <span wire:loading wire:target="save">{{ __('Saving…') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>