@php
    $tz = config('app.display_timezone');
    $titles = [
        'create' => __('New task'),
        'complete' => __('Complete task'),
        'reschedule' => __('Reschedule task'),
        'cancel' => __('Cancel task'),
    ];
    $buttons = [
        'create' => __('Add task'),
        'complete' => __('Complete'),
        'reschedule' => __('Reschedule'),
        'cancel' => __('Cancel task'),
    ];
    $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">
            {{ $titles[$mode] ?? __('Task') }}
        </x-slot>

        <x-slot name="content">
            @if ($task)
                <div class="mb-4 rounded-xl border border-slate-200 bg-slate-50/70 p-3">
                    <p class="text-sm font-semibold text-slate-900">{{ $task->title }}</p>
                    <p class="mt-0.5 text-xs text-slate-500">
                        {{ __(\App\Models\Crm\Task::TYPES[$task->type] ?? $task->type) }}
                        @if ($task->due_at)
                            · {{ __('due') }} {{ $task->due_at->copy()->timezone($tz)->format(\App\Services\Crm\TaskService::isDateOnly($task->due_at) ? 'D j M Y' : 'D j M Y, H:i') }}
                        @endif
                        @if ($task->opportunity)
                            · {{ $task->opportunity->title }}
                        @elseif ($task->customer)
                            · {{ $task->customer->name }}
                        @endif
                    </p>
                    @if ($task->reschedule_count > 0)
                        <p class="mt-1 text-xs text-amber-700">
                            {{ trans_choice('{1} Rescheduled once|[2,*] Rescheduled :count times', $task->reschedule_count, ['count' => $task->reschedule_count]) }}
                            @if ($task->original_due_at)
                                · {{ __('first promised for :date', ['date' => $task->original_due_at->copy()->timezone($tz)->format('j M')]) }}
                            @endif
                        </p>
                    @endif
                </div>
            @endif

            @if ($mode === 'create')
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <x-label for="task-title" value="{{ __('What needs doing') }}" />
                        <x-input id="task-title" type="text" class="mt-1 block w-full" wire:model="title" placeholder="{{ __('e.g. Call the procurement officer about the tender') }}" />
                        <x-input-error for="title" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="task-type" value="{{ __('Type') }}" />
                        <select id="task-type" wire:model="type" class="{{ $select }}">
                            @foreach (\App\Models\Crm\Task::TYPES as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="type" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="task-priority" value="{{ __('Priority') }}" />
                        <select id="task-priority" wire:model="priority" class="{{ $select }}">
                            @foreach (\App\Models\Crm\Task::PRIORITIES as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <x-label for="task-due" value="{{ __('Due date') }}" />
                        <x-input id="task-due" type="date" class="mt-1 block w-full" wire:model="dueDate" />
                        <x-input-error for="dueDate" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="task-time" value="{{ __('Time (optional)') }}" />
                        <x-input id="task-time" type="time" class="mt-1 block w-full" wire:model="dueTime" />
                        <x-input-error for="dueTime" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="task-assignee" value="{{ __('Assigned to') }}" />
                        <select id="task-assignee" wire:model="assigneeId" class="{{ $select }}">
                            @foreach ($members as $member)
                                <option value="{{ $member->id }}">{{ $member->name }}{{ $member->id === auth()->id() ? ' ('.__('me').')' : '' }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="assigneeId" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="task-opportunity" value="{{ __('Opportunity') }}" />
                        <select id="task-opportunity" wire:model="opportunityId" class="{{ $select }}">
                            <option value="">{{ __('Not about an opportunity') }}</option>
                            @foreach ($opportunities as $choice)
                                <option value="{{ $choice->id }}">{{ $choice->title }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="opportunityId" class="mt-2" />
                    </div>
                    <div class="sm:col-span-2">
                        <x-label for="task-description" value="{{ __('Notes') }}" />
                        <textarea id="task-description" rows="2" wire:model="description" class="{{ $select }}"></textarea>
                        <x-input-error for="description" class="mt-2" />
                    </div>
                </div>
            @elseif ($mode === 'complete')
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <x-label for="task-outcome" value="{{ __('Outcome: what happened?') }}" />
                        <textarea id="task-outcome" rows="2" wire:model="outcome" class="{{ $select }}" placeholder="{{ __('e.g. Spoke to Tariro; she wants samples before the board meets') }}"></textarea>
                        <x-input-error for="outcome" class="mt-2" />
                    </div>

                    <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)
                                {{ __('This opportunity is still open, so it needs a dated next action. It becomes the next follow-up.') }}
                            @else
                                {{ __('What happens next becomes one follow-up task.') }}
                            @endif
                        </p>
                    </div>

                    @if (! $needsNext)
                        <label class="sm:col-span-2 flex w-fit cursor-pointer items-center gap-2 rounded-xl border border-slate-200 px-3 py-2 text-sm text-slate-600 has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                            <input type="checkbox" wire:model.live="noNextAction" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                            {{ __('Nothing further is needed') }}
                        </label>
                    @endif

                    @if ($needsNext || ! $noNextAction)
                        <div class="sm:col-span-2">
                            <x-label for="next-action" value="{{ __('What happens next') }}" />
                            <x-input id="next-action" type="text" class="mt-1 block w-full" wire:model="nextAction" placeholder="{{ __('e.g. Send samples and a revised quote') }}" />
                            <x-input-error for="nextAction" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="next-due" value="{{ __('By when') }}" />
                            <x-input id="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="next-time" value="{{ __('Time (optional)') }}" />
                            <x-input id="next-time" type="time" class="mt-1 block w-full" wire:model="nextTime" />
                            <x-input-error for="nextTime" class="mt-2" />
                        </div>
                        <div class="sm:col-span-2">
                            <x-label for="next-assignee" value="{{ __('Who does it') }}" />
                            <select id="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>
                    @endif
                </div>
            @elseif ($mode === 'reschedule')
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="resched-date" value="{{ __('New date') }}" />
                        <x-input id="resched-date" type="date" class="mt-1 block w-full" wire:model="dueDate" />
                        <x-input-error for="dueDate" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="resched-time" value="{{ __('Time (optional)') }}" />
                        <x-input id="resched-time" type="time" class="mt-1 block w-full" wire:model="dueTime" />
                        <x-input-error for="dueTime" class="mt-2" />
                    </div>
                    <div class="sm:col-span-2">
                        <x-label for="resched-reason" value="{{ __('Why is the date moving?') }}" />
                        <x-input id="resched-reason" type="text" class="mt-1 block w-full" wire:model="reason" placeholder="{{ __('e.g. Client is travelling until Thursday') }}" />
                        <x-input-error for="reason" class="mt-2" />
                    </div>
                </div>
            @elseif ($mode === 'cancel')
                <div>
                    <x-label for="cancel-reason" value="{{ __('Why is this no longer needed?') }}" />
                    <x-input id="cancel-reason" type="text" class="mt-1 block w-full" wire:model="reason" />
                    <x-input-error for="reason" class="mt-2" />
                </div>
            @endif
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="close" wire:loading.attr="disabled">
                {{ __('Close') }}
            </x-secondary-button>
            @if ($mode)
                <x-button wire:click="save" wire:loading.attr="disabled" wire:target="save">
                    <span wire:loading.remove wire:target="save">{{ $buttons[$mode] }}</span>
                    <span wire:loading wire:target="save">{{ __('Saving…') }}</span>
                </x-button>
            @endif
        </x-slot>
    </x-dialog-modal>
</div>