<flux:main>
    <flux:heading size="xl" level="1">{{ $pageTitle }}</flux:heading>

    <div class="mt-6">
        @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="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>
                                    </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>
                    </flux:card>
                @endforeach

            </div>
        @else
            @include('components.animations.lottie.not-found')
        @endif
    </div>
</flux:main>

@assets
    <script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
@endassets
