var IS_ENABLE_CLOUDFLARE_RECAPTCHA = false;
var ORIGINAL_IMAGE_BASE64 = '';
var OUTPUT_IMAGE_BASE64 = '';
var NO_Of_IMAGES = 0;
var NO_Of_IMAGES_C = 0;
var UNDO_REDO_VALUE = 0;
var SHOW_IMAGE_HEIGHT = '';
var SHOW_IMAGE_WIDTH = '';
var is_show_desktop_app_popup = true;
var count_image_process_for_show_desktop_app = 0
var newsletter_obj = {"is_first_time": true, "last_send_time": 0}
var newsletter_click_time = 30;
var imageObjList = [];
var maximumImageCount = 10;
var global_source_image = null;
var isImageProcessing = false;
var isRecaptchaSolved = true;
var isImageDrop = false;
var lastSlazzerAppPopupContentNumber = null;

var inactivityTimer;
var isUserActivityFirst = false;
var DEVICE_TYPE = "desktop";
var BUTTON_ACCESS_LEVEL=6400;

var info_preview = `<i class="fa fa-info-circle cls_tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="Preview Images up to 0.25 megapixel (eg: 625 x 400) are always free at slazzer.com website, 1/5 credit will be charged via Apps and API."></i>`;
var info_hd = `<i class="fa fa-info-circle cls_tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="Full Images up to 25 megapixel (eg: 6250 x 4000 ) will be charged as 1 credit."></i>`;
var info_unavailable_hd = `<i class="fa fa-info-circle cls_tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="Please upload a higher resolution image or Download the preview size image"></i>`;

var IS_SHOW_CARBG_POPUP = true;

$(window).on('load', function() {
    resetInactivityTimer();
//    showChangeLogInHeader()

    DEVICE_TYPE = getDeviceType()
    if(DEVICE_TYPE == "mobile"){
        BUTTON_ACCESS_LEVEL = 8500;
    }

    if(window.location.pathname != '/pricing'){
        $('.blackFriday').css('display', 'block');
    }

    $('.showDragAndDropBackgroundInnerDiv').css('pointer-events', 'none')
    $('.showDragAndDropBackground').css('pointer-events', 'none')

    if(window.location.pathname == LANG_CODE+'/upload'){
        show_images_on_page()
        showCreditInfo()
    }
    onloadPageTab()
    getMobileApp()
});

