<flux:main>
    <div class="flex justify-between items-center">
        <div>
            <flux:heading size="xl">{{ $pageTitle }}</flux:heading>
        </div>
    </div>

    <div class="mt-6">
        <flux:card>
            <div class="flex gap-4">
                <flux:input label="Masukkan Kode Penukaran" placeholder="Contoh: RD-ABC12345" wire:model="searchCode"
                    autofocus autocomplete="off" wire:keydown.enter="search" class="flex-1" />
                <div class="flex items-end">
                    <flux:button wire:click="search" variant="primary">Cari</flux:button>
                </div>
            </div>
        </flux:card>

        @if ($foundRedemption)
            <flux:card class="mt-6">
                <div class="space-y-6">
                    <div class="flex justify-between items-start">
                        <div>
                            <flux:heading size="lg">Detail Penukaran</flux:heading>
                            <flux:subheading>Informasi lengkap terkait kode <span
                                    class="font-bold uppercase">{{ $foundRedemption->code }}</span></flux:subheading>
                        </div>
                        <flux:badge color="{{ $foundRedemption->status->color() }}" variant="solid" size="lg">
                            {{ $foundRedemption->status->label() }}
                        </flux:badge>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <div class="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-1">Member
                            </div>
                            <div class="flex items-center gap-3">
                                <flux:avatar :name="$foundRedemption?->user?->customer?->name" size="sm" />
                                <div>
                                    <div class="text-sm font-medium">{{ $foundRedemption?->user?->customer?->name }}
                                    </div>
                                    <div class="text-xs text-zinc-500">{{ $foundRedemption?->user?->customer?->email }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-1">Hadiah</div>
                            <div class="text-sm font-medium text-primary-600">{{ $foundRedemption->reward->name }}</div>
                            <div class="text-xs text-zinc-500">{{ $foundRedemption->points_spent }} Poin</div>
                        </div>
                        <div>
                            <div class="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-1">Waktu
                                Penukaran</div>
                            <div class="text-sm">{{ formatDateLocalized($foundRedemption->created_at, 'l, d M Y H:i') }}
                            </div>
                        </div>
                        <div>
                            <div class="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-1">Batas Waktu
                            </div>
                            <div class="text-sm {{ $foundRedemption->isExpired() ? 'text-red-500 font-bold' : '' }}">
                                {{ formatDateLocalized($foundRedemption->expires_at, 'l, d M Y H:i') }}
                                @if ($foundRedemption->isExpired())
                                    (Kadaluarsa)
                                @endif
                            </div>
                        </div>
                    </div>

                    @if ($foundRedemption->status === \App\Enums\RedemptionStatus::PICKED_UP)
                        <div
                            class="p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg border border-zinc-200 dark:border-zinc-700">
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <div class="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-1">
                                        Diverifikasi Oleh</div>
                                    <div class="text-sm">
                                        {{ $foundRedemption->verifier?->employee?->full_name ?? 'Sistem' }}</div>
                                </div>
                                <div>
                                    <div class="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-1">Waktu
                                        Verifikasi</div>
                                    <div class="text-sm">
                                        {{ formatDateLocalized($foundRedemption->verified_at, 'l, d M Y H:i') ?? '-' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($foundRedemption->status === \App\Enums\RedemptionStatus::WAITING_PICKUP && !$foundRedemption->isExpired())
                        <div class="pt-4 border-t border-zinc-100 dark:border-zinc-800">
                            <flux:modal.trigger name="verify-confirmation">
                                <flux:button
                                    wire:click="$dispatch('fn:confirmAction', { id: '{{ $foundRedemption->id }}', target: 'verify' })"
                                    variant="primary" icon="check-badge">
                                    Verifikasi Sekarang
                                </flux:button>
                            </flux:modal.trigger>
                        </div>
                    @endif
                </div>
            </flux:card>
        @endif
    </div>

    @include('components.modals.confirmation', [
        'modalName' => 'verify-confirmation',
        'modalTitle' => 'Verifikasi Penukaran?',
        'modalMessage' => 'Apakah Anda yakin ingin memverifikasi penukaran hadiah ini?',
        'buttonVariant' => 'primary',
        'buttonColor' => 'zinc',
        'buttonText' => 'Ya, Verifikasi',
    ])
</flux:main>
