@extends('layouts.admin')


@section('style')
    @parent
    <link rel="stylesheet" href="{{ mix('css/admin-setting-style.css') }}">
    <link rel="stylesheet" href="{{ mix('css/admin-maint-style.css') }}">
@endSection

@section('script')

    @parent
    <script src="{{ mix('js/admin/admin-maint.js') }}"></script>
    <script src="{{ asset('assets/bower/ckeditor/ckeditor.js') }}"></script>
    <script>

        @if($DISABLE_ADMIN_GAMIFICATION_SAVING)
            setInterval(function(){
                if ($(".page-submit-btn").is(":visible")){
                    setTimeout(()=>{

                        $('.page-submit-btn').addClass('disabled');
                        $('.page-submit-btn').attr('disabled', 'disabled');
                        $('.page-submit-btn').data("title","Gamification has customised settings, please raise a request to edit.");
                        $('.page-submit-btn').tooltip({ track: true})
                    },100)
                    clearInterval(ajaxTimeout);
                    ajaxTimeout = false;
                }
            }, 100)
        @endif

        // poc wizard look
        if(window.location.pathname.split('/').includes('setup')){
            $('.main-sidebar').hide();
            $('body').removeClass('sidebar-mini')
            $('[data-widget="pushmenu"]').PushMenu('collapse').hide();
            $('.content-header .col').addClass('text-center mt-3').find('.small').hide();
            const newheader = $('.content-header h5').html().replace(/Settings/g, 'POC Setup Wizard')
            $('.content-header h5').html(newheader);
        }

        var daterange_config = {
            opens: 'left',
            startDate: "{{ $from = date('Y-m-d', strtotime('+1 day')) }}"{{-- "2021-01-01" --}},
            endDate: "{{  date('Y-m-d', strtotime($from . ' +3 months')) }}"{{-- "2023-01-01" --}},
            {{-- minDate: "{{ $from }}", --}}
            locale: {
                format: 'YYYY-MM-DD'
            }
        };
        $('.input-group:not(.input-daterange) .drp').daterangepicker(daterange_config);
        $('.input-group.input-daterange').each(function () {
            var num = 0;
            $(this).find('.drp').each(function () {
                ++num;
                var config = {...daterange_config};
                config.singleDatePicker = true;
                if (num % 2 === 0) {
                    config.startDate = config.endDate;
                    {{-- config.minDate = moment().format(config.locale.format); --}}
                } else {
                    config.endDate = config.startDate;
                }
                $(this).daterangepicker(config);
                $(this).on('change', function (e) {
                    var $target = $(e.currentTarget);
                    var $dates = $target.parents('.input-group.input-daterange:first').find('.drp');
                    var curr = moment($target.val());

                    if ($target.get(0) === $dates.get(0)) {
                        {{-- date from --}}
                        curr.startOf('day') > moment($($dates.get(1)).val()).startOf('day') && $($dates.get(1)).val($target.val());
                    } else {
                        curr.endOf('day') < moment($($dates.get(0)).val()).endOf('day') && $($dates.get(0)).val($target.val());
                    }
                });
            });
        });

        $('.my-colorpicker2').colorpicker();
        $(document).on('colorpickerChange', '.my-colorpicker2', function(event) {
            if (event.color) {
                $(this).parent('div').find('.fa-square').css('color', event.color.toString());
            }
        }).change();

        function doImageUploader(element, doneFunction){
            if(! $(element)){
                return
            }
            $(document).on('change',element, function(e) {
                btn = $(this);
                btn.addClass('disabled');
                let fileinput = $(e.currentTarget);
                let file =fileinput.get(0).files[0];
                if(!file){
                    fileinput =btn.parents('.form-group').find('input');
                    file = fileinput.get(0).files[0];
                }

                if (!file) {
                    return;
                }
                let formData = new FormData();
                if ( fileinput.attr('name') !=='site_icon' ){
                    formData.append('image',file);
                } else {
                    formData.append('icon',file);
                }

                $.ajax({
                    url: '{{ route('admin.settings.ajax_post_upload_image') }}',
                    method: "POST",
                    mimeType: "multipart/form-data",
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',

                }).done(function(response){
                    if(!response.errors || response.valid){
                        makeToast('bg-success', 'Image uploaded successfully');
                        doneFunction(response);
                        $(btn).trigger('doneImageUpload', response)
                    }else{
                        $.each(response.errors, function(name, msg){
                            makeToast('bg-danger', msg.toString());
                        })
                    }
                }).fail(function(){
                    makeToast('bg-danger', 'Image failed to upload')
                }).always(function(){
                    btn.removeClass('disabled');
                });
            });
        }



        $(function(){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            const config = @json( config('admin.settings.'.$component_name));
            const countryRequiredOTP = @json(explode(',', config('sys.COUNTRY_REQUIRED_OTP')));

            // if(!!$('.upload-image-btn')){
                doImageUploader('.custom-file-input', function(response){
                    parentEl = btn.parents('.form-group')
                    if(response['16x16']){
                        parentEl.find('input').data('value', response);
                        $.each(response, function(id, image){
                            let size =  id.split('x')[0];
                            if( !!$(`img[width=${size}][height=${size}]`) && image){
                                $(`img[width=${size}][height=${size}]`).attr('src',image.toString()).attr('alt',image);
                            }
                        });
                    } else {
                        parentEl.find('input').data('value', response['original']).trigger('keypress');
                        parentEl.find('img').attr('src', response['original']);
                    }
                    setBindClearImage( parentEl.find('input') , response);
                });
            // }

            window.setBindClearImage = ($el, value)=>{
                if(!value){
                    return;
                }
                const clearImageHtml = ` <div class="input-group-append clear-image-item" data-toggle="tooltip" data-placement="top" title="Remove Image">
                    <button type="button" class="btn btn-clear input-group-text">
                        <i class="fas fa-times px-1"></i>
                    </button>
                </div>`;
                const $clearImage = $(clearImageHtml);
                const parentEl = $el.parents('.input-group')
                parentEl.find('.clear-image-item').remove();
                parentEl.append($clearImage);
                $clearImage.tooltip();
                $clearImage.on('click', (e)=>{
                    setButtonToLoading(e.currentTarget);
                    parentEl.find('input').data('value',null);
                    parentEl.parents('.form-group').find('img').attr('src', '').attr('alt',' ');
                    resetLoadingButton();
                    $clearImage.tooltip('dispose');
                    $clearImage.remove();
                });
            }

            function setBindAltPreviewImg(el, name, value){

                const changeVal = function(name2, val){
                    $img_preview_alt = $(`.${name2}-p`);
                    let color = 'transparent';

                    let solid = $(`[name=${name2}]`).parents('.image-gradient-container-type').find('.colorpicker-element input').val();
                    color = solid ?? color;
                    // if ($img_preview_alt.attr('style')){
                    //     let new_color = color_regex.exec( $img_preview_alt.attr('style') );
                    //     if ( new_color && !validateGradient(new_color) && new_color.length> 0   ){
                    //         color = new_color[0];
                    //     }
                    // }
                    // $img_preview_alt.removeAttr('style');
                    $img_preview_alt.removeAttr('style');
                    $img_preview_alt.css("background", color +" url(" + val + ") no-repeat 50% 50%").css( 'background-size',name2=='masthead_image' ? 'container':'cover');

                }

                changeVal(name, value);
                $('[name='+name+']').on('keyup keypress change paste',function(e){
                    const name2 = $(e.currentTarget).attr('name');
                    const el = $('[name='+name2+']:visible');
                    changeVal( name2, el.data('value'));
                })
            }

            function setBindAltPreviewColor(el, name, value){
                const changeVal = function(e,name){

                    // const name = $(e.currentTarget).attr('name');
                    const el = $('[name='+name+']:visible');
                    const val = el.val()
                    $preview = $(`.${name}-p`);
                    if( !!$preview && !!el && !!val){
                        if(name.indexOf("background") > -1) {
                            if(!!validateGradient(val)){
                                $preview.css('background', val);
                            } else {
                                $preview.css('background-color', val);
                            }
                            changeGradient(el);

                        } else if( name.indexOf('font') > -1 ||  name.indexOf('text') > -1){
                            $preview.css('color', val);
                        }
                    }
                }

                changeVal(null,name);
                $('[name='+name+']').on('keyup keypress blur change paste', (e)=> changeVal(this,name));
            }



            function applyFormValues(name,value){
                try{
                    const $form = ()=>{ return $('[name='+name+']') };
                    if( !$form()[0] || !config[name]){
                        return;
                    }
                    switch(config[name]['type']){
                        case 'file[image]':
                            $form().data('value', value )

                            if(name ==='site_icon'){
                                $.each(value, function(id, image){
                                    let size =  id.split('x')[0];
                                    if( !!$(`img[width=${size}][height=${size}]`) && image){
                                        $(`img[width=${size}][height=${size}]`).attr('src',image.toString()).attr('alt',image);
                                        setBindClearImage($form() , image);
                                    }
                                });
                            }
                            // normal image case
                            else {
                                $img_preview = $form().parents('.form-group').find('img');
                                !!$img_preview ? $img_preview.attr('src',value) :'';
                                $form().parents('.form-group').find('img').attr('src', value );
                                setBindAltPreviewImg( $form() , name , value);
                                setBindClearImage($form() , value);
                            }
                            break;
                        case 'radio':
                            $(`[name=${name}][value=${value}]`).prop('checked',true);
                            break;
                        case 'color':
                            let newVal = validateGradient(value)
                            showColorOrGradient(value,name)
                            if(newVal){
                                $form().val(value).change()
                            } else {
                                $form().parents('.input-group').find('.fas').css('color', value);
                                $form().val(value)
                            }
                            setBindAltPreviewColor( $form() , name , value);
                            break;

                        case 'checkbox':
                            $(`[name=${name}]`).prop('checked', JSON.parse(value) ?? false );
                            break;
                        case 'textarea':
                        case 'int':
                        case 'text':
                        case 'select':
                        default:
                            var $elem = $form();
                            var picker = $elem.data('daterangepicker');
                            if (picker) {
                                var drange = (value || '').split(' - ');
                                var dfrom = moment(drange[0]).startOf('day');
                                var dto = moment(drange[1]).endOf('day');
                                var validness = {from: dfrom.isValid(), to: dto.isValid()};
                                var picker_end = picker.singleDatePicker ? $elem.siblings('.drp:first').data('daterangepicker') : null;
                                {{-- apply min date to date picker --}}
                                {{--
                                if ($elem.data('_init') !== 0) {
                                    $elem.data('_init', 0);

                                    var today = moment();
                                    validness.from && dfrom < today && (picker.minDate = dfrom);

                                    validness.to && picker_end && dto < today && (picker_end.minDate = dto);
                                    validness.from && validness.to && $elem.data('default_val', [dfrom, dto]);
                                }
                                --}}

                                {{-- set value --}}
                                if (picker.singleDatePicker) {
                                    if (validness.from) {
                                        picker.setStartDate(drange[0]);
                                        picker.setEndDate(drange[0]);
                                    } else {
                                        $elem.val('');
                                    }
                                    if (validness.to) {
                                        picker_end.setStartDate(drange[1]);
                                        picker_end.setEndDate(drange[1]);
                                    } else {
                                        $elem.siblings('.drp:first').val('');
                                    }
                                } else {
                                    if (!validness.from && !validness.to) {
                                        $elem.val('');
                                    } else {
                                        if (validness.from) {
                                            picker.setStartDate(drange[0]);
                                        }
                                        if (validness.to) {
                                            picker.setEndDate(drange[1]);
                                        }
                                    }
                                }
                            } else {
                                if(!$elem.hasClass('txt-editor')){
                                    $elem.val(value).change();
                                } else {
                                    if(!$elem.hasClass('d-none') && value){
                                        $elem.val(value).change();
                                    } else {
                                        $elem.val(value);
                                    }
                                }
                            }
                            break;
                    }

                    return $form();
                } catch(e){
                    console.log('❌',name,{e})
                }
            }

            function updateAccSwitcherDropdown(acc_info){
                if (typeof acc_info !== 'object') {
                    return;
                }
                var $dropdown = $('.navbar-nav .nav-item.dropdown:first');
                $dropdown.find('.nav-link.dropdown-toggle .dropdown-toggle-name').text(acc_info.name);
                $dropdown.find('.dropdown-menu .dropdown-item.change_business_acc.active:first').each(function () {
                    $ditem = $(this);
                    $ditem.find('img.account-switcher-logo').attr('src', acc_info.icon).attr('alt', acc_info.company_name);
                    $ditem.find('.account-switcher-name').text(acc_info.name);
                });
            }

            function saveVoucherLocal(slot, voucherSeries) {
                localStorage.setItem(`voucherSeries_${slot}`, JSON.stringify(voucherSeries));
            }

            function loadVoucherLocal(slot) {
                const voucherSeries = localStorage.getItem(`voucherSeries_${slot}`);
                return voucherSeries ? JSON.parse(voucherSeries) : [];
            }

            function updateVoucherLocal(slot) {
                const $voucherSelect = $(`[name="${slot}_voucher_series[]"]`);
                if ($voucherSelect.length > 0) {
                    localStorage.removeItem(`voucherSeries_${slot}`);

                    const voucherSeries = $voucherSelect.val().map(id => {
                        const text = $voucherSelect.find(`option[value="${id}"]`).text();
                        const [series_id, title] = text.split(': ').map(item => item.trim());
                        return { series_id: series_id, title: title };
                    });
                    saveVoucherLocal(slot, voucherSeries);
                }
            }

            window.populatePage = function (response){
                if (response.dob_option_select) {
                    $('#dob-option-select').val(response.dob_option_select);
                }
                if (countryRequiredOTP.includes(response.country)) {
                    // all login method disabled
                    $('#otp_sms_active').prop('disabled', true);
                    $('#login_url_sms_active, #otp_whatsapp_active').prop('checked', false).prop('disabled', true);
                } else if (response.otp_whatsapp_active_checked) {
                    // if detected whatsapp channel, others are disabled
                    $('#otp_whatsapp_active').prop('checked', true);
                    $('#otp_sms_active, #login_url_sms_active').prop('checked', false).prop('disabled', true);
                } else {
                    $('#otp_sms_active, #login_url_sms_active').prop('disabled', false);
                    if ($('#otp_sms_active').is(':checked')) {
                        $('#login_url_sms_active').prop('disabled', true);
                    } else if ($('#login_url_sms_active').is(':checked')) {
                        $('#otp_sms_active').prop('disabled', true);
                    }
                }
                if (response.main_game && response.main_game.settings) {
                    // enable multiple selection field to always be populated
                    function initializeVoucher() {
                        $('select[data-ajax-url]').select2({
                            placeholder: function() {
                                return $(this).attr('placeholder');
                            },
                            multiple: true,
                            ajax: {
                                url: function() {
                                    return $(this).data('ajax-url');
                                },
                                dataType: 'json',
                                delay: 250,
                                processResults: function (data) {
                                    return {
                                        results: data.results.map(item => ({
                                            id: item.id,
                                            text: item.text
                                        }))
                                    };
                                },
                            }
                        });
                    }
                    Object.keys(response.main_game.settings).forEach(slot => {
                        const setting = response.main_game.settings[slot];
                        let voucherSeries = setting.voucher_series || [];
                        const $voucherSelect = $(`[name="${slot}_voucher_series[]"]`);
                        $voucherSelect.empty().data('slot', slot);

                        if (!setting.voucher_series_checked) {
                            voucherSeries = loadVoucherLocal(slot);
                        } else {
                            saveVoucherLocal(slot, voucherSeries);
                        }

                        voucherSeries.forEach(series => {
                            const options = `${series.series_id}: ${series.title}`;
                            const optionSelected = new Option(options, series.series_id, false, true);
                            $voucherSelect.append(optionSelected).trigger('change');
                        });
                        $(`#points_checkbox_${slot}`).prop('checked', setting.points_checked === 'true');
                        $(`#points_checkbox_hidden_${slot}`).val(setting.points_checked);

                        $(`#vouchers_checkbox_${slot}`).prop('checked', setting.voucher_series_checked);
                        $(`#vouchers_checkbox_hidden_${slot}`).val(setting.voucher_series_checked);
                    });
                    initializeVoucher();
                }
                @if($component_name=='gamification')
                $('#TBL_CHALLENGE_OUTLET').trigger('onRemoteRefresh');
                var opts = [];
                $.each(data_get(response, 'serieses'), (k, v) => opts.push(
                    $('<div>').html(
                        $('<option>').val(k).text(v)
                    ).html()
                ));
                opts.length && (delete response.serieses);
                opts = opts.join('');
                $("select[data-type='voucher']").empty().each(function () {
                    $(this).html(opts).trigger('change');
                });

                $.each(response, function(module, settings){
                    try{
                        settings = JSON.parse(settings);
                    } catch(e){

                    }
                    if( module.indexOf('_shortcut') > -1 ){
                        applyFormValues(module,settings);
                    }
                    if(settings && typeof(settings) === 'object'){
                        $.each(['name','short_name','description'] , function(k,v){
                            const $input = $(`[name=${module}_${v}]`);
                            if (settings[v] && !!$input){
                                $input.val(settings[v]);
                            }
                        })
                        const $img_landing_path = $(`[name=${module}_img_landing_path]`);
                        const $ilp_data = settings['img_landing_path'];
                        if($ilp_data && $img_landing_path ){
                            $img_landing_path.data('value',$ilp_data)
                                .parents('.form-group').find('img').attr('src',$ilp_data);
                        }
                        {{--
                        var rewards = settings['reward_details'];
                        if (rewards){
                            $(`[name=${module}_qty]`).val( rewards['qty']);
                            $(`[name=${module}_type][value=${ rewards['type']}]`).prop('checked',true);
                            $(`[name=${module}_mechanism][value=${rewards.mechanism}]`).prop('checked', true).trigger('change');
                        }
                        --}}

                        window.setGamificationReward(module, settings, 'reward_details.rewards', 'rewards');
                        const $dc_check_input = $(`[name=${module}][type=checkbox]`);
                        if( !!$dc_check_input ){
                            $dc_check_input.prop('checked',Boolean(parseInt(settings['is_active']))).change();
                        }

                        var setting_details = data_get(settings, 'setting_details') ||
                            data_get(settings, 'default_outlet.setting_details') ||
                            [];
                        switch(module){
                            case 'main_game':
                                break;
                            case 'daily_checkin':
                                $(`[name=${module}_auto]`).prop('checked',Boolean(parseInt(settings['auto'])));
                                {{--
                                $(`[name=${module}_type][value=${ settings['type']}]`).prop('checked',true);
                                $(`[name=${module}_qty]`).val(settings['qty'])
                                --}}
                                break;
                            case 'offline_eng':
                                $(`[name=${module}_shortcut]`).prop('checked', setting_details['shortcut']==='1' ) ;
                                $(`[name=${module}_qr_code]`).prop('checked', Boolean(parseInt(setting_details['qr_code'] )));
                                $(`[name=${module}_6_digit_pin]`).prop('checked',Boolean(parseInt( setting_details['6_digit_pin'])) );
                                $(`[name=${module}_daily_limit]`).val( setting_details['daily_limit']);
                                $(`[name=${module}_store_types_auto_include]`)
                                    .prop('checked', setting_details['store_types_auto_include'] == 1);
                                break;
                            case 'social_follow':
                            case 'app_install':
                                $(`[name=${module}_shortcut]`).prop('checked', setting_details['shortcut']==='1' ) ;
                                $(`[name=${module}_lifetime_limit]`).val( setting_details['lifetime_limit']);
                                $(`[name=${module}_auto_approve]`).prop('checked',Boolean(parseInt(setting_details['auto_approve'])));


                                $.each(setting_details['url']  , function(k, v){
                                    $('[name=' + module +'_'+ k +']').val(v);
                                });

                                $.each( setting_details['examples'] , function(k, v){
                                    $('[name=' + [module,k,'eg_name'].join('_')+ ']').val(v['name']);
                                    $('[name=' + [module,k,'eg_img'].join('_')+ ']').data('value',v['img']).parents('.form-group').find('img').attr('src',v['img']);
                                });
                                break;
                            case 'upload_receipt':
                            case 'take_a_picture':
                                $(`[name=${module}_shortcut]`).prop('checked', setting_details['shortcut']==='1' ) ;
                                $(`[name=${module}_daily_limit]`).val( setting_details['daily_limit']);
                                $(`[name=${module}_auto_approve]`).prop('checked', Boolean(parseInt(setting_details['auto_approve'])));
                                $(`[name=${module}_reward_on_submit]`).prop('checked', Boolean(parseInt(setting_details['reward_on_submit'])));

                                $.each( setting_details['examples'] , function(k, v){
                                    $('[name=' + [module,k,'eg_name'].join('_')+ ']').val(v['name']);
                                    $('[name=' + [module,k,'eg_img'].join('_')+ ']').data('value',v['img']).parents('.form-group').find('img').attr('src',v['img']);
                                });

                                // here is for populating and display of stacking/tiering fields
                                if (module === 'upload_receipt') {
                                    const rewardDetails = settings.reward_details || {};
                                    if (rewardDetails.multiplier?.every_amount !== undefined) {
                                        // if multiplier_every_amount data exists -> stacking_yes will be checked
                                        $('#stacking_yes').prop('checked', true).trigger('change');
                                        $('#limit_per_user_per_day').val(rewardDetails.limit_per_user_per_day);
                                        $('#prerequisite_transaction_amount').val(rewardDetails.prerequisite.transaction_amount);
                                        $('#prerequisite_min_receipts').val(rewardDetails.prerequisite.min_receipts);
                                        $('#prerequisite_is_same_day').val(rewardDetails.prerequisite.is_same_day);
                                        $('#prerequisite_max_top_receipts').val(rewardDetails.prerequisite.max_top_receipts);
                                        $('#multiplier_amount_source').val(rewardDetails.multiplier.amount_source);
                                        $('#multiplier_every_amount').val(rewardDetails.multiplier.every_amount);

                                        $('#stacking_fields').show(); // force the fields for stacking to show
                                    } else if (rewardDetails.multiplier?.tiers) {
                                        // tiers data exist -> tiering_yes will be checked
                                        $('#tiering_yes').prop('checked', true);
                                        $('#prerequisite_transaction_amount_tier').val(rewardDetails.prerequisite?.transaction_amount);
                                        $('#multiplier_amount_source_tier').val(rewardDetails.multiplier?.amount_source ?? '');

                                        const tiers = rewardDetails.multiplier.tiers || [];
                                        const tierTableBody = $('#tiering_table_body');
                                        tierTableBody.empty();
                                        tiers.forEach(tier => {
                                            const row = `
                                                    <tr>
                                                        <td><input type="number" name="tiers[min][]" class="form-control" value="${tier.min || ''}"></td>
                                                        <td><input type="number" name="tiers[max][]" class="form-control" value="${tier.max || ''}"></td>
                                                        <td><input type="number" name="tiers[value][]" class="form-control" value="${tier.value || ''}"></td>
                                                        <td><button type="button" class="btn btn-sm btn-danger remove-tier">-</button></td>
                                                    </tr>
                                                `;
                                            tierTableBody.append(row);
                                        });

                                        $('#tiering_fields').show();
                                    } else {
                                        // no stacking/tiering data -> set "No Stacking/Tiering" as default
                                        $('#stacking_tiering_none').prop('checked', true).trigger('change');
                                        $('#stacking_fields').hide();
                                        $('#tiering_fields').hide();
                                    }
                                }
                                break;
                            case 'referrer_token':
                            case 'referee_token':
                                break;
                            case 'chance':
                                $(`[name="${module}_expiration"][value="${settings.expiration}"]`).prop('checked',true).trigger('change');
                                break;
                        }

                        $(`[name=${module}_store_types]`).val(settings.store_types || []).trigger('change', {
                            ajax_update: 1,
                        });

                        var question = settings.question;
                        if (typeof question === 'object') {
                            $(`[name="${module}_question"]`).val(question.label);
                            $(`[name="${module}_question_active"]`).prop('checked', question.active);
                            $(`[name="${module}_question_required"]`).prop('checked', question.required);
                        }

                        if (setting_details['messages']) {
                            $.each({
                                success_title: 'success.title',
                                success_subtitle: 'success.subtitle',
                                pending_title: 'error.title',
                                pending_subtitle: 'error.subtitle',
                            }, (k, v) => {
                                $(`[name="${module}_challenge_approve_${k}"]`).val(
                                    data_get(setting_details['messages'], v)
                                );
                            });
                        }

                        if (typeof settings.account_switcher === 'object') {
                            updateAccSwitcherDropdown(settings.account_switcher);
                        }
                    } else {
                        applyFormValues(module,settings);
                    }
                })
                @elseif($component_name=='game_spinandwin' || $component_name=='game_clicktowin' || $component_name=='game_slotmachine')

                let $elAddDom = $('#ROW_ADD_PRIZE_ITEM_DOM');
                const mainGameTitle = {
                    'spinandwin' : 'Spin and Win',
                    'scratchcard' : 'Scratchcard',
                    'clicktowin' : 'Click to Win',
                    'slotmachine' : 'Match and Win',
                }
                const mainGameType = response['main_game_type'] ?? '';
                mainGameTitle[mainGameType] && $('.main_game_type').text( mainGameTitle[mainGameType] );

                if(response['main_game_type']==='spinandwin'){
                    $elAddDom.remove();
                    $('template#ROW_PRIZE_ITEM').remove();
                } else {
                    $elAddDom.removeClass('d-none');
                    $('.pie').parents('td').find('img').removeClass('h-50 w-50').addClass('w-100 h-100').attr('style','object-fit: contain')
                    $('.pie').remove();
                }
                const settings = response['main_game'];
                if(mainGameType === 'slotmachine') {
                    window.renderSlotPreview(settings['setting_details']);
                }
                $.each(settings['setting_details'], function (title, titleVal) {
                    var $comp = $(`[name="${title}"]`).val(titleVal);
                    $comp.hasClass('select2') && $comp.trigger('change');

                    if(mainGameType === 'clicktowin') {
                        if (title === 'game_data') {
                            window.loadCtwData(titleVal);
                        }
                    }
                    if(mainGameType === 'slotmachine'){
                        window.loadSlotMachineData(title,titleVal);
                    }
                    if(title==='prize_shift_mechanism' && titleVal==='shift'){
                        $(`[name="${title}"]`).prop('checked',true);
                    }
                });
                $.each(settings['settings'], function (slot, slotVal){
                    let $row = $(`tr[data-slug="${slot}"]`);

                    {{-- create dynamic row --}}
                    if (!$row.length) {
                        $('tr#ROW_ADD_PRIZE_ITEM_DOM a.btn').trigger('click', {
                            slug: slot,
                        });
                        $row = $(`tr[data-slug="${slot}"]`);
                    }

                    $.each(slotVal, function (formName, formVal) {
                        switch(formName) {
                            case 'details':
                                if(!formVal){
                                    return;
                                }
                                $row.find(`.${slot}_type [value="${formVal['type']}"]`).prop('checked',true).trigger('change');
                                $row.find(`[name="${slot}_msg"]`).val(formVal['message']).data('_origValue', formVal['message']).trigger('change');
                                $row.find(`[name="${slot}_msg_color"]`).val(formVal['font_color']).data('_origValue', formVal['font_color']).trigger('change');
                                break;
                            case'img':
                                $row.find(`[name="${slot}_${formName}"]`).data('value', formVal).parents('tr').find('img').attr('src',formVal).show()
                                break;
                            case 'color':
                                $row.find(`[name="${slot}_${formName}"]`).parents('tr').find('svg').css('fill', formVal);
                                $row.find(`[name="${slot}_${formName}"]`).val(formVal).trigger('change');
                                break;
                            case 'multipliers':
                                $row.data('multipliers', formVal);
                                break;
                            case 'item_orders':
                                $row.find(`[name="item_orders_${slot}"]`).data('value',formVal).change();
                                break;
                            case 'is_slot_randomizable':
                                $row.find(`[name="is_slot_randomizable_${slot}"]`).prop('checked',formVal);
                                break;
                            default:
                                $row.find(`[name="${slot}_${formName}"]`).val(formVal ?? 0).trigger('change');
                                break;
                        }
                    });
                });

                @elseif($component_name=='game_riddle')
                $.each(response.main_game.setting_details, function(name,value){
                    if(name.indexOf('randomize') > -1)  {
                        $(`[name=${name}]`).prop('checked', value==='true').change();
                    } else {
                        $(`[name=${name}]`).val(value)
                    }
                })
                loadTable(response.main_game.settings);

                @elseif($component_name=='marketplace')
                    {{--                    $.each(@json($voucher_series_selected),  (k, v) => addNewDataLayer(v.key, v.value))--}}

                    if (response.voucher_series) {
                        window.tags_data = response.voucher_series;
                    }
                    if (response.voucher_series_selected) {
                        updateRewardLayers(response.voucher_series_selected);
                    }
                @else
                $.each(response, function(name,value){
                    if (name === 'account_switcher') {
                        updateAccSwitcherDropdown(value);
                        return;
                    }
                    var $elem = applyFormValues(name,value);

                    {{-- agency account do not have campaign period editable restriction --}}
                    {{--
                    @if(!$account || !$account->is_agency)
                        var drange = name === 'campaign_duration' || name === 'campaign_redeem_duration' ? $elem.data('default_val') : null;
                        if (drange) {
                            var today = moment();
                            today >= drange[0] && today <= drange[1] && $elem.attr('disabled', true).attr('title', 'Start date not allowed to change when campaign in force');
                            $elem.removeData('default_val');
                        }
                    @endif
                    --}}
                });
                @endif
            }

            @if($ajax_get)
            $.ajax({
                "url": '{{ route($ajax_get) }}',
                "method": "GET",
            }).done(function (response) {
                populatePage(response);
            });
            @endif

            function getFormValues (name,value) {
                let formValue;
                try{
                    const divname = `[name=${name}]:visible`;
                    if(!divname){
                        return;
                    }
                    switch (value['type']) {
                        case 'file[image]':
                            formValue = $(divname).data('value');
                            break;
                        case 'radio':
                            formValue = $(divname + ':checked').val();
                            break;
                        case 'checkbox':
                            formValue = $(divname).prop('checked');
                            break;
                        case 'datetimerange':
                        case 'daterange':
                            var $elem = $(divname);
                            formValue = $elem.val();

                            var picker = $elem.data('daterangepicker');
                            if (picker && picker.singleDatePicker) {
                                formValue += ' - ' + $elem.siblings('.drp:first').val();
                            }
                            break;
                        case 'textarea':
                        case 'text':
                        case 'int':
                        case 'color':
                        case 'datetime':
                        case 'date':
                        default:
                            formValue = $(divname).val();
                            if(CKEDITOR.instances[name]){
                                formValue = CKEDITOR.instances[name].getData();
                            }
                            break;
                    }

                } catch(e){
                    console.log('❌',name,{e})
                }
                return formValue;
            }

            window.getThemeData = function(theme_name){
                const THEMES_CONFIG = {
                    'campaign_theme_gamification': @json( config('admin.settings.campaign_theme_gamification')),
                }
                let themeData = {};
                if(THEMES_CONFIG[theme_name]){
                    $.each(THEMES_CONFIG[theme_name], function(name, settings){
                        themeData[name] = getFormValues(name, settings);
                    });
                }
                return themeData;
            }

            async function postAjax(cta){
                cta.addClass('disabled').attr('disabled', true);
                let formData = {};

                @if($component_name=='gamification')
                    const SLUGS = [
                        'main_game', 'daily_checkin', 'offline_eng', 'social_follow',
                        'app_install', 'upload_receipt', 'take_a_picture','referrer_token',
                        'referee_token',
                    ];

                    formData['main_game_type']= $('[name=main_game_type]:checked').val();
                    formData['require_merchants'] = $('#require_merchants').prop('checked') ? true : false;
                    formData['require_transaction_amount'] = $('#require_transaction_amount').prop('checked') ? true : false;


                    $.each(['challenge_approve_success_title', 'challenge_approve_success_subtitle',
                            'challenge_approve_pending_title', 'challenge_approve_pending_subtitle',
                            'game_footer_message',
                            'referral_share_msg','referral_instructions',
                            'chance_expiration',
                    ], function(mid,module){
                        var $el = $('[name=' +module+']');
                        var type = ($el.first().attr('type') || '').toLowerCase();

                        switch (type) {
                            case 'radio':
                                $el = $el.filter(':checked');
                                break;
                        }

                        formData[module]= $el.val();
                    })

                    var gRewards = window.getGamificationReward();
                    // isValid here is validation for stacking/tiering field in gamification_reward
                    let isValid = window.isPayloadValid;
                    $.each(SLUGS, function( mid ,module){
                        const getName = $('[name=' + module + '_name]').val() ?? '';
                        const getShortName = $('[name=' + module + '_short_name]').val() ?? '';
                        const getDescription = $('[name=' + module + '_description]').val() ?? '';
                        const getImage = $('[name=' + module + '_img_landing_path]').data('value');

                        const getType = $('[name=' +module+ '_type]:checked').val() ?? '';
                        const getQty = parseInt( $('[name=' +module+ '_qty]').val()??0 ) ;
                        const getDailyLimit =  parseInt($('[name=' + module + '_daily_limit]').val()??0 ) ;
                        const getLifetimeLimit =  parseInt( $('[name=' + module + '_lifetime_limit]').val()??0 ) ;
                        const getAutoApprove = +( $('[name=' + module + '_auto_approve]').prop('checked') ?? false );
                        const getRewardOnSubmit = +( $('[name=' + module + '_reward_on_submit]').prop('checked') ?? false );
                        const getHasShortcut =  +($('[name=' + module + '_shortcut]').prop('checked') ?? false );

                        // ensure no null for checked rewards in each challenge
                        const rewards = data_get(gRewards, module) ?? [];

                        $.each(rewards, function(index, reward) {
                            if (reward.checked) {
                                if (reward.type === 'voucher') {
                                    // ensure checked voucher is not null
                                    const voucherSelect = $(`select[id$="${module}_type_voucher"]`);
                                    if (voucherSelect.val().length === 0) {
                                        isValid = false;
                                        return false;
                                    }
                                } else if (!reward.qty || isNaN(reward.qty)) {
                                    isValid = false;
                                    return false;
                                }
                            }
                        });

                        if (!isValid) {
                            return false;
                        }

                        if (['referrer_token','referee_token'].indexOf(module) > -1){
                            {{-- formData[module]= parseInt( $('[name=' +module+']').val()??0 ); --}}
                            formData[module] = {
                                rewards: data_get(gRewards, module) ?? [],
                            };
                        }
                        else if (module==='daily_checkin'){
                            formData[module] = {
                                'is_active': +  $('[name=' + module + ']').prop('checked') ?? true,
                                {{--
                                'type' : getType,
                                'qty' : getQty,
                                --}}
                                rewards: data_get(gRewards, module) ?? [],
                                'auto' : + $('[name=' +module+ '_auto]').prop('checked'),
                            }
                        } else {
                            formData[module + '_shortcut'] = getHasShortcut;
                            formData[module] = {
                                'name' : getName,
                                'short_name' : getShortName,
                                'description' : getDescription,
                                'img_landing_path' : getImage,
                                'is_active': + (  $('[name=' + module + ']').prop('checked') ?? true),
                                {{-- 'reward_details' : {'type' : getType, 'qty' : getQty,}, --}}
                                reward_details: {
                                    rewards: data_get(gRewards, module) ?? {},
                                },
                            }

                            switch(module){
                                case 'main_game':
                                    var mechanism = $('[name=main_game_mechanism]:checked').val() || 'daily_limit';
                                    {{-- formData[module]['reward_details']['type'] = 'chance'; --}}
                                    formData[module]['reward_details'][mechanism] = 1;
                                    formData[module]['reward_details']['rewards'] = [{
                                        type: 'chance',
                                        qty: getQty,
                                        checked: true,
                                    }];
                                    break;
                                case 'offline_eng':
                                    formData[module]['setting_details'] = {
                                        'shortcut' : getHasShortcut,
                                        'daily_limit' : getDailyLimit,
                                        'qr_code' : + $('[name=' + module + '_qr_code]').prop('checked'),
                                        '6_digit_pin' : + $('[name=' + module + '_6_digit_pin]').prop('checked'),
                                        store_types_auto_include: + $('[name=' + module + '_store_types_auto_include]').prop('checked')
                                    };
                                    formData[module].store_types = $(`[name="${module}_store_types"]`).val();
                                    formData[module].reward_details.rewards = data_get(
                                        window.getOutletReward(module, true),
                                        'reward_details.rewards'
                                    );
                                    formData[module].outlets = window.getOutletReward(module);
                                    break;
                                case 'social_follow':
                                case 'app_install':
                                    formData[module]['setting_details'] = {
                                        'shortcut' : getHasShortcut,
                                        'lifetime_limit' : getLifetimeLimit,
                                        'auto_approve' : getAutoApprove,
                                    }
                                    const urls = {};
                                    let urlList = ['facebook','instagram','tiktok'];
                                    if(module === 'app_install'){
                                        urlList = ['play','ios','huawei'];
                                    }
                                    $.each(urlList , function(k, v){
                                        urls[v] = $('[name=' + module +'_'+ v +']').val();
                                    });
                                    formData[module]['setting_details']['url'] = urls;

                                    let examples = [];
                                    $.each([0,1,2] , function(k, v){
                                        examples.push( {
                                            'name': $('[name=' + [module,k,'eg_name'].join('_') +']').val(),
                                            'img': $('[name='  + [module,k,'eg_img'].join('_') +']').data('value'),
                                        })
                                    });
                                    formData[module]['setting_details']['examples'] = examples;

                                    break;
                                case 'upload_receipt':
                                case 'take_a_picture':
                                    formData[module]['setting_details'] = {
                                        'shortcut' : getHasShortcut,
                                        // 'name' : getName,
                                        // 'description' : getDescription,
                                        // 'image' : getImage,
                                        'daily_limit' : getDailyLimit,
                                        'auto_approve' : + getAutoApprove,
                                        'reward_on_submit' : getRewardOnSubmit,
                                    }
                                    let examples2 = [];
                                    $.each([0,1,2]  , function(k, v){
                                        examples2.push( {
                                            'name': $('[name=' + [module,k,'eg_name'].join('_') +']').val(),
                                            'img': $('[name='  + [module,k,'eg_img'].join('_') +']').data('value'),
                                        })
                                    });
                                    formData[module]['setting_details']['examples'] = examples2;

                                    break;
                                // case 'marketplace':
                                //     let voucher_series = $('[name=voucher_series[]]').val();
                                //     let voucher_series_point = $('[name=voucher_series_point[]]').val();
                                //     let exclusive_voucher = [];
                                //     let exclusive_voucher_point = [];
                                //     $.each( voucher_series , function(k, v){
                                //         exclusive_voucher.push($(v).val())
                                //     });
                                //     $.each( voucher_series_point , function(k, v){
                                //         exclusive_voucher_point.push($(v).val())
                                //     });
                                //     formData[module]['exclusive_voucher'] = exclusive_voucher;
                                //     formData[module]['exclusive_voucher_point'] = exclusive_voucher_point;
                                //
                                //     break;

                            }

                            var qt_name = `${module}_question`;
                            var $question = $(`[name="${qt_name}"]`);
                            if ($question.length) {
                                formData[module]['questions'] = {};
                                formData[module]['question'] = {
                                    label: $question.val(),
                                    active: $(`[name="${qt_name}_active"]`).prop('checked'),
                                    required: $(`[name="${qt_name}_required"]`).prop('checked'),
                                };
                            }

                            if ($(`[name="${module}_challenge_approve_success_title"]`).length) {
                                formData[module]['setting_details']['messages'] = {
                                    success: {
                                        title: $(`[name="${module}_challenge_approve_success_title"]`).val(),
                                        subtitle: $(`[name="${module}_challenge_approve_success_subtitle"]`).val(),
                                    },
                                    error: {
                                        title: $(`[name="${module}_challenge_approve_pending_title"]`).val(),
                                        subtitle: $(`[name="${module}_challenge_approve_pending_subtitle"]`).val(),
                                    },
                                };
                            }
                        }

                    });

                if (!isValid) {
                    makeToast('bg-danger', 'Page save failed. Please check all reward quantities.');
                    cta.removeClass('disabled').removeAttr('disabled');
                    return;
                }
                @elseif($component_name=='game_spinandwin' || $component_name=='game_clicktowin' || $component_name=='game_slotmachine')
                    let details ={};
                    const msgs1 = ['win_title', 'win_subtitle','lose_title','lose_subtitle'];
                    $.each(msgs1, function(k,v){
                        details[v]= $('[name='+v+']').val();
                    });
                    if($('[name="prize_shift_mechanism"]').prop('checked')){
                        details['prize_shift_mechanism'] = 'shift';
                    }
                    let slots = {};
                    let $rows = $(`tr[data-uid]`).toArray();
                    for (let i = 0; i < $rows.length; i++) {
                        let $row = $($rows[i]);
                        let slot = $row.data('uid');
                        let el_msg = $('[name=slot-'+slot+ '_msg]');
                        let el_color = $('[name=slot-'+slot+ '_msg_color]');
                        let details = {
                            'type' : $('.slot-'+slot+'_type input:checked').attr('value'),
                            'message': el_msg.val() ?? '',
                            'font_color': el_color.val() ?? '#000000',
                        }
                        let img = null;
                        let _type = details.type;
                        if (_type === 'text' && (el_msg.data('_origValue') == details.message && el_color.data('_origValue') == details.font_color)) {
                            _type = 'image';
                        }
                        switch(_type){
                            case 'image':
                                img = $('[name=slot-'+slot+ '_img]').data('value')
                                break;
                            case 'text':
                                img = await generateImage(details.message, details.font_color, true)
                                break;
                        }

                        @if($component_name=='game_slotmachine')
                            slots[$row.data('slug')] = {
                                'item_orders': $('[name=item_orders_slot-'+slot+ ']').data('value'),
                                'is_slot_randomizable': $('[name=is_slot_randomizable_slot-'+slot+ ']').prop('checked'),
                                'img' : '',
                                'color': '',
                                'points': $('[name=slot-'+slot+ '_points]').val(),
                                'status': $('[name=slot-'+slot+ '_status]').val(),
                                'chance_of_win': $('[name=slot-'+slot+ '_chance_of_win]').val(),
                                'details': '{}',
                                multipliers: $row.data('multipliers') || [],
                                'voucher_series': $('[name="slot-'+slot+ '_voucher_series[]"]').val(),
                                'points_checked': $('[name="slot-'+slot+'_points_checked"]').val(),
                                'voucher_series_checked': $('[name="slot-'+slot+'_voucher_series_checked"]').val(),
                        };
                        @else
                            slots[$row.data('slug')] = {
                                'img': img,
                                'color': $('[name=slot-'+slot+ '_color]').val(),
                                'points': $('[name=slot-'+slot+ '_points]').val(),
                                'status': $('[name=slot-'+slot+ '_status]').val(),
                                'chance_of_win': $('[name=slot-'+slot+ '_chance_of_win]').val(),
                                'details': JSON.stringify(details),
                                multipliers: $row.data('multipliers') || [],
                                'voucher_series': $('[name="slot-'+slot+ '_voucher_series[]"]').val(),
                                'points_checked': $('[name="slot-'+slot+'_points_checked"]').val(),
                                'voucher_series_checked': $('[name="slot-'+slot+'_voucher_series_checked"]').val(),
                        };
                        @endif

                    }

                    @if($component_name=='game_clicktowin')
                        details['game_data'] = window.getCtwData();
                    @elseif($component_name=='game_slotmachine')
                        if(window.validateSlotMachineData()){
                            resetLoadingButton();
                            return;
                        }
                        details = {...details, ...window.getSlotMachineData()};
                    @endif

                    formData['main_game']= {
                        'setting_details':details,
                        'settings':slots
                    }

                @elseif($component_name=='game_riddle')
                details = {
                    win_points_randomize:$('[name=win_points_randomize]').prop('checked'),
                    randomize_qns : $('[name=randomize_qns]').prop('checked'),
                }
                const msgs2 = ['win_title', 'win_subtitle'];
                $.each(msgs2, function(k,v){
                    details[v]= $('[name='+v+']').val();
                });
                const fields = ['lose_points','qns_per_day'];
                if( details.win_points_randomize ){
                    fields.push('win_points_max');
                    fields.push('win_points_min');
                } else {
                    fields.push('win_points')
                }
                $.each(fields, function(k,v){
                    details[v]= $('[name='+v+']').val();
                });


                formData['main_game']= {
                    'setting_details':details,
                }
                @elseif($component_name == 'marketplace')
                    let voucher_series = [];
                    let voucher_series_point = [];
                    let exclusive_ids = [];
                    $('[name="voucher_series[]"]').each(function (index, element) {
                        let elem = $(element);
                        voucher_series.push(elem.val()[0]);
                        exclusive_ids.push(elem.data('item_id'));
                    });
                    $('[name="voucher_series_point[]"]').each(function (index, element) {
                        voucher_series_point.push($(element).val());
                    });
                    formData['voucher_series'] = voucher_series;
                    formData['voucher_series_point'] = voucher_series_point;
                    formData['exclusive_ids'] = exclusive_ids;

                @else
                $.each(config, function(name, settings){
                    const fValue = getFormValues(name, settings);
                    formData[name] = fValue;
                });
                @endif
                $('select[name$="_voucher_series[]"]').each(function () {
                    const slot = $(this).data('slot');
                    updateVoucherLocal(slot);
                });

                if ($('#reg_dob_active').is(':checked')) {
                    formData['dob_option_select'] = $('#dob-option-select').val();
                } else {
                    formData['dob_option_select'] = 'full-dob';
                }

                @if($ajax_post)
                try{
                    $.ajax({
                        url: '{{ route($ajax_post) }}',
                        method: "POST",
                        mimeType: "multipart/form-data",
                        data: formData,
                        // processData: false,
                        // contentType: false,
                        dataType    : 'json',

                    }).done(function (response) {
                        if( !response.errors && (response.valid === true || response.valid === undefined) ) {
                            $(document).trigger('onDataChangesSaved');
                            populatePage(response);
                            makeToast('bg-success', 'Page saved successfully')
                        } else {
                            if($.isArray(response.errors)){
                                $.each(response.errors, function(name, msg){
                                    makeToast('bg-danger', msg);
                                })
                            } else {

                                makeToast('bg-danger', response.errors);
                            }
                        }
                    }).fail(function(response){
                        makeToast('bg-danger', 'Page save failed. Please try again.');
                    }).always(function(){
                        cta.removeClass('disabled').removeAttr('disabled');
                    });
                } catch(e){
                    console.log('❌',e)
                    cta.removeClass('disabled').removeAttr('disabled');
                }
                @else
                    cta.removeClass('disabled').removeAttr('disabled');
                @endif
            }

            $('.page-submit-btn').click(function(){
                postAjax($(this));
            });
        });
    </script>
