137 lines
8.0 KiB
PHP
137 lines
8.0 KiB
PHP
<flux:main>
|
|
<flux:heading size="xl" level="1">{{ $pageTitle }}</flux:heading>
|
|
|
|
<div class="mt-6">
|
|
<div
|
|
class="w-fit bg-zinc-100 dark:bg-zinc-800/50 p-4 rounded-3xl border border-zinc-200 dark:border-white/5 flex items-center gap-4">
|
|
|
|
<div class="size-10 rounded-2xl bg-zinc-200 dark:bg-zinc-700 flex items-center justify-center">
|
|
<flux:icon.star class="size-5 text-zinc-500 dark:text-zinc-400" />
|
|
</div>
|
|
<div>
|
|
<div class="text-[10px] font-bold text-zinc-400 uppercase tracking-widest">Poin Tersedia</div>
|
|
<div class="text-xl sm:text-2xl font-black text-zinc-800 dark:text-white leading-none">
|
|
{{ formatCurrencyNumber(auth()->user()->membership?->reward_points) }}
|
|
<span class="text-xs font-bold opacity-40 uppercase tracking-tighter">Poin</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<flux:tab.group>
|
|
<flux:tabs variant="segmented" class="mt-6">
|
|
<flux:tab icon="gift" name="redeem-point">Tukar Poin</flux:tab>
|
|
<flux:tab icon="clock" name="history">Riwayat</flux:tab>
|
|
</flux:tabs>
|
|
|
|
<flux:tab.panel name="redeem-point">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 sm:gap-6">
|
|
@foreach ($rewards as $reward)
|
|
<div class="relative group h-[180px] sm:h-[200px] rounded-3xl transition-all duration-300 overflow-hidden"
|
|
style="-webkit-mask-image: radial-gradient(circle at 0px 50%, transparent 12px, black 13px); mask-image: radial-gradient(circle at 0px 50%, transparent 12px, black 13px);">
|
|
|
|
<div class="absolute inset-0 z-0">
|
|
@if ($reward['thumbnail'])
|
|
<img src="{{ $reward['thumbnail'] }}" alt="{{ $reward['name'] }}"
|
|
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
|
|
@else
|
|
<div
|
|
class="w-full h-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center">
|
|
<flux:icon.gift class="size-16 text-zinc-200 dark:text-zinc-700" />
|
|
</div>
|
|
@endif
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-r from-black/95 via-black/40 to-transparent">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative h-full p-5 sm:p-6 flex flex-col justify-between z-10">
|
|
<div>
|
|
<div
|
|
class="text-[10px] font-bold text-white/50 uppercase tracking-widest mb-1 truncate">
|
|
{{ $reward['category_label'] }}
|
|
</div>
|
|
<div class="text-2xl sm:text-3xl text-white/70 italic leading-tight">
|
|
{{ formatCurrencyNumber($reward['points']) }}
|
|
<span class="text-sm font-bold opacity-60 uppercase tracking-tight">Poin</span>
|
|
</div>
|
|
<div
|
|
class="text-white/70 font-bold mt-1 text-base sm:text-lg truncate drop-shadow-md">
|
|
{{ $reward['name'] }}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="absolute inset-0 z-20 flex items-end justify-center opacity-0 group-hover:opacity-100 sm:translate-y-2 sm:group-hover:translate-y-0 transition-all duration-300 pointer-events-none sm:pointer-events-auto">
|
|
<div class="w-full px-5 sm:px-6 pb-5 sm:pb-6 pointer-events-auto">
|
|
<flux:modal.trigger name="redeem-confirmation">
|
|
<flux:button variant="primary" color="zinc"
|
|
wire:click="$dispatch('fn:confirmAction', { id: '{{ $reward['id'] }}', target: 'redeem' })"
|
|
icon="ticket" class="w-full text-dark backdrop-blur-md">
|
|
Tukarkan Sekarang
|
|
</flux:button>
|
|
</flux:modal.trigger>
|
|
</div>
|
|
</div>
|
|
|
|
@if ($reward['stock'] !== null)
|
|
<div class="absolute top-4 right-4">
|
|
<span
|
|
class="text-[9px] font-bold text-white/40 border border-white/10 px-2 py-0.5 rounded-full uppercase tracking-tighter backdrop-blur-sm bg-zinc-600">
|
|
Stok: {{ $reward['stock'] }}
|
|
</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</flux:tab.panel>
|
|
|
|
<flux:tab.panel name="history">
|
|
@if (!empty($userRedemptions))
|
|
<flux:card>
|
|
<flux:table>
|
|
<flux:table.columns>
|
|
<flux:table.column>Hadiah</flux:table.column>
|
|
<flux:table.column>Kode</flux:table.column>
|
|
<flux:table.column>Poin Dipakai</flux:table.column>
|
|
<flux:table.column>Status</flux:table.column>
|
|
<flux:table.column>Kadaluarsa</flux:table.column>
|
|
</flux:table.columns>
|
|
|
|
<flux:table.rows>
|
|
@foreach ($userRedemptions as $redemption)
|
|
<flux:table.row>
|
|
<flux:table.cell>{{ $redemption['reward']['name'] }}</flux:table.cell>
|
|
<flux:table.cell>{{ $redemption['code'] }}</flux:table.cell>
|
|
<flux:table.cell>{{ formatCurrencyNumber($redemption['points_spent']) }}
|
|
</flux:table.cell>
|
|
<flux:table.cell>
|
|
<flux:badge color="{{ $redemption['status_color'] }}" size="sm"
|
|
inset="top bottom">
|
|
{{ $redemption['status_label'] }}
|
|
</flux:badge>
|
|
</flux:table.cell>
|
|
<flux:table.cell>
|
|
{{ formatDateLocalized($redemption['expires_at'], 'l, d M Y H:i') }}
|
|
</flux:table.cell>
|
|
</flux:table.row>
|
|
@endforeach
|
|
</flux:table.rows>
|
|
</flux:table>
|
|
</flux:card>
|
|
@endif
|
|
</flux:tab.panel>
|
|
</flux:tab.group>
|
|
</div>
|
|
|
|
@include('components.modals.confirmation', [
|
|
'modalName' => 'redeem-confirmation',
|
|
'modalTitle' => 'Tukarkan Hadiah?',
|
|
'modalMessage' => 'Apakah Anda yakin ingin menukarkan poin Anda dengan hadiah ini?',
|
|
'buttonVariant' => 'primary',
|
|
'buttonColor' => 'zinc',
|
|
'buttonText' => 'Ya, Tukarkan',
|
|
])
|
|
</flux:main>
|