document.addEventListener('DOMContentLoaded', function() {
    // Your JavaScript code here
});


// Добивање информации за вкупните златни јајца
contractInstance.methods.getTotalGoldenChickenEggs().call()
    .then(result => console.log("Total Golden Eggs:", result))
    .catch(error => console.error("Error:", error));
 
// Добивање информации за златна кокошка за одреден корисник
const userChickenType = 'golden_cuteChicken';
contractInstance.methods.getGoldenChickenInfo(userChickenType).call()
    .then(result => {
        // Вашиот код за обработка на резултатите и ажурирање на HTML
        const goldencuteChickenQtyElement = document.getElementById("goldencutechickenQty");
        const goldencuteEggsQtyElement = document.getElementById("goldencuteeggsQty");

        // Проверете дали елементите се најдени пред да ги ажурирате
        if (goldencuteChickenQtyElement && goldencuteEggsQtyElement) {
            // Ажурирајте ги HTML елементите со добиените податоци
            goldencuteChickenQtyElement.textContent = `Chicken Qty: ${String(result.qty)}`;
            goldencuteEggsQtyElement.textContent = `Eggs Qty: ${String(result.eggsQty)}`;

            console.log(`Chicken Qty: ${String(result.qty)}`);
            console.log(`Eggs Qty: ${String(result.eggsQty)}`);
        } else {
            console.error('One or both elements not found.');
        }
    })
    .catch(error => console.error("Error:", error));
    

const vipImages = {
    'Starwood': 'img/package/starwood.png',
    'Booststar': 'img/package/booststar.png',
    'Tristar': 'img/package/tristar.png',
    'Armada': 'img/package/armada.png',
    'Envoy': 'img/package/envoy.png',
    'Wiser': 'img/package/wiser.png'
};

