Tibia Wiki:Imbuing/Codigo

<div class="main_panel">
        <div class="loading">
            <img src="https://www.tibiawiki.com.br/images/c/ce/The_Epic_Wisdom.gif" /><br />
            <label>Loading...</label>
        </div>
        <div class="menu">
            <div class="main_panel_title">Imbuing System</div>
            <div class="sub-menu">
                <div class="select-label">Categoria:
                    <select id="category">
                    </select>
                </div>
                <div class="select-label">Item:
                    <input type="text" id="search-item" placeholder="buscar por item..."/>
                    <select id="itemSelect" size="10">
                    </select>
                </div>
            </div>
            <div class="divisor-line"></div>
            <div class="selected-item-info">
                <label class="select-label">Dados do Item:</label>
                <div class="info-panel">
                    <div class="item-info">
                        <span class="select-label">Name: <span id="item-name">Magic Plate Armor</span> </span></br>
                        <span class="select-label" style="display: none;">Armor: <span id="item-def">17</span> </span>
                        <span class="select-label" style="display: none;">Weight: <span id="item-weight">85.00 oz</span> </span>
                        <span class="select-label">Slots: <span id="item-slots">2</span> </span></br>
                    </div>
                    <span class="item-img">
                        <img src="https://www.tibiawiki.com.br/images/3/35/Trans.gif" id="slot-imagem" align="right" />
                    </span>
                </div>
            </div>
            </br>
            <span class="divisor-line"></span>
            <span class="version-label">v2.0.0</span>
        </div>
        <div class="imbuement-panel">
            <label class="main_panel_title">Opções para Imbuir</label>
            <div class="slots">
                <div class="select-slot">
                    <label id="item-slot-1-label" class="disabled-slot">Slot 1</label>
                    <div id="item-slot-1" onclick="selectSlot(this.id)"><img src=""></div>
                </div>
                <div class="select-slot" >
                    <label id="item-slot-2-label" class="disabled-slot">Slot 2</label>
                    <div id="item-slot-2" onclick="selectSlot(this.id)"><img src=""></div>
                </div>
                <div class="select-slot">
                    <label id="item-slot-3-label" class="disabled-slot">Slot 3</label>
                    <div id="item-slot-3" onclick="selectSlot(this.id)"><img src=""></div>
                </div>
            </div>
            <span class="divisor-line"></span>
            <div class="imbuement-options">
                <div class="selections">
                    <div class="select-label">Imbuement:
                        <select id="imbuementSelect">
                        </select>
                    </div>
                    <div class="select-label">Nível:
                        <select id="imbuementLevelSelect">
                        </select>
                    </div>
                </div>
                <div class="imbuement-descriptions">
                    <b>Efeito: </b><label id="imbument-description">Converte 5% do dano para hit points com chance de 100%.</label>
                    </br>
                    </br>
                    <label>Dura por <b>20h00min</b> enquanto equipado.</label>
                </div>
                <label class="main_panel_title">Requer as seguintes fontes astrais: </label>
                <div class="imbuements-items">
                    <div class="item-slot" onclick="">
                        <div id="item-img-slot-1" class="item-img-slot">
                            <img src="">
                        </div>
                        <input id="item-quantity-1" class="item-quantity" value="0" disabled/>
                    </div>
                    <div class="item-slot" onclick="">
                        <div id="item-img-slot-2" class="item-img-slot">
                            <img src=""/>
                        </div>
                        <input id="item-quantity-2" class="item-quantity" value="0" disabled/>
                    </div>
                    <div class="item-slot" onclick="">
                        <div id="item-img-slot-3" class="item-img-slot">
                            <img src="">
                        </div>
                        <input id="item-quantity-3" class="item-quantity" value="0" disabled/>
                    </div>
                </div>
            </div>
            <span class="divisor-line"></span>
            <div class="result-panels">
                <div class="price-panel">
                    <div id="item-price-0" class="item-price-section price-gold-token">
                        <img src="https://www.tibiawiki.com.br/images/0/0b/Gold_Token.gif"/>
                        <div class="item-price-data">
                            <div>
                                <label style="font-weight: bold;">Nome:</label>
                                <label class="item-price-name">Gold Token</label>
                            </div>
                            <div>
                                <label style="font-weight: bold;">Quantidade: </label>
                                <input class="item-price-quantity" type="number" min="0" max="6" step="2" placeholder="0" oninput="updateItensPrice()"/>
                            </div>
                            <div>
                                <label style="font-weight: bold;">Valor Unitário: </label>
                                <input class="item-price-value" type="number" min="0" placeholder="0" oninput="updateItensPrice()"/>
                                <label style="font-weight: bold;"> GPs</label>
                            </div>
                        </div>
                    </div>
                    <span class="divisor-line price-gold-token"></span>
                    <div id="item-price-1" class="item-price-section">
                        <img src=""/>
                        <div class="item-price-data">
                            <div>
                                <label style="font-weight: bold;">Nome:</label>
                                <label class="item-price-name">Vampire Tooth</label>
                            </div>
                            <div>
                                <label style="font-weight: bold;">Quantidade: </label>
                                <input class="item-price-quantity" type="number" min="0" placeholder="0" oninput="updateItensPrice()"/>
                            </div>
                            <div>
                                <label style="font-weight: bold;">Valor Unitário: </label>
                                <input class="item-price-value" type="number" min="0" placeholder="0" oninput="updateItensPrice()"/>
                                <label style="font-weight: bold;"> GPs</label>
                            </div>
                        </div>
                    </div>
                    <span class="divisor-line"></span>
                    <div id="item-price-2" class="item-price-section">
                        <img src=""/>
                        <div class="item-price-data">
                            <div>
                                <label style="font-weight: bold;">Nome:</label>
                                <label class="item-price-name">Bloody Pincer</label>
                            </div>
                            <div>
                                <label style="font-weight: bold;">Quantidade: </label>
                                <input class="item-price-quantity" type="number" min="0" placeholder="0" oninput="updateItensPrice()"/>
                            </div>
                            <div>
                                <label style="font-weight: bold;">Valor Unitário: </label>
                                <input class="item-price-value" type="number" min="0" placeholder="0" oninput="updateItensPrice()"/>
                                <label style="font-weight: bold;"> GPs</label>
                            </div>
                        </div>
                    </div>
                    <span class="divisor-line"></span>
                    <div id="item-price-3" class="item-price-section">
                        <img src=""/>
                        <div class="item-price-data">
                            <div>
                                <label style="font-weight: bold;">Nome:</label>
                                <label class="item-price-name">Teste</label>
                            </div>
                            <div>
                                <label style="font-weight: bold;">Quantidade: </label>
                                <input class="item-price-quantity" type="number" min="0" placeholder="0" oninput="updateItensPrice()"/>
                            </div>
                            <div>
                                <label style="font-weight: bold;">Valor Unitário: </label>
                                <input class="item-price-value" type="number" min="0" placeholder="0" oninput="updateItensPrice()"/>
                                <label style="font-weight: bold;"> GPs</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="result-panel">
                    <div class="enhance-select">
                        <div>
                            <input type="checkbox" id="enhance-imbuement-chance" name="enhance-imbuement-chance" value="enhance-imbuement-chance" onchange="updatePrice(this)"/>
                            <label for="enhance-imbuement-chance"> Aumentar Chance de sucesso para 100%?</label>
                        </div>
                    </div>
                    <div class="enhance-imbuement-data">
                        <div class="total-price-taxa">
                            <label style="font-weight: bold;">Taxa de Sucesso:</label>
                            <label id="percent-chance-rate">90%</label>
                        </div>
                        <div class="total-price-taxa">
                            <label style="font-weight: bold; font-size: 12px;">Custo de Aumento de Chance:</label>
                            <label id="price-tax" style="font-size: 12px;">????? <b>GPs</b></label>
                        </div>
                    </div>
                    <span class="divisor-line"></span>
                    <label class="main_panel_title">Preços | Taxas </label>
                    <div class="total-price-taxa">
                        <label style="font-weight: bold;">Taxa de Imbuemento:</label>
                        <label id="total-imbuement-tax-value">????? <b>GPs</b></label>
                    </div>
                    <!-- <span class="divisor-line"></span> -->
                    <label class="main_panel_title">Preços dos Itens</label>
                    <div class="total-price-taxa price-gold-token">
                        <label style="font-weight: bold;">Total em Gold Token:</label>
                        <label id="total-item-0-value">????? <b>GPs</b></label>
                    </div>
                    <div id="total-price-item-1" class="total-price-taxa">
                        <label style="font-weight: bold;">Item 1:</label>
                        <label id="total-item-1-value">????? <b>GPs</b></label>
                    </div>
                    <div id="total-price-item-2" class="total-price-taxa">
                        <label style="font-weight: bold;">Item 2:</label>
                        <label id="total-item-2-value">????? <b>GPs</b></label>
                    </div>
                    <div id="total-price-item-3" class="total-price-taxa">
                        <label style="font-weight: bold;">Item 3:</label>
                        <label id="total-item-3-value">????? <b>GPs</b></label>
                    </div>
                    <div id="total-price-itens" class="total-price-taxa">
                        <label style="font-weight: bold;">Total dos Itens:</label>
                        <label id="total-item-imbuement-value">????? <b>GPs</b></label>
                    </div>
                    <div id="total-price-itens" class="total-price-taxa">
                        <label style="font-weight: bold;">Economia em Gold Tokens:</label>
                        <label id="total-item-economy-value">????? <b>GPs</b></label>
                    </div>
                    <div id="total-price-itens" class="total-price-taxa">
                        <label style="font-weight: bold;">Total Itens + Taxa:</label>
                        <label id="total-item-imbuement-tax-value">????? <b>GPs</b></label>
                    </div>
                    <div id="total-price-itens" class="total-price-taxa">
                        <label style="font-weight: bold;">Total Gold Token + Taxa:</label>
                        <label id="total-item-0-tax-value">????? <b>GPs</b></label>
                    </div>
                </div>
            </div>
        </div>
    </div>

