@once
    @push('script')
        <script>
            const MAX_PRODUCTS = 16;
            const MAX_QTY = 10;

            function resetProducts(){
                $('.product-item:not(#pi)').remove();
                $('#pi').removeClass('opacity-50');
                $('.product-dropdown').val('').trigger('change');
                $('.product-qty').val('1').trigger('change');
                $('#add-more-products').show();
            }
            function validProducts (){
                let products = [];
                $.each( $('.product-item'), (i,pi)=>{
                    const qty= parseInt( $(pi).find('.product-qty').val());
                    const product =  $(pi).find('.product-dropdown').val();
                    if (qty>0 && product !== null){
                        products.push({product,qty});
                    }
                });
                return products
            }
            function validateSubmit (){
                const submit = $('#popup_incomplete-submit');
                validProducts().length < 1? submit.attr('disabled', true) : submit.removeAttr('disabled');
                return true;
            }

            function populateProducts(list){
                Object.keys(list).forEach( (v,k)=>{
                    if ( k > 0 ) $('#add-more-products').trigger('click');
                    $('.product-item:last-child').find('.product-dropdown').val(v).trigger('change');
                })
            }

            function getReceiptType(){
                let receipt = $('#receipt-type').val();
                let receipt_others = $('#receipt-type-others').val();
                return receipt==='others' && receipt_others ?  receipt_others :receipt;
            }

            function getStoreName(){
                let store = $('#popup_incomplete-store').val()
                let store_others = $('#popup_incomplete-store-others').val();
                return store==='others' && store_others ?  store_others :store;
            }
            function populateStoreName(merchant_id){
                if ( $('#receipt-type-others').val() ||  $('#receipt-type').val()=='others') {
                    $('#popup_incomplete-store').val('others').trigger('change');
                    $('#popup_incomplete-store-others').val($('#receipt-type-others').val());
                } else {
                    $('#popup_incomplete-store').val(merchant_id).trigger('change');
                }
            }

            $(function(){

                validateSubmit();
                $( '.product-dropdown').on( 'change' , ()=>validateSubmit());

                $('#add-more-products').on('click', function(){
                    let length = $('.product-item').length;
                    // const dropdown = $('.product-dropdown');
                    // dropdown? dropdown.select2("destroy").end() :'';
                    SELECT2_PRODUCTS.length>0 ? SELECT2_PRODUCTS.select2("destroy").end() :'';
                    let clone = $('.product-item:first-child').clone(true).insertAfter($('.product-item:last-child')).get(0)
                    SELECT2_PRODUCTS = $('.product-dropdown');
                    $(clone).attr('id','pi-'+ length).removeClass('opacity-50');
                    setSelect2Data(SELECT2_PRODUCTS, MY_PRODUCTS , '{!! addslashes(__('stampcard.labelSelectAProduct')) !!}');
                    // setProduct(dropdown)
                    length+1 >= MAX_PRODUCTS ? $(this).hide() : $(this).show();
                    // ['popup_incomplete-product','popup_incomplete-qty'].forEach(item=> $(clone).find('#'+item).attr('id',item+'-'+length))
                });
                $('#receipt-type').select2({
                    width: 'resolve'
                });

                $('#receipt-type').on('change',function(){
                    $('#receipt-type').val()==='others' ? $('#receipt-type-others').show().val('') : $('#receipt-type-others').hide().val('');
                });

                $('#popup_incomplete-store').on('change',function(){
                    $('#popup_incomplete-store').val()==='others' ? $('#popup_incomplete-store-others').show() : $('#popup_incomplete-store-others').hide();
                });

                @if(config('app.IS_DEMO'))
                    $('#popup_incomplete-upload-btn').on('click', function(){
                        loadPopup('popup_incomplete', 'receipt_selector');
                    });
                    {{--
                    $('.demo-receipt-box .img-wrapper').on('click', function(){
                        var id = $(this).parent('.demo-receipt-box').attr('data-uid');
                        if (id) {
                            $('#cropper-editor #image').attr('src', $(this).find('img').attr('src')); 
                            initCropper(); 
                            loadPopup('popup_incomplete','cropper');
                            $('#popup_incomplete [status_id=receipt_selector]').data('receipt_uid', id);
                        }
                    });
                    --}}
                    var main_sel = '#popup_incomplete .status_item[status_id="receipt_selector"]';
                    $(main_sel + ' button[data-uid]').on('click', function(){
                        var target = $(this);
                        var id = target.attr('data-uid');
                        if (id) {
                            $('#cropper-editor #image').attr('src', target.attr('data-img')); 
                            initCropper(); 
                            loadPopup('popup_incomplete','cropper');
                            target.parents(main_sel).data('receipt_uid', id);
                        }
                    });
                @endif
            })
        </script>
    @endpush
