@section('script')
    @parent
    <script>
        $(function(){
            let init_load = true;
            const defaultCtwData = {
                threshold: 10,
                assets : {
                    0 : "/assets/images/clicktowin/pig_1.png",
                    1 : "/assets/images/clicktowin/pig_2.png",
                    5 : "/assets/images/clicktowin/pig_3.png",
                    10 : "/assets/images/clicktowin/pig_4.png",
                },
            }
            const ctw_tr_el = $('template#ctw-tr').clone(true, true).html();
            $('template#ctw-tr').remove();
            const ctw_tb_tbody = $('table#ctw-tb').find('tbody');
            const threshold_el = $('#threshold');
            const ctw_fs_class = 'input[name="frame_select"]';

            let tr_count = 2; // min 2 max 11
            const tr_const = {max:11, min:2};

            const reloadCtwTable = (n=null, click_count=null, frame_src=null)=>{
                if(n===null){
                    return;
                }
                let ntr_el = $('<tr/>').html(ctw_tr_el);
                if (click_count !== null) {
                    $(ntr_el).find(ctw_fs_class).val(click_count).trigger('change');
                }
                if(frame_src !== null){
                    $(ntr_el).find('img').attr('src', frame_src);
                }
                init_load ? ctw_tb_tbody.append(ntr_el): ctw_tb_tbody.find('tr#tr-'+n).before(ntr_el);

                tr_count = ctw_tb_tbody.find('tr').length
            }

            const formatCtwTable = ()=>{
                tr_count = ctw_tb_tbody.find('tr').length;
                ctw_tb_tbody.find('tr').each((i,tr)=>{
                    const firstOrLast = i === 0 || i ===  tr_count-1;
                    $(tr).find('td:first').text(i);
                    firstOrLast ?  $(tr).find('.btn-del').hide()  : $(tr).find('.btn-del').show();
                    $(tr).find(ctw_fs_class).attr('disabled', firstOrLast);
                    if (i === 0 || i === tr_count-1) {
                        let val = (i === 0) ? 0 : parseInt(threshold_el.val());
                        $(tr).find(ctw_fs_class).val(val).trigger('change');
                    }
                    $(tr).attr('id','tr-' + i)
                    $(tr).find('.custom-file-input').attr('id', 'ctw-img-'+i);
                    $(tr).find('.cutom-file-label').attr('for', 'ctw-img-'+i);
                });
                updateDemoPreview();
            }
            $(document).on('doneImageUpload', '.custom-file-input', ()=>{
                updateDemoPreview();
            })

            $(document).on('click','#add_ctw_tr', (e)=>{
                let allowableTrs = parseInt(threshold_el.val())+1;
                if(tr_count >= allowableTrs ){
                    makeToast('bg-danger', 'Error: Frames exceed click limit. Please increase the no. of clicks to win to continue')
                }
                else if(tr_count >= tr_const.max){
                    makeToast('bg-danger', 'Error: Maximum frame limit reached. Please remove some frames to continue')
                } else{
                    makeToast('bg-success', 'New row added')
                    reloadCtwTable(tr_count-1);
                    formatCtwTable();


                    var row = ctw_tb_tbody.find('tr#tr-'+(tr_count-2));
                    if (row.length){
                        window.scrollTo({top: row.offset().top - ( $(window).height()/2) , behavior: "smooth"} );
                    }
                    row.addClass('table-success');
                    setTimeout(()=> row.removeClass('table-success'),1000);
                }

            });
            $(document).on('click','.btn-del', (e)=>{
                const row = $(e.currentTarget).parents('tr');
                $('#data-layer-confirm-modal').find('.msg').text('Are you sure to delete this row?');
                $('#data-layer-confirm-modal').modal('show');
                $('#data-layer-confirm-delete').off('click').on('click', function () {
                    $('#data-layer-confirm-modal').modal('hide');
                    row.addClass('table-danger');
                    setTimeout(()=>{
                        row.fadeOut();
                        setTimeout(()=>{
                            row.remove();
                            formatCtwTable();
                        },500)
                    },1000);
                })
            });

            $(document).on('click', '#reset_ctw', (e)=>{
                $('#data-layer-confirm-modal').find('.msg').text('Are you sure to reset all gameplay settings?');
                $('#data-layer-confirm-modal').modal('show');
                $('#data-layer-confirm-delete').off('click').on('click', function () {
                    $('#data-layer-confirm-modal').modal('hide');

                    let row = ctw_tb_tbody.find('tr');
                    row.addClass('table-danger');
                    setTimeout(()=>{
                        row.fadeOut();
                        setTimeout(()=>{
                            loadCtwData();

                            row = ctw_tb_tbody.find('tr');
                            row.addClass('table-success');
                            setTimeout(()=> row.removeClass('table-success'),1000);
                            makeToast('bg-success', 'Gameplay settings reset');
                        },500)
                    },1000);
                })

            })

            threshold_el.on('change', function(){
                let tval =  parseInt($(this).val()) ||1;
                const min = parseInt($(this).attr('min'));
                const max = parseInt($(this).attr('max'));
                tval = tval < min ? min : tval > max ? max : tval
                $(this).val(tval);
                formatCtwTable();

                $('#tap_count').attr('max', tval).val(0).change();
            });

            window.loadCtwData = (data=defaultCtwData)=>{
                if(!data||!data?.assets){
                    return;
                }
                ctw_tb_tbody.html('');
                init_load = true;
                $('#threshold').val(data.threshold).change();
                Object.keys(data.assets).forEach((key, idx) => {
                    reloadCtwTable(parseInt(idx), parseInt(key), data.assets[key] );
                });
                formatCtwTable();
                init_load = false;
            }

            window.getCtwData = ()=>{
                let data = {};
                data.threshold = $('#threshold').val();
                data.assets = {};

                ctw_tb_tbody.find('tr').each((i,tr)=>{
                    const order = $(tr).find(ctw_fs_class).val();
                    const src = $(tr).find('img').attr('src');
                    data.assets[order] = src || '';
                });
                return data;
            }

            $(document).on('change', ctw_fs_class ,(e)=>{
                const $this = $(e.currentTarget);
                const row = $this.parents('tr');
                const thisVal = parseInt( $this.val() );
                if(!row.is(':last-child') && !row.is(':first-child')){
                    const err_msg = 'Frames must be set in sequence based on the click count';
                    const valBefore = parseInt( row.prev().find(ctw_fs_class).val() );
                    const valAfter  = parseInt( row.next().find(ctw_fs_class).val() );
                    if(thisVal<=valBefore ){
                        $this.val(valBefore+1);
                        makeToast('bg-danger', err_msg);
                    }
                    if(thisVal>=valAfter){
                        $this.val(valAfter-1);
                        makeToast('bg-danger', err_msg);
                    }
                }
            });

            const updateDemoPreview = ()=>{
                $('#demo-preview').html('');
                $.each(getCtwData().assets, function(index, value) {
                    $('<img class="click-images" id="click-img-'+index+'"/>').attr('src', value).appendTo($('#demo-preview')).css('display', 'none');
                });

                $('#tap_count').val(0).change();
            }

            $('#demo-preview').on('click',()=>{
                let newVal =  parseInt($('#tap_count').val()) +1;
                if(newVal > $('#tap_count').attr('max') ){
                    newVal = 0;
                }

                $('#tap_count').val( newVal ).change();
            })
        });
        const tapCountValChange = (val)=>{
            val = parseInt(val);
            const demo_el = $('#demo-preview');

            $('#tap_count_idx').val( val );

            if (val == $('#tap_count').attr('max')) {
                $('#demo-preview').addClass('last');
            } else {
                $('#demo-preview').removeClass('last');
            }

            const next_img = demo_el.find('img#click-img-'+val);
            if(next_img.length > 0){
                demo_el.find('img:visible').hide();
                demo_el.find('img#click-img-'+val).show();
            } else {
                demo_el.find('img').each((k,v)=>{
                    const img_idx = parseInt($(v).attr('id').replace('click-img-','') )
                    if( img_idx > val ){
                        demo_el.find('img:visible').hide();
                        $(v).prev().show();
                    }

                })
            }
        };


    </script>
