{{-- Change Stage dialog. Shared by the board, the list and the record (ChangesStage). --}}
<x-dialog-modal wire:model.live="showStageDialog" maxWidth="xl">
    <x-slot name="title">
        @if ($stageOpp)
            {{ __('Move to :stage', ['stage' => \App\Models\Opportunity::STAGES[$stageTarget] ?? $stageTarget]) }}
        @endif
    </x-slot>

    <x-slot name="content">
        @if ($stageOpp && $stageCheck)
            <div class="space-y-4">
                <p class="text-sm text-slate-600">
                    <span class="font-semibold text-slate-900">{{ $stageOpp->title }}</span>
                    · {{ \App\Models\Opportunity::STAGES[$stageOpp->stage] ?? $stageOpp->stage }}
                    <x-icon name="arrow-right" class="mx-1 inline h-3.5 w-3.5 text-slate-400" />
                    {{ \App\Models\Opportunity::STAGES[$stageTarget] ?? $stageTarget }}
                </p>

                @if (! $stageCheck->allowed)
                    <div class="rounded-xl border border-amber-200 bg-amber-50 p-4">
                        <p class="text-sm font-semibold text-amber-800">{{ __('Still needed before this move') }}</p>
                        <ul class="mt-2 space-y-1.5 text-sm text-amber-900">
                            @foreach ($stageCheck->missing as $field => $message)
                                <li class="flex items-start gap-2" wire:key="missing-{{ $field }}">
                                    <x-icon name="exclamation-circle" class="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
                                    <span>{{ $message }}</span>
                                </li>
                            @endforeach
                        </ul>
                        @if (array_diff(array_keys($stageCheck->missing), ['next_action', 'next_action_due', 'reason', 'review_on']) !== [])
                            <p class="mt-3 text-xs text-amber-700">
                                {{ __('Fill these in on the opportunity, then move it again.') }}
                                <a href="{{ route('crm.opportunities.edit', $stageOpp->id) }}" wire:navigate class="font-semibold underline">{{ __('Edit the opportunity') }}</a>
                            </p>
                        @endif
                    </div>
                @endif

                <x-input-error for="stageDialog" />

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    @if (in_array($stageTarget, \App\Models\Opportunity::OPEN_STAGES, true))
                        <div class="sm:col-span-2">
                            <x-label for="stage-next-action" value="{{ __('Next action') }}" />
                            <x-input id="stage-next-action" type="text" class="mt-1 block w-full" wire:model.live.debounce.400ms="stageNextAction" />
                        </div>
                        <div>
                            <x-label for="stage-next-due" value="{{ __('Next action due') }}" />
                            <x-input id="stage-next-due" type="date" class="mt-1 block w-full" wire:model.live="stageNextActionDue" />
                        </div>
                    @endif

                    @if ($stageTarget === 'lost')
                        <div class="sm:col-span-2">
                            <x-label for="stage-loss" value="{{ __('Why was it lost?') }}" />
                            <select id="stage-loss" wire:model.live="stageOutcomeReason" 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 a reason') }}</option>
                                @foreach ($lossReasons as $value => $label)
                                    <option value="{{ $value }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif

                    @if ($stageTarget === 'deferred')
                        <div>
                            <x-label for="stage-defer" value="{{ __('Why is it deferred?') }}" />
                            <select id="stage-defer" wire:model.live="stageOutcomeReason" 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 a reason') }}</option>
                                @foreach ($deferralReasons as $value => $label)
                                    <option value="{{ $value }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <x-label for="stage-review" value="{{ __('Review again on') }}" />
                            <x-input id="stage-review" type="date" class="mt-1 block w-full" wire:model.live="stageReviewOn" />
                        </div>
                    @endif

                    @if (in_array($stageTarget, ['lost', 'deferred'], true))
                        <div class="sm:col-span-2">
                            <x-label for="stage-note" value="{{ __('Note (optional)') }}" />
                            <textarea id="stage-note" rows="2" wire:model="stageReasonNote" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        </div>
                    @endif

                    @if ($stageReasonLabel)
                        <div class="sm:col-span-2">
                            <x-label for="stage-reason" value="{{ $stageReasonLabel }}" />
                            <textarea id="stage-reason" rows="2" wire:model="stageReason" 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="stageReason" class="mt-2" />
                        </div>
                    @endif
                </div>
            </div>
        @endif
    </x-slot>

    <x-slot name="footer">
        <x-secondary-button wire:click="closeStageDialog" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
        <x-button class="ms-3" wire:click="confirmStage" wire:loading.attr="disabled" wire:target="confirmStage">
            <span wire:loading.remove wire:target="confirmStage">{{ __('Move') }}</span>
            <span wire:loading wire:target="confirmStage">{{ __('Moving…') }}</span>
        </x-button>
    </x-slot>
</x-dialog-modal>