$(document).ready(function () {
    if(window.location.pathname == '/background-remover-app'){
        $(window).on("scroll", function () {
            let scrollTop = $(window).scrollTop();
            console.log(parseInt(scrollTop));
            if(parseInt(scrollTop) >= 400 && parseInt(scrollTop) < BUTTON_ACCESS_LEVEL){
                $('.grabTheDEal').addClass('show');
            }else{
                $('.grabTheDEal').removeClass('show');
            }
        });
    }

    $('#headerFeaturesListLoader').css('display', 'none');

    $(document).on('click', '#headerFeaturesListCloseBtn', function(e){
        closeHeaderPromotionBar()
    });

    var mobileOS = getMobileOperatingSystem()
    if(mobileOS == 'ios'){
        $('#showIOSAppIcon').css('display', 'block');
    }else if(mobileOS == 'android'){
        $('#showAndroidAppIcon').css('display', 'block');
    }else{
        $('#showAndroidAppIcon').css('display', 'block');
        $('#showIOSAppIcon').css('display', 'block');
    }

    sampleImageListWithClass()

    if(window.location.pathname == '/'){
        $(document).on("mousemove keypress click scroll touchstart", function () {
            isUserActivityFirst = true;
        });
    }


    if(window.location.pathname != '/' && window.location.pathname != LANG_CODE && window.location.pathname != LANG_CODE+'/upload' && window.location.pathname != LANG_CODE+'/background-eraser' && window.location.pathname != LANG_CODE+'/personal-use' && window.location.pathname != LANG_CODE+'/ecommerce' && window.location.pathname != LANG_CODE+'/photography' && window.location.pathname != LANG_CODE+'/news-media' && window.location.pathname != LANG_CODE+'/advertising' && window.location.pathname != LANG_CODE+'/car-dealerships' && window.location.pathname != LANG_CODE+'/developers'){
        $('.image-drag-drop').removeClass('image-drag-drop');
    }

    $('#refresh-credit-btn').on('click', function() {
        $('#refresh-credit-btn').addClass('credit-refresh-btn');
        showCreditInfo();
    });

    // Submit Newsletter
    $(document).on('click', '.acNav', function(e){
        $('#spanCollapseHeading').trigger('click');
    });

    $(document).on('click', '#slazzerMobileAppClose', function(e){
        $('.downloadMobileApp').removeClass('show');
    });

    // Submit Newsletter
    $(document).on('click', '#btnSubmitNewsletter', function(e){
        var email = $.trim($('#inputNewsletterEmail').val());
        submit_newsletter(email)
    });

    $(document).on('click', '#getMobileAppClose', function(e){
        $("#divGetMobileApp").remove();
        $.cookie('_mobile_app_popup', '0');
    });

    $(document).on('click', '#slazzerViewApp', function(e){
        var mobileOS = getMobileOperatingSystem()
        if(mobileOS == 'ios'){
            var URL = "https://apps.apple.com/in/app/slazzer-background-remover/id6499511787";
            window.open(URL, '_blank');
            $('.downloadMobileApp').removeClass('show');
        }else if(mobileOS == 'android'){
            var URL = "https://play.google.com/store/search?q=slazzer&c=apps&pli=1";
            window.open(URL, '_blank');
            $('.downloadMobileApp').removeClass('show');
        }
    });

//    $(document).on('click', '.selectLanguage', function(e){
//        redirectPage($(this).attr('lang'))
//    });

    // Select Language
    $(document).on('click', '.selectDropdown li', function(e){
        var langCode = $(this).attr('value');
        redirectPage(langCode)
    });

    $("a.dropdown-toggle").click(function(ev) {
        if($(this).attr('aria-expanded') == 'false'){
            hide_use_cases_menu(event)
        }
    });

    $(document).on('click', '#headerBtnLogin', function(e){
        $.cookie('_slzPageURL_', window.location.pathname, {expires: 1 / 24});

        window.location.href = $.trim(LANG_CODE + '/login');

//        window.location.href = '/login';
    });

    if(window.location.pathname == LANG_CODE+'/windows-mac-linux' || window.location.pathname == LANG_CODE+'/plugins-api' || window.location.pathname == LANG_CODE+'/background-remover-app' || window.location.pathname == LANG_CODE+'/tools-api'){
        var os_name = getOS();
        if(os_name == 'Windows'){
            URL = 'https://slazzer-desktop-app.s3.ap-south-1.amazonaws.com/slazzer-setup-v5.0.1.exe';
            OLD_APP_URL = 'https://slazzer-desktop-app.s3.ap-south-1.amazonaws.com/slazzer-setup-v4.0.0.exe';
        }else if(os_name == 'Linux'){
            URL = 'https://slazzer-desktop-app.s3.ap-south-1.amazonaws.com/slazzer-app_v5.0.1_amd64.deb';
            OLD_APP_URL = 'https://slazzer-desktop-app.s3.ap-south-1.amazonaws.com/slazzer-app_v4.0.0_amd64.deb';
        }else if(os_name == 'Mac'){
            URL = 'https://slazzer-desktop-app.s3.ap-south-1.amazonaws.com/slazzer-app_v5.0.1.dmg';
            OLD_APP_URL = 'https://slazzer-desktop-app.s3.ap-south-1.amazonaws.com/slazzer-app_v3.1.1.dmg';
        }else{
            URL = 'https://slazzer-desktop-app.s3.ap-south-1.amazonaws.com/slazzer-app_v5.0.1.dmg';
            OLD_APP_URL = 'https://slazzer-desktop-app.s3.ap-south-1.amazonaws.com/slazzer-app_v3.1.1.dmg';
        }

        $('#download-slazzer-app').attr('href', URL);
        $('#download-slazzer-app-2').attr('href', URL);
        $('#download-slazzer-app-old').attr('href', OLD_APP_URL);
        $('#download-slazzer-app-old-2').attr('href', OLD_APP_URL);
    };

    $(document).on('click', '#icon-download-app-close', function(e){
        $('#section-for-download-app').removeClass('active');
    });

    if(isHidePopup == "" || isHidePopup == ""){
        showPrivacyPolicy()
    }

    function showPrivacyPolicy(){
        if (typeof $.cookie('is_agree_cookie_terms') === 'undefined') {
             var cookies1 = $.trim($('#cookies1').val());
             var cookies2 = $.trim($('#cookies2').val());
             var cookies3 = $.trim($('#cookies3').val());
             var alert_msg = `<div class="alert alert-secondary cookis-alert" role="alert">
                                    `+cookies1+`.&nbsp;
                                    `+cookies2+`&nbsp;
                                        <a href="proxy.php?url=https%3A%2F%2Fslazzer.com%2F%60%2BLANG_CODE%2B%60%2Fprivacy-policy" title=""> `+cookies3+`.</a>
                                        <p><a href="javascript:void(0);" class="close close-cookie-alert" data-dismiss="alert" aria-label="close">Close</a></p>
                            </div>`;
             $('#cookie_alert').html(alert_msg);
        }
    }


    $(document).on("click", ".close-cookie-alert", function () {
        $.cookie('is_agree_cookie_terms', true);
    });

    $(document).on("click", ".cls_tooltip", function(){
        return false;
    });


    // Image Upload
    $(document).on('click', ".upload-image-file-btn", function (e) {
        history.pushState(null, null, LANG_CODE + '/upload');
        // Add New Code For Header
        //$('#header').css('display', 'none');
        //$('.header-height').css('display', 'none');
        //$('#playgroundHeaderForHome').css('display', '');
        //$('#mainHeaderFeaturesDropdownWrapper').css('display', '');
        showCreditInfo()

        $('.pageTitle').text("Free transparent background maker - slazzer.com")
        $(".main-container").hide();
        $(".upload-container").show();
        show_images_on_page()
        setTimeout(function () {
//            $("#input_user_image_upload").trigger("click");
        }, 100);
    });

    // Upload Image in Upload page
    $(document).on("click", ".user_image_upload", function (e) {
        $("#input_user_image_upload").trigger("click");
    });

    function is_file_size_exceed(file) {
        const fsize = file.size
        if (fsize > 16 * 1000000) {
            alert('Max file size 16MB allowed.');
            return true;
        }
        return false;
    }

    function load_image_from_cookie() {
        $("#main_image_container").html('');
        show_images_on_page()
    }

    $(document).on('change', '#input_user_image_upload', function (e) {
        var autogenID = createAutogeneratedID()
        initializeImageDiv(autogenID)

        if (e.target.files != null && e.target.files.length > 0) {
            var source_image = this.files[0];
            if (is_file_size_exceed(source_image)){
                removeImageDiv(autogenID)
                return;
            }

            $('#drag-drop-more-then-one').css('display', 'none');
//            $('#imageUploadSection').css('display', '');
        }else{
            console.log('e.target.files'+ e.target.files);
        }
    });

    $(document).on('click', '.uploadExistingImage', function (e) {
        // Add New Code For Header
        //$('#header').css('display', 'none');
        //$('#playgroundHeaderForHome').css('display', '');
        //$('.header-height').css('display', 'none');

        var autogenID = createAutogeneratedID()
        var source_image = $.trim($(this).attr('src'));
        source_image = source_image.replace("/thumbnails", "");
        get_file_path(source_image, true)
    });

    $(document).on('click', '.full_res_image_modal', function (e) {
        var img_id = $(this).attr('id');
        var flag = $(this).attr('flag');
        var img_ag_id = img_id.split('_')[3];
//        removeImageDiv(img_ag_id)

        if(isImageProcessing == true){
            alert("Processing one image");
            return false;
        }
        var thisCls = $(this)

        var autogenerate_id = $(this).attr('id').split('full_res_image_')[1];
        $(thisCls).addClass('loader-upload-button');

        var flag = $(this).attr('flag');
        var image = $('#' + img_id).attr('data-image');
        var csrftoken = $('meta[name=csrf-token]').attr('content');
        $('#modal_image').attr('src', image);

        isImageProcessing = true;

        var img_res = is_hd_image_exist_in_cookie(autogenerate_id)
        if(img_res['status'] == false){
            var formdata = new FormData();
            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken)
                    }
                }
            });
            upload_page_loader(flag, true,autogenerate_id)
            $.ajax({
                url: '/get_credit_info',
                type: 'POST',
                processData: false,
                contentType: false,
                data: formdata,
                success: function (data) {
                    var obj = JSON.parse(data);
                    var cls_name = $('.full_res_img_cls').attr('id');
                    var width_height = $('.full_res_img_cls').attr('img-width-height');
                    var text = $('#' + cls_name).text();

                    $('#img_text').html('Full size image ' + text.split(":")[1]);
                    $('#full_res_autogenerate_id').val(autogenerate_id);
                    if(flag == 'download'){
                        $('#modal_head_text').text('Download Full Size Image');
                    }else{
                        $('#modal_head_text').text('Edit Full Size Image');
                    }
                    if (obj.status_value == 5692) {
                        $('#upload_page_modal_registration').hide();
                        $('#upload_page_modal_no_credit').show();
                        $('#upload_page_modal_download_edit').hide();
                        $('#fullImage').modal('show');
                        isImageProcessing = false;
                        upload_page_loader(flag, false, autogenerate_id)
                        $(thisCls).removeClass('loader-upload-button');
                    } else if (obj.status_value == 4586) {
                        $('#upload_page_modal_registration').show();
                        $('#upload_page_modal_no_credit').hide();
                        $('#upload_page_modal_download_edit').hide();
                        $('#fullImage').modal('show');
                        isImageProcessing = false;
                        upload_page_loader(flag, false, autogenerate_id)
                        $(thisCls).removeClass('loader-upload-button');
                    } else {
                        $('#upload_page_modal_registration').hide();
                        $('#upload_page_modal_no_credit').hide();
                        $('#upload_page_modal_download_edit').show();

                        if(flag == 'download'){
                            download_and_edit_full_size_image_when_login(autogenerate_id, 'download', thisCls)
                        }else{
                            download_and_edit_full_size_image_when_login(autogenerate_id, 'edit', thisCls)
                        }
                    }
                }
            });
        }else{
            isImageProcessing = false
            $(thisCls).removeClass('loader-upload-button');
            if (flag == 'download') {
                var full_image_path = img_res['hd_img_path'];
                var img_name_arr = full_image_path.split('/');
                var image_name = img_name_arr[img_name_arr.length - 1];
                var a = document.createElement('a');
                a.href = full_image_path;
                a.download = image_name;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }else{
                image_editor(autogenerate_id, img_res['hd_img_path'])
            }
        }
    });

    // Close button in image show div
    $(document).on("click", ".bg-remove-image-close", function () {
        var card_val = $(this).attr("data-image-val");
        remove_card(card_val);
    });

    $(document).on("click", ".drag-drop", function () {
        $('.drag-drop').hide();
    });

    $('.image-drag-drop').on('dragover', function (e) {
        e.preventDefault();
        e.stopPropagation();
        $('.showDragAndDropBackground').css("display", "flex");
    });

    $('.image-drag-drop').on('dragleave', function (e) {
        $('.showDragAndDropBackground').css("display", "none");
    });

    $('.image-drag-drop').on('dragenter', function (e) {
        e.preventDefault();
        e.stopPropagation();
        $('.showDragAndDropBackground').css("display", "flex");
    });

    $(document).on('click', '#uploadNewImage', function(e){
        $('#inputUploadFile').trigger('click');
    });
    $(document).on('change', '#inputUploadFile', function(e){
        if (e.target.files != null && e.target.files.length > 0) {
            var source_image = this.files[0];
            if (is_file_size_exceed(source_image)){
                removeImageDiv(autogenID)
                return;
            }

            $('#drag-drop-more-then-one').css('display', 'none');
//            $('#imageUploadSection').css('display', '');

            // Add In Side Panel
            var HTML = `<li>
                            <button type="button" class="active">
                                <img src="proxy.php?url=https%3A%2F%2Fslazzer.com%2F%60%2BURL.createObjectURL%28source_image%29%2B%60"
                                     alt="">
                            </button>
                        </li>`;

            // Add after one
            $('#sidePanelImage').removeClass('active');
            $('#imageEditorSidePanel').find('li').first().after(HTML);

        }else{
            console.log('e.target.files'+ e.target.files);
        }
    });


    $('.image-drag-drop').on('drop ', function (e) {
        $(document).scrollTop(0);
        $('.showDragAndDropBackground').css("display", "none");
        if (e.originalEvent.dataTransfer) {
            if (e.originalEvent.dataTransfer.files.length) {
                e.preventDefault();
                e.stopPropagation();
                var source_image = e.originalEvent.dataTransfer.files[0];
                get_file_path(source_image)
            }
        }
    });

    function get_file_path(source_image, is_existingImage=false){
        if (is_file_size_exceed(source_image)){
            $('.drag-drop').hide();
            return;
        }
        var pathname = window.location.pathname;
        history.pushState(null, null, LANG_CODE+'/upload');

        var autogenID = createAutogeneratedID()
        global_source_image = source_image
        if (pathname != LANG_CODE+'/upload') {
                $(".main-container").css('display', 'none');
                $(".upload-container").css('display', '');
                $('#mainHeaderFeaturesDropdownWrapper').css('display', '');
                show_images_on_page()
                var autogenID = createAutogeneratedID()
                $('#drag-drop-more-then-one').css('display', 'none');
//                $('#imageUploadSection').css('display', '');
        } else {
            var autogenID = createAutogeneratedID()
            $('#drag-drop-more-then-one').css('display', 'none');
//            $('#imageUploadSection').css('display', '');
        }
    }

    $('body').bind("paste", function(e){
        if(window.location.pathname == LANG_CODE+'/' || window.location.pathname == LANG_CODE+'/upload' || window.location.pathname == LANG_CODE+'/personal-use' || window.location.pathname == LANG_CODE+'/ecommerce' || window.location.pathname == LANG_CODE+'/photography' || window.location.pathname == LANG_CODE+'/news-media' || window.location.pathname == LANG_CODE+'/advertising' || window.location.pathname == LANG_CODE+'/car-dealerships' || window.location.pathname == LANG_CODE+'/developers'){
            var source_image = e.originalEvent.clipboardData.files[0];
            if(source_image == undefined){
                alert("Please paste a valid image");
            }else{
                get_file_path(source_image)
            }
        }
    });

    $(document).on("click", ".btn_like", function () {
        var autogenerate_id = $(this).attr('data-id');
        $('#rate_us_'+autogenerate_id).css('display', 'none');
        $('#thank_you_'+autogenerate_id).css('display', '');
        update_cookie_object(autogenerate_id)
    });

    $(document).on("click", ".btn_dislike", function () {
        var autogenerate_id = $(this).attr('data-id');
        var autogenerate_id = autogenerate_id.split("_")[0];
        var image_url = $('#original_image_url_' + autogenerate_id).attr('img_url');
        $('#btn_contribute_image').attr('data-img-url', image_url);
        $('#btn_contribute_image').attr('a-id', autogenerate_id);
        $('#btn_no_contribute_image').attr('a-id', autogenerate_id);

        $('#contribute_image_terms_conditions').prop('checked', false);
        $('#contribute_image_rate').prop('checked', false);

        if (typeof $.cookie('_slimg_is_contribute_modal_show') === 'undefined'){
            $('#rateModal').modal('show');
        }else{
            contribute_image_api_call(image_url, autogenerate_id)
            $('#rate_us_'+autogenerate_id).css('display', 'none');
            $('#thank_you_'+autogenerate_id).css('display', '');
        }
    });

    $(document).on("click", ".btn_edit", function () {
        var autogenerate_id = $(this).attr("source-image-url");
        var output_image = $('#output_image_' + autogenerate_id).attr('src');
        image_editor(autogenerate_id, output_image)
    });

    $(document).on("click", "#btn_contribute_image", function () {
        var is_terms_conditions_checked = $("#contribute_image_terms_conditions").is(':checked');
        var is_rate_checked = $("#contribute_image_rate").is(':checked');

        if(is_terms_conditions_checked == false){
            alert("Checked I agree to the Improvement Program Conditions.")
        }else if(is_rate_checked == false){
            alert("Checked remember my decision for future images that I rate negatively")
        }else{
            var image_url = $(this).attr('data-img-url');
            var autogenerate_id = $(this).attr('a-id');
            contribute_image_api_call(image_url, autogenerate_id)
        }
    });

    $(document).on("click", "#btn_no_contribute_image", function () {
        var autogenerate_id = $(this).attr('a-id');
        $('#rateModal').modal('hide');
        $('#rate_us_'+autogenerate_id).css('display', 'none');
        $('#thank_you_'+autogenerate_id).css('display', '');
        update_cookie_object(autogenerate_id)
    });

    $(document).on("click", ".btn_upload_img_edit_download", function () {
        var btn_type = $(this).attr('btn-type');
        var autogenerate_id = $('#full_res_autogenerate_id').val();
        var cookie_obj = JSON.parse($.cookie('_slimg_' + autogenerate_id));

        var image_url = $('#output_image_' + autogenerate_id).attr('src');
        var source_image_width = cookie_obj['preview_size_image_width'];
        var source_image_height = cookie_obj['preview_size_image_height'];
        var output_image_width = cookie_obj['full_size_image_width'];
        var output_image_height = cookie_obj['full_size_image_height'];
        var csrftoken = $('meta[name=csrf-token]').attr('content');

        var formdata = new FormData();
        formdata.append("api_source", 'upload');
        formdata.append("image_url", image_url);
        formdata.append("source_image_width", source_image_width);
        formdata.append("source_image_height", source_image_height);
        formdata.append("output_image_width", output_image_width);
        formdata.append("output_image_height", output_image_height);
        formdata.append("is_image_downloaded", cookie_obj['is_image_downloaded']);

        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken)
                }
            }
        });

        $.ajax({
            url: '/get_full_size_image',
            type: 'POST',
            processData: false,
            contentType: false,
            data: formdata,
            success: function (data) {
                var obj = JSON.parse(data);
                if (obj.status) {
                    cookie_obj['is_image_downloaded'] = '1';
                    $('#' + autogenerate_id).attr('is_image_downloaded', '1');
                    if (btn_type == 'edit') {
                        image_editor(autogenerate_id, obj.full_image_url)
                    } else {
                        full_image_path = obj.full_image_url;
                        var img_name_arr = full_image_path.split('/');
                        var image_name = img_name_arr[img_name_arr.length - 1];
                        var a = document.createElement('a');
                        a.href = full_image_path;
                        a.download = image_name;
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                    }
                } else {
                    alert(obj.message);
                }
            }
        });
    });

    $(document).on("click", "#download_white_paper", function () {
        window.open('/download_apps/slazzer-security.pdf', '_blank');
    });

    $(document).on("click", ".check_click", function () {
        var url = $(this).attr('r_url');
        $.cookie('_slzPageURL_', url, {expires: 1 / 24});
    });

    $(document).on('click', '#btnPurchaseNow', function(e){
        window.location.href = LANG_CODE+"/infinity-app/checkout"
    });
});