@endsection

@section('content')

    <!-- Main content -->
<section class="content">
    <div class="container-fluid">

        <div class="row">
            <div class="col-sm-3 col-xl-2">

                <ul class="nav flex-sm-column nav-tabs border-0 pt-0 pt-sm-4" id="custom-tabs-four-tab" role="tablist">

                    @php
                        $admin_pages = config('admin.pages');
                        $curr_page = Route::currentRouteName();
                        $curr_psetting = $admin_pages[$curr_page];
                        $group_name = $curr_psetting['page_group'];
                        $auth_user = auth()->user();
                        $page_title = 'Page';

                    @endphp
                    @foreach($admin_pages as $page_route => $page)
                        @if(getIsShowPageInTab($page, $auth_user))
                            @if($page['page_group'] == $group_name && !strstr($page_route, 'create') && !strstr($page_route, 'admin.settings.view'))

                                <li class="nav-item">
                                    <a class="nav-link border-0 mb-2 text-xs px-sm-4 rounded-pill
                                        {{ $curr_page == $page_route ?
                                            'active bg-info shadow ' :'link-muted' }}"
                                       id="custom-tabs-four-home-tab"
                                       {{--                                       data-toggle="pill"--}}
                                       href="{{ route( $page_route ) }}"
                                       {{--                                       role="tab" aria-controls="custom-tabs-four-home"--}}
                                       aria-selected="{{ $curr_page == $page_route ? 'true' : 'false' }}">
                                        {{$page['title']}}
                                        @php if($curr_page === $page_route){ $page_title = $page['title']; }@endphp
                                    </a>
                                </li>
                            @endif
                        @endif
                    @endforeach
                </ul>
            </div>

            <div class="col-sm-9 col-xl-10">

                @if(data_get($curr_psetting, 'exclude_btn_save') !== true)
                    <div class="d-none d-sm-flex justify-content-end pb-2 position-sticky w-100 h-auto"
                         style="top: .5rem; z-index: 99; margin-top: -0.75rem">
                        <div class="btn-group shadow-sm" role="group" aria-label="Save Page">
                            <a href="{{ route('home') }}" data-toggle="tooltip" title="View Platform" target="_blank" class="btn btn-default mb-0"><i class="fas fa-eye"></i></a>
                            <button type="submit" class="page-submit-btn btn btn-info px-5 mb-0 ">{{ __('admin_setting.btnSaveChanges') }}</button>
                        </div>
                    </div>
                @endif

                <div class="tab-content" id="custom-tabs-four-tabContent">
                    <div class="tab-pane fade show active" id="custom-tabs-four-home" role="tabpanel">

                        @include('layouts.flashmessage')
                        @include('admin.setting.components.' . $component_name)

                    </div>
                </div>
        </div>
    </div>
    </div>
</section>

    @if(data_get($curr_psetting, 'exclude_btn_save') !== true)
    <div class="d-flex d-sm-none h-auto mt-auto p-2 position-sticky w-100"
         style="bottom: 0; z-index: 99">
        <div class="btn-group d-flex w-100 shadow" role="group" aria-label="Save Page">
            <a href="{{ route('home') }}" data-toggle="tooltip" title="View Platform" target="_blank" class="btn btn-default mb-0"><i class="fas fa-eye"></i></a>
            <button type="submit" class="btn btn-info mb-0 page-submit-btn w-100 ">{{ __('admin_setting.btnSaveChanges')}}</button>
        </div>
    </div>
    @endif
    <!-- /.content -->

@endsection