@once
    @push('script')
        <script>
            $(function() {
                var main_sel = '#receipt_picker';
                $(main_sel + ' button[data-uid]').on('click', function(){
                    var target = $(this);
                    var id = target.attr('data-uid');
                    destoryCropper();
                    if (!id) {
                        return;
                    }
                    $('#cropper-editor #image').attr('src', target.attr('data-img')).off('load').on('load', function(e) {
                        $(image = e.currentTarget).off('load');
                        setTimeout(() => {
                            initCropper();
                            loadPopup('popup_incomplete', 'cropper');
                            target.parents(main_sel).data('receipt_uid', id);
                        }, 300);
                    });
                    loadPopup('popup_incomplete');
                });
            });
        </script>
    @endpush
@endonce

<div class="text-center">
    <div class="my-4 bg-color bold px-3 py-3">
        <h5>{{ __('label.instructions') }}</h5>
        <p>{!! nl2br(__('smart_receipt.labelIncompleteInstructions')) !!} </p>
    </div>

    <div>
        <h6>{{ __('smart_receipt.labelPickYourReceiptScenario') }}</h6>

        @php
            $demo_receipts = \App\Models\StoreDetails::GetDemoReceipts();
        @endphp

        <div class="row px-2 btn-wrap mt-3 my-3" id="receipt_picker">
            @foreach ($demo_receipts as $merchant)
                @foreach ($merchant['images'] as $tag)
                    <div class="col-12 my-1">
                        <button class="btn btn-primary" data-uid="{{ $tag['uid'] }}" data-trans_key="{{ $tag['trans_key'] }}" data-img="{{ $tag['img'] }}">
                            {{ $tag['label'] }}
                        </button>
                    </div>
                @endforeach
            @endforeach
        </div>
    </div>

</div>