function triggerOnInactivity() {
    if(!isUserActivityFirst){
        isUserActivityFirst = true;
//        showMobileAppPopup()
    }
}

function resetInactivityTimer() {
    clearTimeout(inactivityTimer);
    inactivityTimer = setTimeout(triggerOnInactivity, 1200); // 2000ms = 2 seconds
}

function toDataUrl(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        var reader = new FileReader();
        reader.onloadend = function () {
            //callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}

function image_editor(autogenerate_id, output_image_png) {
    $('#drawing').html('');
    $('.parent-spinner-border').css("display", "");
    var source_image_base64 = $('#source_image_' + autogenerate_id).attr('src');
    var image_tag = '<img class="source_base64_img" src="#" alt="Uploaded Image">'
    $('.btn_background_image, .btn_bg_image_color, .btn_bg_color').html(image_tag);
    ORIGINAL_IMAGE_BASE64 = source_image_base64;
    OUTPUT_IMAGE_BASE64 = output_image_png;
    $('#upload_preview_modal_close_btn').click();
    $('#edit_image').modal('show');
    $('.sp-preview-inner').css('background-color', 'transparent');
}

function download_and_edit_full_size_image_when_login(autogenerate_id, btn_type, thisCls){
    var cookie_obj = getImageObjectById(autogenerate_id)
    var image_url = $('#original_image_url_' + autogenerate_id).attr('img_url');
    var source_image_width = cookie_obj['preview_size_image_width'];
    var source_image_height = cookie_obj['preview_size_image_height'];
    var output_image_width = cookie_obj['full_size_image_width'];
    var output_image_height = cookie_obj['full_size_image_height'];
    var csrftoken = $('meta[name=csrf-token]').attr('content');


    var formdata = new FormData();
    formdata.append("api_source", 'upload');
    formdata.append("image_url", image_url);
    formdata.append("source_image_width", source_image_width);
    formdata.append("source_image_height", source_image_height);
    formdata.append("output_image_width", output_image_width);
    formdata.append("output_image_height", output_image_height);
    formdata.append("is_image_downloaded", cookie_obj['is_image_downloaded']);
    formdata.append("session_key", autogenerate_id + "_" + cookie_obj['current_time']);

    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken)
            }
        }
    });

    $.ajax({
        url: '/get_full_size_image',
        type: 'POST',
        processData: false,
        contentType: false,
        data: formdata,
        success: function (data) {
            $(thisCls).removeClass('loader-upload-button');
            var obj = JSON.parse(data);
            update_image_object(autogenerate_id, 'hd_image', {"hd_img_path": obj['full_image_url']})
            if (obj.status) {
                $('#' + autogenerate_id).attr('is_image_downloaded', '1');
                if (btn_type == 'edit') {
                    image_editor(autogenerate_id, obj.full_image_url)
                } else {
                    full_image_path = obj.full_image_url;
                    var img_name_arr = full_image_path.split('/');
                    var image_name = img_name_arr[img_name_arr.length - 1];
                    var a = document.createElement('a');
                    a.href = full_image_path;
                    a.download = image_name;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                }
            } else {
                alert(obj.message);
            }
        upload_page_loader(btn_type, false, autogenerate_id)
        isImageProcessing = false;
        }
    });
}

function contribute_image_api_call(image_url, autogenerate_id){
    var csrftoken = $('meta[name=csrf-token]').attr('content');
    var formdata = new FormData();
    formdata.append("image_url", image_url);

    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken)
            }
        }
    });

    contribute_image_button('disable')

    $.ajax({
        url: '/contribute_image',
        type: 'POST',
        processData: false,
        contentType: false,
        data: formdata,
        success: function (data) {
            var obj = JSON.parse(data);
            if(obj.status){
                $('#rateModal').modal('hide');
                $('#rate_us_'+autogenerate_id).css('display', 'none');
                $('#thank_you_'+autogenerate_id).css('display', '');
                update_cookie_object(autogenerate_id)
                contribute_image_button('enable')
                $.cookie('_slimg_is_contribute_modal_show', '0');
            }else{
                contribute_image_button('disable')
                $('#rateModal').modal('hide');
                create_error_alert(obj.message)
            }
        },
        error: function(error){
            contribute_image_button('disable')
            create_error_alert("Internal server error")
        }
    });
}

function contribute_image_button(type){
    if(type == 'disable'){
        $('#btn_contribute_image').attr('disabled','disabled');
        $('#btn_contribute_image').text('`+_processing+`...');
    }else{
        $('#btn_contribute_image').prop('disabled', false);
        $('#btn_contribute_image').text('Contribute this image');
    }
}

function update_cookie_object(autogenerate_id){
    var ag_id = autogenerate_id.split('_')[0]
    var image_obj = getImageObjectById(ag_id)
    var session_ag_id = image_obj.autogenerated_id + "_" + image_obj.current_time
    if(image_obj['is_bottom_thank_you_show'] == '0'){
        var csrftoken = $('meta[name=csrf-token]').attr('content');
        var formdata = new FormData();
        formdata.append("key_name", session_ag_id);

        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken)
                }
            }
        });
        $.ajax({
            url: '/update_session_like_dislike',
            type: 'POST',
            processData: false,
            contentType: false,
            data: formdata,
            success: function (data) {
                if(data.status){
                    $('.divLikeDislike').css('display', 'none');
                    $('#thank_you_' + ag_id).css('display', '');
//                    update_image_object(session_ag_id, 'like', null)
                }
            },
            error: function (error){}
        });
    }
}

function upload_page_loader(loader_type, is_show, autogenerate_id){
    if(is_show){
        if(loader_type == 'download'){
            // $('#main_btn_download_'+autogenerate_id).addClass('loader-upload-button');
            // $('#main_btn_download_span_'+autogenerate_id).text('Downloading');

            $('#full_res_image_'+autogenerate_id).addClass('loader-upload-button');
            $('#full_res_image_span_'+autogenerate_id).text('Downloading');
        }else{
            $('#main_btn_edit_'+autogenerate_id).addClass('loader-upload-button');
            $('#main_btn_edit_span_'+autogenerate_id).text('Processing');
        }
    }else{
        if(loader_type == 'download'){
            // $('#main_btn_download_'+autogenerate_id).removeClass('loader-upload-button');
            // $('#main_btn_download_span_'+autogenerate_id).text('Download');

            $('#full_res_image_'+autogenerate_id).removeClass('loader-upload-button');
            $('#full_res_image_span_'+autogenerate_id).text('Download');
        }else{
            $('#main_btn_edit_'+autogenerate_id).removeClass('loader-upload-button');
            $('#main_btn_edit_span_'+autogenerate_id).text('Edit');
        }
    }
}

function is_hd_image_exist_in_cookie(autogenerate_id){
    var cookie_obj = getImageObjectById(autogenerate_id)
    if(cookie_obj['hd_img_path'] == ""){
        return {"status": false};
    }else{
        return {"status": true, "hd_img_path": cookie_obj['hd_img_path']};
    }
}

function successfully_recaptcha_solved(){
    var image_count = localStorage.getItem("_slz_l_storage_imageCountForRecaptcha");
    localStorage.setItem("_slz_l_storage_imageCountForRecaptcha", parseInt(image_count) + 1);
}

function hide_use_cases_menu(event){
    if($('.navbar-brand').hasClass('active-acc')){
        $('.navbar-brand').removeClass('active-acc');
        $('#menu-use-cases').removeClass('active-acc');
        $('#menu-use-cases').addClass('collapsed');
        $('#menu-use-cases').attr('aria-expanded', false);
        $('.megamenu').removeClass('show');
    }
}

function getOS() {
  var userAgent = window.navigator.userAgent,
  platform = window.navigator.platform,
  macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
  windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
  iosPlatforms = ['iPhone', 'iPad', 'iPod'],
  os = null;

  if (macosPlatforms.indexOf(platform) !== -1) {
    os = 'Mac';
  } else if (windowsPlatforms.indexOf(platform) !== -1) {
    os = 'Windows';
  } else if (!os && /Linux/.test(platform)) {
    os = 'Linux';
  }

  return os;
}

function getSlazzerAppPopupContentNumber(){
    return Math.floor(Math.random() * 6) + 1;
}

function show_desktop_popup(){
    $('.downloadMobileApp').removeClass('show');
    if(is_show_desktop_app_popup){
        count_image_process_for_show_desktop_app = count_image_process_for_show_desktop_app + 1;
//        if(count_image_process_for_show_desktop_app == 3){
        if(count_image_process_for_show_desktop_app >= 3){
            if(getMobileOperatingSystem() == 'Unknown'){
                $('#os_name').text(getOS());
                $('#section-for-download-app').addClass('active');
                is_show_desktop_app_popup = false;
                //count_image_process_for_show_desktop_app = 0;
            }else{
                var randomNumber = getSlazzerAppPopupContentNumber()
                if(lastSlazzerAppPopupContentNumber == randomNumber){
                    randomNumber = getSlazzerAppPopupContentNumber()
                }

                lastSlazzerAppPopupContentNumber = randomNumber;


                $('.appFeatures').attr("style", "display:none;");
                $('#appFeatures' + randomNumber.toString()).attr("style", "display:");
                $('.downloadMobileApp').addClass('show');
                count_image_process_for_show_desktop_app = 0;
            }
        }
    }
}

function load_blog_section(){
    var csrftoken = $('meta[name=csrf-token]').attr('content');
    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken)
            }
        }
    });
    $.ajax({
        url: '/load-blog',
        type: 'POST',
        processData: false,
        contentType: false,
        data: new FormData(),
        success: function (data) {
            if(data.status){
                $('#showBlogs').html("")
                for(const blog of data.data){
                    $('#showBlogs').append(`<div class="col-md-4 mb-4 mb-md-0">
                            <a href="proxy.php?url=https%3A%2F%2Fslazzer.com%2F%60%2Bblog.permalink%2B%60" title="">
                                <img src="proxy.php?url=https%3A%2F%2Fslazzer.com%2F%60%2Bblog.thumbnail%2B%60" alt="Trusted Client">
                                <div class="content">
                                    <span>`+show_date_in_blog(blog.date)+`</span>
                                    <h6>`+blog.title+`</h6>
                                </div>
                            </a>
                        </div>`);
                }
            }else{
                var msg = 'Something went wrong';
                var alert = '<div class="alert alert-danger alert-dismissible m-0 text-center">\n' +
                    '  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>\n' +
                    '  <strong>Error!</strong> ' + msg + '\n' +
                    '</div>';
                $('.notification-alert').html(alert);
                $(document).scrollTop(0);
            }
        },
        error: function (error){
            var msg = 'Something went wrong';
            var alert = '<div class="alert alert-danger alert-dismissible m-0 text-center">\n' +
                '  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>\n' +
                '  <strong>Error!</strong> ' + msg + '\n' +
                '</div>';
            $('.notification-alert').html(alert);
            $(document).scrollTop(0);
        }
    });
}