.main_panel {
        position: relative;
        display: flex;
        width: 815px;
        border: 2px solid #a2a9b1;
        background: #ffffff;
        border-radius: 5px;
        margin: 2px;
        -webkit-box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 1);
        -moz-box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 1);
        font-family: Verdana, Arial, Times New Roman, sans-serif;
        font-size: 13px;
        color: black;
    }
    .loading {
        z-index: 9999;
        background-color: rgba(255, 255, 255, 0.98);
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 3px;
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }

    .loading>label {
        position: absolute;
        bottom: 0;
        display: grid;
        text-align: center;
        align-items: center;
        height: 30px;
        width: 100%;
        background-color: #c7451d;
        font-size: math;
    }

    .divisor-line {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        border-bottom: 1px solid #a2a9b1;
        padding: 0.75rem;
    }

    .version-label {
        font-size: 14px;
        margin-top: 30px;
        font-weight: bold;
        bottom: 5px;
        width: 100%;
        text-align: center;
        display: block;
        position: absolute;
    }

    .result-panels {
        display: flex;
    }

    .menu {
        position: absolute;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        position: relative;
        left: 0px;
        border-right: 2px solid #a2a9b1;
        max-width: 250px;
        background: #c7451d;
        padding: 5px;
    }
    .menu > .divisor-line {
        border-bottom: 1px solid black;
    }

    .main_panel_title {
        height: 32px;
        width: 100%;
        line-height: 32px;
        text-align: center;
        font-weight: bold;
        font-size: 12px;
    }
    .sub-menu {
        width: 100%;
    }

    .source,
    .item-img img {
        /* position: relative; */
        display: inline;
        padding: 1px;
        margin: 1px 2px 0 2px;
        border-radius: 5px;
        border: #a2a9b1 1px solid;
        background: #f8f8f8;
        padding: 0 auto;
        height: 32px;
        width: 32px;
        text-align: center;
        cursor: default;
    }

    .source {
        margin: 0 auto;
        width: 34px;
    }

    select#category, select#itemSelect {
        width: 250px;
    }

    select#itemSelect {
        height: 250px;
    }
    input#search-item {
        width: 205px;
        border: 1px solid #a2a9b1;
        border-radius: 5px;
    }

    select {
        font-family: Verdana, Arial, Times New Roman, sans-serif;
        border-radius: 5px;
        border: #a2a9b1 1px solid;
        background: #f8f8f8;
        border-collapse: separate;
        margin-top: 5px;
        height: 24px;
        text-align: center;
        display: inline-block;
        vertical-align: top;
        white-space: nowrap;
        font-size: 13px;
        color: black;
    }
    .select-label {
        font-size: 14px;
        text-align: left;
        margin-top: 10px;
        font-weight: bold;
    }
    .select-label > span {
        font-size: 12px;
        font-weight: bold;
    }
    .selected-item-info {
        margin-top: 10px;
    }
    .info-panel {
        margin-top: 15px;
    }
    .item-info {
        left: 0px;
        max-width: 200px;
        display: inline-table;
    }
    .imbuement-panel {
        position: relative;
        right: 0px;
        width: 100%;
    }
    .imbuement-panel > .main_panel_title {
        display: inline-block;
        width: 100%;
    }

    .imbuement-panel > .slots {
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center;  
        height: 50px;
        width: 100%;
    }
    .slots > .select-slot {
        position: relative;
        display: block;
        width: 35px;
        height: 64px;
        align-content: center;
        margin: 15px;
    }
    .slots > .select-slot > div {
        width: 32px;
        height: 32px;
    }
    .slots > .select-slot > div > img {
        width: 31px;
        height: 31px;
        border-radius: 5px;
        border: 1px solid #a2a9b1;
    }
    .slots > .select-slot > label {
        display: block;
        width: 35px;
        font-weight: bold;
        font-size: 10px;
        text-align: center;
    }
    .imbuement-options {
        position: relative;
        width: 100%;
    }
    .imbuement-options > .main_panel_title {
        display: block;
    }
    .imbuement-options > .imbuement-descriptions {
        margin: 15px;
    }
    .imbuement-options > .selections {
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center;  
        width: 100%;
    }
    .selections > .select-label {
        position: relative;
        display: block;
        align-content: center;
        margin: 15px;
    }
    .selections > .select-label > select {
        width: 230px;
    }

    .imbuements-items {
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center;  
        height: 50px;
        width: 100%;
    }

    .imbuements-items > .item-slot {
        position: relative;
        display: inline-block;
        width: 64px;
        height: 32px;
        align-content: center;
        margin: 15px;
    }
    .imbuements-items > .item-slot > .item-img-slot {
        width: 64px;
        height: 32px;
        align-content: center;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-top: #a2a9b1 1px solid;
        border-left: #a2a9b1 1px solid;
        border-right: #a2a9b1 1px solid;
        display: flex;
        justify-content: center;
    }
    .imbuements-items > .item-slot > .percent-imbuement {
        height: 50px;
        width: 64px;
        font-weight: bold;
        position: relative;
        display: inline-block;
        align-content: center; 
        background-color: #c7451d;
        border-radius: 5px;
        border: #a2a9b1 1px solid;
    }

    .imbuements-items > .item-slot > .item-quantity {
        width: 60px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border: #a2a9b1 1px solid;
        text-align: center;
    }
    .price-panel { 
        height: 400px;
        width: 50%;
        border-right: 1px solid #a2a9b1;
    }
    .result-panel { 
        height: 400px;
        width: 50%;
    }

    .result-panel > .main_panel_title { 
        display: block;
    }

    .price-panel > .item-price-section {
        width: 100%;
        height: 64px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    .price-panel > .item-price-section > img {
        display: inline;
        padding: 1px;
        margin: 1px 2px 0 2px;
        border-radius: 5px;
        border: #a2a9b1 1px solid;
        background: #f8f8f8;
        padding: 0 auto;
        height: 32px;
        width: 32px;
        text-align: center;
        cursor: default;
    }
    .price-panel > .item-price-section > .item-price-data {
        right: 0px;
        max-width: calc(100% - 66px);
        display: inline-table;
    }
    .price-panel > .item-price-section > div {
        /* width: 100%; */
        margin-left: 15px;
        text-align: left;
    }
    .price-panel > .item-price-section > div > div {
        margin-top: 3px;
    }
    .price-panel > .item-price-section > div > div > input {
        width: 60px;
        text-align: center;
        border-radius: 5px;
        border: #a2a9b1 1px solid;
    }

    .enhance-select {
        height: 40px;
    }
    .enhance-select > div {
        margin-top: 25px;
        height: 5px;
        display: flex;
        align-items: center;
        width: fit-content;
        float: left;
        margin-left: 5px;
    }

    .enhance-select > div > label {
        font-weight: bold;
        font-size: 12px;
    }
    input[type=checkbox] {
        width: 20px;
        height: 20px;
    }

    .enhance-imbuement-data {
        width: 100%;
        height: 10px;
        margin: 10px;
    }
    .enhance-imbuement-data > .total-price-taxa {
        margin: 0px;
    }
    .total-price-taxa {
        margin: 10px;
    }
    .unselected-slot {
        color: black;
    }
    .selected-slot {
        color: lime;
    }
    .disabled-slot {
        color: #a2a9b1;
    }
    /* Tooltip */

    .tip2 {
        background-color: #F2F2F2;
        border-radius: 2px;
        box-shadow: 0 0 6px #B2B2B2;
        display: none;
        position: absolute;
        padding: 10px;
        z-index: 1;
    }

    .tooltip {
        position: relative;
    }

    .tooltip,
    .tooltip:hover+.tip2,
    .tip2:hover {
        display: block;
    }

        var version = "2.0.1"
        
        // Imbuements
        var imbuements = new Object();

        // Objetos - Armors, Backpacks, Boots, Helmets, Clubs, Distance, Shields, Swords, Axes, Spellbooks, Wands and Rods.
        var armors = new Object();
        var shields = new Object();
        var boots = new Object();
        var swords = new Object();
        var axes = new Object();
        var clubs = new Object();
        var helmets = new Object();
        var wandsRods = new Object();
        var distance = new Object();
        var spellbooks = new Object();
        var backpacks = new Object();

        // Lista Categorias
        var categories = new Object();

        // Popula o Select de Categorias
        var loadCategories = () => {
            Object.keys(categories).forEach((category) => {
                $("#category").append(new Option(category, category));
            });
            // Inicializa o campote Item, selecionando o primeiro item.
            setSelectedOption('category', "Armaduras");
            
        } 

        // Carrega a lista de items de acordo com a Categoria selecionada
        var loadItems = () => {
            let items = getItemList();
            loadItemSelect(items);
        }

        // Popula a lista de Items a serem selecionados para fazer os imbuements.
        var loadItemSelect = (items) => {
            
            $("#itemSelect").empty();
            $("#itemSelect").append('<input type="text" placeholder="Search...">');
            Object.keys(items).forEach(itemName => {
                $("#itemSelect").append(new Option(itemName, itemName));
            });
            setSelectedOption('itemSelect', Object.keys(items)[0]);
        }
        
        var selectItem = (itemName) => {
            cleanSlotsImages();
            $('#item-name').text(itemName);
            $('#slot-imagem').attr("src", "https://www.tibiawiki.com.br/wiki/Especial:Redirecionar/file/" + itemName + ".gif")
            $('#item-slots').text(getItemList()[itemName].slots);
            selectedItem["name"] = itemName;
            selectedItem["slots_quantity"] = getItemList()[itemName].slots;
            selectedItem["imbuements"] = getItemList()[itemName].imbuements;
            selectedItem["slots"] = new Object();
            for (let i = 1; i <= selectedItem["slots_quantity"]; i++) {
                selectedItem["slots"][i] = {
                    "selected": (i === 1),
                    "imbuement": {
                        "name": "",
                        "level": ""
                    }
                };
            }
            selectSlot('item-slot-1');
        }

        // Busca Item na lista de Items.
        var searchItems = (input) => {
            let items = getItemList();
            let filteredKeys = Object.keys(items).filter(name => name.toLowerCase().includes(input.value.toLowerCase()));
            if (filteredKeys.length === 0) {
                return
            }
            let filteredItems = new Object();
            filteredKeys.forEach(itemName => {
                filteredItems[itemName] = items[itemName];
            });
            loadItemSelect(filteredItems);
        }

        var getItemList = () => {
            let selectedCategory = getSelectedValueFromSelect('category');
            return categories[selectedCategory];
        }

        var loadSelectImbuements = () => {
            $("#imbuementSelect").empty();
            let selectedImbuementsOnAnotherSlots = getSelectedImbuementsInAnotherSlots();
            Object.keys(selectedItem.imbuements).forEach(imbuementName => {
                if (!selectedImbuementsOnAnotherSlots.includes(imbuementName) || selectedItem.slots[getSelectedSlotName()].imbuement.name === imbuementName) {
                    $("#imbuementSelect").append(new Option(imbuementName + ' (' + imbuements[imbuementName].name + ')', imbuementName));
                }
            });

            if (selectedItem.slots[getSelectedSlotName()].imbuement.name.length !== 0) {
                setSelectedOption('imbuementSelect', selectedItem.slots[getSelectedSlotName()].imbuement.name);
            } else {
                setSelectedOption('imbuementSelect', $("select#imbuementSelect option")[0].value);
            }
        }

        var selectImbuement = (imbuementName) => {
            let slotName = getSelectedSlotName();
            selectedItem.slots[slotName].imbuement.name = imbuementName;
            showHideGoldToken()
        }

        var loadSelectImbuementLevel = (imbuementName) => {
            let imbuementLevels = selectedItem.imbuements[imbuementName];
            $("#imbuementLevelSelect").empty();
            imbuementLevels.forEach(imbuementLevel => {
                $("#imbuementLevelSelect").append(new Option(imbuements[imbuementName].level[imbuementLevel].name + ((imbuements[imbuementName].level[imbuementLevel].premium) ? ' (premium)' : '' ), imbuementLevel));
            });

            if (selectedItem.slots[getSelectedSlotName()].imbuement.level.length !== 0) {
                setSelectedOption('imbuementLevelSelect', selectedItem.slots[getSelectedSlotName()].imbuement.level);
            } else {
                setSelectedOption('imbuementLevelSelect', $("#imbuementLevelSelect option")[0].value);
            }
        }
        var selectImbuementLevel = (imbuementLevel) => {
            let slotName = getSelectedSlotName();
            selectedItem.slots[slotName].imbuement.level = imbuementLevel;

            $('#item-slot-' + slotName + ' > img').attr('src', imbuements[selectedItem.slots[slotName].imbuement.name].level[imbuementLevel].image);
            $('#imbument-description').text(imbuements[selectedItem.slots[slotName].imbuement.name].level[selectedItem.slots[slotName].imbuement.level].description);
            
            // Mostra os itens necessários.
            cleanAllImbuementItensSlots();
            updatePrice();
            updateItensPrice();
            let imbuementItens = imbuements[selectedItem.slots[slotName].imbuement.name].level[selectedItem.slots[slotName].imbuement.level].itens;
            let index = 1;
            imbuementItens.forEach(item => {
                $('#item-img-slot-' + index + ' img').attr('src', item.image);
                $('#item-price-' + index + ' img').attr('src', item.image);
                $('#item-quantity-' + index).val(item.quantity);
                $('#item-price-' + index + ' div input.item-price-quantity ').attr('min', 0);
                $('#item-price-' + index + ' div input.item-price-quantity ').attr('max', item.quantity);
                $('#item-price-' + index + ' div input.item-price-quantity ').val(item.quantity);
                $('#item-price-' + index + ' div label.item-price-name ').text(item.name);
                document.getElementById('total-price-item-' + index).style.display = '';
                document.querySelectorAll('div[id="total-price-item-' + index + '"] > label')[0].innerHTML = item.name + ": ";
                index++;
            });
            let currentSelectedImbuement = imbuements[selectedItem.slots[getSelectedSlotName()].imbuement.name];
            if (currentSelectedImbuement.gold_token) {
                let gpQuantity = 0;
                if (selectedItem.slots[slotName].imbuement.level === 'Powerful') {
                    gpQuantity = 6;
                } else if (selectedItem.slots[slotName].imbuement.level === 'Intricate') {
                    gpQuantity = 4;
                } else {
                    gpQuantity = 2;
                }
                $('#item-price-0 div input.item-price-quantity ').val(gpQuantity);
            } else {
                $('#item-price-0 div input.item-price-quantity ').val(0);
            }
        }

        var getSelectedSlotName = () => {
            return Object.keys(selectedItem.slots).find(slot => selectedItem.slots[slot].selected);
        }
        var getSelectedImbuementsInAnotherSlots = () => {
            let arrImbuements = new Array();
            Object.keys(selectedItem.slots).forEach(slot => {
                arrImbuements.push(selectedItem.slots[slot].imbuement.name);
            });
            return arrImbuements;
        }

        var selectSlot = (slotId) => {
            $('#' + slotId + ' > label')
            slotId = slotId.replace(/item-slot-/gi, '')
            let selectedSlotName = getSelectedSlotName();
            if (selectedItem.slots[slotId] == null) {
                return
            }
            disableSlot();
            unselectAllSlotsLabels();
            selectSlotLabel('item-slot-' + slotId);
            selectedItem.slots[selectedSlotName].selected = false;
            selectedItem.slots[slotId].selected = true;
            loadSelectImbuements();
        }

        var cleanSlotsImages = () => {
            $('#item-slot-1 > img').attr('src', '');
            $('#item-slot-2 > img').attr('src', '');
            $('#item-slot-3 > img').attr('src', '');
        }
        var selectSlotLabel = (slotId) => {
            $('#' + slotId + '-label').addClass('selected-slot');
            $('#' + slotId + '-label').removeClass('unselected-slot');
            $('#' + slotId + '-label').removeClass('disabled-slot');
        }
        var disableSlot = () => {
            // disabled-slot
            for (let i = 3; i > 0; i--) {
                $('#item-slot-' + i + '-label').addClass('disabled-slot');
                $('#item-slot-' + i + '-label').removeClass('selected-slot');
                $('#item-slot-' + i + '-label').removeClass('unselected-slot');
            }
        }
        var unselectAllSlotsLabels = () => {
            for (let i = selectedItem.slots_quantity; i > 0; i--) {
                $('#item-slot-' + i + '-label').addClass('unselected-slot');
                $('#item-slot-' + i + '-label').removeClass('selected-slot');
                $('#item-slot-' + i + '-label').removeClass('disabled-slot');
            }
        }

        var cleanAllImbuementItensSlots = () => {
            for (let i = 3; i > 0; i--) {
                $('#item-img-slot-' + i + ' img').attr('src', '');
                $('#item-quantity-' + i).val(0);
                $('#item-price-' + i + ' img').attr('src', '');
                $('#item-price-' + i + ' div input.item-price-quantity ').val(0);
                $('#item-price-' + i + ' div input.item-price-quantity ').attr('min', 0);
                $('#item-price-' + i + ' div input.item-price-quantity ').attr('max', 0);
                $('#item-price-' + i + ' div input.item-price-value ').val(0);
                $('#item-price-' + i + ' div label.item-price-name ').text('');
                document.getElementById('total-price-item-' + i).style.display = 'none';
            }
            $('#item-price-0 div input.item-price-value ').val(0);
        }

        var showHideGoldToken = () => {
            let currentSelectedImbuement = imbuements[selectedItem.slots[getSelectedSlotName()].imbuement.name];
            let components = $('.price-gold-token');
            if (currentSelectedImbuement.gold_token != null && currentSelectedImbuement.gold_token) {
                Object.keys(components).forEach(component => {
                    if (!isNaN(Number(component))) {
                        components[component].style.display = "";
                    }
                })
            } else {
                Object.keys(components).forEach(component => {
                    if (!isNaN(Number(component))) {
                        components[component].style.display = "none";
                    }
                })
            }
        }

        var updatePrice = () => {
            let imbuementLevel = selectedItem.slots[getSelectedSlotName()].imbuement.level;
            let tax = '0';
            let percent = '0';
            if (imbuementLevel === 'Powerful') {
                percent = 50;
                tax = (document.getElementById('enhance-imbuement-chance').checked) ? '250,000' : '200,000';
                document.getElementById('price-tax').innerHTML = '50,000' + ' <b>GPs</b>';
            } else if (imbuementLevel === 'Intricate') {
                percent = 70;
                tax = (document.getElementById('enhance-imbuement-chance').checked) ? '60,000' : '30,000';
                document.getElementById('price-tax').innerHTML = '30,000' + ' <b>GPs</b>';
            } else {
                percent = 90;
                tax = (document.getElementById('enhance-imbuement-chance').checked) ? '15,000' : '5,000';
                document.getElementById('price-tax').innerHTML = '10,000' + ' <b>GPs</b>';
            }
            document.getElementById('percent-chance-rate').innerHTML = ((document.getElementById('enhance-imbuement-chance').checked) ? 100 : percent) + '%';
            document.getElementById('percent-chance-rate').style.color = (document.getElementById('enhance-imbuement-chance').checked) ? 'lime' : 'red';
            document.getElementById('total-imbuement-tax-value').innerHTML = tax + ' <b>GPs</b>';
        }
        var updateItensPrice = () => {
            let goldTokenTotal = calcValues(0);
            let firstItemTotal = calcValues(1);
            let secondItemTotal = calcValues(2);
            let thirdItemTotal = calcValues(3);

            setTotalValuesToFields(0, goldTokenTotal);
            setTotalValuesToFields(1, firstItemTotal);
            setTotalValuesToFields(2, secondItemTotal);
            setTotalValuesToFields(3, thirdItemTotal);
            
            let totalItens = firstItemTotal + secondItemTotal + thirdItemTotal;
            setTotalValuesToFields('imbuement',totalItens);
            setTotalValuesToFields('economy', totalItens - goldTokenTotal);

            let tax = document.getElementById('total-imbuement-tax-value').innerHTML.replace(/\s<b>GPs<\/b>/gi, '').replace(/,/gi, '');
            setTotalValuesToFields('imbuement-tax', totalItens + Number(tax));
            setTotalValuesToFields('0-tax', goldTokenTotal + Number(tax));
        }

        var setTotalValuesToFields = (idIndex, value) => {
            document.getElementById('total-item-' + idIndex + '-value').innerHTML = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' <b>GPs</b>';
        }
        var calcValues = (idIndex) => {
            let quantity = $('#item-price-' + idIndex + ' div input.item-price-quantity ').val();
            let value = $('#item-price-' + idIndex + ' div input.item-price-value ').val();
            return quantity * value;
        }

        // Limpa Campos.
        var cleanSearchField = () => {
            let searchInput = document.getElementById('search-item');
            searchInput.value = '';
        }

        /**
         * Adiciona Evento para quando houver interação nos selects, disparar uma ação/função.
         */
        var addEventListeners = () => {
            // Category Select
            document.getElementById('category').addEventListener('change', function() {
                cleanSearchField();
                loadItems();
            }, false);

            // Item Select
            document.getElementById('itemSelect').addEventListener('change', function() {
                let option = getSelectedValueFromSelect('itemSelect');
                selectItem(option);
            }, false);

            let searchInput = document.getElementById('search-item');
            searchInput.addEventListener('input', () => {
                searchItems(searchInput);
            });

            // ImbuementSelect
            document.getElementById('imbuementSelect').addEventListener('change', function() {
                let option = getSelectedValueFromSelect('imbuementSelect');
                selectImbuement(option);
                loadSelectImbuementLevel(option);
            }, false);

            // Imbuement Level Select
            document.getElementById('imbuementLevelSelect').addEventListener('change', function() {
                let option = getSelectedValueFromSelect('imbuementLevelSelect');
                selectImbuementLevel(option);
            }, false);
        }

        /**
         * Pega a Opção selecionada de um Select.
         */
        var getSelectedValueFromSelect = (selectId) => {
            let selectElement = document.getElementById(selectId);
            return selectElement.options[selectElement.selectedIndex].value; 
        }
        /**
         * Seta uma opção forçando a seleção e disparando o evento de ação/função.
         */
        var setSelectedOption = (selectId, value) => {
            let selectElement = document.getElementById(selectId);
            selectElement.value = value;
            // Trigger the change event
            var event = new Event('change');
            selectElement.dispatchEvent(event);
        }

        var loadAllItens = async () => {
            let baseURL = '';

            await Promise.all(
                [loadData(baseURL, 'imbuements', 'Imbuements'),
                loadData(baseURL, 'armors', 'Armors'),
            loadData(baseURL, 'backpacks', 'Backpacks'),
            loadData(baseURL, 'boots', 'Boots'),
            loadData(baseURL, 'helmets', 'Helmets'),
            loadData(baseURL, 'clubs', 'Clubs'),
            loadData(baseURL, 'distance', 'Distance'),
            loadData(baseURL, 'shields', 'Shields'),
            loadData(baseURL, 'swords', 'Swords'),
            loadData(baseURL, 'axes', 'Axes'),
            loadData(baseURL, 'spellbooks', 'Spellbooks'),
            loadData(baseURL, 'wandsRods', 'WandsRods')])
            .then((results) => {
                categories = {
                    "Armaduras": armors,
                    "Backpacks": backpacks,
                    "Botas": boots,
                    "Capacetes": helmets,
                    "Clavas": clubs,
                    "Distância": distance,
                    "Escudos": shields,
                    "Espadas": swords,
                    "Machados": axes,
                    "Spellbooks": spellbooks,
                    "Wands e Rods": wandsRods
                }
                loadCategories();
                $('.loading')[0].style.display = 'none';
                console.log("DONE!");
            })
            .catch((error) => {
                console.error('Error:', error);
            });
            // executedPromises();
        }

        var loadData = async (baseURL, varName, path) => {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: baseURL + '/index.php?title=Tibia_Wiki:' + path + '/json&action=raw',
                    type: 'GET',
                    success: function(data) {
                        callbacks(data.replace(/<pre id="[^"]*">/gi, '').replace(/<\/pre>/gi, ''), varName);
                        resolve('Loadated: ' + varName);
                    },
                    error: function(error) {
                        console.error(error);
                        callbacks(null, varName);
                    }
                });
            });
        }

        var callbacks = (codigo, varName) => {
            if (codigo == null) {
                codigo = "";
            } else {
                console.log('Request:', varName);
                window[varName] = JSON.parse(codigo);
            }
            // executedPromises();
        }

        var executedPromises = async () => {
            // await Promise.all(promises).
        }

        var selectedItem = new Object();
        var promises = [];
        $(document).ready(function () {

            $(".version-label").text("v" + version);

            // Adiona os eventos aos componentes.
            addEventListeners();

            loadAllItens();
        });