var limite;
var itensInv = [];
var itensPorta = [];
var     slots = []
var veiculo = false;
var ativo = true

function verifiy() { // criar a funcao que retornara se o player esta com conexao a internet
    fetch('https://static-global-s-msn-com.akamaized.net/hp-neu/sc/2b/a5ea21.ico?d='+Date.now())
    .then(response => {
    if (!response.ok){
        $("#actionmenu").hide();
        $("body").hide();

        return false
    }
     
		ativo = true
        return true
    })
    .catch(error => {
        $("#actionmenu").hide();
        $("body").hide();
        return false
    });
}

$(document).ready(function() {
    window.addEventListener("message", function(event) {

        
        $("#procurar-formulas").on("keyup", function () {
                let search = $(this).val().toLowerCase();
                $(".formula-titlo").filter(function () {
                $(this).closest(".formula-item").toggle($(this).text().toLowerCase().indexOf(search) > -1)
            });
        });
    

        switch (event.data.action) {
            case "showMenu":
                $('.comprar-slotDiv').hide(0);
                $('.editar-perfil').hide(0);
                $('[data-toggle="tooltip"]').tooltip(); 
                $('#itens').html(''); //LIMPAR SLOTS ANTES DE CRIAR
                $('#itensbau').html(''); //LIMPAR SLOTS ANTES DE CRIAR
                updateMochila();
                $("#actionmenu").fadeIn(1000);
                $("body").fadeIn();
                $("#craft").hide();
                $("#formulas-box").hide();
                $("#botao-identidade").hide();
                $("#titlo-identidade").text('IDENTIDADE');


                if (event.data.vip == false) {
                    $("#vip").text('Sem VIP');
                } else {
                    $("#vip").text(event.data.vip);
                }

                if (event.data.profissao == false) {
                    $("#emprego").text('Desempregado');
                } else {
                    $("#emprego").text(event.data.profissao);
                }

                if (event.data.staff == false) {
                    $("#staff").text('Nao e Staff');
                } else {
                    $("#staff").text(event.data.staff);
                }

                if (event.data.empresa == false) {
                    $("#empresa").text('Nao e Staff');
                } else {
                    $("#empresa").text(event.data.empresa);
                }
    
                setImgRg(event.data.foto)
                $("#dashboard").show();
                $("#nome-personagem").html(event.data.nome + ' ' + event.data.sobrenome);
                $("#passaporte-personagem").html(event.data.id);


                $("#idade").html('' + event.data.idade + ' Anos');
                $("#passaporte").html(event.data.id);
                $("#registro").html(event.data.identidade);
                $("#multas").html(event.data.multas + ' $');
                $("#celular").html(event.data.telefone);
                $("#carteira").html(event.data.carteira + ' $');
                $("#banco").html(event.data.banco + ' $');
                $("#coins-personagem").html(event.data.coins);
                
                $(".banner").attr(`src`,`${event.data.banner}` );
                $(".imagem-perso").attr(`src`,`${event.data.img}` );
                $(".imagem-redonda").attr(`src`,`${event.data.img}` );
                $("#nome2").html(event.data.nome + ' ' + event.data.sobrenome);

                $("#valor-bolso").html(event.data.valor_bolso + ' $');

                for(let i=0;i<9;i++){
                    slots[i]=undefined
                }
                modalQt = 0;
                break;
            case "showMenu2":
                $('[data-toggle="tooltip"]').tooltip(); 
                $('#itens').html(''); //LIMPAR SLOTS ANTES DE CRIAR
                $('#itensbau').html(''); //LIMPAR SLOTS ANTES DE CRIAR
                updateMochila2();
                $('#titlo-identidade').text("BAU");

                modalQt = 0;
                break;

            case "updateImg":
                setImgRg(event.data.foto)
                break;

            case "hideMenu":
                $("#actionmenu").fadeOut(1000);
                $("body").slideUp(0);
                $("body").fadeOut(0);
                break;

            case "updateMochila":
                updateMochila();
                break;
            case "updateMochila2":
                updateMochila2();
                break;
        }
    });
    updateDrag()

    $('#fechar').click(() => {
        $.post("http://et_inv/invClose");
        $('#quantidade').hide();
        $('.format').hide();
        $('#cursor').hide();

    });
    document.onkeyup = function(data) {
        if(data.which == 27) {
            $.post("http://et_inv/invClose");
            $('#quantidade').hide();
            $('.format').hide();

        }
    };
});

