99 lines
5.8 KiB
PHP
99 lines
5.8 KiB
PHP
<div>
|
|
<main class="px-8 py-12 mt-24 bg-white min-h-screen">
|
|
<header class="mb-8">
|
|
<h1 class="text-3xl font-bold text-home-foreground mb-2">Voucher</h1>
|
|
<p class="text-home-foreground/60">Dapatkan diskon spesial dengan voucher eksklusif kami</p>
|
|
</header>
|
|
|
|
<section class="flex flex-col lg:flex-row gap-4 mb-8" aria-label="Pencarian dan Filter">
|
|
<div class="flex-1">
|
|
<div class="relative">
|
|
<svg class="absolute left-4 top-3.5 w-5 h-5 text-home-foreground/50" fill="none"
|
|
stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
<input type="text" placeholder="Cari voucher..." aria-label="Cari voucher"
|
|
wire:model.live.debounce.500ms="search"
|
|
class="w-full py-3 pl-11 pr-4 rounded-lg border border-home-foreground/10 text-home-foreground placeholder-home-foreground/50 focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition">
|
|
</div>
|
|
</div>
|
|
|
|
<select wire:model.live="outlet_id" aria-label="Filter Outlet"
|
|
class="px-4 py-3 rounded-lg border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition cursor-pointer min-w-fit">
|
|
<option value="">Filter Outlet</option>
|
|
@foreach ($outlets as $key => $value)
|
|
<option value="{{ $key }}">{{ $value }}</option>
|
|
@endforeach
|
|
</select>
|
|
|
|
<select wire:model.live="sort" aria-label="Urutkan Voucher"
|
|
class="px-4 py-3 rounded-lg border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition cursor-pointer min-w-fit">
|
|
<option value="">Urutkan</option>
|
|
<option value="latest">Terbaru</option>
|
|
<option value="biggest">Terbesar</option>
|
|
<option value="ending-soon">Berakhir Segera</option>
|
|
</select>
|
|
</section>
|
|
|
|
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach ($vouchers as $voucher)
|
|
<article
|
|
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow">
|
|
<div class="bg-home-foreground/5 p-6 relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-24 h-24 bg-home-foreground/5 rounded-full -mr-8 -mt-8">
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<div
|
|
class="inline-block bg-home-foreground text-white px-3 py-1 rounded-full text-xs font-bold mb-3">
|
|
{{ $voucher->tags }}</div>
|
|
<h3 class="text-xl font-bold text-home-foreground mb-1">{{ $voucher->name }}</h3>
|
|
<p class="text-sm text-home-foreground/60 mb-4">{{ $voucher->summary }}</p>
|
|
|
|
<div class="bg-white rounded-lg p-3 mb-4 border border-home-foreground/20">
|
|
<p class="text-xs text-home-foreground/60 mb-1">Kode Voucher:</p>
|
|
<p class="text-lg font-bold text-home-foreground font-mono tracking-widest">
|
|
{{ $voucher->code }}</p>
|
|
</div>
|
|
|
|
<div class="space-y-2 text-sm mb-4">
|
|
<div class="flex justify-between">
|
|
<span class="text-home-foreground/60">Min. Pembelian:</span>
|
|
<span
|
|
class="font-semibold text-home-foreground">{{ $voucher->min_purchase_formatted }}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-home-foreground/60">Berlaku s.d.:</span>
|
|
<time datetime="{{ $voucher->end_date }}"
|
|
class="font-semibold text-home-foreground">{{ $voucher->end_date }}</time>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-home-foreground/60">Sisa Voucher:</span>
|
|
<span class="font-semibold text-home-foreground">{{ $voucher->available_count }} /
|
|
{{ $voucher->quota ?? '∞' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 flex gap-3">
|
|
<button
|
|
class="flex-1 bg-home-foreground text-white font-bold py-2.5 rounded-lg hover:opacity-90 transition-opacity">
|
|
Klaim
|
|
</button>
|
|
<button
|
|
class="flex-1 border-2 border-home-foreground text-home-foreground font-bold py-2.5 rounded-lg hover:bg-home-foreground/5 transition-colors">
|
|
Detail
|
|
</button>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
|
|
<div class="mt-8 flex justify-center">
|
|
{{ $vouchers->links() }}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|