function submit_newsletter(email){
    newsletter_obj.is_first_time = false

    if(!newsletter_obj.is_first_time){
        var time_in_ms = current_time_in_ms()
        if((time_in_ms-newsletter_obj.last_send_time)/1000 < newsletter_click_time){
            create_error_alert("Please try after 30 seconds.")
        }else{
            if(email == ""){
        var msg = 'Invalid email address';
        var alert = '<div class="alert alert-danger alert-dismissible m-0 text-center">\n' +
            '  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>\n' +
            '  <strong>Error!</strong> ' + msg + '\n' +
            '</div>';
        $('.notification-alert').html(alert);
        $(document).scrollTop(0);
        return false;
    }else{
        var csrftoken = $('meta[name=csrf-token]').attr('content');
        var formdata = new FormData();
        formdata.append("email", email);
        $('#btnSubmitNewsletter').prop('disabled', true);
        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken)
                }
            }
        });
        $.ajax({
            url: '/sendgrid-newsletter',
            type: 'POST',
            processData: false,
            contentType: false,
            data: formdata,
            success: function (data) {
                $('#btnSubmitNewsletter').prop('disabled', false);
                if(data.status){
                    var alert = '<div class="alert alert-success alert-dismissible m-0 text-center">\n' +
                        '  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>\n' +
                        '  <strong>Success!</strong> ' + data.message + '\n' +
                        '</div>';
                    $('.notification-alert').html(alert);
                    $(document).scrollTop(0);
                    $('#inputNewsletterEmail').val("");
                    grecaptcha.reset();
                }else{
                    var alert = '<div class="alert alert-danger alert-dismissible m-0 text-center">\n' +
                        '  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>\n' +
                        '  <strong>Error!</strong> ' + data.message + '\n' +
                        '</div>';
                    $('.notification-alert').html(alert);
                    $(document).scrollTop(0);
                }
            },
            error: function (error){
                $('#btnSubmitNewsletter').prop('disabled', false);
                var msg = 'Something went wrong';
                var alert = '<div class="alert alert-danger alert-dismissible m-0 text-center">\n' +
                    '  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>\n' +
                    '  <strong>Error!</strong> ' + msg + '\n' +
                    '</div>';
                $('.notification-alert').html(alert);
                $(document).scrollTop(0);
            }
        });
    }
        }
        newsletter_obj.last_send_time = time_in_ms;
    }
}

function create_error_alert(message){
    var alert = '<div class="alert alert-danger alert-dismissible m-0 text-center">\n' +
            '  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>\n' +
            '  <strong>Error!</strong> ' + message + '\n' +
            '</div>';
    $('.notification-alert').html(alert);
    $(document).scrollTop(0);
}

function show_date_in_blog(date){
    var dt = new Date(date);
    var monthNames = ["January", "February", "March", "April", "May","June","July", "August", "September", "October", "November","December"];
    return dt.getDate() + " " + monthNames[dt.getMonth()] + ", " + dt.getFullYear()
}

function current_time_in_ms(){
    return new Date().getTime();
}

function generate_html(autogenerate_id, source_img, output_img, is_gradient_animation) {
        var display_loader = is_gradient_animation ? 'block' : 'none';
        NO_Of_IMAGES = NO_Of_IMAGES + 1;

        var _originalImage = $('#_originalImage').val();
        var _removeBackground = $('#_removeBackground').val();
        var _edit = $('#_edit').val();
        var _editPreview = $('#_editPreview').val();
        var _editHDImage = $('#_editHDImage').val();
        var _download = $('#_download').val();
        var _previewSize = $('#_previewSize').val();
        var _fullSize = $('#_fullSize').val();
        var _downloadHD = $('#_downloadHD').val();
        var _trySlazzerInfinity = $('#_trySlazzerInfinity').val();
        var _rateThisResult = $('#_rateThisResult').val();
        var _thankYou = $('#_thankYou').val();
        var _need = $('#_need').val();
        var _unlimitedCutouts = $('#_unlimitedCutouts').val();
        var _close = $('#_close').val();

        var button_loader = '<span class="spinner top-spinner"></span><span class="spinner right-spinner"></span><span class="spinner bottom-spinner"></span><span class="spinner left-spinner"></span>';

        return `<div is_image_downloaded="0" class="actionWrap" id="slazzerImageDiv` + autogenerate_id + `">
        <div class="img-bg-result">
        <a href="javascript:void(0);" title="`+_close+`" id="icon_close_` + autogenerate_id + `" class="close bg-remove-image-close" data-image-val="` + autogenerate_id + `" style="display: '';"><i class="fa fa-close"></i></a>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active tabClickOriginal" id="originalImage_` + autogenerate_id + `" data-toggle="tab" href="#original_` + autogenerate_id + `" role="tab"
                   aria-controls="original_` + autogenerate_id + `" aria-selected="false">Before</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link tabClickPreview" id="transparentBg_` + autogenerate_id + `" data-toggle="tab" href="#transparent_` + autogenerate_id + `" role="tab"
                   aria-controls="transparent_` + autogenerate_id + `" aria-selected="true">After</a>
            </li>
        </ul>
        <div class="previewBox">
            <div class="recaptchaWrap">
                <div id="c-recaptcha-` + autogenerate_id + `"></div>
            </div>
            <div class="img-upload-control">
                <div class="tab-content" id="previewImageTab">
                    <div class="tab-pane fade show active tabDataOriginal" id="original_` + autogenerate_id + `" role="tabpanel" aria-labelledby="originalImage_` + autogenerate_id + `">
                        <img src="proxy.php?url=https%3A%2F%2Fslazzer.com%2F%60+%2B+source_img+%2B+%60" id="source_image_` + autogenerate_id + `" alt="Image">
                    </div>
                    <div class="tab-pane fade tabDataPreview" id="transparent_` + autogenerate_id + `" role="tabpanel"
                         aria-labelledby="transparentBg_` + autogenerate_id + `">
                        <img id="output_image_` + autogenerate_id + `" src="proxy.php?url=https%3A%2F%2Fslazzer.com%2F%60+%2B+output_img+%2B+%60" alt="Image">


                        <div class="dropdown edit-dropdown show">
                           <button class="btn" type="button" id="main_btn_edit_`+autogenerate_id+`" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                <span id="main_btn_edit_span_`+autogenerate_id+`">Edit</span><i class="fa fa-pencil"></i>
                                <span class="spinner top-spinner"></span><span class="spinner right-spinner"></span>
                                <span class="spinner bottom-spinner"></span><span class="spinner left-spinner"></span>
                            </button>
                           <div class="dropdown-menu" aria-labelledby="main_btn_edit_`+autogenerate_id+`">
                               <a class="dropdown-item btn_edit" href="javascript:void(0);" source-image-url="`+autogenerate_id+`">
                                     Edit preview
                               </a>
                               <a class="dropdown-item full_res_image_modal a_tag_full_img_edit_`+autogenerate_id+`" flag="edit" id="full_res_image_`+autogenerate_id+`" data-image="" href="javascript:void(0);">
                                     Edit HD image <i class="fa fa-info-circle cls_tooltip" id="tooltip_edit_`+autogenerate_id+`" data-toggle="tooltip" data-placement="top" title=""
                                    data-original-title="Please upload a higher resolution image or Edit the preview size image" style="display: none;"></i>
                                    <span id="edit_full_res_text_xefmz"></span>
                               </a>
                           </div>
                        </div>

                    </div>
                </div>


                <div class="progress-image upload_loader" id="progress_bar_div_`+autogenerate_id+`" style="display: ` + display_loader + `">
                    <div class="gradient element" id="progress_bar_div_gradient_" style="display: ` + display_loader + `"></div>
                    <div class="block">
                        <h5 class="text-center" id="dynamicText_`+autogenerate_id+`">Uploading...</h5>
                        <div class="progress">
                            <div id="dynamic_`+autogenerate_id+`" class="progress-bar bg-success progress-bar-striped active"
                                 role="progressbar"
                                 aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                                <span id="current-progress"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="img-download-control">
                <div class="prev-btn">
                    <div class="downloadButton">
                        <a class="btn" href="javascript:void(0);" id="output_image_download_` + autogenerate_id + `"
                           download>Download
                            <div class="gradient element clsBtnGradient_` + autogenerate_id + `"  style="display: ` + display_loader + `"></div>
                        </a>
                        <span class="image-dimension" id="preview_image_height_width_` + autogenerate_id + `">
                            'Preview size: 612 * 408' <i class="fa fa-info-circle cls_tooltip" data-toggle="tooltip"
                                                      data-placement="top" title=""
                                                      data-original-title="Preview Images up to 0.25 megapixel (eg: 625 x 400) are always free at slazzer.com website, 1/5 credit will be charged via Apps and API."></i>
                            <div class="gradient element clsBtnGradient_` + autogenerate_id + `"  style="display: ` + display_loader + `"></div>
                        </span>
                    </div>
                    <div class="downloadButton">
                        <p style="display: none" id="original_image_url_` + autogenerate_id + `" img_url=""></p>
                        <a class="btn btn-rev btn-hd full_res_image_modal a_tag_full_img_download_` + autogenerate_id + `" flag="download" id="full_res_image_` + autogenerate_id + `" data-img="" href="javascript:void(0);">
                            <span>Download HD</span>
                            <span class="spinner top-spinner"></span>
                            <span class="spinner right-spinner"></span>
                            <span class="spinner bottom-spinner"></span>
                            <span class="spinner left-spinner"></span>
                            <span class="gradient element clsBtnGradient_` + autogenerate_id + `" style="display: ` + display_loader + `"></span>
                        </a>
                        <span class="image-dimension full_res_img_cls" img-width-height=""
                              id="original_image_height_width_` + autogenerate_id + `">
                            Full size: 612 * 408 <i class="fa fa-info-circle cls_tooltip" data-toggle="tooltip"
                                                     data-placement="top" title=""
                                                     data-original-title="Full Images up to 25 megapixel (eg: 6250 x 4000 ) will be charged as 1 credit."></i>
                            <span class="gradient element clsBtnGradient_` + autogenerate_id + `"  style="display: ` + display_loader + `"></span>
                        </span>
                    </div>
                </div>
                <ul class="rate-us divLikeDislike" id="rate_us_`+autogenerate_id+`" style="display: '';">
                    <li>
                        Rate this result:
                        <div class="gradient element clsBtnGradient_` + autogenerate_id + `"  style="display: ` + display_loader + `"></div>
                    </li>
                    <li class="divLikeDislike">
                        <a class="btn_like" id="btn_like_`+autogenerate_id+`" data-id="`+autogenerate_id+`" href="javascript:void(0);" title="">
                            <img src="proxy.php?url=https%3A%2F%2Fslazzer.com%2Fstatic%2Fimages%2Fupload%2Fthumbsup.svg" alt="thumbsup.svg">
                            <span class="gradient element clsBtnGradient_` + autogenerate_id + `" style="display: ` + display_loader + `"></span>
                        </a>
                    </li>
                    <li class="divLikeDislike">
                        <a class="btn_dislike" id="btn_dislike_`+autogenerate_id+`" data-id="`+autogenerate_id+`" href="javascript:void(0);" title="">
                            <img src="proxy.php?url=https%3A%2F%2Fslazzer.com%2Fstatic%2Fimages%2Fupload%2Fthumbs-down.svg" alt="thumbs-down.svg">
                            <span class="gradient element clsBtnGradient_` + autogenerate_id + `" style="display: ` + display_loader + `"></span>
                        </a>
                    </li>
                </ul>
                <p class="thank-you" id="thank_you_`+autogenerate_id+`" style="display: none;">`+_thankYou+`</p>
            </div>
        </div>
        </div>
    </div>`;
    }
