From bf7c7e12f6d254b5352b92c4856e0d48075daaf9 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 13 Nov 2025 08:49:17 +0700
Subject: [PATCH] fix(voucher): memperbaiki posisi empty data

---
 .../views/livewire/member/voucher.blade.php   | 123 +++++++++---------
 1 file changed, 64 insertions(+), 59 deletions(-)

diff --git a/resources/views/livewire/member/voucher.blade.php b/resources/views/livewire/member/voucher.blade.php
index 057edf2..8f73647 100644
--- a/resources/views/livewire/member/voucher.blade.php
+++ b/resources/views/livewire/member/voucher.blade.php
@@ -2,72 +2,77 @@
     <flux:heading size="xl" level="1">{{ $pageTitle }}</flux:heading>
 
     <div class="mt-6">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-            @forelse ($vouchers as $voucher)
-                <flux:card class="p-0 relative dark:bg-zinc-700!">
-                    <flux:text class="text-white p-2 md:p-0 absolute top-2 right-3 z-50">x3</flux:text>
+        @if (!empty($vouchers))
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+                @foreach ($vouchers as $voucher)
+                    <flux:card class="p-0 relative dark:bg-zinc-700!">
+                        <flux:text class="text-white p-2 md:p-0 absolute top-2 right-3 z-50">x3</flux:text>
 
-                    <div class="flex flex-col sm:flex-row items-stretch sm:items-center p-3 sm:p-4 gap-3 sm:gap-0">
-                        <div
-                            class="flex-shrink-0 w-full sm:w-24 md:w-32 h-24 sm:h-24 md:h-32 bg-gradient-to-br from-emerald-600 to-emerald-700 rounded-lg flex flex-col items-center justify-center text-white relative mx-auto sm:mx-0">
+                        <div class="flex flex-col sm:flex-row items-stretch sm:items-center p-3 sm:p-4 gap-3 sm:gap-0">
                             <div
-                                class="hidden sm:block absolute -right-3 top-1/2 transform -translate-y-1/2 w-6 h-6 bg-white dark:bg-zinc-700 rounded-full">
-                            </div>
-
-                            <img src="{{ asset('assets/images/dark-logo.png') }}" alt="logo"
-                                class="h-12 sm:h-16 md:h-20">
-                            <flux:heading class="text-white!">{{ $voucher['name'] }}</flux:heading>
-                        </div>
-
-                        <div class="flex-1 sm:ml-4 md:ml-4">
-                            <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
-                                <div class="flex-1 w-full sm:w-auto">
-                                    <flux:heading class="mb-1">
-                                        Diskon {{ $voucher['discount_amount'] }}
-                                        {{ $voucher['is_percentage'] ? ' s/d ' . $voucher['max_discount'] : '' }}
-                                    </flux:heading>
-
-                                    <flux:text class="mb-1">
-                                        Min. Belanja {{ $voucher['min_purchase'] }}
-                                    </flux:text>
-
-                                    <div x-data="{ textToCopy: '{{ $voucher['code'] }}', copied: false }"
-                                        @click="navigator.clipboard.writeText(textToCopy); copied = true; setTimeout(() => copied = false, 2000)"
-                                        :class="copied ? 'bg-emerald-100 dark:bg-emerald-800' :
-                                            'bg-emerald-50 dark:bg-emerald-900'"
-                                        class="inline-block px-2 py-1 border border-emerald-300 dark:border-emerald-700 rounded text-xs text-emerald-600 dark:text-emerald-300 font-medium my-1 cursor-pointer transition-colors">
-                                        <span x-text="copied ? 'Copied!' : textToCopy"></span>
-                                    </div>
-
-                                    <div class="flex items-center gap-2 text-xs sm:text-sm flex-wrap">
-                                        <flux:text size="xs">
-                                            Berakhir: {{ $voucher['end_date'] }}
-                                        </flux:text>
-                                        <flux:separator vertical class="dark:border-gray-700" />
-                                        <flux:text size="xs" class="text-blue-400">
-                                            S&K
-                                        </flux:text>
-                                    </div>
+                                class="flex-shrink-0 w-full sm:w-24 md:w-32 h-24 sm:h-24 md:h-32 bg-gradient-to-br from-emerald-600 to-emerald-700 rounded-lg flex flex-col items-center justify-center text-white relative mx-auto sm:mx-0">
+                                <div
+                                    class="hidden sm:block absolute -right-3 top-1/2 transform -translate-y-1/2 w-6 h-6 bg-white dark:bg-zinc-700 rounded-full">
                                 </div>
 