function setImgRg(foto) {
    if (foto != null && foto != "") {
        $(".personagem-img").attr("src", foto);
    } else {
        $(".personagem-img").attr("src", "https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359553_1280.png");
    }
}

$(".personagem-img").click(function() {
    $("input[id='my_file']").trigger("click");

    $("input[id='my_file']").on("change", function () {

        var $files = $(this).get(0).files;

        if ($files.length) {
            if ($files[0].size > $(this).data("max-size") * 1024) {
                return false;
            }

            var apiUrl = 'https://api.imgur.com/3/image';
            var apiKey = '9576bf13ee7a1fd';

            var settings = {
                async: false,
                crossDomain: true,
                processData: false,
                contentType: false,
                type: 'POST',
                url: apiUrl,
                headers: {
                    Authorization: 'Client-ID ' + apiKey,
                    Accept: 'application/json'
                },
                mimeType: 'multipart/form-data'
            };

            setTimeout(function () {
                var formData = new FormData();
                formData.append("image", $files[0]);
                settings.data = formData;

                $.ajax(settings).done(function (response) {
                    var json = JSON.parse(response);

                    $.post("http://et_inv/updateFoto", JSON.stringify({ foto: json.data.link }));
                });
            }, 500);

        }
    });
})

const updateDrag = () => {
    var modalQt = 0;

    $('#confirmar').off();

    $('#praMenos').click(() => {
        if(modalQt >= 1) {
            modalQt = modalQt - 1;
            $('#placeQt').val(modalQt);
        }
    });

    $('#praMais').click(() => {
        modalQt = modalQt + 1;

        $('#placeQt').val(modalQt);
    });
    $('.item').draggable({
        scroll: false,
        helper: 'clone',
        appendTo: 'body',
        zIndex: 99999,
        revert: 'invalid',
        opacity: 0.7,
        start: function(event, ui) {

            // $(ui.helper).css("margin-left", event.clientX - $(event.target).offset().left);
            // $(ui.helper).css("margin-top", event.clientY - $(event.target).offset().top);
            $(this).children().children('img').hide();
            itemData = {
                key: $(this).data('item-key'),
                type: $(this).data('item-type')
            };
            if(itemData.key === undefined || itemData.type === undefined) return;

            $('.nomeItem').hide();
            if(veiculo == false){
                $('#botoes').show();
            }
            $('.hover').hide();

            let $el = $(this);
            $el.addClass("active");
        },
        stop: function() {
            $('#botoes').hide();
            $(this).children().children('img').show();

            let $el = $(this);
            $el.removeClass("active");

        }
    })

    $('#usar').droppable({
        hoverClass: 'hoverControl',
        over: function(event, ui) {
            $('#usar').addClass('botao_hover');
         },
         out: function(event, ui) {
            $('.botao_hover').removeClass('botao_hover');
         },   
        drop: function(event, ui) {

            $('.item').animate({
                top: "0px",
                left: "0px"
            });

            itemData = {
                key: ui.draggable.data('item-key'),
                index: ui.draggable.data('item-index'),
                name: ui.draggable.data('item-name'),
                desc: ui.draggable.data('item-desc'),
                type:  ui.draggable.data('item-type'),
                amount: ui.draggable.data('item-amount')
            };

            if(itemData.key === undefined || itemData.type === undefined)  return;

            $('#nome-item').html(itemData.name);
            $("#img-item").attr("src", "https://cdn.fivemetstore.com/mercurio/imagens_inv/" + itemData.index + ".png");
            $('#desc-item').html(itemData.desc);

            $('#quantidade').show();
            $('.format').fadeIn(800);
            $('#placeQt').val(modalQt);
            $('#nameItem').html('USAR ');
 
            $('#confirmar').click(() => {
                $.post("http://et_inv/useItem", JSON.stringify({
                    item: itemData.key,
                    type: itemData.type,
                    amount: Number($("#placeQt").val())

                }))
                $('#quantidade').hide();
                $('.format').hide(0);
                $("#confirmar").unbind("click")


            });

            $('#fecharModal').click(() => {
                $("#confirmar").unbind("click")
                $('#quantidade').hide();
                $('.format').hide(0);
            });
        }
    })

   

    $('#enviar').droppable({
        hoverClass: 'hoverControl',
        drop: function(event, ui) {

            $('.item').animate({
                top: "0px",
                left: "0px"
            });
            itemData = {
                key: ui.draggable.data('item-key'),
                index: ui.draggable.data('item-index'),
                name: ui.draggable.data('item-name'),
                desc: ui.draggable.data('item-desc'),
                amount: ui.draggable.data('item-amount')
            };

            if(itemData.key === undefined)  return;

            $('#nome-item').html(itemData.name);
            $("#img-item").attr("src", "https://cdn.fivemetstore.com/mercurio/imagens_inv/" + itemData.index + ".png");
            $('#desc-item').html(itemData.desc);

            $('#quantidade').show();
            $('.format').fadeIn(800);
            $('#placeQt').val(modalQt);
            $('#confirmar').click(() => {

                $.post("http://et_inv/sendItem", JSON.stringify({
                    item: itemData.key,
                    amount: Number($("#placeQt").val())

                }))

                $('#quantidade').hide();
                $('.format').hide(0);
                $("#confirmar").unbind("click")


            });

            $('#fecharModal').click(() => {
                $('#quantidade').hide();
                $('.format').hide(0);
                $("#confirmar").unbind("click")

            });

        },
        over: function(event, ui) {
            $('#enviar').addClass('botao_hover');
         },
         out: function(event, ui) {
            $('.botao_hover').removeClass('botao_hover');
         },    
    })

    $('#dropar').droppable({
        hoverClass: 'hoverControl',
        over: function(event, ui) {
            $('#dropar').addClass('botao_hover');
         },
        out: function(event, ui) {
            $('.botao_hover').removeClass('botao_hover');
        },   
        drop: function(event, ui) {

            $('.item').animate({
                top: "0px",
                left: "0px"
            });


            if(itemData.key === undefined)  return;

            itemData = {
                key: ui.draggable.data('item-key'),
                index: ui.draggable.data('item-index'),
                name: ui.draggable.data('item-name'),
                desc: ui.draggable.data('item-desc'),
                amount: ui.draggable.data('item-amount')
            };

            $('#nome-item').html(itemData.name);
            $("#img-item").attr("src", "https://cdn.fivemetstore.com/mercurio/imagens_inv/" + itemData.index + ".png");
            $('#desc-item').html(itemData.desc);
            $('#quantidade').show();
            $('.format').fadeIn(800);
            $('#placeQt').val(modalQt);

            $('#confirmar').click(() => {
                $.post("http://et_inv/dropItem", JSON.stringify({
                    item: itemData.key,
                    amount: Number($("#placeQt").val())
                }))

                $('#quantidade').hide();
                $('.format').hide(0);
                $("#confirmar").unbind("click")

            });

            $('#fecharModal').click(() => {
                $('#quantidade').hide();
                $('.format').hide(0);
                $("#confirmar").unbind("click")

            });


        }
    })
    
    $(".slots.keybind .slot").droppable({
        accept: ".item",

        drop: function(event, ui) {
            var droppedItem = $(ui.draggable);

            var itemFind = $(this).find(".item")

            if(itemFind.length == 0) {
                
                $.post("http://et_inv/setKeyBindItemInventory",
        
                    JSON.stringify({
                    index: $(droppedItem).data("item-key"),
                    key: $(this).data("key")
                    })
                );

                return
            }
        }
    })

    $(".slotVazio").droppable({
        accept: ".item",

        drop: function(event, ui) {
            var droppedItem = $(ui.draggable);
            var itemFind = $(this).find(".item")
            if(veiculo == false){
            if(itemFind.length == 0) {
                $.post("http://et_inv/removeKeyBindItemInventory",
                    JSON.stringify({
                    index: $(droppedItem).data("item-key"),
                    key: $(this).data("key")
                    })
                );

                return
            }
            }
        }
    })



    if(veiculo == true){
        $('.listaInv').droppable({
            hoverClass: 'hoverControl',
            accept: '.itemBau',
            drop: function(event, ui) {
                
    
                itemData = {
                    key: ui.draggable.data('item-key'),
                    index: ui.draggable.data('item-index'),
                    name: ui.draggable.data('item-name'),
                    desc: ui.draggable.data('item-desc'),
                    amount: ui.draggable.data('item-amount')
                };

                if(itemData.key === undefined) return;
    
                $('#nome-item').html(itemData.name);
                $("#img-item").attr("src", "https://cdn.fivemetstore.com/mercurio/imagens_inv/" + itemData.index + ".png");
                $('#desc-item').html(itemData.desc);
                $('#quantidade').show();
                $('.format').fadeIn(800);
                $('#placeQt').val(modalQt);

                $('#quantidade').show();
                $('#placeQt').val(modalQt);
                $('#nameItem').html('RETIRAR');
                $('#confirmar').click(() => {
                    $.post("http://et_inv/takeItem", JSON.stringify({
                        item: itemData.key,
                        amount: Number($("#placeQt").val())
                    }))
                
                $('#quantidade').hide();
                $('.format').hide(0);
                $("#confirmar").unbind("click")
    
                });
            }
        })
    } else {
        $('.listaInv').droppable({
            hoverClass: 'hoverControl',
            accept: '.item',
            drop: function(event, ui) {
                var dropped = ui.draggable;
                if(ui.draggable.data('is-craft') == true){
                    var inventarioDiv = document.querySelector(".listaInv"); 
                    var slotVazio = inventarioDiv.querySelectorAll(".slot.slotVazio");
                    var slot = inventarioDiv.querySelectorAll(".slot .item");
    
                    for(i = 0; i < slot.length; i++){
                        if($(slot[i]).data("item-key") == dropped.data("item-key")){
                            $(dropped).data("is-craft","")
                            slots[$(dropped).data("craft-pos")] = undefined
    
                            $(slot[i]).find(".quantTool span").text(Number($(slot[i]).find(".quantTool").text().replace("x","")) + Number($(dropped).find(".quantTool").text().replace("x","")))
                            $(dropped).remove()
                            buscarReceita()
    
                            return;
                        }
                    }
    
                
                    $(dropped).prependTo(slotVazio[0])
    
                    $(slotVazio[0]).removeClass("slotVazio")
                    $(dropped).data("is-craft","")
                   
                    slots[$(dropped).data("craft-pos")] = undefined
                    buscarReceita()
    
                }
            }
        })
    }
        $('.listaBau').droppable({
            hoverClass: 'hoverControl',
            accept: '.item',
            drop: function(event, ui) {

                itemData = {
                    key: ui.draggable.data('item-key'),
                    index: ui.draggable.data('item-index'),
                    name: ui.draggable.data('item-name'),
                    desc: ui.draggable.data('item-desc'),
                    amount: ui.draggable.data('item-amount')
                };

                if(itemData.key === undefined) return;
    
                $('#nome-item').html(itemData.name);
                $("#img-item").attr("src", "https://cdn.fivemetstore.com/mercurio/imagens_inv/" + itemData.index + ".png");
                $('#desc-item').html(itemData.desc);
                $('#quantidade').show();
                $('.format').fadeIn(800);
                $('#placeQt').val(modalQt);
         
                $('#quantidade').show();
                $('#placeQt').val(modalQt);
                $('#nameItem').html('GUARDAR');
                $('#confirmar').click(() => {
                    $.post("http://et_inv/storeItem", JSON.stringify({
                        item: itemData.key,
                        amount: Number($("#placeQt").val())
                    }))
                

                $('#quantidade').hide();
                $('.format').hide(0);
                $("#confirmar").unbind("click")
    
                });
            }
        })  
        $('.disponivel').droppable({
            hoverClass: 'hoverControl',
            accept: '.item',
            drop: function(event, ui) {
                var dropped = ui.draggable;
                var droppedOn = event.target;
            

                if(!slots[$(droppedOn).data("position")]){
                    $(dropped).parent().addClass("slotVazio")
                    $('#quantidade').show();
                    $('.format').fadeIn(800);
                    $('#placeQt').val(modalQt);
    
                    slots[$(dropped).data("craft-pos")] = undefined
    
                    $('#nameItem').html('INSERIR');
                $('#confirmar').click(() => {
                  
                    if (Number($("#placeQt").val()) >= Number($(dropped).data("item-amount")) || Number($("#placeQt").val()) <= 0 || Number($(dropped).find(".quantTool").text().replace("x","")) - Number($("#placeQt").val()) <= 0){
                    $(dropped)
                     .data("is-craft",true)
                     .data("craft-pos",$(droppedOn).data("position"))
                    .appendTo(droppedOn)
                    slots[$(droppedOn).data("position")] = [item = $(dropped).data("item-key"), amount = $(dropped).data("item-amount")]
                    $(droppedOn).data("item-amount",$(dropped).data("item-amount"))
    
        
                    }else{

                        var atual = Number($(dropped).find(".quantTool").text().replace("x",""))
                        slots[$(droppedOn).data("position")] = [item = $(dropped).data("item-key"), amount = Number($("#placeQt").val())]
    
                        $(dropped).find(".quantTool span").text(atual - Number($("#placeQt").val()))
                        $(droppedOn).append($(dropped).clone())
       
                        $(droppedOn).children().find(".quantTool span").text(Number($("#placeQt").val()))
                        $(droppedOn).find(".item").data("is-craft",true).data("craft-pos",$(droppedOn).data("position")).data("item-amount",Number($("#placeQt").val()))
    
                        $(droppedOn).data("item-amount",Number($("#placeQt").val()))
                        updateDrag()
                    }
                buscarReceita()
                $("#confirmar").unbind("click")
                $('#quantidade').hide();
                $('.format').hide(0);
            });}
    
            }
        })
    
    
    }

    function buscarReceita(){
        var itemsDisponiveis = {}
         for (i = 0;i<9;i++){
            itemsDisponiveis[i] = {}
            if(!slots[""+i]){
             itemsDisponiveis[i].item = "";
             itemsDisponiveis[i].amount = 0;
            }
            else{
                itemsDisponiveis[i].item = slots[""+i][0];
                itemsDisponiveis[i].amount = slots[""+i][1];
            }
         }
         $.post("http://et_inv/requestRecipe", JSON.stringify({
             slots: itemsDisponiveis
         }), (data) => {
            if (data.idname !== ""){
                $("#fabricar").removeClass("desativado")
                $("#imagemResultado").css("background-image",`url(${data.linkimagens}/${data.idname}.png)`)
                $("#nameResultado").text(`${data.name} (x${data.amount})`).data("idname",data.idname).data("amount",data.amount)
            }else{
                $("#fabricar").addClass("desativado")
                $("#imagemResultado").css("background-image",``)
                $("#nameResultado").text("")
            }
        });
    }
    
    const formatarNumero = (n) => {
        var n = n.toString();
        var r = '';
        var x = 0;
    
        for(var i = n.length; i > 0; i--) {
            r += n.substr(i - 1, 1) + (x == 2 && i != 1 ? '.' : '');
            x = x == 2 ? 0 : x + 1;
        }
    
        return r.split('').reverse().join('');
    }