//function generate_html(autogenerate_id, source_img, output_img, is_gradient_animation) {
//        var display = is_gradient_animation ? '' : 'none';
//        var display_buttons = is_gradient_animation ? 'none' : '';
//        NO_Of_IMAGES = NO_Of_IMAGES + 1;
//        var button_loader = '<span class="spinner top-spinner"></span><span class="spinner right-spinner"></span><span class="spinner bottom-spinner"></span><span class="spinner left-spinner"></span>';
//        return '<div is_image_downloaded="0" class="img-bg-result" id="' + autogenerate_id + '">\n' +
//        '            <a href="javascript:void(0);" title="Close" id="icon_close_' + autogenerate_id + '" class="close bg-remove-image-close" data-image-val="' + autogenerate_id + '" style="display: ' + display_buttons + '"><i class="fa fa-close"></i></a>\n'
//        '            <p style="display: none" id="original_image_url_' + autogenerate_id + '" img_url=""></p>\n' +
//        '            <ul class="nav nav-tabs" id="myTab" role="tablist">\n' +
//        '                <li class="nav-item" role="presentation">\n' +
//        '                    <a class="nav-link" id="originalImage" data-toggle="tab" href="#origina" role="tab" aria-controls="origina" aria-selected="false">Original Image</a>\n' +
//        '                </li>\n' +
//        '                <li class="nav-item" role="presentation">\n' +
//        '                    <a class="nav-link active" id="transparentBg" data-toggle="tab" href="#transparent" role="tab" aria-controls="transparent" aria-selected="true">Removed Background</a>\n' +
//        '                </li>\n' +
//        '            </ul>\n' +
//        '             <div class="previewBox">\n' +
//        '                <div class="img-upload-control">\n' +
//        '                    <div class="tab-content" id="previewImageTab">\n' +
//        '                        <div class="tab-pane fade" id="origina" role="tabpanel" aria-labelledby="originalImage">\n' +
//        '                           <img src="' + source_img + '" id="source_image_' + autogenerate_id + '" alt="Image">\n' +
//        '                        </div>\n' +
//        '                        <div class="tab-pane fade show active" id="transparent" role="tabpanel" aria-labelledby="transparentBg">\n' +
//        '                           <img class="after-slice" id="output_image_' + autogenerate_id + '" src="' + output_img + '" alt="Image">\n' +
//        '                            <div class="dropdown edit-dropdown">\n' +
//        '                                <button class="btn btn-blue-rev" type="button" id="main_btn_edit_' + autogenerate_id + '" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n' +
//        '                                <span id="main_btn_edit_span_' + autogenerate_id + '" class="fa fa-paint-brush"></span>\n' +
//        '                                </button>\n' +
//        '                                <div class="dropdown-menu" aria-labelledby="main_btn_edit_' + autogenerate_id + '">\n' +
//        '                                    <a class="dropdown-item full_res_image_modal a_tag_full_img_edit_' + autogenerate_id + '" flag="edit" id="full_res_image_' + autogenerate_id + '" data-image="" href="javascript:void(0);">Edit HD image\n' +
//        '                                        <i class="fa fa-info-circle cls_tooltip" id="tooltip_edit_' + autogenerate_id + '" data-toggle="tooltip" data-placement="top" title="" data-original-title="Please upload a higher resolution image or Edit the preview size image"></i>\n' +
//        '                                    </a>\n' +
//        '                                    <a class="dropdown-item btn_edit" href="javascript:void(0);" source-image-url="' + autogenerate_id + '">Edit preview</a>\n' +
//        '                                </div>\n' +
//        '                            </div>\n' +
//        '                        </div>\n' +
//        '                    </div>\n' +
//        '                    <div class="progress-image upload_loader" id="progress_bar_div" style="display: none;">\n' +
//        '                        <div class="gradient element" id="gradient_element_' + autogenerate_id + '" style="display: ' + display + '"></div>\n' +
//        '                        <div class="block">\n' +
//        '                            <h5 class="text-center">Uploading image ...</h5>\n' +
//        '                            <div class="progress">\n' +
//        '                                <div id="dynamic" class="progress-bar bg-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 20%">\n' +
//        '                                    <span id="current-progress"></span>\n' +
//        '                                </div>\n' +
//        '                            </div>\n' +
//        '                        </div>\n' +
//        '                    </div>\n' +
//        '                </div>\n' +
//        '                <div class="img-download-control">\n' +
//        '                    <div class="prev-btn" style="display: ' + display_buttons + '" id="bottom_div_' + autogenerate_id + '">\n' +
//        '                        <a class="btn" href="javascript:void(0);" id="output_image_download_' + autogenerate_id + '" download>Download\n' +
//        '                            <span class="gradient element" id="gradient_element_' + autogenerate_id + '" style="display: ' + display + '"></span>\n' +
//        '                        </a>\n' +
//        '                        <span class="image-dimension" id="preview_image_height_width_' + autogenerate_id + '">\n' +
//        '                            <span class="gradient element" id="gradient_element_' + autogenerate_id + '" style="display: ' + display + '"></span>\n' +
//        '                        </span>\n' +
//        '                        <a class="btn btn-rev btn-hd full_res_image_modal a_tag_full_img_download_' + autogenerate_id + '" flag="download" id="full_res_image_' + autogenerate_id + '" data-img="" href="javascript:void(0);">\n' +
//        '                            <span id="id="full_res_image_span_' + autogenerate_id + '"">Download HD</span>'+button_loader+'\n' +
//        '                            <span class="gradient element" id="gradient_element_' + autogenerate_id + '" style="display: ' + display + '"></span>\n' +
//        '                        </a>\n' +
//        '                        <span class="image-dimension full_res_img_cls" img-width-height="" id="original_image_height_width_' + autogenerate_id + '">\n' +
//        '                            <span class="gradient element" id="gradient_element_' + autogenerate_id + '" style="display: ' + display + '"></span>\n' +
//        '                        </span>\n' +
//        '                    </div>\n' +
//        '                    <p class="infinity">**&nbsp;Looking for <strong>unlimited</strong> cutouts <i class="fa fa-hand-o-right"></i> <a href="proxy.php?url=https%3A%2F%2Fslazzer.com%2Finfinity-app" title="">Try Slazzer Infinity</a>\n' +
//        '                        <span class="gradient element" id="gradient_element_' + autogenerate_id + '" style="display: ' + display + '"></span>\n' +
//        '                    </p>\n' +
//        '                    <ul class="rate-us" id="rate_us_'+autogenerate_id+'" style="display: ;">\n' +
//        '                        <li>How satisfied are you with the results?\n' +
//        '                            <span class="gradient element" id="gradient_element_' + autogenerate_id + '" style="display: ' + display + '"></span>\n' +
//        '                        </li>\n' +
//        '                        <li class="btn_like" data-id="'+autogenerate_id+'">\n' +
//        '                            <a href="javascript:void(0);" title="">\n' +
//        '                                <svg width="36" height="36" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
//        '                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M27.6 16c0 6.407-5.194 11.6-11.6 11.6S4.4 22.406 4.4 16 9.594 4.4 16 4.4c6.407 0 11.6 5.194 11.6 11.6zm2.4 0c0 7.732-6.268 14-14 14S2 23.732 2 16 8.268 2 16 2s14 6.268 14 14zm-19-1a2 2 0 100-4 2 2 0 000 4zm11.03 6.257c.758-.869.012-2.057-1.141-2.057H11.11c-1.153 0-1.899 1.188-1.14 2.057A7.981 7.981 0 0016 24a7.981 7.981 0 006.03-2.743zM21 15a2 2 0 100-4 2 2 0 000 4z" fill="#969696"></path>\n' +
//        '                                </svg>\n' +
//        '                            </a>\n' +
//        '                            <span class="gradient element" id="gradient_element_' + autogenerate_id + '" style="display: ' + display + '"></span>\n' +
//        '                        </li>\n' +
//        '                        <li class="btn_dislike" data-id="'+autogenerate_id+'">\n' +
//        '                            <a href="javascript:void(0);" title="">\n' +
//        '                                <svg width="36" height="36" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
//        '                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M27.6 16c0 6.407-5.194 11.6-11.6 11.6S4.4 22.406 4.4 16 9.594 4.4 16 4.4c6.407 0 11.6 5.194 11.6 11.6zm2.4 0c0 7.732-6.268 14-14 14S2 23.732 2 16 8.268 2 16 2s14 6.268 14 14zm-19-1a2 2 0 100-4 2 2 0 000 4zm11.03 6.143c.758.869.012 2.057-1.141 2.057H11.11c-1.153 0-1.899-1.188-1.14-2.057A7.981 7.981 0 0116 18.4a7.981 7.981 0 016.03 2.743zM21 15a2 2 0 100-4 2 2 0 000 4z" fill="#969696"></path>\n' +
//        '                                </svg>\n' +
//        '                            </a>\n' +
//        '                            <span class="gradient element" id="gradient_element_' + autogenerate_id + '" style="display: ' + display + '"></span>\n' +
//        '                        </li>\n' +
//        '                    </ul>\n' +
//        '                    <p class="thank-you" id="thank_you_'+autogenerate_id+'" style="display: none;">Thank you for your valuable feedback</p>\n' +
//        '                </div>\n' +
//        '            </div>\n' +
//        '       </div>\n';
//    }

function show_images_on_page(){
    return false;

    var csrftoken = $('meta[name=csrf-token]').attr('content');
    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken)
            }
        }
    });
    $.ajax({
        url: '/get_session_images',
        type: 'POST',
        processData: false,
        contentType: false,
        data: new FormData(),
        success: function (data) {
            if(data.status){
                if(data.image_list.length != 0){
                    $('.btn2_upload').css({'display': ''});
                    $('.upload_image_div').css({'display': 'none'});
                    $('#upload_important_text').css('display', '');
                }

                imageObjList = data.image_list;

                for (i in data.image_list) {
                    var image_obj = data.image_list[i]
                    var autogenerated_id = image_obj.autogenerated_id
                    var original_image = image_obj.original_image
                    var preview_size_output_image = image_obj.preview_size_output_image

                    after_load_image_in_page_load(autogenerated_id, image_obj)
                }
            }
        },
        error: function (error){}
    });
}

function remove_card(autogenerated_id){
//    NO_Of_IMAGES = NO_Of_IMAGES - 1;
//    removeImageDiv(autogenerated_id)
//
//    imageObjList.splice(imageObjList.findIndex(item => item.autogenerated_id == autogenerated_id), 1)
//
//    if(NO_Of_IMAGES <= 0){
//        $('#upload_important_text').css('display', 'none');
//        $('.btn2_upload').css({'display': 'none'});
//        $('.upload_image_div').css({'display': ''});
//    }
//    return false;


    var csrftoken = $('meta[name=csrf-token]').attr('content');
    var formdata = new FormData();
    var autogen_id = autogenerated_id.split('_')[0];
    var image_obj = imageObjList.find(x => x.autogenerated_id === autogen_id)
    formdata.append("key_name", autogenerated_id);

    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken)
            }
        }
    });
    $.ajax({
        url: '/delete_session_image',
        type: 'POST',
        processData: false,
        contentType: false,
        data: formdata,
        success: function (data) {
            if(data.status){
                NO_Of_IMAGES = NO_Of_IMAGES - 1;
                $('#slazzerImageDiv'+autogen_id).remove();
                imageObjList.splice(imageObjList.findIndex(item => item.autogenerated_id == autogen_id), 1)
                if(NO_Of_IMAGES <= 0){
                    $(window).scrollTop(0);
                    $('#upload_important_text').css('display', 'none');
                    $('.btn2_upload').css({'display': 'none'});
                    $('.upload_image_div').css({'display': ''});
                }
            }
        },
        error: function (error){}
    });

}