-                                <div class="w-full sm:w-auto sm:ml-2 md:ml-4 flex justify-center sm:justify-end">
-                                    <flux:button variant="primary" color="emerald" class="w-full">Pakai</flux:button>
+                                <img src="{{ asset('assets/images/dark-logo.png') }}" alt="logo"
+                                    class="h-12 sm:h-16 md:h-20">
+                                <flux:heading class="text-white!">{{ $voucher['name'] }}</flux:heading>
+                            </div>
+
+                            <div class="flex-1 sm:ml-4 md:ml-4">
+                                <div
+                                    class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
+                                    <div class="flex-1 w-full sm:w-auto">
+                                        <flux:heading class="mb-1">
+                                            Diskon {{ $voucher['discount_amount'] }}
+                                            {{ $voucher['is_percentage'] ? ' s/d ' . $voucher['max_discount'] : '' }}
+                                        </flux:heading>
+
+                                        <flux:text class="mb-1">
+                                            Min. Belanja {{ $voucher['min_purchase'] }}
+                                        </flux:text>
+
+                                        <div x-data="{ textToCopy: '{{ $voucher['code'] }}', copied: false }"
+                                            @click="navigator.clipboard.writeText(textToCopy); copied = true; setTimeout(() => copied = false, 2000)"
+                                            :class="copied ? 'bg-emerald-100 dark:bg-emerald-800' :
+                                                'bg-emerald-50 dark:bg-emerald-900'"
+                                            class="inline-block px-2 py-1 border border-emerald-300 dark:border-emerald-700 rounded text-xs text-emerald-600 dark:text-emerald-300 font-medium my-1 cursor-pointer transition-colors">
+                                            <span x-text="copied ? 'Copied!' : textToCopy"></span>
+                                        </div>
+
+                                        <div class="flex items-center gap-2 text-xs sm:text-sm flex-wrap">
+                                            <flux:text size="xs">
+                                                Berakhir: {{ $voucher['end_date'] }}
+                                            </flux:text>
+                                            <flux:separator vertical class="dark:border-gray-700" />
+                                            <flux:text size="xs" class="text-blue-400">
+                                                S&K
+                                            </flux:text>
+                                        </div>
+                                    </div>
+
+                                    <div class="w-full sm:w-auto sm:ml-2 md:ml-4 flex justify-center sm:justify-end">
+                                        <flux:button variant="primary" color="emerald" class="w-full">Pakai
+                                        </flux:button>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                </flux:card>
-            @empty
-                <div class="flex justify-center flex-col">
-                    <dotlottie-wc src="https://lottie.host/4282c234-6d0f-4a8d-ad04-3d82f2783814/FuhTCVgPGi.lottie"
-                        autoplay loop style="width: 200px; height: 200px; margin: 0 auto;">
-                    </dotlottie-wc>
-                    <flux:text class="block text-center italic mt-5">
-                        Yahhh, sepertinya belum ada data yang tersedia.
-                    </flux:text>
-                </div>
-            @endforelse
-        </div>
+                    </flux:card>
+                @endforeach
+
+            </div>
+        @else
+            <div class="flex justify-center flex-col">
+                <dotlottie-wc src="https://lottie.host/4282c234-6d0f-4a8d-ad04-3d82f2783814/FuhTCVgPGi.lottie" autoplay
+                    loop style="width: 200px; height: 200px; margin: 0 auto;">
+                </dotlottie-wc>
+                <flux:text class="block text-center italic mt-5">
+                    Yahhh, sepertinya belum ada data yang tersedia.
+                </flux:text>
+            </div>
+        @endif
     </div>
 </flux:main>
 @assets