const updateMochila = () => {
    $.post("http://et_inv/requestMochila", JSON.stringify({}), (data) => {
        $("#fabricar").addClass("desativado")
        $("#imagemResultado").css("background-image",``)
        $("#nameResultado").text("")
    veiculo = false
        $('.listaInv').html(``);
        $('.listaBau').html(``);
        for(let i = 0; i < 60; i++){
            $('.listaInv').append(`<div class="slot slotVazio"></div>`);
         
            $('.listaBau').append(`<div class="slot slotVazio"></div>`);
        }
        $('.slot').html('');

            
        let transformInv = data.peso * 100 / data.maxpeso

        $("#bar-inv").css("width",transformInv +"%" );
        $('#peso-inv2').html((data.peso).toFixed(0) + ' / ' + (data.maxpeso).toFixed(0));


        if(data.veiculo) {
            $('.title').addClass('titleBau');
            $('.title').removeClass('titleInv');
     
            itensPorta = data.inventario2;
            var potamalasDiv = document.querySelector(".listaBau"); 
            var slotsPortaMalas = potamalasDiv.querySelectorAll(".slot.slotVazio");
            
            itensPorta.map(function (item, i) {
                slotsPortaMalas[i].innerHTML = `
                <div class="item"  data-item-key="${item.key}" data-item-amount="${item.amount}" data-item-type="${item.type}" data-item-name="${item.name}"data-item-index="${item.index}" data-item-desc="${item.desc}">
                <div class="nomeTool">${item.name}</div>
                <img src="${data.linkimagens}/${item.index}.png" alt="">
                <div class="quantTool"> x${item.amount}</div>
                
                </div>`;
             });
             
            // $('#botoes').hide();
            $('#bau').show();
            $('.identidade').hide();
            $('#peso-bau-div').show();
            
            let transformInv = data.peso * 100 / data.maxpeso

            $("#bar-inv").css("width",transformInv +"%" );
            $('#peso-inv2').html((data.peso).toFixed(0) + ' / ' + (data.maxpeso).toFixed(0));


            
            let transformInv2 = data.peso2 * 100 / data.maxpeso2

            $("#bar-bau").css("width",transformInv2 +"%" );
            $('#peso-bau').html((data.peso2).toFixed(0) + ' / ' + (data.maxpeso2).toFixed(0));
           

            $('.listaBau');
            $('.listaInv');
        } else {
            
 
            $('#peso-bau-div').hide();

            $('#bau').hide();
            $('.identidade').show();

    

            $('.listaBau');
            $('.listaInv');
        }

        itensInv = data.inventario;
        var inventarioDiv = document.querySelector(".listaInv"); 
        var slots = inventarioDiv.querySelectorAll(".slot.slotVazio");
        
        var slotsCount = 0
        itensInv.map(function (item, i) {
            if(item.keybind) {
                $(`.keybind [data-key="${item.keybind}"]`).append(`
                <div class="item" data-item-key="${item.key}" data-item-amount="${item.amount}" data-item-type="${item.type}" data-item-name="${item.name}"data-item-index="${item.index}" data-item-desc="${item.desc}" >
                <div class="nomeTool">${item.name} | x${item.amount}</div>
                <img src="${data.linkimagens}/${item.index}.png" alt="">
                </div>`)
            } else {
                $(slots[slotsCount]).removeClass('slotVazio');

                slots[slotsCount].innerHTML = `
                <div class="item"  data-item-key="${item.key}" data-item-amount="${item.amount}" data-item-type="${item.type}" data-item-name="${item.name}"data-item-index="${item.index}" data-item-desc="${item.desc}">
                <div class="nomeTool">${item.name}</div>
                <img src="${data.linkimagens}/${item.index}.png" alt="">
                <div class="quantTool"> x${item.amount}</div>
            

                </div>`;

                slotsCount++
            }
            
         });

         
        updateDrag();
    });
}