function getImageObjectById(autogenerated_id){
    return result = imageObjList.find(obj => {
      return obj.autogenerated_id === autogenerated_id
    })
}

function update_image_object(autogenerate_id, data, updateObj){
    for (var i = 0; i < imageObjList.length; i++) {
      if (imageObjList[i].autogenerated_id == autogenerate_id) {
        if(data == 'hd_image'){
            imageObjList[i].is_image_downloaded = "1";
            imageObjList[i].hd_img_path = updateObj['hd_img_path'];
        }else if(data == 'like'){
            imageObjList[i].is_bottom_thank_you_show = "1";
        }
        break;
      }
    }
}

function after_load_image_in_page_load(autogenerate_id, obj) {
    var _previewSize = $('#_previewSize').val();
    var _fullSize = $('#_fullSize').val();

    $('.btn2_upload').css({'display': ''});
    $('.upload_image_div').css({'display': 'none'});
    $('#upload_important_text').css('display', '');
    var htm = generate_html(autogenerate_id, obj['original_image'], obj['preview_size_output_image'], false)
    $("#main_image_container").append(htm);

    activateTabRemoveBackground(autogenerate_id)

    $('#' + autogenerate_id).attr('is_image_downloaded', obj['is_image_downloaded']);
    $('#icon_close_' + autogenerate_id).attr('data-image-val', obj['autogenerated_id'] + "_" + obj['current_time']);
    $('#btn_like_' + autogenerate_id).attr('data-id', obj['autogenerated_id'] + "_" + obj['current_time']);
    $('#btn_dislike_' + autogenerate_id).attr('data-id', obj['autogenerated_id'] + "_" + obj['current_time']);


    $('#original_image_url_'+ autogenerate_id).attr('img_url', obj['original_image']);

//    $('#preview_image_height_width_' + autogenerate_id).html(_previewSize + ': ' + obj['preview_size_image_width'] + ' * ' + obj['preview_size_image_height'] + ' ' + info_preview);
    $('#preview_image_height_width_' + autogenerate_id).html('Preview size: ' + obj['preview_size_image_width'] + ' * ' + obj['preview_size_image_height'] + ' ' + info_preview);

    $('#original_image_height_width_' + autogenerate_id).attr('img-width-height', obj['preview_size_image_width'] + '_' + obj['preview_size_image_height']);
    $('#output_image_download_' + autogenerate_id).attr("href", obj['preview_size_output_image']);
    $('#full_res_image_' + autogenerate_id).attr("data-image", obj['preview_size_output_image']);

//    $('#edit_preview_res_text_' + autogenerate_id).html('(' + obj['preview_size_image_width'] + 'px X ' + obj['preview_size_image_height'] + 'px)');

    if (obj['full_size_image_available'] == false) {
        $('.a_tag_full_img_download_' + autogenerate_id).addClass('disabled');
        $('.a_tag_full_img_edit_' + autogenerate_id).addClass('disabled');

        $('#original_image_height_width_' + autogenerate_id).html('HD image not available ' + info_unavailable_hd);
        $('#full_res_image_' + autogenerate_id).css('background-color', '#cccccc');
        $('#edit_full_res_text_' + autogenerate_id).html('HD image not available ' + info_unavailable_hd);
        $('#full_res_image_' + autogenerate_id).css('background-color', '#cccccc');
    } else {
        $('#tooltip_download_' + autogenerate_id).css("display","none");
        $('#tooltip_edit_' + autogenerate_id).css("display","none");

//        $('#original_image_height_width_' + autogenerate_id).html(_fullSize + ': ' + obj['full_size_image_width'] + ' * ' + obj['full_size_image_height'] + ' ' + info_hd);
        $('#original_image_height_width_' + autogenerate_id).html('Full size: ' + obj['full_size_image_width'] + ' * ' + obj['full_size_image_height'] + ' ' + info_hd);
        $('#edit_full_res_text_' + autogenerate_id).html('(' + obj['full_size_image_width'] + 'px X ' + obj['full_size_image_height'] + 'px)');
    }

    if(obj['is_bottom_thank_you_show'] == '0'){
        $('#rate_us_'+ autogenerate_id).css('display', '');
        $('#thank_you_'+ autogenerate_id).css('display', 'none');
    }else{
        $('#thank_you_'+ autogenerate_id).css('display', '');
        $('#rate_us_'+ autogenerate_id).css('display', 'none');
    }
}

function isRemoveLastElementFromImageList(){
    if(imageObjList.length > maximumImageCount){
        var img_obj = imageObjList.slice(-1)[0]
        remove_card(img_obj.autogenerated_id)
    }
}

function onloadPageTab(){
    $(document).on('click', '.preview .original-image h5', function(){
        $('.preview .original-image h5').toggleClass('is-clicked');
        $('.original-image').addClass('show-original');
        $('.preview .preview-image h5').addClass('black');
        $('.preview .preview-image h5').removeClass('skyBlue');
        $('.preview .preview-image h5').removeClass('clicked');
        $('.preview .original-image h5').addClass('blue');
        $('.preview-image').removeClass('show-preview');
    });

    $(document).on('click', '.preview .preview-image h5', function(){
        $('.preview .preview-image h5').toggleClass('clicked');
        $('.preview-image').addClass('show-preview');
        $('.preview .preview-image h5').addClass('skyBlue');
        $('.original-image').removeClass('show-original');
        $('.preview .original-image h5').removeClass('blue');
        $('.preview .original-image h5').removeClass('is-clicked');
    });
}

function upload_image_using_ajax(source_image, autogenerate_id, csrftoken, is_existingImage=false){
    if(IS_ENABLE_CLOUDFLARE_RECAPTCHA){
        var recaptchaDivId = "c-recaptcha-" + autogenerate_id
        loadCloudflareRecaptcha(source_image, autogenerate_id, csrftoken, recaptchaDivId, is_existingImage)
    }else{
        $(".recaptchaWrap").remove();
        if(!isImageProcessing){
            generateToken(source_image, autogenerate_id, csrftoken, is_existingImage)
        }
    }
}

function remove_image_background(data, autogenerate_id){
    $("#input_user_image_upload").val('');
    var obj = JSON.parse(data);

    var _previewSize = $('#_previewSize').val();
    var _fullSize = $('#_fullSize').val();

    imageObjList = [obj['session_obj']].concat(imageObjList)

    if (obj.status) {
        var source_image_url = obj.source_image_url;
        $("#dynamic").css("width", 0 + "%").attr("aria-valuenow", 0).text(0);
        $('#progress_bar_div').css('display', 'none');
        $(".user_image_upload").attr("disabled", false);
        isImageProcessing = false
        if (obj.status) {
            // if(IS_SHOW_CARBG_POPUP){
            //     if (response.hasOwnProperty('car_category') && response.car_category === true) {
            //         $('#carBgRedirectionPopup').css('display', '');
            //     }
            // }

            $('#original_image_url_' + autogenerate_id).attr('img_url', obj.original_image);
            $('#gradient_element_' + autogenerate_id).hide();

            $('#output_image_' + autogenerate_id).attr('src', obj.preview_size_output_image);
            $('#download_png_image_' + autogenerate_id).attr('src', obj.preview_size_output_image);

            $('#output_image_download_' + autogenerate_id).attr("href", obj.preview_size_output_image);
            $('#full_res_image_' + autogenerate_id).attr("data-image", obj.preview_size_output_image);

            $('#bottom_div_' + autogenerate_id).show();
            $('#bottom_div_rate_us_' + autogenerate_id).show();

            $('#icon_close_' + autogenerate_id).attr('data-image-val', obj.session_obj.autogenerated_id + "_" + obj.session_obj.current_time);

            $('#btn_like_' + autogenerate_id).attr('data-id', obj.session_obj.autogenerated_id + "_" + obj.session_obj.current_time);
            $('#btn_dislike_' + autogenerate_id).attr('data-id', obj.session_obj.autogenerated_id + "_" + obj.session_obj.current_time);

            $('#icon_close_' + autogenerate_id).show();

            var preview_image_height = obj.preview_size_image_height;
            var preview_image_width = obj.preview_size_image_width;
            var full_image_height = obj.full_size_image_height;
            var full_image_width = obj.full_size_image_width;

//            $('#source_image_' + autogenerate_id).css("width", preview_image_width);
//            $('#source_image_' + autogenerate_id).css("height", preview_image_height);

            if (obj.full_size_image_available == false) {
                $('.a_tag_full_img_download_' + autogenerate_id).addClass('disabled');
                $('.a_tag_full_img_edit_' + autogenerate_id).addClass('disabled');

                $('#original_image_height_width_' + autogenerate_id).html('HD image not available ' + info_unavailable_hd);
                $('#full_res_image_' + autogenerate_id).css('background-color', '#cccccc');
                $('#edit_full_res_text_' + autogenerate_id).html('HD image not available ' + info_unavailable_hd);
                $('#full_res_image_' + autogenerate_id).css('background-color', '#cccccc');

                $('#tooltip_download_' + autogenerate_id).tooltip();
                $('#tooltip_edit_' + autogenerate_id).tooltip();

            } else {
                $('#tooltip_download_' + autogenerate_id).css("display","none");
                $('#tooltip_edit_' + autogenerate_id).css("display","none");

                $('#original_image_height_width_' + autogenerate_id).html('Full size: ' + full_image_width + ' * ' + full_image_height + ' ' + info_hd);
//                $('#original_image_height_width_' + autogenerate_id).html(_fullSize + ': ' + full_image_width + ' * ' + full_image_height + ' ' + info_hd);
                $('#edit_full_res_text_' + autogenerate_id).html('(' + full_image_width + 'px X ' + full_image_height + 'px)');
            }
//            $('#preview_image_height_width_' + autogenerate_id).html(_previewSize + ': ' + preview_image_width + ' * ' + preview_image_height + ' ' + info_preview);
            $('#preview_image_height_width_' + autogenerate_id).html('Preview size: ' + preview_image_width + ' * ' + preview_image_height + ' ' + info_preview);
            $('.cls_tooltip').tooltip();

            // $('#show_image_height_width_' + autogenerate_id).html('Preview image (' + preview_image_width + 'px X ' + preview_image_height + 'px)');
            $('#original_image_height_width_' + autogenerate_id).attr('img-width-height', preview_image_width + '_' + preview_image_height);
//            $('#edit_preview_res_text_' + autogenerate_id).html('(' + preview_image_width + 'px X ' + preview_image_height + 'px)');

        } else {
            alert("Image processing error.");
            $('#upload').val('');
            $('#span_try_now').show();
            $('#span_wait').hide();
        }
    successfully_recaptcha_solved()
    isRemoveLastElementFromImageList()
    }
    else {
        $(".user_image_upload").attr("disabled", false);
        $("#dynamic").css("width", 0 + "%").attr("aria-valuenow", 0).text(0);
        $('#progress_bar_div').css('display', 'none');
        alert(obj.display_msg);
        $('#upload').val('');
        setTimeout(function(){
//            remove_card(autogenerate_id);
            removeImageDiv(autogenerate_id)
        },500);
    }
}


