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 CSRF_TOKEN = $('meta[name=csrf-token]').attr('content');

var inactivityTimer;
var isUserActivityFirst = false;

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>`;

// ======================== New Editor Variables ========================
var ORIGINAL_UPLOADED_IMAGE = null;
var IS_IMAGE_PROCESSING = false;
var CHOOSE_BG_COLOR = null;
var IMAGE_HISTORY = [];
var IMAGE_HISTORY_ACTIVATE_AG_ID_TEMP = null;
var IMAGE_HISTORY_ACTIVATE_AG_ID = null;
var NEW_EDITOR_ORIGINAL_BASE64_IMG = null;
var BEFORE_AFTER_STRING = 'after';
var CREDIT_COUNT = 0.0;
var ORIGINAL_IMAGE_BLOB = null;

// For Zoom
var scale = 1;          // Initial zoom level
var zoomStep = 0.1;   // Step size for zoom
var maxZoom = 3;      // Maximum zoom limit
var minZoom = 0.5;    // Minimum zoom limit

$(window).on('load', function() {
   // Hide loader
    $(window).on("popstate", function () {
        var CURRENT_URL = window.location.pathname;
        var REF_URL = document.referrer;
        REF_URL = REF_URL.split(window.location.host)[1];

        if(CURRENT_URL == '/' && REF_URL == '/upload'){
            window.location.reload();
        }if(CURRENT_URL == '/upload' && REF_URL == '/'){
            window.location.reload();
        }if(CURRENT_URL == '/' && REF_URL == undefined){
            window.location.reload();
        }if(CURRENT_URL == '/upload' && REF_URL != "/upload"){
            window.location.href = REF_URL;
        }if(CURRENT_URL == '/upload' && REF_URL == "/upload"){
            history.go(-1);
            window.location.reload();
        }if(CURRENT_URL == '/' && REF_URL == '/'){
            window.location.href = REF_URL;
        }


    });

    resetInactivityTimer();
//    showChangeLogInHeader()

    if(IS_USER_LOGIN == "True"){
        showCreditInfo()
    }

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

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

$(document).ready(function () {
//    $(document).on('click', '#previewMainImage', function(e){
//        if (IS_IMAGE_PROCESSING) {
//            alertManager("warning", "Zoom is disabled during image processing");
//            return false;
//        }
//        if(scale > 2.0){
//            scale = 1.0;
//        }else{
//            scale += 0.2;
//        }
//        applyZoom();
//    });


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

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

    // ============================= Redirect Into Editor Page =============================
    $(document).on('click', '.redirectEditor', function(e){
        if(IS_IMAGE_PROCESSING){
            alertManager("warning", "Last image in progress. Start a new image only after this one is complete");
            return false;
        }else{
            if(IMAGE_HISTORY_ACTIVATE_AG_ID){
                var originalImageURL = getDataFromHistory("original_image");
                if(originalImageURL != null || originalImageURL != undefined || originalImageURL != ''){
                    var URL = $(this).attr('url');
                    var dataText = $(this).attr('data-text');
                    URL = URL + "?q="+btoa(originalImageURL);
                    window.open(URL, '_blank');
//                    $('#showOriginalImg').attr('src', originalImageURL);
//                    $('#redirectEditorTitle').text(dataText);
//                    $('#btnFinalRedirect').attr('href', URL);
//                    $('#editorRedirectionModal').modal('show');
                }
            }
        }
    });

    $(document).on('click', '.sidePanelImage', function(e){
        if(IS_IMAGE_PROCESSING){
            alertManager("warning", "Last image in progress. Start a new image only after this one is complete");
            return false;
        }
        resetZoom()
        $('.sidePanelImage').removeClass('active');
        $(this).addClass('active');
        var autoGenIDv2 = $(this).attr('ag-data').trim();

        if(!IS_IMAGE_PROCESSING){
            IMAGE_HISTORY_ACTIVATE_AG_ID = autoGenIDv2;
            manageBeforeAfterImage('after');
            downloadDropdownItemsManger(autoGenIDv2)
            editDropdownItemsManger(autoGenIDv2)
            editLikeDislikeManger(autoGenIDv2)

            $('#textAfter').addClass('active');
            $('#textBefore').removeClass('active');
        }
    });

    $(document).on('click', '#downloadFreeImage', function (e) {
        var original_image = getDataFromHistory("preview_size_output_image");
        if(original_image){
            let img = new Image();
            img.crossOrigin = "anonymous";
            img.src = original_image;

            img.onload = function () {
                let canvas = document.createElement('canvas');
                canvas.width = img.width;
                canvas.height = img.height;
                let ctx = canvas.getContext('2d');
                if (CHOOSE_BG_COLOR != null) {
                    ctx.fillStyle = CHOOSE_BG_COLOR;
                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                }
                ctx.drawImage(img, 0, 0);
                let finalImage = canvas.toDataURL("image/png");
                let a = document.createElement('a');
                a.href = finalImage;
                a.download = "slazzer-preview-" + IMAGE_HISTORY_ACTIVATE_AG_ID + ".png";
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            };
        }else{
            alertManager("error", "Something went wrong. Please try again");
        }
    });

    $(document).on('click', '#downloadHDImage', function (e) {
        downloadHdImageAPI(false)
    });

    $(document).on("click", "#btnPreviewEdit", function () {
        showPreviewImageEditor()
    });

    $(document).on("click", "#btnHDEdit", function () {
        downloadHdImageAPI(true)
    });


    let isHolding = false;


    // Disable long-press context menu on mobile
    $(document).on('contextmenu', '#beforeAfterBtn', function(e) {
        e.preventDefault();
        return false;
    });

    // Handle button press (mouse or touch)
    $(document).on('mousedown touchstart', '#beforeAfterBtn', function(e) {
        e.preventDefault();
        e.stopPropagation();

        if (IS_IMAGE_PROCESSING) {
            alertManager("warning", "Please wait, image is processing...");
            return false;
        }

        isHolding = true;
        manageBeforeAfterImage('before');

        $('#textBefore').addClass('active');
        $('#textAfter').removeClass('active');
    });

    // Handle button release (mouse or touch)
    $(document).on('mouseup touchend touchcancel', '#beforeAfterBtn', function(e) {
        e.preventDefault();
        e.stopPropagation();

        if (!isHolding) return;

        if (IS_IMAGE_PROCESSING) {
            alertManager("warning", "Please wait, image is processing...");
            return false;
        }

        isHolding = false;
        manageBeforeAfterImage('after');

        $('#textAfter').addClass('active');
        $('#textBefore').removeClass('active');
    });






//    $(document).on('mousedown touchstart', '#beforeAfterBtn', function(e) {
//        if (IS_IMAGE_PROCESSING) {
//            alertManager("warning", "Please wait image processing");
//            return false;
//        }
//        e.preventDefault();
//        isHolding = true;
//        manageBeforeAfterImage('before');
//        $('#textBefore').addClass('active');
//        $('#textAfter').removeClass('active');
//    });
//
//    $(document).on('mouseup touchend', '#beforeAfterBtn', function(e) {
//        if (!isHolding) return;
//
//        if (IS_IMAGE_PROCESSING) {
//            alertManager("warning", "Please wait image processing");
//            return false;
//        }
//        e.preventDefault();
//        isHolding = false;
//        manageBeforeAfterImage('after');
//        $('#textAfter').addClass('active');
//        $('#textBefore').removeClass('active');
//    });

    // Zoom In
    $(document).on('click', '#btnZoomIN', function () {
        if (IS_IMAGE_PROCESSING) {
            alertManager("warning", "Zoom is disabled during image processing");
            return false;
        }

        if (scale < maxZoom) {
            scale += zoomStep;
            if (scale > maxZoom) scale = maxZoom;
            applyZoom();
        }
    });

    // Zoom Out
    $(document).on('click', '#btnZoomOUT', function () {
        if (IS_IMAGE_PROCESSING) {
            alertManager("warning", "Zoom is disabled during image processing");
            return false;
        }
        if (scale > 1) {
            scale -= zoomStep;
            if (scale < minZoom) scale = minZoom; // Prevent going below minZoom
            applyZoom();
        }
    });

    // ============================= Redirect Into Editor Page End =============================


    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');
    });

    // 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');
        }
    });

    // 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');
    });

    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-v' + version_code + '.exe';
    }else if(os_name == 'Linux'){
        URL = 'https://slazzer-desktop-app.s3.ap-south-1.amazonaws.com/slazzer-app_v' + version_code + '_amd64.deb';
    }else if(os_name == 'Mac'){
        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_v3.1.1.dmg';
    }
    $('#download-desktop-app').attr('href', URL);
    if(window.location.pathname == LANG_CODE+'/windows-mac-linux'){
        $('#download-slazzer-app').attr('href', 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', '');

        $('.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 load_image_from_cookie() {
        $("#main_image_container").html('');
        show_images_on_page()
    }

    $(document).on('change', '#input_user_image_upload', function (e) {
        var autogenID = createAutogeneratedID()
        if (e.target.files != null && e.target.files.length > 0) {
            var source_image = this.files[0];
            var source_image_name = source_image.name;
            if(!uploadImageFormatCheck(source_image_name)){
                var msg = 'Please upload a valid image file. ex: jpg, png, jpeg, webp';
                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 true
            }

            ORIGINAL_UPLOADED_IMAGE = source_image;
            if (is_file_size_exceed(source_image)){
                removeImageDiv(autogenID)
                return;
            }
            let BlobUrl = URL.createObjectURL(source_image);
            imageUrlToBase64(BlobUrl)
            .then(base64 => {
                addImageIntoLeftMenu(base64);
            })
            .catch(err => {
                alertManager("error", "Something went wrong. Please try again");
            });
        }else{
            alertManager("error", "Something went wrong. Please try again");
        }
    });

    $(document).on('click', '.uploadExistingImage', function (e) {
        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', '#uploadANewImage', function(e){
        if(IS_IMAGE_PROCESSING){
            alertManager("warning", "Last image in progress. Start a new image only after this one is complete");
            return false;
        }else{
            $('#inputUploadANewFile').trigger('click');
        }
    });
    $(document).on('change', '#inputUploadANewFile', function(e){
        if (e.target.files != null && e.target.files.length > 0) {
            var source_image_path = e.target.files[0];
            ORIGINAL_UPLOADED_IMAGE = source_image_path;

            fileToBase64(e.target.files[0])
            .then(base64 => {
                $("#inputUploadANewFile").val('');
                addImageIntoLeftMenu(base64)
            })
            .catch(err => console.error('Error:', err));
        }else{
            console.log('e.target.files'+ e.target.files);
        }
    });


    $('.image-drag-drop').on('drop', function (e) {
        $('.showDragAndDropBackground').css("display", "none");
        if(IS_IMAGE_PROCESSING){
            alertManager("warning", "Last image in progress. Start a new image only after this one is complete");
            return false;
        }
        $(document).scrollTop(0);
        if (e.originalEvent.dataTransfer) {
            if (e.originalEvent.dataTransfer.files.length) {
                e.preventDefault();
                e.stopPropagation();
                let source_image = e.originalEvent.dataTransfer.files[0];
                let source_image_name = source_image.name;
                if(!uploadImageFormatCheck(source_image_name)){
                    var msg = 'Please upload a valid image file. ex: jpg, png, jpeg, webp';
                    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 true
                }

                ORIGINAL_UPLOADED_IMAGE = source_image;

                fileToBase64(source_image)
                .then(base64 => {
                    addImageIntoLeftMenu(base64);
                })
                .catch(err => console.error('Error:', err));
            }
        }
    });

    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');

        global_source_image = source_image
        if (pathname != LANG_CODE+'/upload') {
            $(".main-container").css('display', 'none');
            $(".upload-container").css('display', '');
            $('#mainHeaderFeaturesDropdownWrapper').css('display', '');
        }

        $('#drag-drop-more-then-one').css('display', 'none');
        $('#imageUploadSection').css('display', '');
        $('.ImageUploadSection').addClass('image-upload-visible');
        imageUrlToBase64(source_image)
        .then(base64 => {
            addImageIntoLeftMenu(base64);
        })
        .catch(err => {
            alertManager("error", "Something went wrong. Please try again");
            revertPreviewImage()
        });
    }

    $('body').bind("paste", function(e){
        if(IS_IMAGE_PROCESSING){
            alertManager("warning", "Last image in progress. Start a new image only after this one is complete");
            return false;
        }

        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];
            var source_image_name = source_image.name;
            if(!uploadImageFormatCheck(source_image_name)){
                var msg = 'Please upload a valid image file. ex: jpg, png, jpeg, webp';
                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 true
            }

            if(source_image == undefined){
                alert("Please paste a valid image");
            }else{
                fileToBase64(source_image)
                .then(base64 => {
                    ORIGINAL_UPLOADED_IMAGE = source_image;
                    addImageIntoLeftMenu(base64);
                })
                .catch(err => {
                    alertManager("error", "Something went wrong. Please try again");
                });
            }
        }
    });

    $(document).on("click", ".btn_like", function () {
        updateLikeDislikeImageObjectFromHistory(true);
    });

    $(document).on("click", ".btn_dislike", function () {
        var autogenerate_id = IMAGE_HISTORY_ACTIVATE_AG_ID;
        var image_url = getDataFromHistory("original_image");
        $('#btn_contribute_image').attr('data-img-url', image_url);
        $('#btn_contribute_image').attr('a-id', IMAGE_HISTORY_ACTIVATE_AG_ID);
        $('#btn_no_contribute_image').attr('a-id', IMAGE_HISTORY_ACTIVATE_AG_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, IMAGE_HISTORY_ACTIVATE_AG_ID)
            $('#rate_us_'+IMAGE_HISTORY_ACTIVATE_AG_ID).css('display', 'none');
            $('#thank_you_'+IMAGE_HISTORY_ACTIVATE_AG_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 base_url = window.location.pathname;
        $.cookie('_slzPageURL_', base_url, { expires: 1 / 24, path: '/' });
        window.location.href = '/login';
    });

    $(document).on("click", ".check_click_signup", function () {
        var base_url = window.location.pathname;
        $.cookie('_slzPageURL_', base_url, { expires: 1 / 24, path: '/' });
        window.location.href = '/signup';
    });

    $(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 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) {
            $('#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
    console.log("File size exceed55");
    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();
    console.log("File size exceed5");
    if(is_existingImage){
        formdata.append("image_url", source_image);
    }else{
        if(ORIGINAL_UPLOADED_IMAGE != null){
            console.log("File size exceed");
            if (is_file_size_exceed(ORIGINAL_UPLOADED_IMAGE)){
              console.log("File size exceed2");
                $('.drag-drop').hide();
                return;
            }
            formdata.append("source_image_file", ORIGINAL_UPLOADED_IMAGE);
        }else{
            alertManager("Original image not found. Please upload the image again.");
            return false;
        }

//        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', '');
            $('#textAfter').removeClass('active');
            $('#textBefore').removeClass('active');
        },
        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) {
    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 showMobileAppPopup(){
    if($.cookie('_mobile_app_popup') == undefined){
        $('#divGetMobileApp').addClass('show');
    }
}

function showCreditInfo(URL="/get_total_credit") {
    $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken)
                }
            }
        });
    $.ajax({
        url: URL,
        method: 'GET',
        success: function(data) {
            CREDIT_COUNT = parseInt(data);
        },
        error: function(xhr, status, error) {

        }
    });
}

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);
}



// ======================== NEW UPLOAD DESIGN JS ========================
function addImageIntoLeftMenu(base64Image){
    isImageCorrupted(base64Image).then(isCorrupted => {
        if (!isCorrupted) {
            $('#drag-drop-more-then-one').css('display', 'none');
            $('#imageUploadSection').css('display', '');
            $('#ImageUploadSection').addClass('image-upload-visible');

            if(window.location.pathname == '/'){
                $(".main-container").css('display', 'none');
                $(".upload-container").css('display', '');
            }

            let autoGenIDv2 = createAutogeneratedID()
            $('#previewMainImage').attr('src', base64Image);
            let HTML = `<li id="sidePanelImage_`+autoGenIDv2+`">
                            <button type="button" class="sidePanelImage active" ag-data="`+autoGenIDv2+`">
                                <img src="proxy.php?url=https%3A%2F%2Fslazzer.com%2F%60%2Bbase64Image%2B%60">
                            </button>
                        </li>`;
            $('.sidePanelImage').removeClass('active');
            $('#imageEditorSidePanel li:first').after(HTML);
            NEW_EDITOR_ORIGINAL_BASE64_IMG = base64Image;
            manageImageAfterUpload(base64Image, autoGenIDv2);
        } else {
            alertManager("error", "The uploaded image is corrupted. Please try with a different image.");
            loaderManager()
            isImageProcessing = false;
        }
    });
}

async function imageUrlToBase64(imageUrl) {
  const response = await fetch(imageUrl);
  const blob = await response.blob();

  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result); // Base64 string
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

async function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);  // Base64 string
    reader.onerror = reject;
    reader.readAsDataURL(file); // Reads file as Base64
  });
}

function base64ToFile(base64String, filename="image.jpg") {

    const arr = base64String.split(',');
    const mimeMatch = arr[0].match(/:(.*?);/);
    const mime = mimeMatch ? mimeMatch[1] : 'application/octet-stream';
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
}


function manageImageAfterUpload(base64Img, autoGenIDv2){
    generateTokenV2(function(err, token) {
        if (!err) {
            resetZoom()
            uploadImageForProcess(token, base64Img, autoGenIDv2)
        }
    });
}

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

    $.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) {
            if (typeof callback === 'function') {
                callback(null, data.trust_token); // Pass token to callback
            }
        },
        error: function(xhr, status, error) {
            loaderManager()
            if (xhr.status === 429) {
                alert("Upload Limit Exceeded. You have uploaded 10 images in a minute. Please try again after 1 minute.");
                window.location.reload();
            }
            if (typeof callback === 'function') {
                callback(error || `Error ${xhr.status}: ${status}`);
            }
            isImageProcessing = false;
        }
    });
}

function uploadImageForProcess(token, source_image_base64, autoGenIDv2){
    let formdata = new FormData();
    formdata.append("autogenerate_id", autoGenIDv2);
//    formdata.append("source_image_file", base64ToFile(source_image_base64, "image.jpg"));
    const file = base64ToFile(source_image_base64, "image.jpg")
    if (!is_file_size_exceed(file)) {

    formdata.append("source_image_file", file);
  // Continue upload...
    }

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

    $('#downloadButtonContent').html("");
    $('#downloadButtonContent').css('display', 'none');
    $('#btnEditSection').css('display', 'none');
    $('#rateUsSection').css('display', 'none');
    $('#imageUploadSection').addClass('image-upload-visible');

    IS_IMAGE_PROCESSING = true;
    IMAGE_HISTORY_ACTIVATE_AG_ID_TEMP = autoGenIDv2;

    $.ajax({
        url: '/upload_image',
        type: 'POST',
        processData: false,
        contentType: false,
        data: formdata,
        xhr: function () {
            $(window).scrollTop(0);
            let xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    let current_progress = evt.loaded / evt.total;
                    current_progress = parseInt(current_progress * 100);
                }
            }, false);
            return xhr;
        },
        success: function (data) {
            loaderManager()
            IS_IMAGE_PROCESSING = false;
            isImageProcessing = false;
            uploadImageAfterProcess(data, autoGenIDv2)
        },
        error: function(qXHR, textStatus, errorThrown){
            IS_IMAGE_PROCESSING = false;
            isImageProcessing = false;
            loaderManager()
            if(qXHR.status == 429){
                alertManager("warning", "Upload Limit Exceeded. You have uploaded 10 images in a minute. Please try again after 1 minute.");
            }else{
                alertManager("error", "Something went wrong. Please try again later.");
            }

            revertPreviewImage()
        }
    });
}

function uploadImageAfterProcess(data, autoGenIDv2){
    var obj = JSON.parse(data);
    if(obj.status){
        IMAGE_HISTORY.push({"id": autoGenIDv2, "res": obj});
        IMAGE_HISTORY_ACTIVATE_AG_ID = autoGenIDv2;
        manageBeforeAfterImage('after');
        downloadDropdownItemsManger(autoGenIDv2)
        editDropdownItemsManger(autoGenIDv2)
        editLikeDislikeManger(autoGenIDv2)

        $('#btnEditSection').css('display', '');
        $('#downloadButtonContent').css('display', '');
        $('#rateUsSection').css('display', '');

        $('#textAfter').addClass('active');
        $('#textBefore').removeClass('active');
    }else{
        $('#downloadButtonContent').css('display', 'none');
        revertPreviewImage()
    }
}

function loaderManager(isShow=false){
    if(isShow){
        $('#previewMainImageLoader').css('display', '');
        $('#previewMainImageLoader01').css('display', '');
    }else{
        $('#previewMainImageLoader').css('display', 'none');
        $('#previewMainImageLoader01').css('display', 'none');
    }
}

function downloadDropdownItemsManger(autoGenIDv2){
    var obj = getDataFromHistory()

    let isShowFree = true;
    var isShowUnlockPro = CREDIT_COUNT < 1 ? true : false;
    let finalContent = previewDownloadItem(obj.preview_size_image_width, obj.preview_size_image_height, autoGenIDv2, isShowFree) +
                       hdDownloadItem(obj.full_size_image_width, obj.full_size_image_height, autoGenIDv2, isShowUnlockPro, obj.full_size_image_available);
    $('#downloadButtonContent').css("display", '');
    $('#downloadButtonContent').html(
        `<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Download
            <img src="proxy.php?url=https%3A%2F%2Fslazzer.com%2Fstatic%2Fimages%2Fupload%2Ficon-right-arrow.svg" alt="icon-right-arrow.svg">
        </button>
        <div class="dropdown-menu">
            <ul>
                `+finalContent+`
            </ul>
        </div>`
    );
}

function editDropdownItemsManger(autoGenIDv2){
    var EditPreview = `<a class="dropdown-item" id="btnPreviewEdit" href="javascript:void(0);">
                            <img src="proxy.php?url=https%3A%2F%2Fslazzer.com%2Fstatic%2Fimages%2FplayGround%2Ffluent_eye-16-filled.svg" alt="fluent_eye-16-filled.svg">
                            Edit preview
                       </a>`;

    var full_size_image_available = getDataFromHistory("full_size_image_available")
    if(full_size_image_available){
        var EditHD = `<a class="dropdown-item" href="javascript:void(0);" id="btnHDEdit">
                            <img src="proxy.php?url=https%3A%2F%2Fslazzer.com%2Fstatic%2Fimages%2Fupload%2Ficon-pro.svg" alt="icon-pro.svg">
                            Edit HD <i class="fa fa-info-circle cls_tooltip" id="tooltip_edit_e4257" data-toggle="tooltip"
                            data-placement="top" title=""  style="display: none;"
                            data-original-title="Please upload a higher resolution image or Edit the preview size image"></i>
                       </a>`;
    }else{
       var EditHD = "";
    }
    $('#editDropdownMenuContent').html(EditPreview + EditHD);
}

function editLikeDislikeManger(autoGenIDv2){
    $('#rateUsSection').css('display', '');
    var obj = getDataFromHistory("is_image_liked");
    if(obj){
        $('#rateUsSection').html(
            `<p>😊 Thank you for your valuable feedback</a></p>`
        );
    }else{
        $('#rateUsSection').html(
            `<li>
                Rate this result:
            </li>
            <li class="divLikeDislike">
                <a class="btn_like" href="javascript:void(0);" title="">
                    <img src="proxy.php?url=https%3A%2F%2Fslazzer.com%2Fstatic%2Fimages%2Fupload%2Fthumbsup.svg" alt="thumbsup.svg">
                </a>
            </li>
            <li class="divLikeDislike">
                <a class="btn_dislike" 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">
                </a>
            </li>`
        );
    }
}

function previewDownloadItem(w, h, autoGenIDv2, isShowMsg=true){
    let button = isShowMsg ? `<button type="button">Free</button>` : "";
    return `<li id="downloadFreeImage">
                <img src="proxy.php?url=https%3A%2F%2Fslazzer.com%2Fstatic%2Fimages%2FplayGround%2Ffluent_eye-16-filled.svg" alt="fluent_eye-16-filled.svg">
                <div>
                    <p>Preview</p>
                    <span>`+w+` × `+h+`</span>
                </div>
                `+button+`
            </li>`;
}

function hdDownloadItem(w, h, autoGenIDv2, isShowMsg=true, full_size_image_available=true){
    let button = isShowMsg ? `<button type="buttoon" class="btnBlue prodownload">`+(isShowMsg ? "Download" : "Unlock Pro")+`</button>`: "";
    if(full_size_image_available){
        return `<li id="downloadHDImage">
                    <span class="gradient" id="downloadHDButtonLoader" role="status" style="display:none;"></span>
                    <img src="proxy.php?url=https%3A%2F%2Fslazzer.com%2Fstatic%2Fimages%2FplayGround%2Fcrown_12629423+1.svg" alt="crown_12629423 1.svg">
                    <div>
                        <p>HD Quality</p>
                        <span>`+w+` × `+h+`</span>
                    </div>
                    `+button+`
                </li>`;
    }else{
        return `<li class="noPreview" id="`+(full_size_image_available ? 'downloadHDImage' : '')+`" class="`+(full_size_image_available ? '' : 'deactivate')+`" title="`+(full_size_image_available ? '' : 'HD image not available')+`">
                    <img src="proxy.php?url=https%3A%2F%2Fslazzer.com%2Fstatic%2Fimages%2Fupload%2Fno-image.svg" alt="no-image.svg">
                    <div>
                        <p>HD Quality</p>
                        <p>Image size too small</p>
                    </div>
                </li>`;
    }
}

function alertManager(alertType, message="Something went wrong"){
    if(alertType == 'success'){
        var alertClass = "alert-success";
    }else if(alertType == 'info'){
        var alertClass = "alert-info";
    }else if(alertType == 'warning'){
        var alertClass = "alert-danger";
    }else{
        var alertClass = "alert-danger";
    }
    $('.notification-alert').html(`<div class="alert `+alertClass+` alert-dismissible m-0 text-center">
                                    <a href="javascript:void(0);" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                                    <strong>`+message+`</strong>
                                </div>`);
    $(document).scrollTop(0);

    setTimeout(function () {
        $('.notification-alert').html('');
    }, 3000);

}


function downloadHdImageAPI(isEdit=false){
    checkUserAuthentication(function(isAuthenticated){
        if(!isAuthenticated){
            var msg = isEdit
                ? "Please login first before edit HD image."
                : "Please login first before download HD image.";
            $('#showLoginPopupMessage').html(msg);
            $('#LoginModal').modal('show');
            return false;
        }else{
            var imgObj = getDataFromHistory()
            if(imgObj.session_obj.is_image_downloaded == '0'){
                var image_url = imgObj['original_image'];
                var source_image_width = imgObj['preview_size_image_width'];
                var source_image_height = imgObj['preview_size_image_height'];
                var output_image_width = imgObj['full_size_image_width'];
                var output_image_height = imgObj['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", imgObj['session_obj']['is_image_downloaded']);
                formData.append("session_key", IMAGE_HISTORY_ACTIVATE_AG_ID + "_" + imgObj['session_obj']['current_time']);

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

                IS_IMAGE_PROCESSING = true;

                if(isEdit){
                    $('#editHDButtonLoader').css('display', '');
                    $('#btnEditSection').css('pointer-events', 'none');
                }else{
                    $('#downloadHDButtonLoader').css('display', '');
                    $('#downloadButtonContent').css('pointer-events', 'none');
                }

                $.ajax({
                    url: '/get_full_size_image',
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    data: formData,
                    success: function (data) {
                        IS_IMAGE_PROCESSING = false;
                        if(isEdit){
                            $('#editHDButtonLoader').css('display', 'none');
                            $('#btnEditSection').css('pointer-events', '');
                        }else{
                            $('#downloadHDButtonLoader').css('display', 'none');
                            $('#downloadButtonContent').css('pointer-events', '');
                        }

                        var obj = JSON.parse(data);
                        if(obj.status){
                            updateDownloadImageObjectFromHistory(obj.full_image_url)
                            if(isEdit){
                                showHDImageEditor(autogenerate_id)
                            }else{
                                hdImageDownload(obj.full_image_url)
                            }
                        }else{
                            if(obj.msg_category == "no_credit"){
                                alertManager("error", "You don't have enough credits. Please pay and try again.");
                                $('#PaymentModalImage').attr('src', image_url);
                                $('#PaymentModal').modal('show');
                            }else{
                                alertManager("error", obj.message);
                            }
                        }
                    },
                    error: function(qXHR, textStatus, errorThrown){
                        IS_IMAGE_PROCESSING = false;
                        if(isEdit){
                            $('#editHDButtonLoader').css('display', 'none');
                            $('#btnEditSection').css('pointer-events', '');
                        }else{
                            $('#downloadHDButtonLoader').css('display', 'none');
                            $('#downloadButtonContent').css('pointer-events', '');
                        }
                    }
                });
            }
            else{
                if(isEdit){
                    showHDImageEditor(autogenerate_id)
                }else{
                    hdImageDownload(imgObj.session_obj.hd_img_path)
                }
            }
        }
    });
}


function showPreviewImageEditor(autogenerate_id) {
    var originalImageOutputURL = getDataFromHistory("original_image");
    var previewImageOutputURL = getDataFromHistory("preview_size_output_image");
    $('#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 = originalImageOutputURL;
    OUTPUT_IMAGE_BASE64 = previewImageOutputURL;
    $('#upload_preview_modal_close_btn').click();
    $('#edit_image').modal('show');
    $('.sp-preview-inner').css('background-color', 'transparent');
}

function showHDImageEditor(autogenerate_id) {
    var originalImageOutputURL = getDataFromHistory("original_image");
    var hdImageOutputURL = getDataFromHistory("hd_img_path", true);
    $('#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 = originalImageOutputURL;
    OUTPUT_IMAGE_BASE64 = hdImageOutputURL;
    $('#upload_preview_modal_close_btn').click();
    $('#edit_image').modal('show');
    $('.sp-preview-inner').css('background-color', 'transparent');
}

function getDataFromHistory(data_type="", innerData=false){
    for(var i=0; i<IMAGE_HISTORY.length; i++){
        if(IMAGE_HISTORY[i].id == IMAGE_HISTORY_ACTIVATE_AG_ID){
            if(data_type == ""){
                return IMAGE_HISTORY[i].res;
            }else{
                if(!innerData){
                    return IMAGE_HISTORY[i].res[data_type];
                }else{
                    return IMAGE_HISTORY[i].res.session_obj[data_type];
                }
            }
        }
    }
    return null;
}

function updateDownloadImageObjectFromHistory(hd_img_path){
    for(var i=0; i<IMAGE_HISTORY.length; i++){
        if(IMAGE_HISTORY[i].id == IMAGE_HISTORY_ACTIVATE_AG_ID){
            IMAGE_HISTORY[i]['res']['session_obj']['is_image_downloaded'] = "1";
            IMAGE_HISTORY[i]['res']['session_obj']['hd_img_path'] = hd_img_path;
            break;
        }
    }
}

function updateLikeDislikeImageObjectFromHistory(isLike=true){
    for(var i=0; i<IMAGE_HISTORY.length; i++){
        if(IMAGE_HISTORY[i].id == IMAGE_HISTORY_ACTIVATE_AG_ID){
            if(isLike){
                IMAGE_HISTORY[i]['res'].is_image_liked = "1";
                $('#rateUsSection').html(
                    `<p>😊 Thank you for your valuable feedback</a></p>`
                );
            }else{
                IMAGE_HISTORY[i]['res'].is_image_liked = "0";
            }
            break;
        }
    }
}

function hdImageDownload(HD_IMAGE_PATH){
    var img_name_arr = HD_IMAGE_PATH.split('/');
    var image_name = img_name_arr[img_name_arr.length - 1];
    var a = document.createElement('a');
    a.href = HD_IMAGE_PATH;
    a.download = image_name;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

function manageBeforeAfterImage(beforeAfterStr){
    if(beforeAfterStr == 'before'){
        var obj = getDataFromHistory()
        if(obj){
            var w = obj.preview_size_image_width;
            var h = obj.preview_size_image_height;
            BEFORE_AFTER_STRING = 'before';
            showImageForPreviewWithCustomHeightAndWidth(obj.original_image, w, h);
        }
    }else{
        var obj = getDataFromHistory()
        if(obj){
            var w = obj.preview_size_image_width;
            var h = obj.preview_size_image_height;
            BEFORE_AFTER_STRING = 'after';
            showImageForPreviewWithCustomHeightAndWidth(obj.preview_size_output_image, w, h);
        }
    }
}

// Function to apply zoom
function applyZoom() {
    $("#previewMainImage").css({
        "transform": `scale(${scale})`,
        "transform-origin": "center center", // Zoom from center
        "transition": "transform 0.3s ease"  // Smooth animation
    });
}

function resetZoom(){
    scale = 1;
    zoomStep = 0.1;
    maxZoom = 3;
    minZoom = 0.5;
    $("#previewMainImage").removeAttr("style");
}

function checkUserAuthentication(callback) {
    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: '/user-authentication',
        type: 'POST',
        processData: false,
        contentType: false,
        data: formdata,
        success: function(data) {
            if (typeof callback === 'function') {
                callback(data.is_login);
            }
        },
        error: function(xhr, status, error) {
            callback(false);
        }
    });
}

function isImageCorrupted(source_image_base64) {
    return new Promise((resolve) => {
        try {
            const img = new Image();
            img.onerror = function () {
                resolve(true);
            };
            img.onload = function () {
                resolve(false);
            };
            img.src = source_image_base64;
        } catch (e) {
            resolve(true);
        }
    });
}

function showImageForPreviewWithCustomHeightAndWidth(imageUrl, newWidth, newHeight){
    fetch(imageUrl)
    .then(response => response.blob())
    .then(blob => {
      let reader = new FileReader();
      reader.onloadend = function () {
        $('#previewMainImage')
          .attr('src', reader.result)
//          .css({
//            'width': newWidth + 'px',
//          });

//          $('#previewMainImage')
//          .attr('src', reader.result)
//          .css({
//            'width': newWidth + 'px',
//            'height': newHeight + 'px'
//          });
      };
      reader.readAsDataURL(blob);
    })
    .catch(error => {
      alert("Failed to load image. Check the URL.");
    });
}

async function imageUrlToBlobUrl(imageUrl) {
  const response = await fetch(imageUrl);

  if (!response.ok) {
    throw new Error(`Failed to fetch image: ${response.status} ${response.statusText}`);
  }

  const blob = await response.blob();
  const blobUrl = URL.createObjectURL(blob); // ✅ Create a temporary Blob URL
  return blobUrl;
}

function revertPreviewImage(){
    NEW_EDITOR_ORIGINAL_BASE64_IMG = null;
    BEFORE_AFTER_STRING = 'after';
    ORIGINAL_IMAGE_BLOB = null;
    $('#previewMainImage').attr('src', '');
    if(IMAGE_HISTORY.length == 0){
        IMAGE_HISTORY_ACTIVATE_AG_ID = null;
        $('#imageUploadSection').css('display', 'none');
        $('#drag-drop-more-then-one').css('display', '');
        $('#imageEditorSidePanel li').not(':first').remove();
    }else{
        var lastImageObj = IMAGE_HISTORY[IMAGE_HISTORY.length - 1];
        $('#sidePanelImage_' + IMAGE_HISTORY_ACTIVATE_AG_ID_TEMP).remove();
        IMAGE_HISTORY_ACTIVATE_AG_ID = lastImageObj.id;
        $('#sidePanelImage_' + IMAGE_HISTORY_ACTIVATE_AG_ID).find('button').click()
        manageBeforeAfterImage('after');

//        $('#previewMainImage').attr('src', lastImageObj.res.preview_size_output_image);
//        downloadDropdownItemsManger(IMAGE_HISTORY_ACTIVATE_AG_ID)
//        editDropdownItemsManger(IMAGE_HISTORY_ACTIVATE_AG_ID)
//        editLikeDislikeManger(IMAGE_HISTORY_ACTIVATE_AG_ID)
    }
}

   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 uploadImageFormatCheck(image_name){
    var ext = image_name.split('.').pop().toLowerCase();
    if($.inArray(ext, ['jpg', 'jpeg', 'png', 'webp']) == -1) {
        return false;
    }else{
        return true;
    }
}