{{--
    Snooze and dismiss a reorder prediction (ActsOnPredictions).
    Expects $modalPrediction (or null).
--}}
<x-dialog-modal wire:model.live="showSnooze" maxWidth="lg">
    <x-slot name="title">{{ __('Snooze this reorder') }}</x-slot>
    <x-slot name="content">
        @if ($modalPrediction && $showSnooze)
            <div class="space-y-4">
                <p class="text-sm text-slate-600">
                    {{ __(':what for :name, expected around :date. The reminder comes back as a new task when the snooze ends.', [
                        'what' => $modalPrediction->category_label,
                        'name' => $modalPrediction->customer?->name,
                        'date' => $modalPrediction->expected_on->format('j M Y'),
                    ]) }}
                </p>
                <fieldset>
                    <legend class="text-sm font-medium text-slate-700">{{ __('Remind me again in') }}</legend>
                    <div class="mt-2 grid grid-cols-3 gap-2">
                        @foreach (\App\Services\Crm\Reorders\ReorderService::SNOOZE_WEEKS as $weeks)
                            <label class="flex cursor-pointer items-center justify-center gap-2 rounded-xl border border-slate-200 px-3 py-2 text-sm text-slate-700 has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                <input type="radio" wire:model="snoozeWeeks" value="{{ $weeks }}" class="sr-only" />
                                {{ trans_choice('{1} :count week|[2,*] :count weeks', $weeks, ['count' => $weeks]) }}
                            </label>
                        @endforeach
                    </div>
                    <x-input-error for="snoozeWeeks" class="mt-2" />
                </fieldset>
            </div>
        @endif
    </x-slot>
    <x-slot name="footer">
        <x-secondary-button type="button" wire:click="closePredictionModals">{{ __('Cancel') }}</x-secondary-button>
        <x-button type="button" class="ms-3" wire:click="snoozePrediction" wire:loading.attr="disabled" wire:target="snoozePrediction">
            <span wire:loading.remove wire:target="snoozePrediction">{{ __('Snooze') }}</span>
            <span wire:loading wire:target="snoozePrediction">{{ __('Saving…') }}</span>
        </x-button>
    </x-slot>
</x-dialog-modal>

<x-dialog-modal wire:model.live="showDismiss" maxWidth="lg">
    <x-slot name="title">{{ __('Dismiss this reorder') }}</x-slot>
    <x-slot name="content">
        @if ($modalPrediction && $showDismiss)
            <div class="space-y-4">
                <p class="text-sm text-slate-600">
                    {{ __(':what for :name, expected around :date. Say why it will not happen; the reason is kept with the prediction.', [
                        'what' => $modalPrediction->category_label,
                        'name' => $modalPrediction->customer?->name,
                        'date' => $modalPrediction->expected_on->format('j M Y'),
                    ]) }}
                </p>
                <div>
                    <x-label for="dismiss-reason" value="{{ __('Reason') }}" />
                    <textarea id="dismiss-reason" rows="3" maxlength="500" wire:model="dismissReason" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="{{ __('They buy elsewhere now, the event is not happening this year, it was a one-off.') }}"></textarea>
                    <x-input-error for="dismissReason" class="mt-2" />
                </div>
            </div>
        @endif
    </x-slot>
    <x-slot name="footer">
        <x-secondary-button type="button" wire:click="closePredictionModals">{{ __('Cancel') }}</x-secondary-button>
        <x-danger-button type="button" class="ms-3" wire:click="dismissPrediction" wire:loading.attr="disabled" wire:target="dismissPrediction">
            <span wire:loading.remove wire:target="dismissPrediction">{{ __('Dismiss') }}</span>
            <span wire:loading wire:target="dismissPrediction">{{ __('Saving…') }}</span>
        </x-danger-button>
    </x-slot>
</x-dialog-modal>