const updateMochila2 = () => {
    $.post("http://et_inv/requestMochila2", JSON.stringify({}), (data) => {
        $("#fabricar").addClass("desativado")
        $("#imagemResultado").css("background-image",``)
        $("#nameResultado").text("")
        slots = []
        veiculo = true
        $("#actionmenu").fadeIn(1000);
        $("body").fadeIn();

            itensPorta = data.inventario2;

        $('.listaInv').html(``);
        $('.listaBau').html(``);
		let adicional = itensPorta.length
        for(let i = 0; i < 60; i++){
            $('.listaInv').append(`<div class="slot slotVazio"></div>`);
        }

        for(let i = 0; i < 100; i++){
            $('.listaBau').append(`<div class="slot slotVazio"></div>`);
        }
      
        $('.slot').html('');
        let transformInv = data.peso * 100 / data.maxpeso

        $("#bar-inv").css("width",transformInv +"%" );
        $('#peso-inv2').html((data.peso).toFixed(0) + ' / ' + (data.maxpeso).toFixed(0));

        if(data.veiculo) {
            $('.title').addClass('titleBau');
            $('.title').removeClass('titleInv');
     
            var potamalasDiv = document.querySelector(".listaBau"); 
            var slotsPortaMalas = potamalasDiv.querySelectorAll(".slot.slotVazio");
            
            itensPorta.map(function (item, i) {

                slotsPortaMalas[i].innerHTML = `
                <div class="item itemBau" data-item-key="${item.key}" data-item-amount="${item.amount}" data-item-type="${item.type}" data-item-name="${item.name}"data-item-index="${item.index}" data-item-desc="${item.desc}" >
                <div class="nomeTool">${item.name}</div>
                <img src="${data.linkimagens}/${item.index}.png" alt="">
                <div class="quantTool"> x${item.amount}</div>



                </div>`;
             });
             
            // $('#botoes').hide();
            
            $('#bau').show();
            $('.identidade').hide();
            
            
 
            $('#peso-bau-div').show();
            
            let transformInv = data.peso * 100 / data.maxpeso

            $("#bar-inv").css("width",transformInv +"%" );
            $('#peso-inv2').html((data.peso).toFixed(0) + ' / ' + (data.maxpeso).toFixed(0));


            
            let transformInv2 = data.peso2 * 100 / data.maxpeso2

            $("#bar-bau").css("width",transformInv2 +"%" );
            $('#peso-bau').html((data.peso2).toFixed(0) + ' / ' + (data.maxpeso2).toFixed(0));   

        } else {
            $('#peso-bau-div').hide();
            $('#bau').hide();
            $('.identidade').show();
            
        }

        itensInv = data.inventario;
        var inventarioDiv = document.querySelector(".listaInv"); 
        var slots = inventarioDiv.querySelectorAll(".slot.slotVazio");
        
        var slotsCount = 0
        itensInv.map(function (item, i) {

            if(item.keybind) {
                $(`.keybind [data-key="${item.keybind}"]`).append(`
                <div class="item"  data-item-key="${item.key}" data-item-amount="${item.amount}" data-item-type="${item.type}" data-item-name="${item.name}"data-item-index="${item.index}" data-item-desc="${item.desc}">
                <div class="nomeTool">${item.name}</div>
                <img src="${data.linkimagens}/${item.index}.png" alt="">
                <div class="quantTool"> x${item.amount}</div>
             `)
            } else {
                $(slots[slotsCount]).removeClass('slotVazio');
                slots[slotsCount].innerHTML = `
                <div class="item"  data-item-key="${item.key}" data-item-amount="${item.amount}" data-item-type="${item.type}" data-item-name="${item.name}"data-item-index="${item.index}" data-item-desc="${item.desc}">
                <div class="nomeTool">${item.name}</div>
                <img src="${data.linkimagens}/${item.index}.png" alt="">
                <div class="quantTool"> x${item.amount}</div>
                `;

                slotsCount++
            }
         });

         
        updateDrag();
    });
}