function remove_bg(source_image) {
    show_desktop_popup()
    var img_format = source_image.name.replace(/^.*\./, '');
    var f_list = ['jpg','JPG','png','PNG','jpeg', 'JPEG','webp','WEBP','avif','AVIF','tif','TIF','bmp','BMP', 'tiff','TIFF'];
    if(jQuery.inArray(img_format, f_list) == -1){
        $('#progress_bar_div').css('display', 'none');
        if(NO_Of_IMAGES <= 0){
//            $(window).scrollTop(0);
            $('#upload_important_text').css('display', 'none');
            $('.btn2_upload').css({'display': 'none'});
            $('.upload_image_div').css({'display': ''});
        }
        alert("Only jpg, png, and jpeg, webp file format supported");
        return false;
    }

    $(".user_image_upload").attr("disabled", true);
    var autogenerate_id = Math.random().toString(36).substr(2, 5); // first time generate
    var csrftoken = $('meta[name=csrf-token]').attr('content');

    if(is_recaptcha_solved() == false){
        $('#progress_bar_div').css('display', 'none');
        $('#recaptcha-main-div').css('display', '');
        $('#recaptcha-main-div').html('<div class="captcha-holder"><div class="captcha-box"><div id="div-show-recaptcha"></div><div></div>')
        grecaptcha.render('div-show-recaptcha', {
            sitekey: '6Ld4mcsUAAAAAGRVf7_Mix45AEx6nGGiH88zr4pH',
            callback: function(response) {
                if(response.length > 0){
                    upload_image_using_ajax(source_image, autogenerate_id, csrftoken)
                    $('#recaptcha-main-div').html('');
                    $('#recaptcha-main-div').css('display', 'none');
                }
            },
            theme: 'dark'
        });
    }else{
        upload_image_using_ajax(source_image, autogenerate_id, csrftoken)
    }

//    if (source_image != '' && source_image != null) {
//        $('.btn2_upload').css({'display': ''});
//        $('.upload_image_div').css({'display': 'none'});
//        $('#upload_important_text').css('display', '');
//        $(document).scrollTop(0);
//
//        if(is_recaptcha_solved() == false){
//            $('#progress_bar_div').css('display', 'none');
//            $('#recaptcha-main-div').css('display', '');
//            $('#recaptcha-main-div').html('<div class="captcha-holder"><div class="captcha-box"><div id="div-show-recaptcha"></div><div></div>')
//            grecaptcha.render('div-show-recaptcha', {
//                sitekey: '6Ld4mcsUAAAAAGRVf7_Mix45AEx6nGGiH88zr4pH',
//                callback: function(response) {
//                    if(response.length > 0){
//                        upload_image_using_ajax(source_image, autogenerate_id, csrftoken)
//                        $('#recaptcha-main-div').html('');
//                        $('#recaptcha-main-div').css('display', 'none');
//                    }
//                },
//                theme: 'dark'
//            });
//        }else{
//            upload_image_using_ajax(source_image, autogenerate_id, csrftoken)
//        }
//    }
}

function is_recaptcha_solved(){
    return true;
//    return isRecaptchaSolved;
}

function onSubmit(token){
    if (global_source_image != '' && global_source_image != null) {
        $('.btn2_upload').css({'display': ''});
        $('.upload_image_div').css({'display': 'none'});
        $('#upload_important_text').css('display', '');
        $(document).scrollTop(0);
    }

    remove_bg(global_source_image)

//
//    var csrftoken = $('meta[name=csrf-token]').attr('content');
//    var formdata = new FormData();
//    formdata.append("token", token);
//
//    $.ajaxSetup({
//        beforeSend: function (xhr, settings) {
//            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
//                xhr.setRequestHeader("X-CSRFToken", csrftoken)
//            }
//        }
//    });
//
//    $.ajax({
//        url: '/get-recaptcha-score',
//        type: 'POST',
//        processData: false,
//        contentType: false,
//        data: formdata,
//        async: false,
//        success: function (data) {
//            isRecaptchaSolved = data.status;
//            remove_bg(global_source_image)
//        }
//    });
}

function createAutogeneratedID(){
    return autogenerate_id = Math.random().toString(36).substr(2, 5);
}

function initializeImageDiv(autogen_id){
    var generatedsHtml = generate_html(autogen_id, '', '', true);
    $('.upload_image_div').css({'display': 'none'});
    $('#upload_important_text').css('display', '');
    $('.btn2_upload').css({'display': 'block'});
    $("#main_image_container").prepend(generatedsHtml);
}

function showHideImageUploadLoader(autogen_id, isShow){
    if(isShow){
        $('#icon_close_' + autogen_id).css('display', 'none');
        $('#progress_bar_div_' + autogen_id).css('display', '');
        $('#progress_bar_div_gradient_' + autogen_id).css('display', '');
        $('.clsBtnGradient_' + autogen_id).css('display', '');
    }else{
        $('#progress_bar_div_' + autogen_id).css('display', 'none');
        $('#progress_bar_div_gradient_' + autogen_id).css('display', 'none');
        $('#progress_bar_div_gradient_' + autogen_id).css('display', 'none');
        $('.clsBtnGradient_' + autogen_id).css('display', 'none');
    }
}

function removeImageDiv(autogen_id){
    $('#slazzerImageDiv' + autogen_id).remove();
}

function activateTabRemoveBackground(autogenID){
    $('#originalImage_' + autogenID).removeClass('active');
    $('#transparentBg_' + autogenID).addClass('active');

    $('#original_' + autogenID).removeClass('active show');
    $('#transparent_' + autogenID).addClass('active show');
}

function trustTokenAPI(){
    var csrftoken = $('meta[name=csrf-token]').attr('content');
    var formdata = new FormData();

    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken)
            }
        }
    });
    $.ajax({
        url: '/auth/trust_token',
        type: 'POST',
        processData: false,
        contentType: false,
        async: false,
        data: formdata,
        success: function (data) {

        },
        error: function (error){}
    });

}

function redirectPage(langCode){
    if (langCode == undefined){return false;}
    var pathname = window.location.pathname;
    var splitData = pathname.split("/");

    if(splitData.length == 2){
//        if(splitData[1] == "help" || splitData[1] == "blog/" || splitData[1] == "help/" || splitData[1] == "blog"){
        if(splitData[1] == "blog/" || splitData[1] == "blog"){
            langCode = 'en'
        }

        if(langCode == 'en'){
            redirectURL = '/'
        }else{
            if(splitData[1] == ''){
                redirectURL = '/' + langCode
            }else{
                var langList = ['de', 'fr', 'it', 'ja', 'ru', 'id', 'es', 'pt', 'ko', 'zh', 'zh_hant_tw']
                if(langList.includes(splitData[1])){
                    redirectURL = '/' + langCode
                }else{
                    redirectURL = '/' + langCode + '/' + splitData[1]
                }
            }
        }
    }
    else if(splitData.length == 3){
        var langList = ['de', 'fr', 'it', 'ja', 'ru', 'id', 'es', 'pt', 'ko', 'zh', 'zh_hant_tw']
        if(langList.includes(splitData[1])){
            if(langCode == 'en'){
                redirectURL = '/' + splitData[2]
            }else{
                redirectURL = '/' + langCode + '/' + splitData[2]
            }
        }else{
            if(splitData[1] == "background-remover"){
                redirectURL = '/' + splitData[1] + '/' + splitData[2]
            }else{
                redirectURL = '/' + langCode + '/' + splitData[1] + '/' + splitData[2]
            }

        }
    }
    else if(splitData.length == 4){
        if(langCode == 'en'){
            redirectURL = '/' + splitData[2] + '/' + splitData[3]
        }else{
            if(splitData[2] == "background-remover"){
                redirectURL = '/' + splitData[2] + '/' + splitData[3]
            }else{
                redirectURL = '/' + langCode + '/' + splitData[2] + '/' + splitData[3]
            }
        }
    }

//    window.location.href = redirectURL;
    save_lang_code(langCode, redirectURL)
}

function changeLanguageButton(){
    if(LANG_CODE == ''){LANG_CODE = "/en"}

    $('#btnSelectLanguage').html("");
    var lang = LANG_CODE.replace('/', '');
    $('#btnSelectLanguage').html($('#for' + lang.toUpperCase()).html());
}

function save_lang_code(LANG_CODE, redirectURL){
    var formdata = new FormData()
    formdata.append("lang_code", LANG_CODE)
    var csrftoken = $('meta[name=csrf-token]').attr('content');

    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken)
            }
        }
    });
    $.ajax({
        url: '/save_lang_code',
        type: 'POST',
        processData: false,
        contentType: false,
        data: formdata,
        success: function (data) {
            if(data.status){
                window.location.href = redirectURL;
            }else{
                window.location.reload();
            }
        },
        error: function (error){}
    });
}

function loadCloudflareRecaptcha(source_image, autogenerate_id, csrftoken, recaptchaDivId, is_existingImage){
    var dataSitekey = "0x4AAAAAAARMQ_bSWt4IWzOR";
    var hostName = $(location).attr('hostname');

    if(hostName.indexOf("localhost") != -1){
        dataSitekey = "0x4AAAAAAAQulv-eTqiKSZ4-";
    }else if(hostName.indexOf("eutigo") != -1){
        dataSitekey = "0x4AAAAAAARMQmALguP80a6K";
    }else{
        dataSitekey = "0x4AAAAAAARMQ_bSWt4IWzOR";
    }
    turnstile.render('#'+recaptchaDivId, {
        sitekey: dataSitekey,
        callback: function(token) {
            apiTokenVerification(token, source_image, autogenerate_id, csrftoken, recaptchaDivId, is_existingImage)
        }
    });
}

function apiTokenVerification(token, source_image, autogenerate_id, csrftoken, recaptchaDivId, is_existingImage){
    var csrftoken = $('meta[name=csrf-token]').attr('content');
    var formdata = new FormData();
    formdata.append("token", token);

    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken)
            }
        }
    });

    $.ajax({
        url: '/verify-unauthorized-token',
        type: 'POST',
        processData: false,
        contentType: false,
        data: formdata,
        success: function (data) {
            if(data.status){
                $('#' + recaptchaDivId).html('');
                $(".recaptchaWrap").remove();
                generateToken(source_image, autogenerate_id, csrftoken, is_existingImage)
            }else{
                loadCloudflareRecaptcha(source_image, autogenerate_id, csrftoken, recaptchaDivId, is_existingImage)
            }
        }
    });
}

