var uptoOnline = {
    /**
     * @description sắp xếp vị trí các ảnh.
     */

    sortable: function () {
        $("#sortable").sortable({
            revert: true,
            opacity: 0.7,
            start: function (evt, ui) {
                //console.log('start')
            },
            stop: function (evt, ui) {
                imageItem = $(".itemImage")

                $('.imagestep').each(function (index) {
                    $(this).attr('src', '/' + $(imageItem[index]).attr('data'));
                })

                $('.stepfile').each(function (index) {
                    $(this).val($(imageItem[index]).attr('data'));
                })

                $('.remove').each(function (index) {
                    $(this).attr('data', index)
                })
                $('.steps').each(function (index) {
                    $(this).attr('id', 'step' + index)
                })


            }
        });
    },


    saveToOnline: function () {
        $('#submitcreatectip').click(function () {
            function trySave() {
                let saving = localStorage.getItem("saving");

                // if (saving === "true") {
                //     // Có tab khác đang lưu -> chờ 500ms rồi thử lại
                //     setTimeout(trySave, 4000);
                //     return;
                // }

                // Đặt flag cho tất cả tab biết là đang lưu
                localStorage.setItem("saving", "true");

                let html = "<span><img src='/asset/images/load.webp' width='25px' />Đang lưu</span>";
                $('#submitcreatectip').html(html);

                let formData = $('#createtip').serializeArray();

                $.ajax({
                    type: "post",
                    url: "/savetip",
                    dataType: "json",
                    data: formData,
                    success: (msg) => {
                        if (msg[1].indexOf("/") != -1) {
                            setTimeout(function () {
                                window.location.href = "http://handmadev.com" + msg[1];
                            }, 2000);
                        } else {
                            $('#saveStatus').html("<a target='_blank' href=http://handmadev.com" + msg[1] + ">" + msg[1] + "</a>");
                            $('#submitcreatectip').html('Lưu hướng dẫn');
                        }
                    },
                    error: function (request, error) {
                        console.error("Lỗi lưu:", error);
                    },
                    complete: function () {
                        // Quan trọng: clear flag để tab khác có thể lưu
                        localStorage.setItem("saving", "false");
                    }
                });
            }

            trySave();
        });
    },



    removeImage: function () {
        $('.remove').click(function () {
            data = $(this).attr('data');
            console.log(data)
            $('#step' + data).remove();
            $(this).parent().remove();
        });
    },
    uptoDraft: function () {
        $('.upToDraft').click(function () {
            data = $(this).attr('data');

            $('#uploadDraft').html("<a target='_blank' href=http://handmadev.com>1111</a>");

            token = $('#_token').val();
            $.ajax({
                type: "post",
                url: "/upToDraft",
                dataType: "json",
                data: {url: data, _token: token},
                success: function (msg) {
                    $('#uploadDraft').html("<a target='_blank' href='http://handmadev.com" + msg + "'>" + msg + "</a>");
                },
                error: function (request, error) {
                    console.log(request, error);
                }
            });//End ajax
        });
    },
    samePost: function () {

        // var height = $('#sortable').height();
        // var windowHeight = $(window).height()
        // height = windowHeight - height-144;
        // $('#samePostList').css({
        //     height:height+'px',
        //
        // })
        // console.log(height);

        $('.samePostInput').change(function () {
            value = $(this).val();
            uptoOnline.getSamePort(value);
        });
    },

    getSamePort: function (value) {
        token = $('#_token').val();


        $.ajax({
            type: "post",
            url: "/getSamePost",
            dataType: "json",
            data: {value: value, _token: token},
            success: function (datas) {
                if (datas['checkslug'] > 0) {
                    $('.countSlug').text('checkSlug: ' + datas['checkslug']);
                } else {
                    $('.countSlug').text('');
                }

                let data = datas.pinter;
                // console.log(data);
                $('.result').text(data.length);
                $('.result').removeClass('loadingBackground');
                $('#samePostList').html('');
                let string = '';
                $.each(data, function (key, value) {
                    let numImgs = 0;
                    if (typeof value.imagestep !== 'undefined') {
                        numImgs = value.imagestep.length;
                    }

                    if (value && value.imageintro && value.imageintro['237'] && value.imageintro['237'].url !== null) {
                        string += '<li>\n' + key +" || "+ (numImgs +1) +
                            '<p><a href="http://handmadev.com/p/' + value.slug + '">' + value.title + '</a></p>\n' +
                            '<img src="http://img.handmadev.com.local/' + value.imageintro['237'].url + '" />\n';
                    }

                    if (value.imagestep) {
                        $.each(value.imagestep, function (key, value) {
                            if (value && value.url !== null) {
                                string += '<img src="http://img.handmadev.com.local/' + value.url + '" />\n';
                            }
                        });
                        string += '</li>';
                    }
                });
                $('#contact-tab').text('Same Name: ' + data.length);
                $('#samePostList').append(string);
            },
            error: function (request, error) {
                console.log(request, error);
            }
        });//End ajax
    },


    /**
     * neu extention đổi lại title thì chạy lại 1 lần
     */
    getSamePortFullTitle: function () {
        var title = '';
        setInterval(function () {
            titleTmp = $('#title').val();
            if (title !== titleTmp) {
                title = titleTmp;
                uptoOnline.getSamePort(title);
            }
        }, 3000);
    },

    addTitlefullInput: function () {
        inputIntro = $('#intro').val();
        inputIntro = $.trim(inputIntro);
        $('#fullTitle').keyup(function () {
            $('.result').addClass('loadingBackground');
            value = $(this).val();

            if (inputIntro == '') {
                $('#intro').val(value);
            }

            $("input[name='title']").val(value);
            $("#prepare").val(value);
            textarea = $(".steps textarea");

            textarea.each(function () {
                idInput = $(this).attr('id');
                if (idInput != 'intro') {
                    $(this).val(value);
                }
            });
        })
    },
    focus: function () {
        $('.zoomAction').click(function () {
            $('#fullTitle').focus();
        })
        $('#fullTitle').focus();
    },
    removeATag: function () {
        // Chuỗi HTML ban đầu
        var htmlString = '<p>This is a <a href="#">link</a> and <a href="#">another link</a>.</p>';

// Tạo một phần tử div ẩn để chứa chuỗi HTML
        var tempDiv = document.createElement('div');
        tempDiv.innerHTML = htmlString;

// Lấy danh sách tất cả các thẻ <a>
        var anchorTags = tempDiv.getElementsByTagName('a');

// Lặp qua từng thẻ <a> và thay thế nó bằng nội dung bên trong
        for (var i = anchorTags.length - 1; i >= 0; i--) {
            var content = anchorTags[i].innerHTML;
            anchorTags[i].outerHTML = content;
        }

// Lấy chuỗi HTML sau khi xóa các thẻ <a>
        var filteredString = tempDiv.innerHTML;
    },

    getTitle:function(){
        $('#getTitle').click(function () {
            let title= $('#content').text();
            title = title.substring(0, 90);
            $('#fullTitle').val(title).trigger('change').trigger('keyup');
        });
    },

    convertImageToText: function () {
        token = $('#_token').val();
        //lấy category by name
        category = $('input[name="category"]:checked').val();
        console.log(category);
        token = $('#_token').val();
        id = $('#id').val();
        $('.convertImageToText').click(function () {
            let button = $(this);
            button.addClass('loadingBackground'); // Thêm hiệu ứng loading
            button.text('loading'); // Bỏ hiệu ứng loading sau khi hoàn thành
            url = button.attr('url');
            console.log(url);
            image = button.attr('data');
            language = button.attr('language');
            console.log(language);

            //if((language === 'VietNam' || category == 'food') && url !== 'www.tiktok.com'){//nếu là tiếng việt thì thôi
            if((language === 'VietNam' || category == 'food')){//nếu là tiếng việt thì thôi
                uptoOnline.showToast('Tiếng việt hoặc food thì không lấy title', 'error');
                return;
            }

            $.ajax({
                type: "post",
                url: "/convertImageToText",
                dataType: "json",
                data: {image: image, language: language, _token: token, categoryItem: category , id: id},
                success: function (datas) {
                    $('.convertImagesToTitle').html(datas.data.original + ' <Br> ' + datas.data.vietnamese);
                    $('#title').val(datas.data.original);
                    $('#fullTitle').val(datas.data.original);
                    $('#fullTitle').trigger('change').trigger('keyup');
                },
                error: function (response) {
                    console.log(response)
                    uptoOnline.showToast('Error: ' + response.responseJSON.message, 'error');
                },
                complete: function () {
                    button.removeClass('loadingBackground'); // Bỏ hiệu ứng loading sau khi hoàn thành
                    button.text('Get title'); // Bỏ hiệu ứng loading sau khi hoàn thành
                }
            });//End ajax
        })
    },
    checkDuplicateHandmadev: function () {
        $('.checkDuplicateHandmadev').click(function () {
            let button = $(this);
            const image = button.attr('image');
            button.addClass('loadingBackground'); // Thêm hiệu ứng loading
            button.text('loading'); // Bỏ hiệu ứng loading sau khi hoàn thành
            token = $('#_token').val();
            $.ajax({
                type: "post",
                url: "/checkDuplicateHandmadev",
                dataType: "json",
                data: {image:image, _token: token},
                success: function (datas) {
                    let imagesString = '';
                    $('#home-tab').text("Handmadev "+datas['images'].length);
                    // $.each(datas['images'], function (key, value) {
                    //     img = value.split('|')[1];
                    //     imagesString += '<img class="zoomAction" width="100px" src="http://img.handmadev.com.local/' + img + '" data-action="zoom"/>\n';
                    // })
                    // $('#duplicateImageHandmade').html(imagesString);

                    let sameLink = '<br>';
                    $.each(datas['link'], function (key, value) {
                        length = 0;
                        if (value['imagestep'] && Array.isArray(value['imagestep'])) {
                            length = value['imagestep'].length + 1;
                            sameLink += '<a class="sameLink" target="_blank" href="http://handmadev.com/p/' + value['slug'] + '" >' + value['slug'] + '</a> <span style="font-size: 20px;font-weight: bold">'+length+'</span> <br>';
                            sameLink += '<img width="150px" src="http://img.handmadev.com.local/' + value.imageintro['600']['url'] + '" class="zoomAction" data-action="zoom"/>';
                            $.each(value['imagestep'], function (key, valueImg) {
                                sameLink += '<img width="150px" src="http://img.handmadev.com.local/' + valueImg.url + '" class="zoomAction" data-action="zoom"/>';
                            })
                            sameLink += '<br>';
                        } 

                    })
                    $('#duplicateImageHandmade').append(sameLink);
                    
                },
                error: function (response) {
                    uptoOnline.showToast('Error: ' + response.responseJSON.message, 'error');
                },
                complete: function () {
                    button.removeClass('loadingBackground'); // Bỏ hiệu ứng loading sau khi hoàn thành
                    button.text('Check'); // Bỏ hiệu ứng loading sau khi hoàn thành
                }
            });//End ajax
        });
    },
    getDuplicateTikInst: function () {
        $('.getDuplicateTikIns').click(function () {
            let button = $(this);
            const image = button.attr('image');
            button.addClass('loadingBackground'); // Thêm hiệu ứng loading
            button.text('loading'); // Bỏ hiệu ứng loading sau khi hoàn thành
            token = $('#_token').val();
            $.ajax({
                type: "post",
                url: "/getDuplicateTikIns",
                dataType: "json",
                data: {image:image, _token: token},
                success: function (datas) {
                    const currentUrl = window.location.href;
                    const id = currentUrl.split('/')[4];
                    console.log(id);
                    let ins = "";

                    
                    if (datas['ins']) {

                        $('#profile-tab').text("ins: " + Object.keys(datas['ins']).length);
                        $.each(datas['ins'], function (key, value) {
                            console.log(key +'---'+ id);
                            
                            if (key !== id) {

                                ins += `<p>${key} <button class="removeINS" key="${key}">Remove</button></p>`;
                                $.each(value['imagesDownload'], function (key, valueImg) {
                                    ins += `<img width="100px" src='http://groupfacebook.com/${valueImg}' class="zoomAction" data-action="zoom" />`;
                                });
                                ins += "<br><br>";
                            }
                            console.log(ins);
                            
                        });
                        $('#samePost').append(ins);
                    }
                    if (datas['tik']) {
                        $('#profile-tab').append("tik: " + Object.keys(datas['tik']).length);
                        $.each(datas['tik'], function (key, value) {
                            if(key !== id){
                                ins += `<p>${key}</p>`
                                $.each(value['downloadImage'], function (key, valueImg) {
                                    ins += `<img width="100px" src='http://groupfacebook.com/${valueImg}' class="zoomAction" data-action="zoom" />`;
                                })
                                ins +="<br><br>";
                            }
                        })
                        $('#samePost').append("<hr> TikTok <hr>");
                        $('#samePost').append(ins);
                    }
                },
                error: function (response) {
                    uptoOnline.showToast('Error: ' + response.responseJSON.message, 'error');
                },
                complete: function () {
                    button.removeClass('loadingBackground'); // Bỏ hiệu ứng loading sau khi hoàn thành
                    button.text('Check'); // Bỏ hiệu ứng loading sau khi hoàn thành
                }
            });//End ajax
        });

        //setTimeout(function () {
            $('.checkDuplicateHandmadev').first().click();
            $('.getDuplicateTikIns').first().click();
            $('.convertImageToText').first().click();
        //}, 4000);
        

    },

    showToast:function(msg, type) {
        let typeToast = {
            success: "linear-gradient(to right, #00b09b, #96c93d)",
            error: "red",
            warning: "yellow",
        };
        Toastify({
            text: msg,
            duration: 3000,
            close: true,
            gravity: "top", // `top` or `bottom`
            position: "right", // `left`, `center` or `right`
            stopOnFocus: true, // Prevents dismissing of toast on hover
            style: {
                background: typeToast[type],
            },
            onClick: function () {
            } // Callback after click
        }).showToast();
    },

    changeLanguage: function () {

        $('.language').change(function () {
            let language = $(this).val();
            let id = $(this).attr('id');
            let labelText = $('label[for="' + id + '"]').text();
            labelText = labelText.trim();
            console.log(labelText);
            $('.convertImageToText').attr('language', labelText);
        })

        //let idLang = $("input[name='language']").val();

        var id = $('input[name="language"]:checked').attr('id');
        let labelText = $('label[for="' + id + '"]').text();
        labelText = labelText.trim();
        console.log(labelText);
        $('.convertImageToText').attr('language', labelText);
        
        console.log(id);

    }

};

$(function () {
    console.log('uptoOnline');
    uptoOnline.changeLanguage();

    uptoOnline.sortable();
    uptoOnline.saveToOnline();
    uptoOnline.uptoDraft();
    uptoOnline.removeImage();
    uptoOnline.samePost();
    uptoOnline.addTitlefullInput();
    uptoOnline.focus();
    uptoOnline.getSamePortFullTitle();
    uptoOnline.getTitle();
    uptoOnline.convertImageToText();
    uptoOnline.checkDuplicateHandmadev();
    uptoOnline.getDuplicateTikInst();
});