<flux:main>
    <div class="flex justify-between items-center">
        <div>
            <flux:heading size="xl">{{ $pageTitle }}</flux:heading>
        </div>
        @can('create tier')
            <div>
                <flux:modal.trigger name="form-modal">
                    <flux:button variant="primary" class="text-sm"
                        wire:click="$dispatch('modal:open', {method: 'create', 'modalTitle': 'Tambah Tier'})">Tambah
                    </flux:button>
                </flux:modal.trigger>
            </div>
        @endcan
    </div>

    <div class="mt-6">
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 auto-rows-auto items-start">
            @foreach ($tiers as $tier)
                <flux:card
                    class="hover:shadow-lg transition-shadow duration-200 bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
                    <div class="space-y-4">
                        <div class="flex items-start justify-between">
                            <flux:heading size="lg">{{ $tier['name'] }}
                            </flux:heading>
                        </div>

                        <div class="space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-500 dark:text-gray-400">Min. Poin:</span>
                                <span class="font-medium">{{ $tier['min_points'] }}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-500 dark:text-gray-400">Maks. Poin:</span>
                                <span class="font-medium">{{ $tier['max_points'] }}</span>
                            </div>

                            <flux:separator />

                            <div class="flex justify-between text-sm">
                                <span class="text-gray-500 dark:text-gray-400">Total Member:</span>
                                <span class="font-medium">{{ $tier['total_members'] }}</span>
                            </div>

                            @if ($tier['top_member'])
                                <div class="text-sm">
                                    <span class="text-gray-500 dark:text-gray-400 font-semibold">Member Dengan Poin
                                        Tertinggi:</span>

                                    <div
                                        class="mt-1 flex items-center justify-between bg-gradient-to-r from-emerald-400 to-emerald-600 text-white rounded px-3 py-3 text-sm font-medium shadow-lg">
                                        <span>{{ $tier['top_member']['name'] }}</span>
                                        <span>{{ $tier['top_member']['points'] }} Poin</span>
                                    </div>

                                    <div
                                        class="mt-2 bg-white dark:bg-gray-800 rounded-lg shadow p-4 text-gray-700 dark:text-gray-300">
                                        <h4 class="font-semibold mb-2">Statistik Order</h4>
                                        <div class="flex justify-between text-sm">
                                            <span>Order:</span>
                                            <span>{{ $tier['top_member']['total_orders'] }}x</span>
                                        </div>
                                        <div class="flex justify-between text-sm mt-1">
                                            <span>Parfum Yang Dibeli:</span>
                                            <span>{{ $tier['top_member']['items']['total_perfume'] }} ml</span>
                                        </div>
                                        <div class="flex justify-between text-sm mt-1">
                                            <span>Produk Yang Dibeli:</span>
                                            <span>{{ $tier['top_member']['items']['total_product'] }} pcs</span>
                                        </div>
                                        <div class="flex justify-between text-sm mt-1">
                                            <span>Botol Yang Dibeli:</span>
                                            <span>{{ $tier['top_member']['items']['total_bottle'] }} pcs</span>
                                        </div>
                                        <div class="flex justify-between text-sm mt-1">
                                            <span>Subtotal Belanja:</span>
                                            <span>{{ $tier['top_member']['total']['subtotal'] }}</span>
                                        </div>
                                        <div class="flex justify-between text-sm mt-1">
                                            <span>Diskon:</span>
                                            <span>{{ $tier['top_member']['total']['discount'] }}</span>
                                        </div>
                                        <div class="flex justify-between text-sm mt-1">
                                            <span>Total Belanja:</span>
                                            <span>{{ $tier['top_member']['total']['grand_total'] }}</span>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <div class="flex gap-2 pt-2 border-gray-200 dark:border-gray-700">
                            @can('view tier reward')
                                <flux:modal.trigger name="reward-view-modal">
                                    <flux:tooltip content="Lihat Hadiah">
                                        <flux:button variant="primary" color="blue" icon="eye" size="sm"
                                            wire:click="$dispatch('modal:open:reward', {method: 'create', 'modalTitle': '{{ $tier['name'] }}', 'tier_id': '{{ $tier['id'] }}'})">
                                        </flux:button>
                                    </flux:tooltip>
                                </flux:modal.trigger>
                            @endcan

                            @can('create tier reward')
                                <flux:modal.trigger name="reward-form-modal">
                                    <flux:tooltip content="Tambah Hadiah">
                                        <flux:button variant="primary" color="primary" icon="plus" size="sm"
                                            wire:click="$dispatch('modal:open:reward', {method: 'create', 'modalTitle': 'Tambah Hadiah', 'tier_id': '{{ $tier['id'] }}'})">
                                        </flux:button>
                                    </flux:tooltip>
                                </flux:modal.trigger>
                            @endcan

                            @can('update tier')
                                <flux:modal.trigger name="form-modal">
                                    <flux:tooltip content="Ubah">
                                        <flux:button variant="primary" color="yellow" icon="pencil-square" size="sm"
                                            wire:click="$dispatch('modal:open', {method: 'update', 'modalTitle': 'Ubah Tier', 'id': '{{ $tier['hash'] }}'})">
                                        </flux:button>
                                    </flux:tooltip>
                                </flux:modal.trigger>
                            @endcan

                            @can('delete tier')
                                <flux:modal.trigger name="delete">
                                    <flux:tooltip content="Hapus">
                                        <flux:button variant="danger" icon="trash" size="sm"
                                            wire:click="$dispatch('fn:confirmDelete', {id: '{{ $tier['hash'] }}'})">
                                        </flux:button>
                                    </flux:tooltip>
                                </flux:modal.trigger>
                            @endcan
                        </div>
                    </div>
                </flux:card>
            @endforeach
        </div>
    </div>

    @include('components.confirmation.delete')
    <flux:modal name="form-modal" class="w-[95%] max-w-sm md:max-w-xl mx-auto" @close="closeModal('form-modal')">
        <div class="p-4 space-y-6">
            <flux:heading size="lg">{{ $modalTitle }}</flux:heading>

            <flux:field>
                <flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
                <flux:input placeholder="Gold" wire:model.live.debounce.500ms="form.name" autofocus
                    autocomplete="off" />
                <flux:error name="form.name" />
            </flux:field>

            <flux:field>
                <flux:label>Min. Poin <span class="text-red-500 ms-1">*</span></flux:label>
                <flux:input placeholder="100" wire:model.live.debounce.500ms="form.min_points" autocomplete="off"
                    x-mask:dynamic="$money($input, ',')" />
                <flux:error name="form.min_points" />
            </flux:field>

            <flux:field>
                <flux:label>Maks. Poin </flux:label>
                <flux:input placeholder="499" wire:model.live.debounce.500ms="form.max_points" autocomplete="off"
                    x-mask:dynamic="$money($input, ',')" />
                <flux:error name="form.max_points" />
            </flux:field>

            <div class="flex">
                <flux:spacer />
                <flux:button variant="primary" class="sm:w-auto cursor-pointer" wire:click="{{ $method }}">
                    Simpan
                </flux:button>
            </div>
        </div>
    </flux:modal>

    @can('create tier reward')
        @livewire('studio.loyalty.tier.reward')
    @endcan
</flux:main>
