CluPilotCloud/resources/views/livewire/confirm-cancel-package.blad...

97 lines
5.7 KiB
PHP

<x-ui.modal>
<div class="flex items-start gap-3">
<span class="grid size-10 shrink-0 place-items-center rounded-lg bg-warning-bg text-warning">
<x-ui.icon name="alert-triangle" class="size-5" />
</span>
<div class="min-w-0">
<h3 class="text-base font-semibold text-ink">{{ __('settings.cancel_title') }}</h3>
<p class="mt-1 text-sm text-muted">{{ __('settings.cancel_body') }}</p>
</div>
</div>
<ul class="mt-4 space-y-1.5 text-sm text-body">
<li class="flex items-start gap-2"><x-ui.icon name="check" class="mt-0.5 size-4 shrink-0 text-muted" />{{ __('settings.cancel_point_term') }}</li>
<li class="flex items-start gap-2"><x-ui.icon name="check" class="mt-0.5 size-4 shrink-0 text-muted" />{{ __('settings.cancel_point_export') }}</li>
<li class="flex items-start gap-2"><x-ui.icon name="alert-triangle" class="mt-0.5 size-4 shrink-0 text-warning" />{{ __('settings.cancel_point_irreversible') }}</li>
</ul>
{{-- Still inside the fourteen days: offered as a way OUT of this dialogue,
not as one more reason inside it. Withdrawing ends the service the same
day and sends the WHOLE amount back; cancelling keeps the term that was
paid for. Somebody entitled to the first should not lose it by taking
the second without being told. --}}
@if ($canWithdraw)
<div class="mt-4 rounded border border-accent-border bg-accent-subtle p-4">
<p class="text-sm font-semibold text-ink">{{ __('withdrawal.instead_title') }}</p>
<p class="mt-1 text-xs leading-relaxed text-body">
{{ __('withdrawal.instead_body', ['date' => $withdrawalEndsAt?->local()->isoFormat('LL')]) }}
</p>
<x-ui.button variant="secondary" size="sm" class="mt-3"
x-on:click="Livewire.dispatch('closeModal'); $nextTick(() => $dispatch('openModal', { component: 'confirm-withdraw' }))">
{{ __('withdrawal.cta') }}
</x-ui.button>
</div>
@endif
{{-- Why. Asked here because this is the only moment the customer is looking
at the question; afterwards they are gone and nobody asks again. --}}
<div class="mt-4">
<label class="text-sm text-body" for="cancel-reason">{{ __('settings.cancel_reason_label') }}</label>
<select id="cancel-reason" wire:model.live="reason"
class="mt-1.5 w-full rounded border border-line-strong bg-surface px-3 py-2 text-sm text-ink">
<option value="">{{ __('settings.cancel_reason_choose') }}</option>
@foreach ($reasons as $key)
<option value="{{ $key }}">{{ __('settings.cancel_reason.'.$key) }}</option>
@endforeach
</select>
@error('reason')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
</div>
<div class="mt-3">
<label class="text-sm text-body" for="cancel-note">
{{ $reason === 'other' ? __('settings.cancel_note_label_required') : __('settings.cancel_note_label') }}
</label>
<textarea id="cancel-note" wire:model="note" rows="2"
class="mt-1.5 w-full rounded border border-line-strong bg-surface px-3 py-2 text-sm text-ink"></textarea>
@error('note')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
</div>
{{-- Zwei Auswahlfelder statt einer Checkbox (R-Vorgabe dieser Aufgabe): eine
Checkbox kennt keinen dritten Zustand, und "nicht angekreuzt" waere von
einem bewussten Nein nicht zu unterscheiden genau diese Unterscheidung
entscheidet, ob wir spaeter Erinnerungen schicken und einen Export
vorbereiten. Radio-Werte "1"/"0" statt leerer Wert, damit PHP sie beim
Setzen eindeutig nach true/false wandelt und keiner der beiden mit dem
unbeantworteten null verwechselt werden kann. --}}
<div class="mt-3">
<label class="text-sm text-body">{{ __('settings.cancel_export_label') }}</label>
<p class="mt-1 text-xs leading-relaxed text-muted">{{ __('settings.cancel_export_hint') }}</p>
<div class="mt-1.5 flex flex-wrap gap-2">
<label class="flex cursor-pointer items-center gap-2 rounded border border-line-strong bg-surface px-3 py-2 text-sm text-ink transition has-[:checked]:border-ink">
<input type="radio" wire:model="exportWish" value="1" class="size-4 shrink-0 border-line text-ink" />
{{ __('settings.cancel_export_yes') }}
</label>
<label class="flex cursor-pointer items-center gap-2 rounded border border-line-strong bg-surface px-3 py-2 text-sm text-ink transition has-[:checked]:border-ink">
<input type="radio" wire:model="exportWish" value="0" class="size-4 shrink-0 border-line text-ink" />
{{ __('settings.cancel_export_no') }}
</label>
</div>
@error('exportWish')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
</div>
<div class="mt-4">
<label class="text-sm text-body">{{ __('settings.cancel_confirm_label', ['name' => $subdomain]) }}</label>
<input type="text" wire:model="confirmName" class="mt-1.5 w-full rounded border border-line-strong bg-surface px-3 py-2 text-sm text-ink" />
@error('confirmName')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
</div>
<x-slot:footer>
<div class="flex justify-end gap-3">
<x-ui.button variant="secondary" x-on:click="Livewire.dispatch('closeModal')">{{ __('settings.keep') }}</x-ui.button>
<x-ui.button variant="danger" wire:click="cancelPackage" wire:loading.attr="disabled">
{{ __('settings.cancel_confirm') }}
</x-ui.button>
</div>
</x-slot:footer>
</x-ui.modal>