// Функција за препознавање на VIP при поврзување
async function recognizeUserVIPs(userAddress, displayElementId, cuteDetails, sageDetails, pirateDetails, heroDetails, knightDetails, kingDetails) {
    try {
    const userVIP = await contractInstance.methods.userVIPs(userAddress).call();
    console.log("User VIP Data:", userVIP);

    if (userVIP[2] && parseInt(userVIP[1]) >= MINIMUM_QLITE_BALANCE) {
        console.log("User has enough QLite tokens. Recognizing VIP status...");

        const tokenBalance = parseInt(userVIP[1]);
        const qliteTokensSpent = parseInt(userVIP[4]);
        const userPackage = userVIP[7];

        console.log(`User has ${tokenBalance} QLite tokens.`);
        console.log(`User has spent ${qliteTokensSpent} QLite tokens.`);
        console.log(`User has the following package: ${userPackage}.`);
        console.log(`Wallet of this VIP user is: ${userAddress}`);

    // Update elements after successfully obtaining data
    const goldencuteChickenQtyElement = document.getElementById("goldencutechickenQty");
    const goldencuteEggsQtyElement = document.getElementById("goldencuteeggsQty");


    // Ажурирање на HTML елементите со добиените податоци
     const displayElement = document.getElementById(displayElementId);
        if (displayElement) {
            displayElement.innerHTML = `
        <div class="row">
            <!-- 1 картичка -->
            <div class="col-md-12 col-lg-3 mb-4">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title mb-1">Status MGI</h4>
                        <p class="pb-0"><span style="color: green;">Active</span></p>
                        <h4 class="text-primary mb-1 card-title">${userPackage}</h4>
                    </div>
                    <img src="../assets/img/icons/misc/triangle-light.png" class="scaleX-n1-rtl position-absolute bottom-0 end-0" width="166" alt="triangle background" data-app-light-img="icons/misc/triangle-light.png" data-app-dark-img="icons/misc/triangle-dark.png">
                    <img id="vipImage" class="card-img scaleX-n1-rtl position-absolute bottom-0 end-0 me-4 mb-4 pb-2" src="${vipImages[userPackage]}" alt="VIP Image" style="max-width: 80px; height: auto;">
                </div>
            </div>

            <!-- 2 картичка -->
            <div class="col-md-12 col-lg-3 mb-4">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title mb-1">Qlite Token</h4>
                        <p class="pb-0">Balance:</p>
                        <h4 class="text-primary mb-1 card-title">${tokenBalance}</h4>
                    </div>
                    <img src="../assets/img/icons/misc/triangle-light.png" class="scaleX-n1-rtl position-absolute bottom-0 end-0" width="166" alt="triangle background" data-app-light-img="icons/misc/triangle-light.png" data-app-dark-img="icons/misc/triangle-dark.png">
                    <img src="img/LogoQlite_ok.png" alt="QLite Logo" class="scaleX-n1-rtl position-absolute bottom-0 end-0 me-4 mb-4 pb-2" width="80">
                </div>
            </div>

            <!-- 3 картичка -->
            <div class="col-md-12 col-lg-3 mb-4">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title mb-1">Spent Qlite</h4>
                        <p class="pb-0">Spent Balance:</p>
                        <h4 class="text-primary mb-1 card-title">${qliteTokensSpent}</h4>
                    </div>
                    <img src="../assets/img/icons/misc/triangle-light.png" class="scaleX-n1-rtl position-absolute bottom-0 end-0" width="166" alt="triangle background" data-app-light-img="icons/misc/triangle-light.png" data-app-dark-img="icons/misc/triangle-dark.png">
                    <img src="img/LogoQlite_ok.png" alt="QLite Logo" class="scaleX-n1-rtl position-absolute bottom-0 end-0 me-4 mb-4 pb-2" width="80">
                </div>
            </div>

            <!-- 4 картичка -->
            <div class="col-md-12 col-lg-3 mb-4">
                <div class="card position-relative">
                    <div class="card-body">
                        <h4 class="card-title mb-1">Total Eggs</h4>
                        <p class="pb-0">Quantity:</p>
                        <h4 class="text-primary mb-1 card-title">${allGoldenEggInfo}</h4>
                    </div>
                    <div class="position-absolute bottom-0 end-0 me-4 mb-4 pb-2" style="z-index: 1;">
                        <a class="btn btn-outline-primary d-block mt-2" href="javascript:void(0);">Sell</a>
                    </div>
                    <img src="../assets/img/icons/misc/triangle-light.png" class="scaleX-n1-rtl position-absolute bottom-0 end-0" width="166" alt="triangle background" data-app-light-img="icons/misc/triangle-light.png" data-app-dark-img="icons/misc/triangle-dark.png">
                </div>
            </div>
        </div>

        <!-- Row за картичките со златни кокошки -->
                    <div class="row row-cols-md-6 row-cols-2 g-2 g-lg-3">
                        <!-- Прва картичка со златна кокошка Cute -->
                        <div class="col mb-4">
                            <div class="card text-center w-100">
                                <div class="card-body d-flex flex-column align-items-center">
                                    <img class="card-img" src="img/classes-3.jpg" alt="Gold Sage Image" style="max-width: 70px; height: auto; margin-bottom: 10px;">
                                    <h4 class="card-title mb-1">Gold Cute</h4>
                                  <p id="goldencutechickenQty" class="pb-0 mb-1">Chicken Qty: ${goldenChickenInfo.qty}<span>Loading...</span></p>
                                  <p id="goldencuteeggsQty" class="pb-0 mb-0">Eggs Qty: ${goldenChickenInfo.eggsQty}<span>Loading...</span></p>


                                </div>
                            </div>
                        </div>
            <div class="col mb-4">
        <!-- Втора картичка -->
        <div class="card text-center w-100">
            <div class="card-body d-flex flex-column align-items-center">
                <img class="card-img" src="img/classes-4.jpg" alt="Gold Sage Image" style="max-width: 70px; height: auto; margin-bottom: 10px;">
                <h4 class="card-title mb-1">Gold Sage</h4>
                <p id="goldensagechickenQty" class="pb-0 mb-1">Chicken Qty: ${goldenChickenInfo.qty}<span>Loading...</span></p>
                <p id="goldensageeggsQty" class="pb-0 mb-0">Eggs Qty: ${goldenChickenInfo.eggsQty}<span>Loading...</span></p>
            </div>
        </div>
    </div>

    <div class="col mb-4">
        <!-- Трета картичка -->
        <div class="card text-center w-100">
            <div class="card-body d-flex flex-column align-items-center">
                <img class="card-img" src="img/classes-2.jpg" alt="Gold Cute Image" style="max-width: 70px; height: auto; margin-bottom: 10px;">
                <h4 class="card-title mb-1">Gold Cute</h4>
                <p id="goldenpiratechickenQty" class="pb-0 mb-1">Chicken Qty: ${goldenChickenInfo.qty}<span>Loading...</span></p>
                <p id="goldenpirateeggsQty" class="pb-0 mb-0">Eggs Qty: ${goldenChickenInfo.eggsQty}<span>Loading...</span></p>
            </div>
        </div>
    </div>

    <div class="col mb-4">
        <!-- Четврта картичка -->
        <div class="card text-center w-100">
            <div class="card-body d-flex flex-column align-items-center">
                <img class="card-img" src="img/classes-1.jpg" alt="Gold Cute Image" style="max-width: 70px; height: auto; margin-bottom: 10px;">
                <h4 class="card-title mb-1">Gold Cute</h4>
                 <p id="goldenherochickenQty" class="pb-0 mb-1">Chicken Qty: ${goldenChickenInfo.qty}<span>Loading...</span></p>
                 <p id="goldenheroeggsQty" class="pb-0 mb-0">Eggs Qty: ${goldenChickenInfo.eggsQty}<span>Loading...</span></p>
            </div>
        </div>
    </div>

    <div class="col mb-4">
        <!-- Петта картичка -->
        <div class="card text-center w-100">
            <div class="card-body d-flex flex-column align-items-center">
                <img class="card-img" src="img/classes-5.jpg" alt="Gold Cute Image" style="max-width: 70px; height: auto; margin-bottom: 10px;">
                <h4 class="card-title mb-1">Gold Cute</h4>
                <p id="goldenknightchickenQty" class="pb-0 mb-1">Chicken Qty: ${goldenChickenInfo.qty}<span>Loading...</span></p>
                <p id="goldenknighteggsQty" class="pb-0 mb-0">Eggs Qty: ${goldenChickenInfo.eggsQty}<span>Loading...</span></p>
            </div>
        </div>
    </div>

    <div class="col mb-4">
        <!-- Шеста картичка -->
        <div class="card text-center w-100">
            <div class="card-body d-flex flex-column align-items-center">
                <img class="card-img" src="img/classes-6.jpg" alt="Gold Cute Image" style="max-width: 70px; height: auto; margin-bottom: 10px;">
                <h4 class="card-title mb-1">Gold Cute</h4>
                 <p id="goldenkingchickenQty" class="pb-0 mb-1">Chicken Qty: ${goldenChickenInfo.qty}<span>Loading...</span></p>
                 <p id="goldenkingeggsQty" class="pb-0 mb-0">Eggs Qty: ${goldenChickenInfo.eggsQty}<span>Loading...</span></p>
            </div>
        </div>
    </div>
</div>`;

// Update elements after successfully obtaining data
    const goldencuteChickenQtyElement = document.getElementById("goldencutechickenQty");
    const goldencuteEggsQtyElement = document.getElementById("goldencuteeggsQty");

    if (goldencuteChickenQtyElement && goldencuteEggsQtyElement) {
        goldencuteChickenQtyElement.textContent = `Chicken Qty: ${String(goldenChickenInfo.qty)}`;
        goldencuteEggsQtyElement.textContent = `Eggs Qty: ${String(goldenChickenInfo.eggsQty)}`;
    } else {
        console.error('One or both elements not found.');
    }
} catch (error) {
    console.error("Error:", error);
}
// Add the missing closing brace for the recognizeUserVIPs function
} // This closing brace was missing in your original code



Uncaught SyntaxError: Unexpected token 'catch' (at farm.js:2460:3)