@php $id = 'popup_singpost_qr_success' @endphp
@once
    @push('script')
        <script>
            document.getElementById('singpost-qr-modal-okay').addEventListener('click', function() {
                fetch('{!! route('singpost.provision-reward') !!}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({})
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.message) {
                            $('.error-title').text(data.message)
                            loadChainPusher('popup_error')
                            return;
                        }

                        console.log("voucher code:",data)
                        $('#popup_singpost_reward_voucher #singpost-reward-voucher').text(data.code)
                        $('#popup_singpost_reward_voucher #singpost-star-points').text(data.stars)
                        loadChainPusher('popup_singpost_reward_voucher');
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('An error occurred. Please try again.');
                    });
            });
        </script>
    @endpush
@endonce

@component(getPopupLayout(), ['id' => $id])
    <div class="status_item my-4"  status_id="default">
        <h5 class="title">{!! __('messages.singpost_qr_code_title') !!}</h5>
        <p class="subtitle">{!! __('messages.singpost_qr_code_subtitle') !!}</p>
        <div class="align-items-center bold d-flex justify-content-center my-4 reward-single">
{{--            <img src="{{asset('/assets/images/singpost/cny24/Singpost_TreasureBox_CNY.gif')}}" style="width: 75%; height: 75%;" alt="Treasure Box">--}}
            <span class="reward-qty h1 bold d-inline mr-2"></span>
            <span class="reward-type d-inline"></span>
        </div>
        <h4>*While stocks last</h4>
        <div class="align-items-center bold justify-content-center my-4 d-none">
            <span class="item-name d-inline"></span>
        </div>
        <div class="align-items-center d-flex justify-content-center my-2 reward-remark force-hide">
        </div>

        <div class="align-items-center d-flex justify-content-center my-2 reward-disclaimer force-hide">
        </div>

        <button class='btn btn-primary mt-3' id="singpost-qr-modal-okay" data-dismiss="modal">Redeem Points</button>
    </div>
@endcomponent