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

            <flux:table class="bo">
                <flux:table.columns>
                    <flux:table.column>Nama</flux:table.column>
                    <flux:table.column>Nilai</flux:table.column>
                    <flux:table.column>Aksi</flux:table.column>
                </flux:table.columns>

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

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

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

            <flux:input name="form.tier_id" type="hidden"></flux:input>

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

            <flux:field>
                <flux:label>Nilai <span class="text-red-500 ms-1">*</span>
                </flux:label>
                <flux:description>Nilai hanya berupa rupiah, bukan persentase.</flux:description>
                <flux:input.group>
                    <flux:input.group.prefix>Rp</flux:input.group.prefix>
                    <flux:input placeholder="xxx" x-mask:dynamic="$money($input, ',')"
                        wire:model.live.debounce.500ms="form.value" autocomplete="off" />
                </flux:input.group>
                <flux:error name="form.value" />
            </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>

    @include('components.confirmation.delete')
</div>
