@php $id = 'popup_upload_receipt' @endphp
@once
    @push('script')

    <script async src="https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js"></script>

    <script src="{{ mix('js/main/tesseract_backend.js') }}"></script>
    <script src="{{ mix('js/main/receipt-upload.js') }}"></script>
    <script>
        // import moment from "moment";

        window.POPUP_CROPPER_ID = '{{$id}}';
        window.UPLOAD_RECEIPT_POPUP = '{{$id}}';
        const MAX_PRODUCTS = 16;
        const MAX_QTY = 10;
        {{--window.isShowOtherReceiptType = '{{config('stampcard.receipt_selection.is_show_other_option')}}';--}}


        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 = $('#{{$id}}-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 (){
            const active_modal = $('.modal.show');
            let receipt =active_modal.find('.receipt-type').val();
            let receipt_others = active_modal.find('.receipt-type-others').val();
            return receipt==='others' ?  receipt_others :receipt;
        }

        function getStoreId(){
            return $('#{{$id}}-store').val()
        }

        function getStoreName(){
            let store = getStoreId();
            let store_others = $('#{{$id}}-store-others').val();
            return store==='others' && store_others ?  store_others :store;
        }

        function populateStoreName(merchant_id){
            $('#' + window.UPLOAD_RECEIPT_POPUP + ' .message').text('');//.text('Please confirm the auto-detected receipt data');
            if ( !merchant_id || $('#{{$id}}-receipt-type-others').val() ||  $('#{{$id}}-receipt-type').val()=='others') {
                $('#{{$id}}-store').val('others').trigger('change');
                $('#{{$id}}-store-others').val($('#{{$id}}-receipt-type-others').val());
            } else {
                $('#{{$id}}-store').val(merchant_id).trigger('change');
            }
        }

        function populateTransactionAmount(amt){
            $('#{{$id}}-txn-amount').val(amt)
        }

        function getTransactionAmount(){
            return $('#{{$id}}-txn-amount').val();
        }

        function setDefaultFormView(){
            resetLoadingButton();
            $('#{{$id}}').find('.message').text('');
            const form_items = [
                '#'+UPLOAD_RECEIPT_POPUP+'-store',
                '.product-dropdown',
                '#'+UPLOAD_RECEIPT_POPUP+'-txn-amount',
                // '#'+UPLOAD_RECEIPT_POPUP+'-txn-date',
                // '#'+UPLOAD_RECEIPT_POPUP+'-outlet-name',
                // '#'+UPLOAD_RECEIPT_POPUP+'-payment-mode',
                // '#'+UPLOAD_RECEIPT_POPUP+'-sponsor',
            ];
            $.each(form_items, function(k,v){
                $(v).val('');
                $(v).parents('.form-item').hide();
                if ($(v).is('select')){
                    $(v).select2();
                }
            })


            resetProducts();
            cropper!==null||cropBoxData!==null||canvasData!=null?destoryCropper() :'';
            window.receipt_uploaded = false;
            window.ocr_task_complete = false;
        }

        $(function(){
            const format = 'YYYY-MM-DD';
            // const last_yr = moment().subtract(1, 'year').format(format);
            // const now = moment().format(format);
            const now2 = new Date();

            {{--$('#{{$id}}-txn-date').datepicker({--}}
            {{--    singleDatePicker: true,--}}
            {{--    showDropdowns: true,--}}
            {{--    locale: {format: format, cancelLabel: 'Clear'},--}}
            {{--    autoApply: false,--}}
            {{--    startDate: last_yr,--}}
            {{--    endDate: now,--}}
            {{--    minDate: last_yr,--}}
            {{--    maxDate: now,--}}
            {{--})--}}
            $('#popup_upload_receipt-txn-date').datepicker({
                singleDatePicker: true,
                locale: {format: format, cancelLabel: 'Clear'},
                autoApply: false,
                changeMonth: true,
                changeYear: true,
                yearRange: "c-1:c",
                maxDate: now2,
            });

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

            window.RECEIPT_PRODUCTS = []
            $('#add-more-products').on('click', function(){
                const el_pd = $('.product-dropdown');
                const pd_len = el_pd.length;
                const placeholder = window.TRANS_TEXTS.labelSelectAProduct ?? 'Select a Product';
                // const dropdown = $('.product-dropdown');
                // dropdown? dropdown.select2("destroy").end() :'';
                if( pd_len >0 ){
                    $.each( el_pd , function(k,v){
                        if( $(v).data('select2') ){
                            $(v).select2("destroy") ;
                        }
                    })
                 }
                let clone = $('.product-item:first-child').clone().insertAfter($('.product-item:last-child')).get(0)
                $(clone).attr('id','pi-'+ pd_len).removeClass('opacity-50');



                $('.product-dropdown').each(  function(k,v){
                    console.log(placeholder)
                    if( !$(v).data('select2') ){
                        setSelect2Data($(v) , RECEIPT_PRODUCTS , placeholder);
                    }
                })
                // setProduct(dropdown)
                pd_len+1 >= MAX_PRODUCTS ? $(this).hide() : $(this).show();
                // ['{{$id}}-product','{{$id}}-qty'].forEach(item=> $(clone).find('#'+item).attr('id',item+'-'+length))
            });

            $('#{{$id}} .receipt-type').select2({
                width: 'resolve'
            }).on('change', function(){
                $('#{{$id}}').find('.receipt-type').val()==='others' ? $('#{{$id}}').find('.receipt-type-others').show().val('') : $('#{{$id}}').find('.receipt-type-others').hide().val('');
            });
            // }

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

            // 4. Event listeners

            // $(document).on('click','#'+UPLOAD_RECEIPT_POPUP+'-cropper-submit', function(e){
            //     setButtonToLoading( e.currentTarget );
            //     const receipt_type_val = $("#"+UPLOAD_RECEIPT_POPUP+"-receipt-type").val();
            //     processUploadReceipt({
            //         // card_id : window.card_id,
            //         // grid_id : window.grid_id,
            //         retail_partner :receipt_type_val ?? '',
            //         retail_partner_value : receipt_type_val==='others'? getReceiptType() :'',
            //     }, function(){
            //
            //
            //     });
            // });
            //
            // $(document).on('click','#'+UPLOAD_RECEIPT_POPUP+'-submit', function(e){
            //     setButtonToLoading( this );
            //     processSubmitReceipt(e,window.receipt_data);
            // });
            setDefaultFormView();
            $('#'+UPLOAD_RECEIPT_POPUP).on('hidden.bs.modal',function(){
                setDefaultFormView();
            });

        })
    </script>
    @endpush

