
jQuery(function($) {
    'use strict';
    $(document).ready(function() {
        //Has come from enqueue of frontend page loader
        var ajax_url = PSSG_DATA.ajax_url;
        var ajaxurl = PSSG_DATA.ajax_url;
        var sync_btn_interval = PSSG_DATA.sync_btn_interval;
        var mainFormSelect = 'form#pssg-main-configuration-form';
        $(document.body).on('click','#pssg-syncronize-button',function(e){
            e.preventDefault();
            clearSheet();
            let mainWrapper = $(this).closest('#setup-wizard-section-wrapper');
            

            let btnIcon = $(this).find('span>i');
            let btnTextCont = $(this).find('strong.sync-btn-txt');
            let btnPrevText = btnTextCont.text();
            let btnCompleteText = PSSG_DATA.text.sync_done_msg;//Sync Done
            btnTextCont.html(PSSG_DATA.text.pause); //Pause
            btnIcon.addClass('animate-spin');
            let messageBox = $('.message-showing-area');
            messageBox.html(PSSG_DATA.text.syncing_msg); 

            let sync_status = mainWrapper.attr('data-sync_status');
            if( sync_status == 'playing' ){
                btnTextCont.html('Run'); 
                mainWrapper.attr('data-sync_status', 'paused');
                btnIcon.removeClass('animate-spin');
                messageBox.html(PSSG_DATA.text.paused); //Paused
                return;
            }else if( sync_status == 'paused' ){
                btnTextCont.html(PSSG_DATA.text.pause); //Pause
                mainWrapper.attr('data-sync_status', 'playing');
                return;
            }

            var errorsDetailsArea = $('.errors-details-area');

            mainWrapper.attr('data-sync_status', 'playing'); //Syncronizing...
            let countBox = $(this).find('.product_count');
            let paged = 1;
            let limit = $(this).data('limit');
            let nonce = $(this).data('nonce');
            let per_page = $(this).data('per_page');
            var syncronizeInterVal = setInterval(function(){

                let currentStatus = mainWrapper.attr('data-sync_status');
                console.log(currentStatus);
                if(currentStatus !== 'playing'){
                    messageBox.html(PSSG_DATA.text.paused); //Paused
                    return;
                }
                
                // messageBox.prepend('...');
                $.ajax({
                    type: 'POST',
                    url: ajax_url,
                    dataType: 'json',
                    data: {
                        action: 'pssg_syncronize_products',
                        paged: paged,
                        nonce: nonce
                    },
                    beforeSend: function(){
        
                    },
                    complete: function(status){
                        $(document.body).trigger('pssg_syncronize_complete',status);
                    },
                    success: function (response) {
                        
                        paged++;
                        let count = response.count;
                        countBox.text(count);
                        console.log(response);
                        if(response.status == 'failed' && response.error == 'ProductEmpty'){
                            messageBox.html(PSSG_DATA.text.all_syncronized_msg);    //All Syncronized
                            btnTextCont.html(btnCompleteText);
                            clearInterval(syncronizeInterVal);
                            mainWrapper.attr('data-sync_status', 'waiting');
                            btnIcon.removeClass('animate-spin');
                            return;
                        }else if(response.status == 'failed'){
                            if(response.error == 'LimitCross'){
                                messageBox.html(PSSG_DATA.text.sync_limit_crossed); //Done and Limit Crossed!
                            }else{
                                messageBox.html(PSSG_DATA.text.check_error_msg); //Check following Error

                            }

                            //Errors handle Area
                            
                            errorsDetailsArea.find('.error-code').html(PSSG_DATA.text.response_error_code + response.error); //Error Code: 
                            $('.errors-details-area.errors-details-area p.error-code').append(' <a href="#"> Make Unlimited</a>');
                            var errorsListHtml = '';
                            $(response.errors).each(function(index,thisError){
                                errorsListHtml += "<p class='each-errors-item each-errors-" + index + "'>" + thisError + "</p>";
                            });
                            errorsDetailsArea.find('.errors-lists').html(errorsListHtml);

                            // messageBox.html("");
                            btnTextCont.html(btnPrevText);
                            clearInterval(syncronizeInterVal);
                            mainWrapper.attr('data-sync_status', 'waiting');
                            btnIcon.removeClass('animate-spin');
                            return;
                        }

                        //Only when from Server Response
                        if(response.status == 'success' && response.hasOwnProperty('data_response')){
                            let data_response = response.data_response;

                            if (data_response.hasOwnProperty('error')) {
                                let error = data_response.error;
                                let fullError = 'code: ' + error.code + ' | msg:' + error.message + ' | msg:' + error.status;
                                //Api or gConnection Error
                                fullError += "\n" + PSSG_DATA.text.check_connection_msg; //Please check connection again!
                                messageBox.html('Connection Error');
                                errorsDetailsArea.find('.error-code').html('GoogleSheet Error Code: ' + error.code);
                                let error_list = '<p class="error-code">- ' + error.message + '</p><p class="error-code">- ' + error.status + '</p>';
                                //not console, need to use UI at admin.php?page=pssg-api-logs
                                error_list += '<p class="error-code">See <a href="admin.php?page=pssg-api-logs" target="_blank">API Logs</a> for details.</p>';
                                errorsDetailsArea.find('.errors-lists').html(error_list);
                                alert(fullError);
                                btnTextCont.html(btnPrevText);
                                clearInterval(syncronizeInterVal);
                                mainWrapper.attr('data-sync_status', 'waiting');
                                btnIcon.removeClass('animate-spin');
                                return;
                            }else if(data_response.hasOwnProperty('updatedRows')){
                                
                                let succMsg = PSSG_DATA.text.syncing_msg;
                                messageBox.html(succMsg);

                                if( ( count + per_page ) > limit){
                                    messageBox.html( PSSG_DATA.text.sync_done_msg );
                                    btnIcon.removeClass('animate-spin');
                                    clearInterval(syncronizeInterVal);
                                    mainWrapper.attr('data-sync_status', 'waiting');
                                    btnTextCont.html(btnCompleteText);
                                }
                            }
                        }
                        $(document.body).trigger('pssg_syncronize_response',response);
                    },
                    error:function(error){

                        btnTextCont.html(btnPrevText);       
                        messageBox.html('ErrorOnSyncronize');
                        btnIcon.removeClass('animate-spin');
                        clearInterval(syncronizeInterVal);
                        mainWrapper.attr('data-sync_status', 'waiting');
                        btnIcon.removeClass('animate-spin');
                        console.log(error);
                        $(document.body).trigger('pssg_syncronize_error',error);
                    }
                });
            }, sync_btn_interval); //sync_btn_interval = 5000 (mili seconds)
            
        });

        $(document.body).on('click','#pssg-send-apps-script',function(e){
            e.preventDefault();

            let btnIcon = $(this).find('span>i');
            let btnPrevIconClass = btnIcon.attr('class');
            let btnTextCont = $(this).find('strong.script-send-btn-txt');
            let btnPrevText = btnTextCont.text();
            let btnCompleteText = "Script Updated";
            btnTextCont.html("Sending Script..");
            btnIcon.addClass('pssg_icon-spin5');
            btnIcon.addClass('animate-spin');
            let messageBox = $('.send-script-message-area');
            messageBox.html('Sending Script...');

            $.ajax({
                type: 'POST',
                url: ajax_url,
                dataType: 'json',
                data: {
                    action: 'pssg_send_script',
                },
                beforeSend: function(){
    
                },
                complete: function(){
                    btnTextCont.html(btnCompleteText);
                    btnIcon.removeClass('animate-spin');
                    btnIcon.removeClass('pssg_icon-spin5');
                    btnIcon.addClass(btnPrevIconClass);
                },
                success: function (response) {
                    
                    console.log(response);
                    

                    //Only when from Server Response
                    if(response.status == 'success' && response.hasOwnProperty('data_response')){
                        let data_response = response.data_response;

                        if (data_response.hasOwnProperty('error')) {
                            let error = data_response.error;
                            let fullError = 'code: ' + error.code + ' | msg: ' + error.message + ' | msg: ' + error.status;
                            //Api or gConnection Error
                            fullError += "\nPlease check connection again.";
                            messageBox.html(fullError);

                            alert(fullError);
                            console.log(fullError);
                            btnTextCont.html(btnPrevText);
                            btnIcon.removeClass('animate-spin');
                            return;
                        }else{
                            messageBox.html('Script Updated');
                            
                            btnTextCont.html(btnCompleteText);
                            btnIcon.removeClass('animate-spin');
                            btnIcon.removeClass('pssg_icon-spin5');
                            btnIcon.addClass(btnPrevIconClass);
                            alert("Script Updated");
                        }
                    }else if(response == 0 || response == '0'){
                        
                        messageBox.html('Script Updated');
                            
                        btnTextCont.html(btnCompleteText);
                        btnIcon.removeClass('animate-spin');
                        btnIcon.removeClass('pssg_icon-spin5');
                        btnIcon.addClass(btnPrevIconClass);
                        alert("Script Updated");
                    }
                    
                },
                error:function(errResponse){
                    console.log(errResponse);
                    btnTextCont.html(btnPrevText);       
                    messageBox.html('ErrorOnSendScript');
                    btnIcon.removeClass('pssg_icon-spin5');
                    btnIcon.removeClass('animate-spin');
                    btnIcon.addClass(btnPrevIconClass);
                }
            });

        });

        function syncSheet( nonce ){
            let paged = 1;
            var syncronizeInterVal = setInterval(function(){
                $.ajax({
                    type: 'POST',
                    url: ajax_url,
                    dataType: 'json',
                    data: {
                        action: 'pssg_syncronize_products',
                        paged: paged,
                        nonce: nonce
                    },
                    beforeSend: function(){
        
                    },
                    complete: function(status){
                        $(document.body).trigger('pssg_syncsheet_complete',status);
                    },
                    success: function (response) {
                        paged++;
                        console.log("Syncronizing...");
                        if(response.status == 'failed'){
                            console.log('Sync Exited');
                            clearInterval(syncronizeInterVal);
                            return;
                        }
                        $(document.body).trigger('pssg_syncsheet_response',response);
                    },
                    error:function(error){
                        console.log(error);
                        clearInterval(syncronizeInterVal);
                        $(document.body).trigger('pssg_syncsheet_response',error);
                    }
                });
            }, sync_btn_interval); 
            
        }

        function clearSheet(){
            $.ajax({
                type: 'POST',
                url: ajax_url,
                dataType: 'json',
                data: {
                    action: 'pssg_cleared_sheet',
                },
                beforeSend: function(){
    
                },
                complete: function(){
                },
                success: function (response) {
                    console.log('Sheet Cleared');
                    console.log(response);
                    $(document.body).trigger('pssg_clear_sheet_response',response);
                    
                },
                error:function(error){
                    console.log(error);
                }
            });
        }

        $(document.body).on('pssg_config_submit_response',function(e,response){
            //Currently Disabled
            return;
            let clear_sheet = response.clear_sheet;
            let again_sync = response.again_sync;
            let nonce = response.data.nonce;

            if( clear_sheet ){
                clearSheet();
            }
            if( again_sync ){
                setTimeout(function(){
                    syncSheet(nonce);
                }, sync_btn_interval);
            }
            
        });

        $(document.body).on('click','#pssg-clear-sheet-button',function(e){
            e.preventDefault();

            var conf = confirm(PSSG_DATA.text.delete_sheet); //Are you sure!\nWant to Destroy Sheet data.\n OK or Cancel.
            if(!conf){
                return;
            }

            let btnIcon = $(this).find('span>i');
            let btnTextCont = $(this).find('strong.delete-btn-txt');
            let btnPrevText = btnTextCont.text();
            let btnCompleteText = PSSG_DATA.text.sheet_clear;                //Sheet Cleared
            btnTextCont.html(PSSG_DATA.text.deleting_msg);                   //Deleteing..
            btnIcon.addClass('animate-spin');
            let messageBox = $('.message-showing-area');
            messageBox.html(PSSG_DATA.text.deleting_msg);                    //Deleting...

            $.ajax({
                type: 'POST',
                url: ajax_url,
                dataType: 'json',
                data: {
                    action: 'pssg_cleared_sheet',
                },
                beforeSend: function(){
    
                },
                complete: function(){
                    // btnTextCont.html(btnCompleteText);
                    btnIcon.removeClass('animate-spin');
                },
                success: function (response) {
                    console.log(response);
                    if(response.status == 'failed'){
                        //Errors handle Area
                        var errorsDetailsArea = $('.errors-details-area');
                        errorsDetailsArea.find('.error-code').html(PSSG_DATA.text.esponse_error_code + response.error);        //Error Code:
                        var errorsListHtml = '';
                        $(response.errors).each(function(index,thisError){
                            errorsListHtml += "<p class='each-errors-item each-errors-" + index + "'>" + thisError + "</p>";
                        });
                        errorsDetailsArea.find('.errors-lists').html(errorsListHtml);

                        // messageBox.html("");
                        btnTextCont.html(btnPrevText);
                        btnIcon.removeClass('animate-spin');
                        return;
                    }

                    //Only when from Server Response
                    if(response.status == 'success' && response.hasOwnProperty('data_response')){
                        let data_response = response.data_response;

                        if (data_response.hasOwnProperty('error')) {
                            let error = data_response.error;
                            let fullError = 'code: ' + error.code + ' | msg: ' + error.message + ' | msg: ' + error.status;
                            //Api or gConnection Error
                            fullError += "\n" + PSSG_DATA.text.check_connection_msg; //Please check connection again
                            messageBox.html(fullError);

                            alert(fullError);
                            console.log(fullError);
                            btnTextCont.html(btnPrevText);
                            btnIcon.removeClass('animate-spin');
                            return;
                        }else{
                            messageBox.html(PSSG_DATA.text.sheet_clear_msg); //Sheet has Cleared
                            
                            btnTextCont.html(btnPrevText);
                            btnIcon.removeClass('animate-spin');
                            alert(PSSG_DATA.text.sheet_clear_msg); //Sheet has Cleared
                        }
                    }else if(response == 0 || response == '0'){
                        
                        messageBox.html(PSSG_DATA.text.sheet_clear_msg); //Sheet has Cleared
                            
                        btnTextCont.html(btnPrevText);
                        btnIcon.removeClass('animate-spin');
                        alert(PSSG_DATA.text.sheet_clear_msg); //
                    }
                    $(document.body).trigger('pssg_clear_sheet_response',response);
                },
                error:function(error){

                    btnTextCont.html(btnPrevText);       
                    messageBox.html('ErrorOnDelete');
                    btnIcon.removeClass('animate-spin');
                    btnIcon.removeClass('animate-spin');
                    $(document.body).trigger('pssg_clear_sheet_error',error);
                }
            });

            
        });

        $(document.body).on('change','form#pssg-other-settings-form',function(event){
            var lastChangedElement = event.target;
            let lastParentDiv = $(event.target).closest('.pssg-field-wrapper-single');
            lastParentDiv.find('i.last-changed-element').remove();
            lastParentDiv.prepend('<i class="last-changed-element pssg_icon-spin5 animate-spin"></i>');

            $(this).submit();
        });
        $(document.body).on('change','form#pssg-main-configuration-form',function(event){
            var lastChangedElement = event.target;
            let lastParentDiv = $(event.target).closest('.pssg-field-wrapper-single');
            lastParentDiv.find('i.last-changed-element').remove();
            lastParentDiv.prepend('<i class="last-changed-element pssg_icon-spin5 animate-spin"></i>');
            var currentInput = lastParentDiv.find('input');
            currentInput.removeClass('pssg-error-empty-input');
            currentInput.closest('.pssg-field-wrapper-single').removeClass('pssg-empty-input-wrapper');
            currentInput.closest('label.switch').removeClass('pssg-empty-checkbox');
            $(this).submit();
        });
        $(document.body).on('submit', 'form#pssg-main-configuration-form', function (e){
            e.preventDefault();
            let submitBtn = $(this).find('button.configure_submit');
            let submitBtnTxtObj = submitBtn.find('strong.form-submit-text');
            let submitBtnPrevTxt = submitBtnTxtObj.text();
            let submitBtnInForm = submitBtn.not('.float-btn');
            let submitBtnIcon = submitBtn.find('span i');
            let submitBtnPrevIcon = submitBtnIcon.attr('class');
            submitBtnTxtObj.text(PSSG_DATA.text.saving_msg);                                  //Saving...
            submitBtnIcon.attr('class', 'pssg_icon-spin5 animate-spin');
            // submitBtnIcon.attr('class', 'wpt-floppy');
            

            
            var formElement = $(this);
            // Parse serialized data and convert to an object
            var formData = generateFormData( formElement );
            
            
                console.log('formData');
                console.log(formData);
                $(document.body).trigger('pssg_setup_wizard_formdata',formData);
            // AJAX request
            $.ajax({
                type: 'POST',
                url: ajaxurl, // You need to define this in your PHP or localize it
                data: {
                    action: 'pssg_setting_wizard_submit', // This is the WordPress AJAX action hook
                    data: formData
                },
                complete:function(){
                    submitBtnTxtObj.text(submitBtnPrevTxt);
                    submitBtnIcon.attr('class', submitBtnPrevIcon);
                    submitBtnIcon.removeClass('animate-spin');

                    let lastChangeEl = $('i.last-changed-element');
                    if(lastChangeEl.hasClass('animate-spin')){
                        lastChangeEl.addClass('pssg_icon-ok-circle').removeClass('pssg_icon-spin5').removeClass('animate-spin');
                    }
                    setTimeout(function(){
                        lastChangeEl.fadeOut();
                    },1000);
                    
                },
                success: function(response) {

                    
                    // console.log(response);
                    
                    try{
                        submitDataHandle(response);
                        //Errors Handle and organized
                        submitErrorsHandle(response);

                    }catch(error){
                        console.log(error);

                    }
                    $(document.body).trigger('pssg_setup_wizard_response',response);
                    
                },
                error: function(error) {
                    // Handle errors
                    console.log(error.responseText);
                }
            });

            
        });

        //For Setting page or other setting configuration page
        $(document.body).on('submit', 'form#pssg-other-settings-form', function (e){
            e.preventDefault();
            let submitBtn = $(this).find('button.configure_submit');
            let submitBtnTxtObj = submitBtn.find('strong.form-submit-text');
            let submitBtnPrevTxt = submitBtnTxtObj.text();
            let submitBtnInForm = submitBtn.not('.float-btn');
            let submitBtnIcon = submitBtn.find('span i');
            let submitBtnPrevIcon = submitBtnIcon.attr('class');
            submitBtnTxtObj.text(PSSG_DATA.text.saving_msg);                                  //Saving...
            submitBtnIcon.attr('class', 'pssg_icon-spin5 animate-spin');

            var formElement = $(this);
            // Parse serialized data and convert to an object
            var formData = generateFormData( formElement );
                console.log(formData);
                $(document.body).trigger('pssg_config_submit_formdata',formData);
            // AJAX request
            $.ajax({
                type: 'POST',
                url: ajaxurl, // You need to define this in your PHP or localize it
                data: {
                    action: 'pssg_configure_form_submit', // This is the WordPress AJAX action hook
                    data: formData
                },
                complete:function(status){
                    submitBtnTxtObj.text(submitBtnPrevTxt);
                    submitBtnIcon.attr('class', submitBtnPrevIcon);
                    submitBtnIcon.removeClass('animate-spin');

                    let lastChangeEl = $('i.last-changed-element');
                    if(lastChangeEl.hasClass('animate-spin')){
                        lastChangeEl.addClass('pssg_icon-ok-circle').removeClass('pssg_icon-spin5').removeClass('animate-spin');
                    }
                    setTimeout(function(){
                        lastChangeEl.fadeOut();
                    },1000);
                    $(document.body).trigger('pssg_config_submit_complete',status);
                },
                success: function(response) {
                    $(document.body).trigger('pssg_config_submit_response',response);
                    console.log(response);
                    
                },
                error: function(error) {
                    $(document.body).trigger('pssg_config_submit_error',error);
                    // Handle errors
                    console.log(error.responseText);
                }
            });

            
        });

        function generateFormData( formElement ){
            // Serialize form data
            var serializedFormData = formElement.serialize();

            // Parse serialized data and convert to an object
            var formData = {};
            
            serializedFormData.split('&').forEach(function(pair) {
                pair = pair.split('=');
                var formKey = pair[0];
                var formVal = decodeURIComponent(pair[1] || '');
                
                formKey = decodeURIComponent(formKey) || '';

                // Handle array values
                if (/\[\]$/.test(formKey)) {
                    formKey = formKey.replace('[]', ''); // Remove [] from the key
                    formData[formKey] = formData[formKey] || [];
                    formData[formKey].push(formVal);
                } else if (/\[.*?\]/.test(formKey)) {
                    // Handle nested arrays
                    var keys = formKey.match(/([^\[\]]+)/g);
                    var lastKey = keys.pop();

                    var currentObj = formData;
                    keys.forEach(function(key) {
                        currentObj[key] = currentObj[key] || {};
                        currentObj = currentObj[key];
                    });

                    currentObj[lastKey] = formVal;
                } else {
                    formData[formKey] = formVal;
                }
            });

            return formData;
        }

        function submitDataHandle(response){
            let errors = response.errors;
            let data = response.data;
            let sheet_url = data.sheet_url;
            let checkout_sheet_url = $('.checkout-sheet-url');
            if(! errors.hasOwnProperty('sheet_url')){
                checkout_sheet_url.attr('href', sheet_url).show();
                checkout_sheet_url.html(PSSG_DATA.text.checkout_sheet);  //Checkout your Sheet
            }else{
                checkout_sheet_url.attr('href', 'https://docs.google.com/spreadsheets/#saiful');
                checkout_sheet_url.html(PSSG_DATA.text.create_sheet); //Create Sheet
            }
        }
        function submitErrorsHandle(response){
            let syncroWrapper = $('.syncronize-wrapper');

            let errorsWrapper = $('.submit-errors-wrapper');

            let errorsObject = response.errors;

            // Check if errorsObject is not null or undefined
            if (errorsObject) {
                // Count the number of errors
                let errorCount = Object.keys(errorsObject).length;

                if( errorCount > 0){
                    syncroWrapper.addClass('syncronize-submit-errors');
                }else{
                    syncroWrapper.removeClass('syncronize-submit-errors');
                }

                let errsHtml = '';
                // Iterate through each error
                for (let key in errorsObject) {
                    if (errorsObject.hasOwnProperty(key)) {
                        let error = errorsObject[key];
                        errsHtml += '<p class="subm-errs-' + key + '"><i class="pssg_icon-info-circled"></i>' + error + '</p>'
                    }
                }
                errorsWrapper.html(errsHtml);
            }

            
        }


        var uploadContainer = $('#json-upload-container');
        var uploaderNonce = uploadContainer.data('nonce');
        var hiddenInput = $('#json-upload-container-input');
        var fileInput = $('#json-file-input');
        var fileDelete = $('i.delete-old-file-data');
        var progressBar = $('#json-upload-progress-bar');
        var animateSpin = uploadContainer.find('.pssg-animate-wrapper');
        var messageContainer = $('#json-upload-message');
        var messageContainerSuccess = $('#json-upload-message-success');
        var messageContainerError = $('#json-upload-message-errors');

        uploadContainer.on('dragover', function (e) {
            e.preventDefault();
            uploadContainer.addClass('dragover');
        });

        uploadContainer.on('dragleave', function () {
            uploadContainer.removeClass('dragover');
        });

        uploadContainer.on('drop', function (e) {
            
            e.preventDefault();
            animateSpin.fadeIn();
            uploadContainer.removeClass('dragover');

            var files = e.originalEvent.dataTransfer.files;
            handleFiles(files);
        });

        fileInput.on('change', function () {
            animateSpin.fadeIn();
            var files = fileInput[0].files;
            handleFiles(files);
        });

        fileDelete.on('click', function(){
            var conf = confirm(PSSG_DATA.text.json_file_delating); //Are you sure!\nDelete Service JSON file.\n OK or Cancel.
            if(conf){
                animateSpin.fadeIn();
                var formData = new FormData();
                    formData.append('action', 'handle_json_file_upload');
                    formData.append('delete', 'json');
                    formData.append('nonce', uploaderNonce);


                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', ajaxurl, true);



                    xhr.onload = function () {
                        let response = xhr.response;
                        let status = xhr.status;
                        console.log(status);
                        
                        response = JSON.parse(response);

                        if(response.status == 'success'){
                            hiddenInput.val('');
                            var successMess = response.message;
                            uploadContainer.removeClass('success-on-json');
                            uploadContainer.removeClass('error-on-json');
                            uploadContainer.addClass('no-file-founded');
                            $('.pssg-client-email').val('');
                            messageContainerSuccess.html("<span>" + successMess + "</span>");
                            messageContainerError.html("");
                            messageContainer.html("");
                            progressBar.hide();
                            $(mainFormSelect).submit();
                        }else{
                            hiddenInput.val('');
                        }

                        console.log(response);
                        
                        animateSpin.fadeOut();
                    };
                    xhr.send(formData);

            }else{
                return;
            }
        });


        function handleFiles(files) {
            messageContainerSuccess.html("");
            messageContainerError.html("");
            messageContainer.html("");
            if (files.length > 0) {
                var file = files[0];
        
                if (file.type === 'application/json') {
                    uploadContainer.removeClass('error-on-json');
                    messageContainer.html( PSSG_DATA.text.file_selecting_msg + " " + file.name );    //File selected: 
        
                    var formData = new FormData();
                    formData.append('action', 'handle_json_file_upload');
                    formData.append('json_file', file);
                    formData.append('nonce', uploaderNonce);
        
                    // Use AJAX to send the file to the server
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', ajaxurl, true);


                    xhr.upload.addEventListener('progress', function (e) {
                        if (e.lengthComputable) {
                            var percent = (e.loaded / e.total) * 100;
                            progressBar.css('width', percent + '%');
                            progressBar.html(percent + '%');
                            console.log(e.loaded, e.total);
                        }
                    });

                    xhr.onload = function () {
                        let response = xhr.response;
                        let status = xhr.status;
                        
                        response = JSON.parse(response);
                        console.log("Upload File JSON");
                        console.log(response);
                        if(response.status == 'failed'){
                            uploadContainer.addClass('error-on-json');
                            uploadContainer.removeClass('success-on-json');
                            let errorMess = '';
                            $(response.errors).each(function(index,errorMessage){
                                errorMess += '<span>' + errorMessage + '</span>';
                                
                            });
                            messageContainerError.html(errorMess);
                            hiddenInput.val('');
                        }else if(response.status == 'success'){
                            uploadContainer.removeClass('error-on-json');
                            uploadContainer.removeClass('no-file-founded');
                            uploadContainer.addClass('success-on-json');
                            uploadContainer.find('.old-file-data span').html(file.name);
                            let successMess = '';
                            $(response.message).each(function(index,successMessage){
                                successMess += '<span>' + successMessage + '</span>';
                                
                            });
                            $('.pssg-client-email').val(response.client_email);
                            messageContainerSuccess.html(successMess);
                            messageContainerError.html("");
                            hiddenInput.val(file.name);
                        }
                        animateSpin.fadeOut();
                        $(mainFormSelect).submit();
                    };
                    xhr.send(formData);
                } else {
                    hiddenInput.val('');
                    uploadContainer.addClass('error-on-json');
                    uploadContainer.removeClass('success-on-json');
                    messageContainer.html('<span class="invalid-file-type">' + PSSG_DATA.text.invalid_file_type + '</span>'); //Invalid file type. Please select a JSON file.
                    animateSpin.fadeOut();
                }
            }
        }




    
        $(window).on('scroll',function(){
            let topbarElement = $('div.pssg-header.pssg-clearfix');
            
            let scrollTop = $(this).scrollTop();

            let configFormElement = $('form#pssg-main-configuration-form').not('.setup-wizard-form');
            if(configFormElement.length < 1) return;
    
            if(scrollTop > 50){
                configFormElement.addClass('topbar-fixed-on-scroll-main-element');
                topbarElement.addClass('topbar-fixed-on-scroll');
            }else{
                configFormElement.removeClass('topbar-fixed-on-scroll-main-element');
                topbarElement.removeClass('topbar-fixed-on-scroll');
            }


        });

        /**
         * Tab Area Handle
         */
        configureTabAreaAdded('#pssg-other-settings-form'); //Specially for Configure Page
        
        function configureTabAreaAdded( mainSelector = '#pssg-other-settings-form' ){
            var tabSerial = 0;
            var tabArray = new Array();
            var tabHtml = ""
            var tabArea = $(mainSelector + ' .pssg-configure-tab-wrapper');

            if(tabArea.length < 1){
                $(mainSelector).prepend('<div class="pssg-configure-tab-wrapper pssg-section-panel no-background"></div>');
                tabArea = $(mainSelector + ' .pssg-configure-tab-wrapper');
            }
            var sectionPanel = $(mainSelector + ' div.pssg-section-panel');
            sectionPanel.each(function(index, content){
                
                

                let table = $(this).find('table');
                let tableCount = table.length;
                let icon = $(this).data('icon');
                if(tableCount > 0){
                    
                    let firstTable = table.first();
                    let tableId = $(this).attr('id');

                    if(!tableId){
                        tableId = 'section-panel-' + index;
                        $(this).attr('id', tableId);
                    }
                    let tableTitle = firstTable.find('thead tr th:first-child h3').html();
                    var tempDiv = $('<div>').html(tableTitle);
                    tempDiv.find('a').remove();
                    tableTitle = tempDiv.text();
                    tabArray[tableId] = tableTitle;

                    let iconTag = '<i class="' + icon + '"></i>';
                    let menuTitle = iconTag + tableTitle;
                    if(tabSerial !== 0){
                        $(this).hide();
                        tabHtml += "<a href='#" + tableId + "' class='tab-button pssg-button link-" + tableId + "'>" + menuTitle + "</a>"
                    }else{
                        $(this).addClass('active');
                        tabHtml += "<a href='#" + tableId + "' class='tab-button pssg-button link-" + tableId + " active'>" + menuTitle + "</a>"
                    }

                    // let secId = $(this).attr('id');
                    // if(secId == 'pssg-syncronize-settings'){
                    //     $(this).show();
                    // }

                    tabSerial++;

                }
                
            });
            // if(tabSerial > 2){
            //     tabHtml += "<a href='#show-all' class='tab-button pssg-button'><i class='pssg_icon-globe-inv'></i>" + PSSG_DATA.text.show_all + "</a>"; //Show All
            // }
            tabArea.html(tabHtml);
            
        }

        let target = window.location.hash;
        let last_target = '';
        if(target !== ''){
            showTargetElement(target);
        }

        $(document.body).on('click','.pssg-configure-tab-wrapper a.tab-button',function(e){
            e.preventDefault();
            let target = $(this).attr('href');
            // window.location.hash = target;
            history.pushState(null, null, target);
            showTargetElement(target);
            
        });

        function showTargetElement(target,e){

            if(target == last_target){
                return;
            }
            last_target = target;

            let mainSelector = '#pssg-other-settings-form';
            var sectionPanel = $(mainSelector + ' div.pssg-section-panel');
            if(sectionPanel.length < 3){
                return;
            }
            $('.pssg-configure-tab-wrapper a').removeClass('active');
            $('.pssg-configure-tab-wrapper a[href="' + target + '"]').addClass('active');
            // $(this).addClass('active');
            $(mainSelector + ' div.pssg-section-panel.active').hide();
            if(target == '#show-all'){
                sectionPanel.not('#pssg-getting-start-settings').fadeIn();
                return;
            }
            
            let submitButton = $('#pssg-form-submit-button');
            if(target == '#pssg-getting-start-settings'){
                submitButton.hide();
                // $('#pssg-syncronize-settings').hide();
            }else{
                submitButton.fadeIn();
                // $('#pssg-syncronize-settings').show();
            }
            $(mainSelector + ' ' + target).fadeIn('fast').addClass('active');
            $(document.body).trigger('pssg_current_target_tab',target);
        }


        $(document.body).on('click','.pssg-client-email',function(){
            $(this).select();
            var client_email_copy_msg = PSSG_DATA.text.email_copied_msg; //Copied, Add this email as yoru Sheet\'s Editor
            try{
                document.execCommand('copy');
                window.getSelection().removeAllRanges();
                alert(client_email_copy_msg);
            }catch(error){
                alert(client_email_copy_msg);
            }
        });
        $(document.body).on('click','#pssg-appscript-copy-button',function(){
            var msgBox = $('.script-copy-msg');
            var contentToCopy = document.getElementById('appscript-code-area');
            var hasAccessKey = $(this).data('has-access-key');
            
            // Check if access key is generated
            if (hasAccessKey !== 'yes') {
                alert(PSSG_DATA.text.access_key_not_generated || 'Access Key is not generated. Please generate an Access Key from the Security Settings before copying the AppsScript.');
                return;
            }
            
            // Check if the Clipboard API is supported
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(contentToCopy.textContent)
                    .then(function () {
                        // Success! You can provide user feedback here if needed
                        msgBox.text(PSSG_DATA.text.script_copied_msg).addClass('success'); //Script Copied! - Now add to your Sheet.
                    })
                    .catch(function (err) {
                        // Handle errors
                        msgBox.text(PSSG_DATA.text.error_in_copy).addClass('success');     //Unable to copy to clipboard
                        console.log( err);
                    });
                    setTimeout(function(){
                        msgBox.text("");
                    }, 1500);
            } else {

                $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css" type="text/css" />');
        // Load CodeMirror JS
        $.getScript("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js", function() {
          $.getScript("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/javascript/javascript.min.js", function() {
            // Initialize CodeMirror after scripts are loaded
            var editor = CodeMirror.fromTextArea(document.getElementById('appscript-code-area'), {
              lineNumbers: true,
              mode: "javascript",
              theme: "default",
            //   lineWrapping: true
            });
          });
        });

                $(this).hide();
                $('.CodeMirror').css({
                    opacity: 1,
                    height: '55px !important',
                    display: 'block',
                    marginTop: '10px'
                });
                // Provide user feedback if needed
                msgBox.text('Please copy the AppsScript manually.').addClass('warning');         //Content Copied!
            }
        });
        
        // Access Key Generation
        $(document.body).on('click', '#pssg-generate-access-key, #pssg-regenerate-access-key', function(e) {
            e.preventDefault();
            var $button = $(this);
            var nonce = $button.data('nonce');
            var isRegenerate = $button.attr('id') === 'pssg-regenerate-access-key';
            var action = isRegenerate ? 'pssg_regenerate_access_key' : 'pssg_generate_access_key';
            
            if (isRegenerate) {
                if (!confirm(PSSG_DATA.text.regenerate_key_confirm || 'Are you sure you want to regenerate the Access Key? The current key will be invalidated and you will need to update the AppsScript in your Google Sheet.')) {
                    return;
                }
            }
            
            $button.prop('disabled', true);
            var originalText = $button.find('strong').text();
            $button.find('strong').text(PSSG_DATA.text.saving_msg || 'Processing...');
            
            $.ajax({
                type: 'POST',
                url: PSSG_DATA.ajax_url,
                data: {
                    action: action,
                    nonce: nonce
                },
                success: function(response) {
                    if (response.success) {
                        $('#pssg-access-key-status').removeClass('error').addClass('success').text(response.data.message);
                        // Reload page to show new key
                        setTimeout(function() {
                            location.reload();
                        }, 1000);
                    } else {
                        $('#pssg-access-key-status').removeClass('success').addClass('error').text(response.data.message || 'An error occurred.');
                        $button.prop('disabled', false);
                        $button.find('strong').text(originalText);
                    }
                },
                error: function() {
                    $('#pssg-access-key-status').removeClass('success').addClass('error').text('An error occurred. Please try again.');
                    $button.prop('disabled', false);
                    $button.find('strong').text(originalText);
                }
            });
        });
        
        // Copy Access Key
        $(document.body).on('click', '#pssg-copy-access-key', function(e) {
            e.preventDefault();
            var accessKeyInput = document.getElementById('pssg_access_key_display');
            accessKeyInput.select();
            
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(accessKeyInput.value)
                    .then(function() {
                        alert(PSSG_DATA.text.access_key_copied || 'Access Key copied to clipboard!');
                    })
                    .catch(function() {
                        document.execCommand('copy');
                        alert(PSSG_DATA.text.access_key_copied || 'Access Key copied to clipboard!');
                    });
            } else {
                document.execCommand('copy');
                alert(PSSG_DATA.text.access_key_copied || 'Access Key copied to clipboard!');
            }
        });


        //For Quick Edit Table
        $('.pssg-quick-edit-table td[contenteditable="true"]').on('blur', function() {
            
            var keyword,keywordLabel,tdValue,val,orignalVal;
            val = $(this).text();
            orignalVal = $(this).attr('original');

            if(val == orignalVal){
                return;
            }

            var thisRow = $(this).closest('tr.pssg-quick-table-tr');
            thisRow.addClass('editing-row');

            var params = {};
            thisRow.find('td.each-cell').each(function(){
                keyword = $(this).data('keyword');
                keywordLabel = $(this).data('keyword_label');
                tdValue = $(this).text();

                params[keywordLabel] = tdValue;
            });
           
            var nonce = thisRow.closest('.pssg-quick-edit-table').data('nonce');

            $.ajax({
                type: 'POST',
                url: ajax_url,
                data: {
                    action: 'pssg_quick_table_update',
                    params:params,
                    nonce: nonce
                },
                beforeSend: function(){
    
                },
                complete: function(status){
                    thisRow.removeClass('editing-row');
                    thisRow.addClass('product-edited');
                    $(document.body).trigger('pssg_quick_edit_on_blus_complete',status);
                },
                success: function (response) {
                    $(document.body).trigger('pssg_quick_edit_on_blus_response',response);
                    console.log(params);
                    console.log(JSON.parse(response));
                },
                error:function(error){
                    thisRow.removeClass('editing-row');
                    thisRow.addClass('product-edited');
                    $(document.body).trigger('pssg_quick_edit_on_blus_complete',error);
                }
            });

            
        });
        $('.pssg-quick-edit-table td[contenteditable="true"]').on('keydown', function(e) {
            // Handle keypress event to prevent new lines on Enter
            if (e.which === 13) {
                e.preventDefault();
      
                // Set focus to the next row in the same column
                var columnIndex = $(this).index();
                var nextRow = $(this).closest('tr').next();
                var nextCell = nextRow.find('td').eq(columnIndex);
                
                var nextCellEditAble = nextCell.attr('contenteditable');
                if(nextCellEditAble == 'false'){
                    $(this).next().focus();
                    return;
                }
                
                // Check if there is a next row and cell
                if (nextRow.length && nextCell.length) {
                  nextCell.focus();
                }else{
                    $(this).next().focus();
                }
              }
        });
        $('.pssg-quick-edit-table td[contenteditable="true"]').on('focus', function() {
            var val = $(this).text();
            $(this).attr('original', val);
        });

        // Set CSS custom property for frozen col-1 left offset
        (function() {
            var $table = $('.pssg-quick-edit-table');
            if (!$table.length) return;
            var col0El = $table[0].querySelector('td.col-0');
            if (!col0El) return;
            var col0Width = col0El.getBoundingClientRect().width;
            $table[0].style.setProperty('--pssg-col0-width', col0Width + 'px');
        })();

        // ---- Floating Sync Widget ----
        var pssgFloatSyncInterval = null;
        var pssgFloatSyncPaged    = 1;

        // Toggle the panel open / close via bubble button
        $(document.body).on('click', '#pssg-float-sync-toggle', function() {
            $('#pssg-float-sync-panel').slideToggle(200);
        });

        // Close via × button
        $(document.body).on('click', '#pssg-float-panel-close', function() {
            $('#pssg-float-sync-panel').slideUp(200);
        });

        // Sync button inside the floating panel
        $(document.body).on('click', '#pssg-float-sync-btn', function(e) {
            e.preventDefault();

            var $widget    = $('#pssg-float-sync-widget');
            var $btn       = $(this);
            var $toggleBtn = $('#pssg-float-sync-toggle');
            var $btnTxt    = $btn.find('.pssg-float-sync-btn-txt');
            var $btnIcon   = $btn.find('span i');
            var $msgArea   = $('.pssg-float-message-area');
            var $errArea   = $('.pssg-float-errors-area');
            var $countBox  = $btn.find('.product_count');
            var syncStatus = $widget.attr('data-sync_status') || 'waiting';
            var btnPrevTxt = $btnTxt.text();
            var btnDoneTxt = PSSG_DATA.text.sync_done_msg;

            // Pause while running
            if (syncStatus === 'playing') {
                $btnTxt.html('Resume');
                $widget.attr('data-sync_status', 'paused');
                $toggleBtn.removeClass('is-syncing');
                $msgArea.html(PSSG_DATA.text.paused);
                return;
            }

            // Resume after pause
            if (syncStatus === 'paused') {
                $btnTxt.html(PSSG_DATA.text.pause);
                $widget.attr('data-sync_status', 'playing');
                return;
            }

            // Fresh start
            pssgFloatSyncPaged = 1;
            $errArea.find('.error-code').html('');
            $errArea.find('.errors-lists').html('');

            var nonce    = $btn.data('nonce');
            var limit    = $btn.data('limit');
            var per_page = $btn.data('per_page');

            // Clear sheet first (same as original #pssg-syncronize-button)
            clearSheet();

            $btnTxt.html(PSSG_DATA.text.pause);
            $btnIcon.addClass('animate-spin');
            $toggleBtn.addClass('is-syncing');
            $msgArea.html(PSSG_DATA.text.syncing_msg);
            $widget.attr('data-sync_status', 'playing');

            pssgFloatSyncInterval = setInterval(function() {

                var currentStatus = $widget.attr('data-sync_status');
                if (currentStatus !== 'playing') {
                    $msgArea.html(PSSG_DATA.text.paused);
                    return;
                }

                $.ajax({
                    type: 'POST',
                    url: ajax_url,
                    dataType: 'json',
                    data: {
                        action: 'pssg_syncronize_products',
                        paged: pssgFloatSyncPaged,
                        nonce: nonce
                    },
                    complete: function(status) {
                        $(document.body).trigger('pssg_syncronize_complete', status);
                    },
                    success: function(response) {
                        pssgFloatSyncPaged++;
                        var count = response.count;
                        $countBox.text(count);

                        if (response.status === 'failed' && response.error === 'ProductEmpty') {
                            $msgArea.html(PSSG_DATA.text.all_syncronized_msg);
                            $btnTxt.html(btnDoneTxt);
                            clearInterval(pssgFloatSyncInterval);
                            $widget.attr('data-sync_status', 'waiting');
                            $btnIcon.removeClass('animate-spin');
                            $toggleBtn.removeClass('is-syncing');
                            return;
                        } else if (response.status === 'failed') {
                            if (response.error === 'LimitCross') {
                                $msgArea.html(PSSG_DATA.text.sync_limit_crossed);
                            } else {
                                $msgArea.html(PSSG_DATA.text.check_error_msg);
                            }
                            $errArea.find('.error-code').html(PSSG_DATA.text.response_error_code + response.error);
                            var errHtml = '';
                            $(response.errors).each(function(i, err) {
                                errHtml += "<p class='each-errors-item'>" + err + "</p>";
                            });
                            $errArea.find('.errors-lists').html(errHtml);
                            $btnTxt.html(btnPrevTxt);
                            clearInterval(pssgFloatSyncInterval);
                            $widget.attr('data-sync_status', 'waiting');
                            $btnIcon.removeClass('animate-spin');
                            $toggleBtn.removeClass('is-syncing');
                            return;
                        }

                        if (response.status === 'success' && response.hasOwnProperty('data_response')) {
                            var dr = response.data_response;
                            if (dr.hasOwnProperty('error')) {
                                var err     = dr.error;
                                var fullErr = 'code: ' + err.code + ' | msg: ' + err.message + ' | status: ' + err.status;
                                fullErr    += '\n' + PSSG_DATA.text.check_connection_msg;
                                $msgArea.html('Connection Error');
                                $errArea.find('.error-code').html('GoogleSheet Error Code: ' + err.code);
                                $errArea.find('.errors-lists').html(
                                    '<p class="error-code">- ' + err.message + '</p>' +
                                    '<p class="error-code">- ' + err.status  + '</p>'
                                );
                                alert(fullErr);
                                $btnTxt.html(btnPrevTxt);
                                clearInterval(pssgFloatSyncInterval);
                                $widget.attr('data-sync_status', 'waiting');
                                $btnIcon.removeClass('animate-spin');
                                $toggleBtn.removeClass('is-syncing');
                                return;
                            } else if (dr.hasOwnProperty('updatedRows')) {
                                $msgArea.html(PSSG_DATA.text.syncing_msg);
                                if ((count + per_page) > limit) {
                                    $msgArea.html(PSSG_DATA.text.sync_done_msg);
                                    $btnTxt.html(btnDoneTxt);
                                    clearInterval(pssgFloatSyncInterval);
                                    $widget.attr('data-sync_status', 'waiting');
                                    $btnIcon.removeClass('animate-spin');
                                    $toggleBtn.removeClass('is-syncing');
                                }
                            }
                        }
                        $(document.body).trigger('pssg_syncronize_response', response);
                    },
                    error: function(error) {
                        $btnTxt.html(btnPrevTxt);
                        $msgArea.html('ErrorOnSyncronize');
                        $btnIcon.removeClass('animate-spin');
                        $toggleBtn.removeClass('is-syncing');
                        clearInterval(pssgFloatSyncInterval);
                        $widget.attr('data-sync_status', 'waiting');
                        $(document.body).trigger('pssg_syncronize_error', error);
                    }
                });

            }, sync_btn_interval);
        });

        //For Reset added on new branch 1.0.1.1 for reset setting
        $(document.body).on('click','.pssg-reset-all-setting-wizard',function(e){
            e.preventDefault();
            if (confirm('Are you sure you want to reset and reload the page?')) {
                $('.pssg-hidden-reset-input').attr('name','reset');
                $('.pssg-hidden-reset-input').val('reset');

                var Wrapper = $(this).closest('.setup-wizard-section-wrapper');
                var stepWrapper = Wrapper.find('.pssg_progress_container');
                stepWrapper.find('.pssg_progress').css('width', '0%');
                var progressBar = stepWrapper.find('.pssg_circle');
                progressBar.removeClass('active');
                progressBar.removeClass('already-activated');
                progressBar.first().addClass('active');
                progressBar.first().addClass('already-activated');


                var Panel = Wrapper.find('div.pssg-setup-wizard-panel');

                Panel.removeClass('active');
                Panel.first().addClass('active');
                Panel.find('input').val('');
                
                $(document.body).trigger('pssg_setup_wizard_reset',e);
                
                $('.pssg-stats-wrapper span.total-percent-n').html('0%');
                Wrapper.find('.pssg-current-page-input').val(1);
                Wrapper.find('.pssg-last-page-input').val(1);
                $(mainFormSelect).submit();
            }
        });
        $(document.body).on('change','#pssg-show-tutorial-checkbox',function(){
            var Wrapper = $(this).closest('.setup-wizard-section-wrapper');
            Wrapper.toggleClass('pssg-tutorial-show');
            if($(this).is(':checked')){
                Wrapper.find('.step-wizard-details-tuts').show();
            }else{
                Wrapper.find('.step-wizard-details-tuts').hide();
            }
        });

        $(document.body).on('click','a.pssg-show-tips',function(e){
            e.preventDefault();
            $(this).closest('div.pssg-setup-wizard-panel').find('.step-wizard-details-tuts').fadeToggle();
        });


        //For setting wizard - Main Page actually now
        $(document.body).on('click','.pssg-setup-wizard-next-button',function(e){
            
            e.preventDefault();
            var Wrapper = $(this).closest('.setup-wizard-section-wrapper');
            var thisPanel = $(this).closest('div.pssg-setup-wizard-panel');
            var thisPanelIndex = thisPanel.data('index');
            var thisPageKey = thisPanel.data('page_key');
            
            var currentInput = thisPanel.find("input[name=" + thisPageKey + "]");
            var type = currentInput.attr('type');
            if(typeof currentInput == 'object' && currentInput.length > 0){
                var currentInputVal = currentInput.val();
            }else if(type == 'checkbox'){
                var currentInputVal = '';
            }
            var checked = currentInput.is(':checked');


            if( (currentInputVal == '' && type !== 'checkbox') || ( type == 'checkbox' && !checked ) ){
                currentInput.addClass('pssg-error-empty-input');
                currentInput.closest('.pssg-field-wrapper-single').addClass('pssg-empty-input-wrapper');
                currentInput.closest('label.switch').addClass('pssg-empty-checkbox');
                return;
            }else{
                currentInput.removeClass('pssg-error-empty-input');
                currentInput.closest('.pssg-field-wrapper-single').removeClass('pssg-empty-input-wrapper');
                currentInput.closest('label.switch').removeClass('pssg-empty-checkbox');
            }
            
            thisPanelIndex = parseInt(thisPanelIndex);
            var nextPanelIndex = thisPanelIndex + 1;
            thisPanelIndex = parseInt(thisPanelIndex);
            
            var nextPanel = thisPanel.next();
            var nextPanelIndex = nextPanel.data('index');
            nextPanelIndex = parseInt(nextPanelIndex);
            if(!nextPanelIndex){
                alert("There is no next panel");
                return;
            }
            thisPanel.removeClass('active');
            nextPanel.addClass('active');

            let lastPage = Wrapper.find('.pssg-last-page-input').val();
            lastPage = parseInt(lastPage);
            if(lastPage < nextPanelIndex){
                lastPage = nextPanelIndex;       
            }
            let count = $('.pssg_progress_container .pssg_circle').length;
            count = parseInt(count);
            let completedPercentage = ( (100 / count ) * lastPage );
            Wrapper.find('.pssg-current-page-input').val(nextPanelIndex);
            Wrapper.find('.pssg-last-page-input').val(lastPage);

            
            updateStepBar(Wrapper, nextPanelIndex, true);

            // $(mainFormSelect).submit();
            let next_args = {
                thisPanelIndex: thisPanelIndex,
                thisPageKey: thisPageKey,
                page_key: thisPageKey,
                lastPage: lastPage,
                count: count,
                completedPercentage: completedPercentage
            };
            $('.pssg-stats-wrapper .total-percent-n').html(completedPercentage + '%');
            $(document.body).trigger('pssg_setup_wizard_next_button',next_args);
        });

        //For setting wizard - Previous Step Button
        $(document.body).on('click','.pssg-setup-wizard-prev-button',function(e){
            e.preventDefault();
            var Wrapper = $(this).closest('.setup-wizard-section-wrapper');
            var thisPanel = $(this).closest('div.pssg-setup-wizard-panel');
            var thisPanelIndex = thisPanel.data('index');
            thisPanelIndex = parseInt(thisPanelIndex);
            
            // Can't go back from first step
            if(thisPanelIndex <= 1){
                return;
            }
            
            var prevPanelIndex = thisPanelIndex - 1;
            var prevPanel = thisPanel.prev();
            
            if(!prevPanel.length){
                return;
            }
            
            thisPanel.removeClass('active');
            prevPanel.addClass('active');
            
            Wrapper.find('.pssg-current-page-input').val(prevPanelIndex);
            
            updateStepBar(Wrapper, prevPanelIndex, false);
            
            $(document.body).trigger('pssg_setup_wizard_prev_button',{
                thisPanelIndex: thisPanelIndex,
                prevPanelIndex: prevPanelIndex
            });
        });

        //For setting wizard - Main Page actually now
        $(document.body).on('click','.pssg_circle',function(e){
            e.preventDefault();
            var WrapperCircle = $(this);
            updateStepUpto(WrapperCircle);
            
        });

        //For setting wizard - Main Page actually now
        function updateStepUpto(WrapperCircle){
            if(! WrapperCircle.hasClass('already-activated')){
                return;
            }
            var Wrapper = WrapperCircle.closest('.setup-wizard-section-wrapper');
            
            var thisPanelIndex = WrapperCircle.data('index');
            thisPanelIndex = parseInt(thisPanelIndex);
            var thisPanelkey = WrapperCircle.data('page_key');
            
            if(thisPanelkey == 'finish'){
                $('.pssg_progress_container').css('display','none');
                $('.modify-setup-wizard-wrapper').show();
            }
            //Show current and active panel section / details bottom part actually
            var thisPanel = Wrapper.find('div#pssg-' + thisPanelkey + '-setup-wizard');
            var allPanel = Wrapper.find('.pssg-setup-wizard-panel');
            allPanel.removeClass('active');
            thisPanel.addClass('active');

            Wrapper.find('.pssg-current-page-input').val(thisPanelIndex); //To update last page or current page
            
            updateStepBar(Wrapper, thisPanelIndex);

            // $(mainFormSelect).submit();
        }

        //For setting wizard - Main Page actually now
        function updateStepBar(Wrapper, thisPanelIndex, singlePage = false){
            var progressBar = Wrapper.find('.pssg_progress_container');
            let count = progressBar.find('.pssg_circle').length;
            count = parseInt(count);
            let current_page = thisPanelIndex;
            let page_key = progressBar.find('.pssg_circle[data-index=' + current_page + ']').data('page_key');
            Wrapper.attr('data-current_page_key', page_key);
            Wrapper.attr('data-current_page', current_page);
            let widthPercentage = ( (100 / ( count -1 ) ) * ( current_page - 1 ) );
            let progressPercent = ( (100 / ( count ) ) * ( current_page) );
            progressBar.find('.pssg_progress').css('width', widthPercentage + '%');
            
            for(var i=1; i <= 10; i++){
                if(i <= current_page){
                    progressBar.find('.pssg_circle[data-index=' + i + ']').addClass('active');
                    progressBar.find('.pssg_circle[data-index=' + i + ']').removeClass('not-active');
                    progressBar.find('.pssg_circle[data-index=' + i + ']').removeClass('not-activated-yet');
                }else{
                    progressBar.find('.pssg_circle[data-index=' + i + ']').removeClass('active');
                }
            }
            if(singlePage){
                let last_page_key = progressBar.find('.pssg_circle[data-index=' + current_page + ']').data('page_key');
                Wrapper.attr('data-last_page_key', last_page_key);
                progressBar.find('.pssg_circle[data-index=' + current_page + ']').addClass('already-activated');
                progressBar.find('.pssg_circle[data-index=' + current_page + ']').removeClass('not-activated-yet');
                progressBar.find('.pssg_circle[data-index=' + current_page + ']').removeClass('not-active');
            }
            progressBar.find('.pssg_circle').removeClass('last-activated');
            progressBar.find('.pssg_circle[data-index=' + current_page + ']').addClass('last-activated');
            let target_args = {
                current_page: current_page,
                page_key: page_key,
                thisPanelkey: page_key,
                widthPercentage: widthPercentage,
                progressPercent: progressPercent,
                count: count,
                singlePage: singlePage,
                byNextBtnClick: singlePage,
                
            };
            console.log(target_args);
            $(mainFormSelect).submit();
            
            $(document.body).trigger('pssg_setup_wizard_target', target_args);
        }

        //Findining Error Count
        $(document.body).on('pssg_setup_wizard_response',function(e, response){
            
            var errors = response.errors;
            var data = response.data;
            let reset = data['reset'];
            if(reset){
                $('.pssg-hidden-reset-input').val('');
            }
            update_sheet_link(data);

            console.log(data);
            console.log(errors);
            update_step_box_class(errors);

        });

        $(document.body).on('pssg_setup_wizard_next_button',function( e, args ){
            console.log('args');
            console.log(args);
        });

        //For setting wizard - Main Page actually now
        $(document.body).on('click','.modify-setup-wizard-wrapper .pssg_modify_setup_wizard, .pssg-finish-errors .pssg_modify_setup_wizard, .pssg-quick-links .pssg_modify_setup_wizard',function(e){
            e.preventDefault();
            // $('.pssg_progress_container').show();
            $('.pssg_progress_container').css('display','flex');
            $('.modify-setup-wizard-wrapper').hide();
            $('.pssg-finish-errors').hide();
        });

        var update_sheet_link = function( data_respnse ){
            let sheet_url = data_respnse['sheet_url'];
            let form_sheet_link_el = $('.pssg-form-info.sheet-url-info a.pssg-doc-link');
            if(sheet_url){
                form_sheet_link_el.attr('href',sheet_url).html('Your Google Sheet');
            }else{
                form_sheet_link_el.attr('href','https://docs.google.com/spreadsheets/#saiful').html('Google Sheet');
            }
        }

        var update_step_box_class = function ( errors ){
            var errorCount = errors ? Object.keys(errors).length : 0;
            $('.pssg_progress_container .pssg_circle').removeClass('error-founded');
            
            // Update finish step header and errors section dynamically
            var finishHeader = $('.pssg-finish-header');
            var finishErrorsSection = $('.pssg-finish-errors').first();
            var syncCard = $('.pssg-sync-card');
            
            if(errorCount > 0){
                $.each(errors, function(key, value) {
                    $('.pssg_progress_container .pssg_circle[data-page_key=' + key + ']').addClass('error-founded');
                });
                
                // Update finish header to show warning
                finishHeader.find('.pssg-finish-success-icon').hide();
                if(finishHeader.find('.pssg-finish-warning-icon').length === 0){
                    finishHeader.prepend('<div class="pssg-finish-warning-icon"><span class="dashicons dashicons-warning"></span></div>');
                }
                finishHeader.find('.pssg-finish-warning-icon').show();
                finishHeader.find('h2').text('Almost There!');
                finishHeader.find('.pssg-finish-subtitle').text('Please complete the following steps to finish the setup.');
                
                // Update errors list
                var errorsHtml = '<h4><span class="dashicons dashicons-info"></span> Steps to Complete</h4><ul>';
                $.each(errors, function(key, value) {
                    errorsHtml += '<li class="pssg-error-item"><span class="dashicons dashicons-dismiss"></span>' + value + '</li>';
                });
                errorsHtml += '</ul><a href="javascript:void(0);" class="pssg-btn pssg-has-icon warning pssg_modify_setup_wizard"><span><i class="pssg_icon-cog"></i></span><strong>Modify Setup</strong></a>';
                
                if(finishErrorsSection.length === 0){
                    $('.pssg-finish-header').after('<div class="pssg-finish-errors">' + errorsHtml + '</div>');
                } else {
                    finishErrorsSection.html(errorsHtml).show();
                }
                
                // Disable sync card
                syncCard.addClass('disabled');
            } else {
                // Update finish header to show success
                finishHeader.find('.pssg-finish-warning-icon').hide();
                if(finishHeader.find('.pssg-finish-success-icon').length === 0){
                    finishHeader.prepend('<div class="pssg-finish-success-icon"><span class="dashicons dashicons-yes-alt"></span></div>');
                }
                finishHeader.find('.pssg-finish-success-icon').show();
                finishHeader.find('h2').text('Setup Complete!');
                finishHeader.find('.pssg-finish-subtitle').text('Your WooCommerce store is now connected to Google Sheet.');
                
                // Hide errors section
                finishErrorsSection.hide();
                
                // Enable sync card
                syncCard.removeClass('disabled');
            }
        }


        //For Multi Step Wizard - Main Page actually now - It's demo multiple site connect

        $(document.body).on('change','.multiple-site-connection-demo form#pssg-multisite-form .site-type-changer-wrapper select',function(){
            var siteType = $(this).val();
            $(this).closest('form#pssg-multisite-form').attr('class','pssg-multisite-form-' + siteType);
        });


        //disable submit button for .multiple-site-connection-demo form#pssg-multisite-form
        $(document.body).on('submit','.multiple-site-connection-demo form#pssg-multisite-form',function(e){
            e.preventDefault();
        });






        // Premium Content Start Here
        $(document.body).on('click','tr.pssg-premium-row span.pssg-config-close-btn',function(){
            let count = $('.pssg-cf-wrapper.pssg-cf-wrapper-single').length;
            if(count == 1){return;}
            $(this).closest('.pssg-cf-wrapper').remove();
            $('.added-cf-single').last().find('input').change();
        });

        /**
         * For setting - Custom Field cf actually now
         */
        $(document.body).on('pssg_config_submit_formdata',function(e,formData){
            e.preventDefault();
            if($('.pssg-cf-wrapper.pssg-cf-wrapper-single').length < 1){
                return;
            }
            var added_cf = formData.added_cf;
            if(!added_cf){
                return;
            }
            let lastValue = Object.values(added_cf).pop();
            let keyword = lastValue.keyword;
            let title = lastValue.title;
            console.log(keyword,title);
            if( keyword == '' || title == '' ){
                return;
            }

            let count = $('tr.pssg-premium-row .pssg-cf-wrapper.pssg-cf-wrapper-single').length;
            count += Math.floor(Math.random() * 200) + 1;
let newCustomField =  `<div class="pssg-cf-wrapper pssg-cf-wrapper-single">
<div class="added-cf-single">
    <input placeholder="Custom Field Keyword" type="text" name="added_cf[`+count+`][keyword]" value="" id="cf-keyword-`+count+`">
</div>
<div class="added-cf-single">
    <input  placeholder="Title for Row Column" type="text" name="added_cf[`+count+`][title]" value="" id="cf-title-`+count+`">
</div>
<span class="pssg-config-close-btn"><i class="dashicons dashicons-no-alt"></i></span>    
</div> `;            

let newCheckBox = `<p class="each-checkbox">
<input type="checkbox" id="checkbox-for-col-min_quantity" name="hide_columns[`+keyword+`]" value="on">
<label for="checkbox-for-col-min_quantity">`+title+`</label><br>
</p>`;
$('.pssg-checkbox-group.pssg-checkbox-group-columns-setting').append(newCheckBox);


            $('tr.pssg-premium-row .pssg-cf-wrapper.pssg-cf-wrapper-single').last().after(newCustomField);    
        });
        // Premium Content End Here

        // Save Change and Sync button handler
        $(document.body).on('click', '#pssg-save-and-sync-btn', function (e) {
            e.preventDefault();

            var btn = $(this);
            var syncNonce    = btn.data('nonce');
            var syncLimit    = parseInt( btn.data('limit') ) || 9999999;
            var syncPerPage  = parseInt( btn.data('per_page') ) || 10;
            var btnIcon      = btn.find('span i');
            var btnTextCont  = btn.find('strong.form-submit-text');
            var btnPrevText  = btnTextCont.text();

            // Disable button and show saving state
            btn.prop('disabled', true);
            btnIcon.attr('class', 'pssg_icon-spin5 animate-spin');
            btnTextCont.text(PSSG_DATA.text.saving_msg);

            var formElement = $('form#pssg-other-settings-form');
            var formData = generateFormData(formElement);

            // Step 1: Save settings
            $.ajax({
                type: 'POST',
                url: ajaxurl,
                data: {
                    action: 'pssg_configure_form_submit',
                    data: formData
                },
                success: function (saveResponse) {
                    // Step 2: Start sync
                    var mainWrapper      = $('#pssg-settings-sync-wrapper');
                    var messageBox       = mainWrapper.find('.message-showing-area');
                    var errorsDetailsArea = mainWrapper.find('.errors-details-area');
                    var countBox         = btn.find('.product_count');
                    var btnCompleteText  = PSSG_DATA.text.sync_done_msg;

                    btnTextCont.text(PSSG_DATA.text.pause);
                    messageBox.html(PSSG_DATA.text.syncing_msg);
                    mainWrapper.attr('data-sync_status', 'playing');

                    var paged = 1;
                    var saveAndSyncInterval = setInterval(function () {

                        var currentStatus = mainWrapper.attr('data-sync_status');
                        if (currentStatus !== 'playing') {
                            messageBox.html(PSSG_DATA.text.paused);
                            return;
                        }

                        $.ajax({
                            type: 'POST',
                            url: ajax_url,
                            dataType: 'json',
                            data: {
                                action: 'pssg_syncronize_products',
                                paged: paged,
                                nonce: syncNonce
                            },
                            complete: function (status) {
                                $(document.body).trigger('pssg_syncronize_complete', status);
                            },
                            success: function (syncResponse) {
                                paged++;
                                var count = syncResponse.count;
                                if (countBox.length) countBox.text(count);

                                if (syncResponse.status === 'failed' && syncResponse.error === 'ProductEmpty') {
                                    messageBox.html(PSSG_DATA.text.all_syncronized_msg);
                                    btnTextCont.text(btnCompleteText);
                                    clearInterval(saveAndSyncInterval);
                                    mainWrapper.attr('data-sync_status', 'waiting');
                                    btnIcon.removeClass('animate-spin');
                                    btn.prop('disabled', false);
                                    return;
                                } else if (syncResponse.status === 'failed') {
                                    if (syncResponse.error === 'LimitCross') {
                                        messageBox.html(PSSG_DATA.text.sync_limit_crossed);
                                    } else {
                                        messageBox.html(PSSG_DATA.text.check_error_msg);
                                    }
                                    errorsDetailsArea.find('.error-code').html(PSSG_DATA.text.response_error_code + syncResponse.error);
                                    var errorsListHtml = '';
                                    $(syncResponse.errors).each(function (i, errItem) {
                                        errorsListHtml += '<p class="each-errors-item">' + errItem + '</p>';
                                    });
                                    errorsDetailsArea.find('.errors-lists').html(errorsListHtml);
                                    btnTextCont.text(btnPrevText);
                                    clearInterval(saveAndSyncInterval);
                                    mainWrapper.attr('data-sync_status', 'waiting');
                                    btnIcon.removeClass('animate-spin');
                                    btn.prop('disabled', false);
                                    return;
                                }

                                if (syncResponse.status === 'success' && syncResponse.hasOwnProperty('data_response')) {
                                    var data_response = syncResponse.data_response;
                                    if (data_response.hasOwnProperty('error')) {
                                        var apiError  = data_response.error;
                                        var fullError = PSSG_DATA.text.check_connection_msg + '\n' + 'code: ' + apiError.code + ' | ' + apiError.message;
                                        messageBox.html('Connection Error');
                                        errorsDetailsArea.find('.error-code').html('GoogleSheet Error Code: ' + apiError.code);
                                        var errList = '<p class="error-code">- ' + apiError.message + '</p>'
                                                    + '<p class="error-code">- ' + apiError.status + '</p>'
                                                    + '<p class="error-code">See <a href="admin.php?page=pssg-api-logs" target="_blank">API Logs</a> for details.</p>';
                                        errorsDetailsArea.find('.errors-lists').html(errList);
                                        alert(fullError);
                                        btnTextCont.text(btnPrevText);
                                        clearInterval(saveAndSyncInterval);
                                        mainWrapper.attr('data-sync_status', 'waiting');
                                        btnIcon.removeClass('animate-spin');
                                        btn.prop('disabled', false);
                                        return;
                                    } else if (data_response.hasOwnProperty('updatedRows')) {
                                        messageBox.html(PSSG_DATA.text.syncing_msg);
                                        if ((count + syncPerPage) > syncLimit) {
                                            messageBox.html(PSSG_DATA.text.sync_done_msg);
                                            clearInterval(saveAndSyncInterval);
                                            mainWrapper.attr('data-sync_status', 'waiting');
                                            btnIcon.removeClass('animate-spin');
                                            btnTextCont.text(btnCompleteText);
                                            btn.prop('disabled', false);
                                        }
                                    }
                                }
                                $(document.body).trigger('pssg_syncronize_response', syncResponse);
                            },
                            error: function (error) {
                                btnTextCont.text(btnPrevText);
                                messageBox.html('ErrorOnSyncronize');
                                btnIcon.removeClass('animate-spin');
                                clearInterval(saveAndSyncInterval);
                                mainWrapper.attr('data-sync_status', 'waiting');
                                btn.prop('disabled', false);
                                $(document.body).trigger('pssg_syncronize_error', error);
                            }
                        });

                    }, sync_btn_interval);
                },
                error: function (error) {
                    btnTextCont.text(btnPrevText);
                    btnIcon.attr('class', 'pssg_icon-floppy');
                    btn.prop('disabled', false);
                    console.log(error.responseText);
                }
            });
        });

        // Reset Settings button handler
        $(document.body).on('click', '#pssg-reset-settings-btn', function (e) {
            e.preventDefault();

            var confirmMsg = (PSSG_DATA.text && PSSG_DATA.text.reset_settings_confirm)
                ? PSSG_DATA.text.reset_settings_confirm
                : 'Are you sure you want to reset all settings to default? This action cannot be undone.';

            if ( ! confirm(confirmMsg) ) {
                return;
            }

            var btn = $(this);
            var nonce = btn.data('nonce');
            var btnIcon = btn.find('span i');
            var prevIcon = btnIcon.attr('class');

            btn.prop('disabled', true);
            btnIcon.attr('class', 'pssg_icon-spin5 animate-spin');

            $.ajax({
                type: 'POST',
                url: ajaxurl,
                data: {
                    action: 'pssg_reset_settings',
                    nonce: nonce
                },
                success: function (response) {
                    try {
                        var res = typeof response === 'string' ? JSON.parse(response) : response;
                        if (res.success) {
                            var successMsg = (PSSG_DATA.text && PSSG_DATA.text.reset_settings_success)
                                ? PSSG_DATA.text.reset_settings_success
                                : res.data.message;
                            alert(successMsg);
                            location.reload();
                        } else {
                            alert(res.data && res.data.message ? res.data.message : 'Reset failed.');
                        }
                    } catch (err) {
                        console.log(err);
                    }
                },
                error: function (error) {
                    console.log(error.responseText);
                },
                complete: function () {
                    btn.prop('disabled', false);
                    btnIcon.attr('class', prevIcon);
                }
            });
        });

    });
});