77 lines
4.1 KiB
PHP
77 lines
4.1 KiB
PHP
<div>
|
|
@if(! $purchased)
|
|
<header class="flex items-start justify-between gap-4 p-6 border-b border-line">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-14 h-14 rounded-lg bg-bg-tint grid place-items-center text-3xl">
|
|
{{ $item['emoji'] ?? '🎁' }}
|
|
</div>
|
|
<div>
|
|
<div class="text-[10px] uppercase tracking-wider text-ink-3 font-semibold mb-0.5">{{ $item['category'] ?? '' }}</div>
|
|
<div class="font-bold text-lg text-ink-1">{{ $item['title'] ?? '' }}</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" wire:click="closeModal" aria-label="Schließen" class="text-ink-3 hover:text-ink-1 transition-colors p-1">
|
|
<x-heroicon-o-x-mark class="w-5 h-5" />
|
|
</button>
|
|
</header>
|
|
|
|
<div class="p-6 flex flex-col gap-4">
|
|
<p class="text-sm text-ink-2 leading-relaxed">{{ $item['desc'] ?? '' }}</p>
|
|
|
|
<div class="bg-bg-tint rounded-lg p-4 border border-line">
|
|
<div class="flex justify-between items-baseline">
|
|
<span class="text-sm text-ink-2">Preis</span>
|
|
<span class="text-xl font-bold font-mono tabular-nums text-amber-ink">{{ number_format($item['price'] ?? 0, 0, ',', '.') }} Pkt.</span>
|
|
</div>
|
|
<div class="flex justify-between items-baseline mt-1">
|
|
<span class="text-xs text-ink-3">Dein Guthaben</span>
|
|
<span class="text-xs font-mono tabular-nums text-ink-3">{{ number_format($balance, 0, ',', '.') }} Pkt.</span>
|
|
</div>
|
|
<div class="flex justify-between items-baseline mt-1 pt-2 border-t border-line">
|
|
<span class="text-xs text-ink-3">Nach Kauf</span>
|
|
<span class="text-xs font-mono tabular-nums font-bold {{ ($balance - ($item['price'] ?? 0)) >= 0 ? 'text-green-ink' : 'text-danger' }}">
|
|
{{ number_format($balance - ($item['price'] ?? 0), 0, ',', '.') }} Pkt.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
@if(! $confirming)
|
|
@if(($item['price'] ?? 0) > $balance)
|
|
<x-btn variant="primary" class="w-full justify-center" disabled>
|
|
<x-heroicon-o-shopping-bag class="w-4 h-4" />
|
|
Nicht genug Punkte
|
|
</x-btn>
|
|
@else
|
|
<x-btn variant="primary" class="w-full justify-center" wire:click="confirm">
|
|
<x-heroicon-o-shopping-bag class="w-4 h-4" />
|
|
Einlösen
|
|
</x-btn>
|
|
@endif
|
|
@else
|
|
<div class="flex flex-col gap-2">
|
|
<div class="bg-amber-soft border border-amber-soft rounded-lg p-3">
|
|
<p class="text-sm text-ink-1 font-semibold">Wirklich einlösen?</p>
|
|
<p class="text-xs text-ink-2 mt-0.5">Punkte werden sofort abgezogen.</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<x-btn wire:click="$set('confirming', false)" class="flex-1 justify-center">Abbrechen</x-btn>
|
|
<x-btn variant="primary" wire:click="purchase" class="flex-1 justify-center">Bestätigen</x-btn>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@else
|
|
<div class="p-8 text-center">
|
|
<div class="w-16 h-16 rounded-full bg-green-soft text-green-ink grid place-items-center mx-auto mb-4">
|
|
<x-heroicon-s-check class="w-8 h-8" />
|
|
</div>
|
|
<div class="text-xl font-bold text-ink-1 mb-1">Eingelöst!</div>
|
|
<p class="text-sm text-ink-2 mb-1">{{ $item['title'] ?? '' }} ist jetzt deins.</p>
|
|
<p class="text-xs text-ink-3 mb-6 font-mono tabular-nums">
|
|
Neues Guthaben: {{ number_format($balance, 0, ',', '.') }} Pkt.
|
|
</p>
|
|
<x-btn variant="primary" class="w-full justify-center" wire:click="closeModal">Weiter shoppen</x-btn>
|
|
</div>
|
|
@endif
|
|
</div>
|