@endonce

@component('components.stampcard.popup.template', ['id'=>'popup_incomplete'])

<div class="status_item" status_id="default" >
    <div class="my-4">
        <h6>{{ __('label.instructions') }}</h6>
        <p>{!! __('stampcard.labelIncompleteInstructions') !!} </p>
    </div>

{{--    <button id="incomplete_popup-init" class="btn btn-primary w-100" onclick="loadPopup('popup_incomplete','upload')">Upload Receipt</button>--}}
    <div class="form-group text-left">
        <label for="receipt-type">{{ __('stampcard.labelSelectReceiptType') }}</label>
        <select id='receipt-type' class="custom-select" value="" style="width: 100%" placeholder="{{ __('stampcard.placeholderSelectReceiptType') }}"/>
            <option value="" disabled selected>{{ __('stampcard.labelSelectReceiptType') }}</option>
            @php
                $receipts = \App\Models\StoreDetails::GetSampleReceipts();
            @endphp
            @foreach($receipts as $receipt)
                <option value="{{ $receipt['slug'] }}">{{ $receipt['name'] }}</option>
            @endforeach
            {{-- 
            <option value="watsons">Watsons</option>
            <option value="caring">Caring</option>
            <option value="online">Online</option> 
            --}}
            @if(config('stampcard.receipt_selection.is_show_other_option'))
                <option value="others">{{ __('stampcard.labelReceiptTypeOthers') }}</option>
            @endif
        </select>

        @if(config('stampcard.receipt_selection.is_show_other_option'))
            <input type="text" class="form-control mt-1" id="receipt-type-others" aria-describedby="othersHelp" placeholder="{{ __('stampcard.placeholderOtherStoreName') }}"/>
        @endif
    </div>

    @if(config('app.IS_DEMO'))
        <button class="btn btn-primary w-100" id="popup_incomplete-upload-btn">{{ __('stampcard.labelUploadReceipt') }}</button>
    @else
        <label id="popup_incomplete-upload-btn" class='btn btn-primary' type="receipt">
            <span id="popup_incomplete-upload-btn-text">{{ __('stampcard.labelUploadReceipt') }}</span>
            <input type="file" name="receipt" id="popup_incomplete-upload"
                onchange=" $('#cropper-editor #image').attr('src',window.URL.createObjectURL(this.files[0]) ); initCropper(); loadPopup('popup_incomplete','cropper')"
                class="d-none inputfile" accept="image/*"/>
        </label>
    @endif

    @include('components.stampcard.receipt-example')

</div>

{{--<div class="status_item" status_id="upload">--}}
{{--    <h6>Eligibility Criteria for Receipt Submission</h6>--}}
{{--    <p>{!!  config('stampcard.incomplete_eligibility_criteria') !!} </p>--}}


{{--    <label id="popup_incomplete-upload-btn" class='btn btn-primary' type="receipt">--}}
{{--        <span id="popup_incomplete-upload-btn-text">Upload Now</span>--}}
{{--        <input type="file" name="receipt" id="popup_incomplete-upload"--}}
{{--               onchange=" $('#cropper-editor #image').attr('src',window.URL.createObjectURL(this.files[0]) ); initCropper(); loadPopup('popup_incomplete','cropper')"--}}
{{--               class="d-none inputfile" accept="image/*"/>--}}
{{--    </label>--}}
{{--    @include('components.stampcard.receipt-example')--}}
{{--</div>--}}


<div class="status_item" status_id="cropper">
    <x-stampcard.popup.grid_cropper/>
</div>

