tiktokList = {
    /**
     * hover vao bai viet thi duoc tinh la da xem bai do
     */
    chooseCategory:function(){
        $('.categories').click(function(){
            let dataId = $(this).attr('data-id');
            let value = $(this).val();
            $.ajax({
                type: "post",
                url: "/tiktok/choose-category",
                dataType: "json",
                data: {'dataId': dataId,value:value},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (msg) {

                },
                error: function (request, error) {
                }
            });//End ajax
        });
    },
    removeImagesTiktok:function(){
        $(document).on('click','.removeAll',function(){
            data = $(this).attr('data');
            const postList = $(this);
            $.ajax({
                type: "post",
                url: "/tiktok/removeImagesTiktok",
                dataType: "json",
                data: {'id': data},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (msg) {
                    console.log(msg);
                    console.log(msg.id);
                    $('.'+data).remove();
                    postList.parent().remove();
                },
                error: function (request, error) {
                }
            });//End ajax
        });

        $(document).on('click','.instagramRemoveAll',function(){
            data = $(this).attr('data');
            const postList = $(this);
            $.ajax({
                type: "post",
                url: "/instagram/removeImagesInstagram",
                dataType: "json",
                data: {'id': data},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (msg) {
                    console.log(msg);
                    console.log(msg.id);
                    $('.'+data).remove();
                    postList.parent().remove();
                },
                error: function (request, error) {
                }
            });//End ajax
        });
    },

    getDuplicate:function(){
        $('.getDup').click(function(){
            dataimage = $(this).attr('dataimage');
            dataId = $(this).attr('data');
            console.log(dataimage);
            $.ajax({
                type: "post",
                url: "/getDuplicateTikIns",
                dataType: "json",
                data: {'image': dataimage},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (data) {
                    console.log(data);
                    string = '';
                    $.each(data, function(index, value){
                        console.log(value);
                        item = "<div class='"+index+"' style='color: red;'>"+index+"<br>";
                        className = '';
                        if (index == 'ins') {
                            className = 'instagramRemoveAll';
                        } else {
                            className = 'removeAll';
                        }
                        item += "<div class='imageDup'>";
                        $.each(value, function(index1, value1){
                            if(dataId != index1){
                                item += "<div class='imageDupItem "+index1+"'>"+index1+"<button class='"+className+"' data = "+index1+">Remove</button>";
                                if (value1['imagesDownload']) {
                                    item += "<span style='font-size: 20px;font-weight: bold;'> "+value1['imagesDownload'].length+"<br>";
                                    $.each(value1['imagesDownload'], function(index2, value2){
                                        item += "<img src='"+value2+"' style='width: 100px; margin: 5px;' data-action='zoom'/>";
                                    });
                                }
                                if (value1['downloadImage']) {
                                    item += "<span style='font-size: 20px;font-weight: bold;'> "+value1['downloadImage'].length+"<br>";
                                    $.each(value1['downloadImage'], function(index2, value2){
                                        item += "<img src='"+value2+"' style='width: 100px; margin: 5px;' data-action='zoom'/>";
                                    });
                                }
                                item += "</div>";    
                            }
                        });
                        item += "</div>";
                        item += "</div>";
                        string += item;
                    });
                    $('#dup'+dataId).html(string);
                },
                error: function (request, error) {
                }
            });//End ajax


            $.ajax({
                type: "post",
                url: "/checkDuplicateHandmadev",
                dataType: "json",
                data: {'image': dataimage},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (data) {
                    console.log(data);
                    sameLink = '';
                    $.each(data['link'], function(index, value){ 
                        length = 0;
                        scoreClass = '';
                        if (value['imagestep'] && Array.isArray(value['imagestep'])) {
                            length = value['imagestep'].length + 1;
                            if(value['score']>=0.87){ scoreClass = 'heighScore'};
                            sameLink +=  `<span class="${scoreClass}">${value['score']} </span>:  <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="100px" style=" margin: 5px;" src="http://img.handmadev.com.local/' + value.imageintro['600']['url'] + '" class="zoomAction" data-action="zoom"/>';
                            $.each(value['imagestep'], function (key, valueImg) {
                                sameLink += '<img width="100px" style=" margin: 5px;" src="http://img.handmadev.com.local/' + valueImg.url + '" class="zoomAction" data-action="zoom"/>';
                            })
                            sameLink += '<br>';
                        } 
                    });
                    $('#dupHandmadev'+dataId).html(sameLink);
                },
                error: function (request, error) {
                }
            });//End ajax
        });
    },

    getlanguage:function(){
        // lấy ngôn ngữ của ảnh.
        $('.getLanguage').click(function(){
            let divGetLanguage = $(this);
            dataimage = $(this).attr('dataimage');
            dataId = $(this).attr('data');
             $(this).text('Loading...');
            $.ajax({
                type: "post",
                url: "/getLanguage",
                dataType: "json",
                data: {'dataimage': dataimage, 'dataId': dataId},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (data) {
                    $('#datalang'+dataId).text(data.result);
                    divGetLanguage.text('lang');
                },
                error: function (request, error) {
                }
            });//End ajax
        })
    },

    saveLangName:function(){
        $('.langName').change(function () {
            let dataId = $(this).attr('data-id');
            let value = $(this).val();
            $('#langCode'+dataId).val($(this).attr('data-code'));
            $('#langName'+dataId).val(value);
            
            console.log(dataId)
            console.log(value)
            //thiết lập lang cho button gettitle
            $('.getLangButton'+dataId).attr('datalang',value);

            $.ajax({
                type: "post",
                url: "/tiktok/saveLangName",
                dataType: "json",
                data: {'dataId': dataId, 'value': value},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (msg) {
                    console.log(msg);
                },
                error: function (request, error) {
                     tiktokList.showtoast(error.message);
                }
            });//End ajax
        });
    },
    showtoast:function(text){
        $.toast({
            text: text, // Text that is to be shown in the toast
            heading: 'Note', // Optional heading to be shown on the toast
            icon: 'success', // Type of toast icon
            showHideTransition: 'fade', // fade, slide or plain
            allowToastClose: true, // Boolean value true or false
            hideAfter: 5000, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden
            stack: 10, // false if there should be only one toast at a time or a number representing the maximum number of toasts to be shown at a time
            position: 'top-center', // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
            textAlign: 'left',  // Text alignment i.e. left, right or center
            loader: true,  // Whether to show loader or not. True by default
            loaderBg: '#9EC600',  // Background color of the toast loader
        });
    },
    
    getDuplicateSequential: function(){
        const self = this;
        const tdElements = $('td');
        let currentIndex = 0;

        function processNextTd() {
            if (currentIndex >= tdElements.length) {
                console.log('Đã xử lý xong tất cả td');
                return;
            }

            const currentTd = $(tdElements[currentIndex]);
            const getDupElement = currentTd.find('.getDup:first');
            
            if (getDupElement.length === 0) {
                currentIndex++;
                processNextTd();
                return;
            }

            const dataimage = getDupElement.attr('dataimage');
            const dataId = getDupElement.attr('data');
            
            console.log(`Đang xử lý td ${currentIndex + 1}/${tdElements.length}, dataId: ${dataId}`);

            // Gọi ajax đầu tiên
            $.ajax({
                type: "post",
                url: "/getDuplicateTikIns",
                dataType: "json",
                data: {'image': dataimage},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (data) {
                    console.log('Ajax 1 completed for:', dataId);
                    // Xử lý kết quả ajax 1 (code cũ của bạn)
                    let string = '';
                    $.each(data, function(index, value){
                        let item = "<div class='"+index+"' style='color: red;'>"+index+"<br>";
                        let className = (index == 'ins') ? 'instagramRemoveAll' : 'removeAll';
                        item += "<div class='imageDup'>";
                        $.each(value, function(index1, value1){
                            if(dataId != index1){
                                item += "<div class='imageDupItem "+index1+"'>"+index1+"<button class='"+className+"' data = "+index1+">Remove</button>";
                                if (value1['imagesDownload']) {
                                    item += "<span style='font-size: 20px;font-weight: bold;'> "+value1['imagesDownload'].length+"<br>";
                                    $.each(value1['imagesDownload'], function(index2, value2){
                                        item += "<img src='"+value2+"' style='width: 100px; margin: 5px;' data-action='zoom'/>";
                                    });
                                }
                                if (value1['downloadImage']) {
                                    item += "<span style='font-size: 20px;font-weight: bold;'> "+value1['downloadImage'].length+"<br>";
                                    $.each(value1['downloadImage'], function(index2, value2){
                                        item += "<img src='"+value2+"' style='width: 100px; margin: 5px;' data-action='zoom'/>";
                                    });
                                }
                                item += "</div>";    
                            }
                        });
                        item += "</div></div>";
                        string += item;
                    });
                    $('#dup'+dataId).html(string);

                    // Gọi ajax thứ hai sau khi ajax đầu tiên hoàn thành
                    $.ajax({
                        type: "post",
                        url: "/checkDuplicateHandmadev",
                        dataType: "json",
                        data: {'image': dataimage},
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (data) {
                            console.log('Ajax 2 completed for:', dataId);
                            // Xử lý kết quả ajax 2 (code cũ của bạn)
                            let sameLink = '';
                            $.each(data['link'], function(index, value){ 
                                let length = 0;
                                let scoreClass = '';
                                if (value['imagestep'] && Array.isArray(value['imagestep'])) {
                                    length = value['imagestep'].length + 1;
                                    if(value['score']>0.87){ scoreClass = 'heighScore'};
                                    sameLink +=  `<span class="${scoreClass}">${value['score']} </span>:  <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="100px" style=" margin: 5px;" src="http://img.handmadev.com.local/' + value.imageintro['600']['url'] + '" class="zoomAction" data-action="zoom"/>';
                                    $.each(value['imagestep'], function (key, valueImg) {
                                        sameLink += '<img width="100px" style=" margin: 5px;" src="http://img.handmadev.com.local/' + valueImg.url + '" class="zoomAction" data-action="zoom"/>';
                                    })
                                    sameLink += '<br>';
                                } 
                            });
                            $('#dupHandmadev'+dataId).html(sameLink);

                            // Chuyển sang td tiếp theo sau khi hoàn thành cả 2 ajax
                            currentIndex++;
                            setTimeout(processNextTd, 70); // Delay 500ms trước khi xử lý td tiếp theo
                        },
                        error: function (request, error) {
                            console.error('Ajax 2 failed for:', dataId);
                            currentIndex++;
                            processNextTd();
                        }
                    });
                },
                error: function (request, error) {
                    console.error('Ajax 1 failed for:', dataId);
                    currentIndex++;
                    processNextTd();
                }
            });
        }

        // Bắt đầu xử lý từ td đầu tiên
        processNextTd();
    },
    getTitle: function() {
        $(document).on('click', '.getTitle', function() {
            let button = $(this);
            button.addClass('loadingBackground'); // Thêm hiệu ứng loading
            button.text('đang tải...title'); // Thêm hiệu ứng loading
            var dataId = $(this).attr('data');
            var dataImage = $(this).attr('dataimage');
            console.log('Get title for ID:', dataId);
            console.log('Data image:', dataImage);            
            // Add your AJAX call or other logic here to get the title
            let id = $(this).attr('data');
            let langName = $('input[name="lang'+id+'"]').val();
            let datalangCode = $('input[name="langCode'+id+'"]').val();
            let categoryItem = $('input[name="categories'+id+'"]:checked').val();

            $.ajax({
                type: "post",
                url: "/convertImageToText",
                dataType: "json",
                data: {
                    image: dataImage,
                    language: langName,
                    languageCode: datalangCode,
                    categoryItem: categoryItem,
                    id: id,
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: (datas)  =>  { 
                    if (datas.data && datas.data.vietnamese) {
                        $('#title'+id).text(datas.data.vietnamese);
                        tiktokList.showToast(datas.data.vietnamese,'success')
                    }else{
                        $('#title'+id).text(datas.data.original);
                        tiktokList.showToast(datas.data.original,'success')
                    }
                    $('#title'+id).val(datas.data.original);
                    $('#uploadButton'+id).click();
                },
                error: function (response) {
                    console.log(response)
                    tiktokList.showToast('Error: ' + response.responseJSON.message, 'error');
                },
                complete: () => {
                    button.removeClass('loadingBackground'); // Bỏ hiệu ứng loading sau khi hoàn thành
                    button.text('title'); // Bỏ hiệu ứng loading sau khi hoàn thành
                }
            });//End ajax
        });
    },

    maplang:function(lang){
        let language = {
            'ru':'rus',
            'uk':'ukr',
            'fr':'fr',
            'en':'en',
            'es':'es',
            'por':'por',
            'tr':'tr',
            'rus':'rus',
            'ira':'ira',
            'vi':'vi',
        }

        if(language[lang]){
            return language[lang]
        }
        return lang;

    },

    upload:function(){
        $('.updateTitleButton').click(function(){
            uploadButton = $(this)
            uploadButton.text('đang upload');
            id = $(this).attr('data-id');
            content = $('#content'+id).text();
            let title = $('#title'+id).val()
            language = tiktokList.maplang($('#langCode'+id).val())
            console.log(language);
            submitData = [];
            let data = {'name':'fullTitle','value':title};
            submitData.push(data)

            data = {'name':'title','value':title};
            submitData.push(data)

            data = {'name':'id','value':id};
            submitData.push(data)

            data = {'name':'numberstep','value':1};
            submitData.push(data)

            data = {'name':'time','value':1};
            submitData.push(data)

            data = {'name':'board','value':'6099056be2e29076975b9352'};
            submitData.push(data)

            categoryItem = $('input[name="categories'+id+'"]:checked').val();
            data = {'name':'category','value':categoryItem};
            submitData.push(data)

            data = {'name':'language','value':language};
            submitData.push(data)

            data = {'name':'price','value':1};
            submitData.push(data)

            data = {'name':'nguon','value':'https://www.instagram.com'+$('#url'+id).val()};
            submitData.push(data)

            //lay anh dau tien
            let firstImg = $("td.imglist"+id).first().find("img").first();
            firstImg = firstImg.attr("src");


            if (!firstImg) {
                alert('ko tim thay anh dau tien')
                return;
            }

            data = {'name':'fileimageintro','value':firstImg};
            submitData.push(data)

            data = {'name':'intro','value':title};
            submitData.push(data)
            
            content = $('.content'+id).html();
            // Remove <a> tags but keep their content
            content = content.replace(/<a[^>]*>(.*?)<\/a>/gi, '$1');
            content = content.trim();
            if (content === "") {
                content = title;
            }
            data = {'name':'prepare','value':content};
            submitData.push(data)

            key = 0;
            $("div.imageContainer"+id).each(function (){
                if(key>0){
                    url = $(this).find("img").attr('src');
                    console.log(url)
                    data = {'name':'imagestep[]','value':url};
                    submitData.push(data)
                    data = {'name':'guide[]','value':title};
                    submitData.push(data)
                }
                key ++;             
            });

            console.log(submitData);
            $.ajax({
                type: "post",
                url: "/savetip",
                dataType: "json",
                data: submitData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: (msg) => {
                    console.log(msg)
                    if (msg[1].indexOf("/") != -1) {
                        console.log(msg[1]);
                        url = '<a target="_blank" href="http://handmadev.com' + msg[1] + '" style="color: red; background: yellow">' + 'http://handmadev.com' + msg[1]+'</a>';
                        console.log(url)
                        $('#uploadData'+id).append(url)
                        tiktokList.showToast('http://handmadev.com' + msg[1],'success',node = 1)
                    } else {
                        $('#saveStatus').html("<a target='_blank' href=http://handmadev.com" + msg[1] + ">" + msg[1] + "</a>");
                        $('#submitcreatectip').html('Lưu hướng dẫn');
                        tiktokList.showToast(msg,'error')
                    }

                    uploadButton.text('đã up upload xong');
                },
                error: function (request, error) {
                    console.error("Lỗi lưu:", error);
                    tiktokList.showToast(error,'error')
                },
                complete: function () {
                    // Quan trọng: clear flag để tab khác có thể lưu
                    localStorage.setItem("saving", "false");
                }
            });
        })
    },
    
    showToast:function(msg, type, node = 0) {
        let typeToast = {
                success: "linear-gradient(to right, #00b09b, #96c93d)",
                error: "red",
                warning: "yellow",
            };

        if(node == 1){
            let link = document.createElement("a");
            link.href = msg;
            link.textContent = msg;
            link.target = "_blank"; // mở tab mới nếu muốn
            link.style.color = "#fff"; // chỉnh màu nếu cần

            Toastify({
                node: link, // dùng node thay cho text
                duration: 10000,
                close: true,
                gravity: "top",
                position: "right",
                stopOnFocus: true,
                style: {
                    background: typeToast[type],
                }
            }).showToast();
        }else{
            
            Toastify({
                text: msg,
                duration: 10000,
                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();
        }
    },
    delItem:function(){
        $('.delItem').on('click', function () {
            $(this).parent().remove();
        });
    }

}

$(function () {
    tiktokList.removeImagesTiktok();
    tiktokList.chooseCategory();
    tiktokList.getDuplicate();
    tiktokList.getlanguage();
    tiktokList.saveLangName();
    tiktokList.getDuplicateSequential(); // Sử dụng function mới
    tiktokList.getTitle();
    tiktokList.upload();
    tiktokList.delItem();

})