function upload_image_using_ajax_after_solve_recaptcha(token, source_image, autogenerate_id, csrftoken, is_existingImage, isVerified=false){
//    if(isImageProcessing == true){
//        alert("You can upload one image at a time");
//        return false;
//    }else{
    // New Added
    if(is_existingImage){
        var img_format = "jpg";
    }else{
        var img_format = source_image.name.replace(/^.*\./, '');
    }

    var f_list = ['jpg','JPG','png','PNG','jpeg', 'JPEG','webp','WEBP','bmp','BMP'];
    if(jQuery.inArray(img_format, f_list) == -1){
        $('#progress_bar_div').css('display', 'none');
        removeImageDiv(autogenerate_id)
        NO_Of_IMAGES = NO_Of_IMAGES - 1;
        if(NO_Of_IMAGES <= 0){
//                $(window).scrollTop(0);
            $('#upload_important_text').css('display', 'none');
            $('.btn2_upload').css({'display': 'none'});
            $('.upload_image_div').css({'display': ''});
        }
       alert("Only jpg, png, and jpeg, webp file format supported");
        return false;
    }

    // End New Added
    show_desktop_popup()
//        $(window).scrollTop(0);

    var y = $(window).scrollTop();
    $(window).scrollTop(y+100);

//        var trustToken = trustTokenAPI()
//        return false;

    isImageProcessing = true
    var formdata = new FormData();
    if(is_existingImage){
        formdata.append("image_url", source_image);
    }else{
        formdata.append("source_image_file", source_image);
    }

    formdata.append("autogenerate_id", autogenerate_id);
    formdata.append("is_verified", isVerified);

    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
                xhr.setRequestHeader("X-Trust-Token", token);
            }
        }
    });

    $(".user_image_upload").attr("disabled", true);

    $.ajax({
        url: '/upload_image',
        type: 'POST',
        processData: false,
        contentType: false,
        data: formdata,
        xhr: function () {
            $(window).scrollTop(0);
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    var current_progress = evt.loaded / evt.total;
                    current_progress = parseInt(current_progress * 100);
                    $("#dynamic_" + autogenerate_id).css("width", current_progress + "%").attr("aria-valuenow", current_progress);
                    $('#transparentBg_' + autogenerate_id).css('pointer-events', 'none');
                     if (current_progress >= 1) {
                        showHideImageUploadLoader(autogenerate_id, true)
                     }
                    if (current_progress === 100) {
                        var reader = new FileReader();
                        $('#dynamicText_' + autogenerate_id).text("Processing.....");

                        if(is_existingImage){
                            $('#source_image_' + autogenerate_id).attr('src', source_image);
                            setTimeout(function () {
                                var browse_img_height = $('#source_image_' + autogenerate_id).height();
                                var browse_img_width = $('#source_image_' + autogenerate_id).width();

                                var RATIO = 0;
                                var GENERATE_HEIGHT = 0;
                                var GENERATE_WIDTH = 0;

                                if (browse_img_height > 600) {
                                    if (browse_img_width > browse_img_height) {
                                        RATIO = browse_img_height / browse_img_width;
                                        GENERATE_WIDTH = 600;
                                        GENERATE_HEIGHT = 600 * RATIO;
                                    } else {
                                        RATIO = browse_img_width / browse_img_height;
                                        GENERATE_HEIGHT = 600;
                                        GENERATE_WIDTH = 600 * RATIO;
                                    }
                                } else {
                                    GENERATE_WIDTH = browse_img_width;
                                    GENERATE_HEIGHT = browse_img_height;
                                }

//                                    $('#source_image_' + autogenerate_id).height(GENERATE_HEIGHT);
//                                    $('#source_image_' + autogenerate_id).width(GENERATE_WIDTH);

                                $('#gradient_element_' + autogenerate_id).height(GENERATE_HEIGHT);
                                // $('#output_image_div_' + autogenerate_id).width(GENERATE_WIDTH);
                            }, 80);

                        }else{
                            reader.onload = function (f) {
                                $('#source_image_' + autogenerate_id).attr('src', f.target.result);
                                setTimeout(function () {
                                    var browse_img_height = $('#source_image_' + autogenerate_id).height();
                                    var browse_img_width = $('#source_image_' + autogenerate_id).width();

                                    var RATIO = 0;
                                    var GENERATE_HEIGHT = 0;
                                    var GENERATE_WIDTH = 0;

                                    if (browse_img_height > 600) {
                                        if (browse_img_width > browse_img_height) {
                                            RATIO = browse_img_height / browse_img_width;
                                            GENERATE_WIDTH = 600;
                                            GENERATE_HEIGHT = 600 * RATIO;
                                        } else {
                                            RATIO = browse_img_width / browse_img_height;
                                            GENERATE_HEIGHT = 600;
                                            GENERATE_WIDTH = 600 * RATIO;
                                        }
                                    } else {
                                        GENERATE_WIDTH = browse_img_width;
                                        GENERATE_HEIGHT = browse_img_height;
                                    }

//                                    $('#source_image_' + autogenerate_id).height(GENERATE_HEIGHT);
//                                    $('#source_image_' + autogenerate_id).width(GENERATE_WIDTH);

                                    $('#gradient_element_' + autogenerate_id).height(GENERATE_HEIGHT);
                                    // $('#output_image_div_' + autogenerate_id).width(GENERATE_WIDTH);
                                }, 80);
                            };
                            reader.readAsDataURL(source_image);
                        }
                    }
                }
            }, false);
            return xhr;
        },
        success: function (data) {
            $(".user_image_upload").attr("disabled", false);
            $('#transparentBg_' + autogenerate_id).css('pointer-events', '');
            activateTabRemoveBackground(autogenerate_id)
            showHideImageUploadLoader(autogenerate_id, false)
            isImageProcessing = false;
            remove_image_background(data, autogenerate_id)
            $('#icon_close_' + autogenerate_id).css('display', '');
        },
        error: function(qXHR, textStatus, errorThrown){
            if(qXHR.status == 429){
                alert("Upload Limit Exited. You have upload 10 images in a minute. Please try again after 1 minute.");
                window.location.reload();
            }
            $(".user_image_upload").attr("disabled", false);
        }
    });
//    }
}


function sampleImageListWithClass(){
    var firstData = randomIntFromInterval(1, 7);
    var secondData = randomIntFromInterval(8, 14);
    var thirdData = randomIntFromInterval(15, 21);
    var forthData = randomIntFromInterval(22, 28);

    var listNumber = [firstData, secondData, thirdData, forthData];
    var html = "";
    for(var i=0; i<listNumber.length; i++){
        html = html + `<li>
                        <img class="uploadExistingImage"
                             src="proxy.php?url=https%3A%2F%2Fslazzer.com%2Fstatic%2Fimages%2Fupload%2Fthumbnails%2Fsample-%60%2BlistNumber%5Bi%5D%2B%60.jpg" alt="">
                        </li>`;
    }
    $('.sampleImageListWithClass').html("");
    $('.sampleImageListWithClass').html(html);
}


function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function generateToken(source_image, autogenerate_id, csrftoken, is_existingImage) {
    customImgSizeValidation(source_image)
      .then(isValid => {
//        if (isValid) {
//          console.log("✅ Image is within limits");
//        } else {
//          console.log("❌ Image exceeds size or resolution limits");
//        }
      }).catch(err => console.error("Error:", err.message));


    var csrftoken = $('meta[name=csrf-token]').attr('content');
    var formdata = new FormData();

    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken)
            }
        }
    });

    $.ajax({
        url: '/generate_trust_token',
        type: 'POST',
        processData: false,
        contentType: false,
        data: formdata,
        success: function(data) {
            upload_image_using_ajax_after_solve_recaptcha(data.trust_token, source_image, autogenerate_id, csrftoken, is_existingImage)
        },
        error: function(xhr, status, error) {
            if(xhr.status == 429){
                alert("Upload Limit Exited. You have upload 10 images in a minute. Please try again after 1 minute.");
                window.location.reload();
            }
            showHideImageUploadLoader(autogenerate_id, false)
            isImageProcessing = false;
        }
    });
}

function getMobileOperatingSystem() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

    if (/android/i.test(userAgent)) {
        return "android";
    }

    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "ios";
    }

    return "Unknown";
}

function getMobileApp(){
    var mobileOS = getMobileOperatingSystem();
    if(mobileOS == 'ios'){
        var APP_URL = "https://apps.apple.com/in/app/slazzer-background-remover/id6499511787";
    }else{
        var APP_URL = "https://play.google.com/store/search?q=slazzer&c=apps";
    }

    $('#getMobileApp').attr('href', APP_URL)
}

function onloadTurnstileCallback() {

}

function showMobileAppPopup(){
    if($.cookie('_mobile_app_popup') == undefined){
        $('#divGetMobileApp').addClass('show');
    }
}

function showCreditInfo() {
    $.ajax({
        url: '/get_total_credit',
        method: 'GET',
        success: function(data) {

            let formatted = parseFloat(data).toFixed(2);
            $('#total-credit').text(formatted);
             $('#refresh-credit-btn').removeClass('credit-refresh-btn');

        },
        error: function(xhr, status, error) {
            $('#total-credit').text("0");
        }
    });
}

function showCreditInfo() {
    $.ajax({
        url: '/get_total_credit',
        method: 'GET',
        success: function(data) {

            let formatted = parseFloat(data).toFixed(2);
            $('#total-credit').text(formatted);
             $('#refresh-credit-btn').removeClass('credit-refresh-btn');

        },
        error: function(xhr, status, error) {
            $('#total-credit').text("0");
        }
    });
}

function showChangeLogInHeader() {
    $.ajax({
        url: '/change-log-details',
        method: 'GET',
        success: function(response) {
            if (!response.status) return;

            let FINAL_HTML = '';
            let showLogCount = 0;
            if(response.data.is_active_icon_show){$("#dropdownMenuButtonNotificationToggleACTIVE").css('display', '')}

            outer: for (let historyLog of response.data.details) {
                for (let LOG of historyLog.updates) {
                    FINAL_HTML += `
                        <li>
                            <strong>${historyLog.date}</strong> ${LOG}
                        </li>
                    `;
                    if (++showLogCount === 3) break outer;
                }
            }

            if (window.location.pathname === '/change-log') {
                if(response.data.details.length > 1){
                    $('#changeLogDetailsHistory').html('');
                    outer: for (let historyLog of response.data.details) {
                        var flexBox = `<div class="flexBox"><h6>${historyLog.date}</h6><ul>`
                        for (let LOG of historyLog.updates) {
                            flexBox += `
                                <li>
                                    ${LOG}
                                </li>
                            `;
                        }
                        flexBox += `</ul></div>`;
                        $('#changeLogDetailsHistory').append(flexBox);
                    }
                }else{
                    $('#changeLogDetailsHistory').html('No update available');
                }
            }

            $('#dropdownMenuButtonNotificationToggleID')
                .html(FINAL_HTML)
                .append(`<a href="proxy.php?url=https%3A%2F%2Fslazzer.com%2Fchange-log" class="viewAll">View All</a>`);
        }
    });
}

function closeHeaderPromotionBar(){
    $('#headerFeaturesList').remove();
    $('#navBer').removeClass('featureDrawerShow');
    $('#header').css('top', 0);
}


function customImgSizeValidation(file) {
  return new Promise((resolve, reject) => {
    try {
      // ---- 1️⃣ Check file size ----
      const sizeInMB = file.size / (1024 * 1024);
      if (sizeInMB > 12) {
        return resolve(false); // ❌ Exceeds 12MB
      }

      // ---- 2️⃣ Create Image to check dimensions ----
      const img = new Image();
      const objectUrl = URL.createObjectURL(file);

      img.onload = function () {
        const totalPixels = img.width * img.height;
        const megaPixels = totalPixels / 1_000_000;

        URL.revokeObjectURL(objectUrl); // Clean up memory

        if (megaPixels > 16) {
          resolve(false); // ❌ Exceeds 16MP
        } else {
          resolve(true); // ✅ Valid
        }
      };

      img.onerror = function () {
        URL.revokeObjectURL(objectUrl);
        reject(new Error("Invalid image file"));
      };

      img.src = objectUrl;
    } catch (err) {
      reject(err);
    }
  });
}


function getDeviceType() {
  if (navigator.userAgentData && typeof navigator.userAgentData.mobile === 'boolean') {
    if (navigator.userAgentData.mobile) return 'mobile';
  }

  const ua = navigator.userAgent || navigator.vendor || window.opera || '';
  const tabletRegex = /iPad|Tablet|PlayBook|Silk|Kindle|Android(?!.*Mobile)/i;
  const mobileRegex = /Android.*Mobile|iPhone|Windows Phone|BlackBerry|BB10|Mobile/i;

  if (tabletRegex.test(ua)) return 'tablet';
  if (mobileRegex.test(ua)) return 'mobile';

  const width = Math.max(window.screen.width, window.innerWidth || 0);
  const hasTouch = ('maxTouchPoints' in navigator && navigator.maxTouchPoints > 0) ||
                   ('ontouchstart' in window);

  if (width <= 768) return 'mobile';
  if (width <= 1024 && hasTouch) return 'tablet';

  return 'desktop';
}