@endonce

@component(getPopupLayout(), ['id'=>$id])
    <div class="status_item" status_id="default" >
        <x-main.challenge-details/>

        <div class="form-group text-left">
            <label for="{{$id}}-receipt-type">{{ __('enterprise.labelSelectReceiptType') }}</label>
            <select id="{{$id}}-receipt-type" class="receipt-type custom-select"
                    placeholder="{{ __('enterprise.placeholderSelectReceiptType') }}">
                <option value="" disabled selected>{{ __('enterprise.labelSelectReceiptType') }}</option>
            </select>

            <input type="text"id="{{$id}}-receipt-type-others" class="receipt-type-others form-control mt-1" style="display: none"
                   aria-describedby="othersHelp" placeholder="{{ __('enterprise.placeholderOtherStoreName') }}"/>
        </div>

        <x-main.receipt-example-dynamic/>

        <label id="{{$id}}-upload-btn" class='btn btn-primary' type="receipt">
            <span id="{{$id}}-upload-btn-text">{{ __('enterprise.labelUploadReceipt') }}</span>
            <input type="file" name="receipt" id="{{$id}}-upload"
                   class="d-none inputfile" accept=".jpg, .jpeg, .png"/>
        </label>

    </div>



    <div class="status_item" status_id="cropper">
        @include('components.utility.receipt_cropper', ['id'=>$id])
    </div>

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

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

        <a href="javascript:void(0)" class="add-img init-add-more btn btn-outline-primary btn-sm d-inline-block mt-1 mb-3 py-1 small" style="display: none">
            Receipt too long? Upload the next part
        </a>

        <!-- image thumbnails -->
        <div class="container-fluid" id="receipt-thumbnails" style="display: none">
            <div class="mb-2"><small class="default-font-color">Please note to upload your receipts in sequence</small></div>
            <div class="row pb-2">
                @for($i=0; $i<3; $i++)
                    <div id="incomplete_receipt-thumbnail-{{$i}}" class="incomplete_receipt-thumbnails col-4 p-1 m-0 rounded" style="height:100px;">
{{--                        <div class="add-img cursor-pointer default-font-color-10 position-relative w-100 h-100" style="display: none">--}}
{{--                            <i class="fas fa-plus-circle fa-2x position-absolute"--}}
{{--                               style="top: 50%; left: 50%; transform: translate(-50%,-50%); width: 32px; height: 32px;"></i>--}}
{{--                        </div>--}}
                        <div class="preview-img h-100 position-relative rounded w-100 cursor-pointer"
                             style="background: #00000040 no-repeat 50% 50%;
                             background-size: contain; !important; display: none">
                            <a href="javascript:void(0)" class="text-black-50 remove-img align-items-center bg-white d-flex flex-center justify-content-center position-absolute rounded-pill text-center"
                               style="width: 25px;height: 25px; top:-5px; right:-5px;">
                                <i class="fas fa-times fa-xs"></i>
                            </a>
                        </div>

                    </div>
                @endfor
            </div>
        </div>

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

        <div class="form-group text-left form-item">
            <label for="{{$id}}-txn-amount">{{ __('label.transaction_amount') }}</label>
            <input type="text" class="form-control mt-1" id="{{$id}}-txn-amount" placeholder="$0.00"/>
        </div>

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

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

                <div id="pi" x-data="{qty: 1 }"
                     x-init=""
                     :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>{{ __('enterprise.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"
                               class="form-control bg-transparent border-0 product-qty default-font-color"
                               id="{{$id}}-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> {{ __('enterprise.btnAddMoreProducts') }}
        </button>
        </div>

        @if(config('smart_receipt.settings.has_require_outlet_name'))
            <div class="form-group text-left form-item">
                <label for="{{$id}}-outlet-name">Merchant Name</label>
                <input type="text" class="form-control mt-1" id="{{$id}}-outlet-name" placeholder="Merchant Name" required/>
            </div>
        @endif

        @if(config('smart_receipt.settings.has_require_transaction_date'))
            <div class="form-group text-left form-item">
                <label for="{{$id}}-txn-date">Transaction Date</label>
                <input type="text" class="form-control mt-1" id="{{$id}}-txn-date" name="{{$id}}-txn-date" placeholder="YYYY-MM-DD" required/>
            </div>
        @endif

        @if(config('smart_receipt.settings.has_require_payment_mode'))
            <div class="form-group text-left form-item">
                <label for="{{$id}}-payment-mode">Payment Mode</label>
                <select id="{{$id}}-payment-mode" class="form-control"  style="width: 100%; text-align:left;" required>
                    <option value="" selected disabled>Select</option>
                    @foreach(array_filter(explode(',', config('smart_receipt.settings.payment_mode_options'))) as $option)
                        <option value="{{ $option }}">{{ $option }}</option>
                    @endforeach
                </select>
            </div>
        @endif

        @component('components.main.challenge-survey', ['id' => $id])
        @endcomponent

        <button id="{{$id}}-submit" class='btn btn-primary w-100 inputfile-btn' type="receipt">{{ __('label.btn_submit') }}</button>
        <button id="{{$id}}-cancel" class="btn mx-auto d-block text-underline default-font-color">{{ __('label.btn_back') }}</button>


    </div>

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

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



@endcomponent