// Populate the tourney -> audience map (takes the first audience value found for a name)
        if (eventdata.Name && !(eventdata.Name in tourneyAudienceMap) && eventdata.Audiance !== undefined) {
            tourneyAudienceMap[eventdata.Name] = eventdata.Audiance;
        }
    });
    
    // console.log(playerEvent);
    // console.log("playerEvent");
    
    console.log("Tourney Audience Map:", tourneyAudienceMap);
    console.log("tourneyAudienceMap");

    

    const ranking = {};
    eventData.forEach(eventdata => {
        if (!ranking[eventdata.Users_ID]) {
            ranking[eventdata.Users_ID] = { points: 0, count: 0 };
        }
        ranking[eventdata.Users_ID].points += eventdata.Points;
        ranking[eventdata.Users_ID].count += 1;
    });

    playersArray.push(...Object.keys(ranking).map(userId => ({
        users_id: userId,
        count: ranking[userId].count,
        points: ranking[userId].points
    })));

    // Fetch user data after processing event data
    return fetch(`${host}/api/users`);
})
.then(res => res.json())
.then(userData => {
    console.log(userData);
    console.log("read users");
    const event = {};

    userData.forEach(user => {
        if (!event[user.ID]) {
            event[user.ID] = { points: 0, count: 0 };
        }
        const player = playersArray.find(player => player.users_id == user.ID);
        if (player) {
            event[user.ID].points = player.points;
            event[user.ID].count = player.count;
        }
    });

    updateTable(userData, event);
})
.catch(error => console.log(error));

    if (event.target.classList.contains('fa-keyboard')) {
        let selectRow = event.target.closest('tr.newranknameselect'); // Find the row containing the icon
        selectRow.classList.toggle('active');

        let previousRow = selectRow.previousElementSibling; // Get the immediately preceding row
        if (previousRow.classList.contains('newranknamenew')) {
        previousRow.classList.toggle('active'); // Collapse the previous row
        }

        let nextRow = selectRow.closest('tr.newranknameselect');
        let nextRow2 = nextRow.closest('td');
        let nextRow3 = nextRow2.nextElementSibling;
        let nextRow4 = nextRow3.querySelector('tr.newranknamenew');
        let nextRow5 = nextRow4.nextElementSibling;

        nextRow4.classList.toggle('active');//
        nextRow5.classList.toggle('active');//
    };

    if (event.target.classList.contains('fa-circle-xmark')) {
        let selectRow = event.target.closest('tr.newranknamenew'); // Find the row containing the icon
        selectRow.classList.toggle('active');
        
        let nextRow = selectRow.nextElementSibling; // Get the immediately preceding row
        if (nextRow && nextRow.classList.contains('newranknameselect')) {
        nextRow.classList.toggle('active'); // Collapse the next row
        }

        let nextRow2 = selectRow.closest('td');
        let nextRow3 = nextRow2.nextElementSibling;
        let nextRow4 = nextRow3.querySelector('tr.newranknamenew');
        let nextRow5 = nextRow3.querySelector('tr.newranknameselect');

        nextRow4.classList.toggle('active');//
        nextRow5.classList.toggle('active');//
        
    };




    if (event.target.matches('.btn_row_below_new')) {
        let tr = event.target.closest('tr');
        let newrank = tr.nextElementSibling;
        newrank.style.visibility = newrank.style.visibility === 'collapse' ? '' : 'collapse';

        let parentRow = event.target.closest('tr');
        let newRankRow = parentRow.nextElementSibling;

        let dropdown =  newRankRow.querySelector('.newtourneynamedropdown');
            
            // Check if the dropdown has already been populated to avoid duplicates
            // We use a custom data attribute 'data-populated' for this check
            if (dropdown.dataset.populated !== 'true') {
                // Clear existing options (optional: keep a placeholder if needed)
                dropdown.innerHTML = ''; // Clear previous options
        
                // Add a default placeholder option (optional)
                let placeholderOption = document.createElement('option');
                placeholderOption.value = '';
                placeholderOption.text = 'Select Tournament';
                placeholderOption.disabled = true; // Make it non-selectable
                placeholderOption.selected = true; // Make it the default display
                dropdown.appendChild(placeholderOption);
        
                // Get unique tournament names from the populated playerEvent array
                // const uniqueTourneyNames = [...new Set(playerEvent.map(eventItem => eventItem.tourneyname).filter(name => name))]; // Filter out undefined/null names
        
                // Get unique tournament names from the map keys
                const uniqueTourneyNames = Object.keys(tourneyAudienceMap);

                console.log("sss:", tourneyAudienceMap);

                // Reverse the array to add options in flipped order
                uniqueTourneyNames.reverse();

                // Populate dropdown with unique tournament names
                uniqueTourneyNames.forEach(name => {
                    console.log("uniqueTourneyNames:", name);
                let option = document.createElement('option');
                option.value = tourneyAudienceMap[name]; // Use the name as the value
                option.text = name;  // Use the name as the display text
                dropdown.appendChild(option);
                });
        
                // Mark the dropdown as populated
                dropdown.dataset.populated = 'true';
                console.log(`Dropdown populated with ${uniqueTourneyNames.length} unique tournament names.`);
            } else {
                console.log("Dropdown already populated.");
            }



    }


    if (event.target.matches('.btn_row_below_update')) {
        const tr = event.target.closest('tr');
        let nextTr2 = tr.nextElementSibling;
        let nextTr = nextTr2.nextElementSibling;
        while (nextTr && nextTr.classList.contains('updaterank')) {
            nextTr.style.visibility = nextTr.style.visibility === 'collapse' ? '' : 'collapse';
            nextTr = nextTr.nextElementSibling;
        }
    }
    

    if (event.target.matches('.btn_row_new_submit')) {
        const tr = event.target.closest('tr');
        let usersid = tr.querySelector('.newrankidid').textContent;
        let rank = tr.querySelector('.newrank').value;
        let tourney = tr.querySelector('.newtourneyname').value;
        let points = tr.querySelector('.newpoints').value;
        let season = 1;
        // console.log(usersid, rank, tourney, points);
        let data =  {rank, tourney, points,usersid, season};
        console.log(data , "btn_row_new_submit");

        fetch(`${host}/api/event`, {
            method : 'POST',
            headers : {
            'Content-Type' : 'application/json'
            },
            body : JSON.stringify(data)
        })
        .then(res => {
            if (res.status === 200) {
                return res.json().then(data => {
                    tr.querySelector('.newrank').value = '';
                    tr.querySelector('.newtourneyname').value = '';
                    tr.querySelector('.newpoints').value = '';
                    const statusLabel = tr.querySelector('.newsubmitstatus');
                    statusLabel.style.visibility = 'visible';
                    statusLabel.textContent = 'Success';
                    
                    setTimeout(() => {
                        statusLabel.style.visibility = 'hidden';
                    }, 3000);

                    console.log(data);
                });
            } else if (res.status === 400) {
                return res.json().then(data => {
                    const statusLabel = tr.querySelector('.newsubmitstatus');
                    statusLabel.style.visibility = 'visible';
                    statusLabel.textContent = 'Inputmu ngga bener cuks';
                    
                    setTimeout(() => {
                        statusLabel.style.visibility = 'hidden';
                    }, 3000);

                    console.log(data);
                });
            }
        })
        .catch(error => console.log(error));
    }



    if (event.target.matches('.btn_row_update_submit')) {
        const tr = event.target.closest('tr');
        let id = tr.querySelector('.updaterankeventid').textContent;
        let rank = tr.querySelector('.updaterank').value;
        let tourneyname = tr.querySelector('.updatetourneyname').value;
        let point = tr.querySelector('.updatepoints').value;
        
        let data =  {rank, tourneyname, point, id};
        console.log(data , "btn_row_update_submit");

        fetch(`${host}/api/event`, {
            method : 'PUT',
            headers : {
            'Content-Type' : 'application/json'
            },
            body : JSON.stringify(data)
        })
        .then(res => {
            if (res.status === 200) {
                return res.json().then(data => {
                    const statusLabel = tr.querySelector('.updatesubmitstatus');
                    statusLabel.style.visibility = 'visible';
                    statusLabel.textContent = 'Success';
                    setTimeout(() => {
                        statusLabel.style.visibility = 'hidden';
                    }, 3000);
                    console.log(data);
                });
            } else if (res.status === 400) {
                return res.json().then(data => {
                    const statusLabel = tr.querySelector('.updatesubmitstatus');
                    statusLabel.style.visibility = 'visible';
                    statusLabel.textContent = 'Inputmu ngga bener cuks';
                    setTimeout(() => {
                        statusLabel.style.visibility = 'hidden';
                    }, 3000);
                    console.log(data);
                });
            }
        })
        .catch(error => console.log(error));
    }



});