<div class="status_item" status_id="submit">
    <h5>{{ __('stampcard.titleReviewYourReceiptMsg') }}</h5>

    <div id="camera-container">
        <canvas id="incomplete_receipt-canvas" class="camera-canvas" style="display: inline-block; position: relative; width: 90%; margin-bottom:10px"></canvas>
    </div>

    <div class="form-group text-left">
        <label for="popup_incomplete-store">{{ __('stampcard.labelStoreName') }}</label>
        <label>{{ __('stampcard.labelStoreNotFoundSelectionMsg') }}</label>
        <select id="popup_incomplete-store" class="store-dropdown form-control"  style="width: 100%; text-align:left;" required>
            <option value="" selected disabled>{{ __('stampcard.labelSelectAStore') }}</option>
        </select>
        <input type="text" class="form-control mt-1" id="popup_incomplete-store-others" aria-describedby="othersHelp" placeholder="{{ __('stampcard.placeholderOtherStoreName') }}"/>

    </div>

    <div class="form-group text-left">

        <label for="popup_incomplete-product" class="w-100 text-left">{{ __('stampcard.labelSelectProductAndQty') }}</label>
        <div id="product-list" class="mb-3">

            <div id="pi" x-data="{qty: 1 }"
                 x-init="$watch('qty', value =>{validateSubmit(); if ( value == 0 &&  document.querySelectorAll('.product-item').length>1 ) $el.remove();  })"
                 :class="qty==0 && 'opacity-50'"
                 class="product-item d-flex justify-content-between align-items-center">
                <div class="form-group text-left mr-3 mb-0 w-50 flex-grow-1 flex-shrink-1">
                    <select class="product-dropdown form-control"  style="width: 100%; text-align:left;" required>
                        <option value="" selected disabled>{{ __('stampcard.labelSelectAProduct') }}</option>
                    </select>
                </div>

                <div class="form-group mb-0 d-inline-flex flex-shrink-0 align-items-center justify-content-between"
                     style="width:100px" >

                    <div class="btn btn-sm btn-info product-qty-click"
                         x-on:click=" qty > 0 && qty--   ">
                        <i class="fas fa-minus"></i>
                    </div>
                    <input type="number" inputmode="numeric" x-model="qty"
                           onchange="validateSubmit()"
                           class="form-control bg-transparent border-0 product-qty text-white"
                           id="popup_incomplete-qty" readonly required/>
                    <div class="btn btn-sm btn-info product-qty-click"
                         x-on:click=" qty < MAX_QTY && qty++  ">
                        <i class="fas fa-plus"  ></i>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <button id="add-more-products" class="btn btn-sm btn-secondary mb-4">
        <i class="fas fa-plus"></i> {{ __('stampcard.btnAddMoreProducts') }}
    </button>

    <button id="popup_incomplete-submit" class='btn btn-primary w-100 inputfile-btn' type="receipt">{{ __('label.btn_submit') }}</button>
    <button class="btn mx-auto d-block text-underline text-white" onclick="resetPopups();loadPopup('popup_incomplete','default');">{{ __('label.btn_back') }}</button>


</div>

<div class="message-container">
    <div class="message receipt_error"></div>
    <div id="inactive_grid_error" style="display: none;">{!! __('stampcard.labelInactiveGridError') !!}</div>

    <x-stampcard.receipt-feedback style="display: none"/>
    <div class="progress-msg" style="display: none;"></div>
</div>


@if(config('app.IS_DEMO'))
    @php
        $demo_receipts = \App\Models\StoreDetails::GetDemoReceipts();
    @endphp

    <div class="status_item" status_id="receipt_selector">
        <h5>{{ __('stampcard.titleReceiptSelector') }}</h5>

        <p>{!! __('stampcard.labelReceiptSelectorDescription') !!}</p>

        <div class="row" style="margin-top: 10px;">
            @foreach ($demo_receipts as $merchant)
                @foreach ($merchant['images'] as $tag)
                    <div class="col-md-12" style="margin-bottom: 10px;">
                        <button class="btn btn-primary w-100 btn-block" data-uid="{{ $tag['uid'] }}" data-img="{{ $tag['img'] }}">
                            {{ $tag['label'] }}
                        </button>
                    </div>
                    {{--
                    <div class="col-md-6 demo-receipt-box h-100" data-uid="{{ $tag['uid'] }}">
                        <label class="font-weight-bold">{{ $tag['label'] }}</label>
                        <p class="h-100 img-wrapper px-0">
                            <img src="{{ $tag['img'] }}" alt="{{ $tag['uid'] }}" class="w-100 px-3 mx-auto img-demo">
                        </p>
                    </div>
                    --}}
                @endforeach
            @endforeach
        </div>
    </div>
@endif

@endcomponent