@endsection

@section('style')
    @parent
    <style>
        #demo-preview{
            position: relative;
        }
        #demo-preview img{
            width:100%;
            height:100%;
            object-fit: contain;
            position: relative;
        }

        #demo-preview.last::before {
            content: "REWARD CONTENT";
            position: absolute;
            width: 60px;
            height: 60px;
            top: 35%;
            left: 50%;
            z-index: 1;
            transform: translate(-50%, -50%);
            background: #e6e6e6;
            border-radius: .25rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-weight: bold;
            font-size: .7rem;
        }
    </style>
@endsection

@component('admin.setting.components.game_probability_type_section', [
'form_config'=>'admin.settings.clicktowin',
'help'=>'main_game_clicktowin',
])
    @php $form = config('admin.settings.clicktowin')@endphp



    @component('admin.components.card', ['header'=>'Gameplay Settings', 'table'=>true ] )
        <div class="px-3 pt-3 border-bottom row">
            <div class="d-block w-100 text-right p-0" style="margin-top:-15px !important; margin-bottom:-10px !important; z-index: 2 !important;">
                <a href="javascript:void(0)" id="reset_ctw" class="btn-link text-danger small">Reset</a>
            </div>

            @php $id = 'threshold'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field', [ 'class'=> 'col-md-6 col-12 order-md-0 order-1', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" min="1" max="100" step="1"
                       class="form-control w-auto"/>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent


            @php $id = 'preview'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field', [ 'class'=> 'col-md-6 col-12 order-md-1 order-0 bg-light border mt-2 p-2 rounded text-center', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])

                <div id="demo-preview" show="0" class="d-block mx-auto text-center rounded bg-white" style="width:200px;height:150px; cursor:pointer;">
                    <img src="" class="w-100 h-100" style="object-fit: contain"/>
                </div>

                <div class="col-12">

                    <label for="tap_count" class="max-auto"></label>
                    <input type="range" class="custom-range w-100 flex-grow-1 ml-2" id="tap_count"
                           oninput="tapCountValChange(this.value)"
                           onchange="tapCountValChange(this.value)"
                           value="0" min="0" max="100" step="1">
                    <input id="tap_count_idx" placeholder="" type="text" class="form-control mx-auto text-center border-none" style="width:50px" readonly/>

                </div>
            @endcomponent

        </div>

        <div class="align-items-end d-flex justify-content-between pt-3 px-3">

            @php $id = 'click_frames'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field', [ 'class'=> 'mb-0 col-12 flex-grow-1 flex-shrink-1', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
            @endcomponent
        </div>
        <table class="table text-nowrap table-hover" id="ctw-tb">
            <thead>
            <tr>
                <th style="width: 10px">#</th>
                <th style="min-width:50px !important;">Click count<small class="text-muted d-block">Show frame on which click</small></th>
                <th style="width: 200px !important;">Frame Image<small class="text-muted d-block">1200x800px recommended</small></th>
                <th style="" class="text-right">
                    <a href="javascript:void(0)" id="add_ctw_tr" class="btn btn-xs btn-info flex-grow-0 flex-shrink-0"><i class="fas fa-plus"></i> New Frame</a>
                </th>
            </tr>
            </thead>
            <tbody>
{{--            @foreach(range(1,3) as $i)--}}
                <template id="ctw-tr">
                    <td></td>
                    <td>

                        @php $id = 'frame_select';  @endphp
                        @component('admin.components.form_field_100', ['required'=>$form[$id]['req'], 'description'=>$form[$id]['descr']])
                            <input name="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" min="0" max="10" step="1"
                                   class="form-control w-auto" disabled="true" style="width:50px !important"/>
                        @endcomponent
                    </td>
                    <td>
                        @php $id = 'img'; @endphp
                        @component('admin.components.form_field', ['class'=>'col-md-12', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'] ])

                            <div class="file-viewer"><img src="" alt="preview"/></div>
                            <div class="input-group" style="width:200px">
                                <input name="{{$id}}" type="file" class="custom-file-input" accept="image/*">
                                <label class="custom-file-label mx-0">Choose File</label>
                            </div>
                        @endcomponent

                    </td>
                    <td class="text-right">
                        <a href="javascript:void(0)" class="btn-del btn btn-sm btn-outline-danger" style="display:none">Delete</a>
                    </td>
                </template>
{{--            @endforeach--}}

            </tbody>
        </table>

    @endcomponent

@endcomponent



<div id="data-layer-confirm-modal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Warning</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="msg text-center"></p>
            </div>
            <div class="modal-footer justify-content-between">
                <a class="btn btn-secondary" data-dismiss="modal">Close</a>
                <a id="data-layer-confirm-delete" class="btn btn-danger">Confirm</a>
            </div>
        </div>
    </div>
</div>