$('#cancelar').click(() => {
    $('#quantidade').hide();
    $('.format').hide();
    $('#dashboard').show();
    $('#dashboard-2').show();
    $("#confirmar").unbind("click")
});

$('#fabricar').click(() => {
    $.post("http://et_inv/craftItem", JSON.stringify({
        idname: $("#nameResultado").data("idname"),
        amount: $("#nameResultado").data("amount"),
    }))
});


$(document).on("click","#concluir-img", function() {
	let imglink = $("#img-input").val()
	$.post("http://et_inv/updateperfil",JSON.stringify({
		imglink,
	}), (data) =>{ 
        if(data.retorno == 'confirmado') {
            $('.editar-perfil').hide(0);
            $('.inventario_container').fadeIn(500);
            $(".banner").attr(`src`,`${data.banner}` );
            $(".imagem-perso").attr(`src`,`${data.img}` );
            $(".imagem-redonda").attr(`src`,`${data.img}` );
        } 
    });
});

$(document).on("click","#concluir-banner", function() {
	let imglink = $("#banner-input").val()
	$.post("http://et_inv/updatebanner",JSON.stringify({
		imglink,
	}), (data) =>{ 
        if(data.retorno == 'confirmado') {

            $(".banner").attr(`src`,`${data.banner}` );
            $(".imagem-perso").attr(`src`,`${data.img}` );
            $(".imagem-redonda").attr(`src`,`${data.img}` );
        } 
    });
});

$('.img-personagem').click(() => {
    $('#banner-input').hide(0);
    $('#img-input').show(0);
    $('.inventario_container').hide(0);
    $('.editar-perfil').fadeIn(500);
});

$('#cancelar-img').click(() => {
    $('.editar-perfil').fadeOut(500);
    $('#actionmenu').fadeIn(500);
});



function ComprarSlots(data){
	var data = data.dataset
    $('#actionmenu').fadeOut(500);
    $('.comprar-slotDiv').fadeIn(500);
}

$('.but-can').click(() => {
    $('.comprar-slotDiv').hide(0);
    $('#actionmenu').fadeIn(500);
});

