@section('script')
    @parent
    <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(__('spinandwin.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');
                    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', 'loading');
                });
            @endif
        })
    </script>
@endsection

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

<div class="status_item" status_id="default" >
    <div class="my-4">
        <h6>{{ __('label.instructions') }}</h6>
        <p>{!! __('spinandwin.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">{{ __('spinandwin.labelSelectReceiptType') }}</label>
        <select id='receipt-type' class="custom-select" value="" style="width: 100%" placeholder="{{ __('spinandwin.placeholderSelectReceiptType') }}"/>
            <option value="" disabled selected>{{ __('spinandwin.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>
            --}}
            <option value="others">{{ __('spinandwin.labelReceiptTypeOthers') }}</option>
        </select>
        <input type="text" class="form-control mt-1" id="receipt-type-others" aria-describedby="othersHelp" placeholder="{{ __('spinandwin.placeholderOtherStoreName') }}"/>
    </div>

    @if(config('app.IS_DEMO'))
        <button class="btn btn-primary w-100" id="popup_incomplete-upload-btn">{{ __('spinandwin.labelUploadReceipt') }}</button>
    @else
        <label id="popup_incomplete-upload-btn" class='btn btn-primary' type="receipt">
            <span id="popup_incomplete-upload-btn-text">{{ __('spinandwin.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.spinandwin.receipt-example')

</div>

{{--<div class="status_item" status_id="upload">--}}
{{--    <h6>Eligibility Criteria for Receipt Submission</h6>--}}
{{--    <p>{!!  config('spinandwin.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.spinandwin.receipt-example')--}}
{{--</div>--}}

<div class="status_item" status_id="loading">
    @component('components.utility.loading')
    @endcomponent
</div>


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

<div class="status_item" status_id="submit">
    <h5>{{ __('spinandwin.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">{{ __('spinandwin.labelStoreName') }}</label>
        <label>{{ __('spinandwin.labelStoreNotFoundSelectionMsg') }}</label>
        <select id="popup_incomplete-store" class="store-dropdown form-control"  style="width: 100%; text-align:left;" required>
            <option value="" selected disabled>{{ __('spinandwin.labelSelectAStore') }}</option>
        </select>
        <input type="text" class="form-control mt-1" id="popup_incomplete-store-others" aria-describedby="othersHelp" placeholder="{{ __('spinandwin.placeholderOtherStoreName') }}"/>

    </div>

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

        <label for="popup_incomplete-product" class="w-100 text-left">{{ __('spinandwin.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>{{ __('spinandwin.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> {{ __('spinandwin.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;">{!! __('spinandwin.labelInactiveGridError') !!}</div>

    <x-spinandwin.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>{{ __('spinandwin.titleReceiptSelector') }}</h5>

        <p>{!! __('spinandwin.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