<style>
@font-face{font-family:tahoma;src:url(tahoma.woff2);}
@font-face{font-family:tahomasb;src:url(tahomasb.woff2);}
@font-face{font-family:tahomab;src:url(tahomab.woff2);}
@font-face{font-family:tahomabd;src:url(tahomabd.woff2);}

#total-balance-container{display:none;width:100%;margin-top:20px;}
.statistics{letter-spacing:.02em;padding:6px 8px;background:transparent;border:0px solid #000;border-radius:4px;font-size:24px;font-family:tahoma;-webkit-text-stroke:0.8px!important;margin-left:5px;vertical-align:middle;cursor:pointer;}
#language-toggle {position:relative;cursor:pointer;vertical-align:sub;margin-right:10px;transition:transform 0.3s;}
#language-toggle:hover{transform:scale(1.1);}
body{font-family:tahoma;margin:20px;-webkit-text-stroke:0.6px}
p{margin-block-start:5px;margin-block-end:5px;}
div#total-balance-container{width:max-content}
h2{letter-spacing:.02em!important;font-family:tahoma!important;font-weight:400!important;font-size:18px!important;margin-bottom:10px;-webkit-text-stroke:0.7px!important;display:inline-block;margin-block-start:0!important;margin-block-end:0px !important;vertical-align:text-bottom;}
table{table-layout:auto;width:100%;border-collapse:collapse;margin-top:20px}
.sticky-header {transition:background-color 0.3s ease, color 0.3s ease;}
th{letter-spacing:.015em;font-size:18px;font-weight:400!important;background:#000!important;color:#fff!important;border:0px solid #000!important;position:sticky;top:0;padding:5px 10px;border:0px solid #f3f7fc;text-align:left;-webkit-text-stroke:0.8px;max-width:100%;white-space:nowrap;overflow:hidden;cursor:pointer;line-height:1.5;vertical-align:middle;}
td{font-size:18px;padding:5px 10px;border:0px solid #f3f7fc;text-align:left;max-width:100%;white-space:nowrap;overflow:hidden;line-height:1.2;}
.table-row-highlight{cursor:pointer;background-color:#f1f5f9;font-weight:400}
.left{text-align:left}
.center{text-align:center}
.right{text-align:right}
a.rank{color:#000!important;}
.th-rank{width:30px;}.th-pid{width:15px;}.th-avatar{width:44px;}.th-nickname{width:240px!important;}.th-mt4id{width:70px!important;}.th-age{width:44px;}th.th-ctry{width:32px!important;}th.th-lvrg{width:48px!important;}th.th-account{width:100px!important;}th.th-ccy{width:34px!important;}th.th-balance{width:60px!important;}th.th-equity{width:60px!important;}th.th-floating{width:60px!important;}th.th-margin{width:60px!important}th.th-freemargin{width:70px!important}th.th-credit{width:60px!important}th.th-profit{width:60px!important}th.th-follower{width:44px!important}th.th-aum{width:48px!important}
td#td-rank, td#td-mt4, td#td-ccy, td#td-followers, td#td-aum{background:#f1f5f9!important;}
.td-rank{font-size:20px!important;background:#f1f5f9!important;}
.td-summary{height:22px!important;text-overflow:ellipsis;font-size:16px!important;letter-spacing:0em;	margin-block-start:0!important;-webkit-text-stroke:0.4px!important;line-height:1.2!important;vertical-align:top;color:#60769B;white-space:nowrap!important;display:inline-block;padding-top:0px;padding-bottom:0px;overflow:hidden;width:220px;}

th#header-rank, th#header-mt4id, .th-ccy, .th-rank, th.th-follower, th.th-aum{background:#000!important;color:#fff!important;}
th#header-mt4id, td#td-mt4{padding:5px 10px!important;}
#tfol, #taum, #tbalance, #tequity, #tfloating, #tmargin, #tfreemargin, #tcredit, #tprofit{font-family:tahomabd!important;letter-spacing:0em!important;-webkit-text-stroke:0.5px!important;background:#e7ecf0!important;color:#000;padding:4px 12px;border-radius:4px;}
img.avatar{border-radius:50%;height:50px;vertical-align:top;}
#scrollToTop{position:fixed;bottom:50px!important;right:50px!important;display:none;cursor:pointer;z-index:1000;}
#scrollToTop img{width:80px!important;height:80px!important;transition:transform 0.2s ease-in-out;}
#scrollToTop img:hover{transform:scale(1.5);}
.hide{display:none;visibility:hidden;}

@media (max-width:768px){
h2{font-size:13px!important;}
.statistics{font-size:16px!important;}
}

::-webkit-scrollbar{width:20px;height:100px;}
::-webkit-scrollbar-track{border-radius:10px;}
::-webkit-scrollbar-thumb{background:#303030;border-radius:10px;width:20px;height:100px;margin-right:5px;border:5px solid #fff;}
::-webkit-scrollbar-thumb:hover{background:#303030;width:20px;}

</style>
</head>
    <body>
		
		<span class="title-text"><img src="language8.svg" id="language-toggle" class="header-icon" style="height:30px;margin-left:0px;vertical-align:middle;"></span> 
		<button id="tstatistics" class="statistics" onclick="myFunction()">Statistics </button><i class="fa-solid fa-chevron-down" onclick="myFunction()" style="margin-left:5px;font-size:20px;vertical-align:middle;cursor:pointer;"></i>
        <div id="total-balance-container">            
            <h2 class="total">
                <span id="tfol">Follower</span>&nbsp;&nbsp;<span id="total-followers"></span>
				&nbsp;&nbsp;
				<span id="taum">AUM</span>&nbsp;&nbsp;<span id="total-aum"></span>
				&nbsp;&nbsp;
				<span id="tbalance">Balance</span>&nbsp;&nbsp;<span id="total-balance"></span>
				&nbsp;&nbsp;
				<span id="tequity">Equity</span>&nbsp;&nbsp;<span id="total-equity"></span>
                &nbsp;&nbsp;
				<span id="tfloating">Floating</span>&nbsp;&nbsp;<span id="total-floating"></span>
                &nbsp;&nbsp;
				<span id="tmargin">Margin</span>&nbsp;&nbsp;<span id="total-margin"></span>
                &nbsp;&nbsp;
				<span id="tfreemargin">Free Margin</span>&nbsp;&nbsp;<span id="total-free-margin"></span>
                &nbsp;&nbsp;
				<span id="tcredit">Credit</span>&nbsp;&nbsp;<span id="total-credit"></span>
                &nbsp;&nbsp;
				<span id="tprofit">Profit</span>&nbsp;&nbsp;<span id="total-profits"></span>
            </h2>
        </div>
        <div id="api-data-container"></div>
        
        <script>
            function formatValue(value) {
                if (value === undefined || value === null || value === "" || isNaN(parseFloat(value))) {
                    return '-';
                } else if (parseFloat(value) === 0) {
                    return '-';
                } else {
                    return parseFloat(value).toLocaleString(undefined, {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    });
                }
            }

            function formatIntegerValue(value) {
                if (value === undefined || value === null || value === "" || isNaN(parseFloat(value))) {
                    return '-';
                } else if (parseFloat(value) === 0) {
                    return '-';
                } else {
                    return Math.round(parseFloat(value)).toLocaleString();
                }
            }

            async function fetchAndDisplayAPIData() {
                const container = document.getElementById('api-data-container');
                const totalBalanceElement = document.getElementById('total-balance');
                const totalEquityElement = document.getElementById('total-equity');
                const totalFloatingElement = document.getElementById('total-floating');
                const totalMarginElement = document.getElementById('total-margin');
                const totalFreeMarginElement = document.getElementById('total-free-margin');
                const totalCreditElement = document.getElementById('total-credit');
                const totalProfitsElement = document.getElementById('total-profits');
                const totalFollowersElement = document.getElementById('total-followers');
                const totalAUMElement = document.getElementById('total-aum');

                container.innerHTML = '';
                const apiUrl = 'https://socialrating.ultimamarkets.com/api/rating/8?$count=true&widget_key=master0';
                const exchangeRates = {
                    EUR: 1.05,
                    JPY: 0.0065,
                    GBP: 1.25,
                    SGD: 0.74,
                    HKD: 0.13,
                    USC: 0.01,
                    USD: 1
                };

                let totalBalanceInUSD = 0;
                let totalEquityInUSD = 0;
                let totalFloatingInUSD = 0;
                let totalMarginInUSD = 0;
                let totalFreeMarginInUSD = 0;
                let totalCreditInUSD = 0;
                let totalProfitsInUSD = 0;
                let totalFollowers = 0;
                let totalAUM = 0;

                try {
                    const response = await fetch(apiUrl);
                    const data = await response.json();

                    const table = document.createElement('table');
                    const headerRow = document.createElement('tr');
                    headerRow.id = "table-header";
                    headerRow.classList.add("sticky-header");
                    headerRow.innerHTML = `
        <th id="header-rank" class="th-rank center" onclick="sortTable(0)">#</th>
		<th id="header-avatar" class="th-avatar center" id="th-avatar" title="Profile Picture" onclick="sortTable(1)">Avatar</th>
		<th id="header-pid" class="th-pid center hide" onclick="sortTable(2)">PID</th>
		<th id="header-registration" class="th-registration hide"  onclick="sortTable(3)">Registration Date</th>
        <th id="header-nickname" class="th-nickname left" onclick="sortTable(4)">Nickname</th>
		<th id="header-badge" class="th-badge" id="th-badge" onclick="sortTable(5)"></th>
		<th id="header-online" class="th-online" id="th-active" style="width:50px!important;" title="I'm actively trading today" onclick="sortTable(6)"></th>
		<th id="header-mt4id" class="th-mt4id left" title="MT4 Login ID" onclick="sortTable(7)">MT4 ID</th>
		<th id="header-age" class="th-age center" onclick="sortTable(8)">Age</th>
		<th id="header-ctry" class="th-ctry center" onclick="sortTable(9)">Country</th>
		<th id="header-lvrg" class="th-lvrg center" onclick="sortTable(10)">Leverage</th>
		<th id="header-account" class="th-account left" onclick="sortTable(11)">Account Type</th>
        <th id="header-ccy" class="th-ccy center" onclick="sortTable(12)">CCY</th>
        <th id="header-balance" class="th-balance right" onclick="sortTable(13)">Balance</th>
		<th id="header-equity" class="th-equity right" onclick="sortTable(14)">Equity</th>
		<th id="header-floating" class="th-floating right" onclick="sortTable(15)">Floating</th>
		<th id="header-margin" class="th-margin right" onclick="sortTable(16)">Margin</th>
        <th id="header-freemargin" class="th-freemargin right" onclick="sortTable(17)">Free Margin</th>
        <th id="header-credit" class="th-credit right" onclick="sortTable(18)">Credit</th>
        <th id="header-profit" class="th-profit right" onclick="sortTable(19)">Profit</th>
		<th id="header-follower" class="th-follower center" onclick="sortTable(20)" title="Total Followers">FOL</th>
		<th id="header-aum" class="th-aum right" onclick="sortTable(21)">AUM($)</th>
		<th id="header-pfee" class="th-pfee center" title="Performance Fee" onclick="sortTable(22)">PF</th>
		<th id="header-mfee" class="th-mfee center" title="Management Fee" onclick="sortTable(23)">MF</th>
		<th id="header-rfee" class="th-rfee center" title="Registration Fee" onclick="sortTable(24)">RF</th>
		<th id="header-afee" class="th-afee center" title="Agent Fee" onclick="sortTable(25)">AF</th>
		<th id="header-minimum" class="th-minimum right" title="Minimum balance amount required by the Provider to copy the strategy" onclick="sortTable(26)">Minimum</th>
      `;
                    table.appendChild(headerRow);

                    data.items.forEach(account => {
                        account = replaceAccountValues(account);

                        const currency = account.account.currency;
                        const balance = parseFloat(account.account.balance) || 0;
                        const equity = parseFloat(account.account.equity) || 0;
                        const floating = parseFloat(account.account.floatingPnL) || 0;
                        const margin = parseFloat(account.account.margin) || 0;
                        const freeMargin = parseFloat(account.account.freeMargin) || 0;
                        const credit = parseFloat(account.account.credit) || 0;
                        const profits = parseFloat(account.extension.profits) || 0;
                        const followers = parseFloat(account.extension.investors) || 0;
                        const aum = parseFloat(account.extension.investorsEquityUsd) || 0;

                        const exchangeRate = exchangeRates[currency] || 1;

                        const balanceInUSD = balance * exchangeRate;
                        const equityInUSD = equity * exchangeRate;
                        const floatingInUSD = floating * exchangeRate;
                        const marginInUSD = margin * exchangeRate;
                        const freeMarginInUSD = freeMargin * exchangeRate;
                        const creditInUSD = credit * exchangeRate;
                        const profitsInUSD = profits * exchangeRate;

                        totalFollowers += followers;
                        totalAUM += aum;

                        if (!account.account.group || !account.account.group.includes("TEST")) {
                            totalBalanceInUSD += balanceInUSD;
                            totalEquityInUSD += equityInUSD;
                            totalFloatingInUSD += floatingInUSD;
                            totalMarginInUSD += marginInUSD;
                            totalFreeMarginInUSD += freeMarginInUSD;
                            totalCreditInUSD += creditInUSD;
                            totalProfitsInUSD += profitsInUSD;
                        }

                        const row = document.createElement('tr');
                        let badgeContainer = '';
								if (account.rank === 1) {
								badgeContainer += `<img src="top1.gif" alt="TOP#1" title="I'm the Champion" style="width:30px;height:auto;margin:0 auto;cursor:pointer;">`;} 
                        else if (account.rank === 2) {
								badgeContainer += `<img src="top2.gif" alt="TOP#2" title="TOP #2" style="width:36px;height:36px;margin:0 auto;cursor:pointer;">`;} 
                        else if (account.rank === 3) {
								badgeContainer += `<img src="top3.gif" alt="TOP#3" title="TOP #3" style="width:36px;height:36px;margin:0 auto;cursor:pointer;">`}
								if (account.age <= 30) {
								badgeContainer += `<i class="fa-solid fa-seedling" style="font-size:24px;"></i>`;}                        
                        let gifContent = `<div style="display:flex;align-items:center;gap:5px;">${badgeContainer}</div>`;
                        let nicknameContent = `<div><p href="https://socialrating.ultimamarkets.com/widgets/ratings/${account.profileId}?widgetKey=social-ratings"  target="_blank">${account.accountName || ''}<br><span class="td-summary" id="td-summary" href="https://socialrating.ultimamarkets.com/widgets/ratings/${account.profileId}?widgetKey=social-ratings"  target="_blank">${account.additional.summary}</span></p></div>`;
                        let activeContainer = '';
								if (account.extension?.v1d > 0) {
								activeContainer += `<img src="new3.gif" alt="Online" title="I'm actively trading today" style="width:34px;height:34px;margin:0 auto;cursor:pointer;">`;}                        
                        let activeContent = `<div style="display:flex;align-items:center;gap:5px;">${activeContainer}</div>`;

                        row.innerHTML = `
		<td class="table center data rank" id="td-rank" style="padding: 0 4px;"><a class="rank" style="-webkit-text-stroke:0.6px;letter-spacing:.02em;text-decoration:none!important;" href="https://socialrating.ultimarkets.com/admin/accounts/${account.profileId}" target="_blank">${account.rank ?? ''}</td>
		<td class="table center" id="td-avatar"><a href="https://social.ultimamarkets.com/portal/registration/subscription?provider=${account.profileId}&?widgetKey=social-ratings" target="_blank"><img src="${account.public.avatarPath ? account.public.avatarPath : 'avatar11.gif'}" alt="Avatar" title="Click the avatar to visit the profile page" class="avatar"></td>
		<td class="center hide">${account.profileId ?? ''}</td>
		<td class="table left data hide" id="td-registrationdate">${account.account.registrationDate ?? ''}</td>
        <td class="table left data" id="td-nickname" style="white-space:normal;"><a class="rank" style="-webkit-text-stroke:0.6px;letter-spacing:.02em;text-decoration:none!important;" href="https://socialrating.ultimamarkets.com/widgets/ratings/${account.profileId}?widgetKey=social-ratings" target="_blank">${nicknameContent}</td>
		<td class="table center data" id="td-badge" style="white-space:normal;">${gifContent}</td>
		<td class="table center data" id="td-active" style="width:50px!important;white-space:normal;font-size:18px;">${activeContent}</td>
		<td class="left" id="td-mt4"><a style="color:#000!important;text-decoration:none!important;" href="https://social.ultimamarkets.com/admin/providers/${account.profileId}?widgetKey=social-ratings" target="_blank">${account.account.login ?? ''}</td>
		<td class="center">${account.age ?? ''}</td>  
		<td class="center">${account.account.countryCode}</td>
		<td class="center">${account.account.leverage.toLocaleString()}</td>
		<td class="left">${account.account.group ?? ''}</td>
        <td class="center" id="td-ccy">${currency}</td>
        <td class="right">${formatIntegerValue(balance)}</td>
        <td class="right">${formatIntegerValue(equity)}</td>
        <td class="right">${formatIntegerValue(floating)}</td>
        <td class="right">${formatIntegerValue(margin)}</td>
        <td class="right">${formatIntegerValue(freeMargin)}</td>
        <td class="right">${formatIntegerValue(credit)}</td>
        <td class="right">${formatIntegerValue(profits)}</td>	
		<td class="center" id="td-followers">${formatIntegerValue(followers)}</td>
        <td class="right" id="td-aum">${formatIntegerValue(aum)}</td>
		<td class="center">${(account.extension.performanceFee !== undefined) ? (Math.round(account.extension.performanceFee) === 0 ? '-' : Math.round(account.extension.performanceFee) + '%') : ''}</td>
		<td class="center">${formatIntegerValue(account.extension.managementFee)}</td>
		<td class="center">${formatValue(account.extension.registrationFee)}</td>
		<td class="center">${(account.extension.agentFee !== undefined) ? (Math.round(account.extension.agentFee) === 0 ? '-' : Math.round(account.extension.agentFee) + '%') : ''}</td>	
		<td class="right">${formatIntegerValue(account.extension.minBalance)}</td>		
        `;

                        row.addEventListener('click', function() {
                            const currentlyHighlighted = document.querySelector('.table-row-highlight');
                            if (currentlyHighlighted) {
                                currentlyHighlighted.classList.remove('table-row-highlight');
                            }
                            row.classList.add('table-row-highlight');
                        });
                        table.appendChild(row);
                    }
                    );

                    container.appendChild(table);

                    totalBalanceElement.textContent = formatIntegerValue(totalBalanceInUSD);
                    totalEquityElement.textContent = formatIntegerValue(totalEquityInUSD);
                    totalFloatingElement.textContent = formatIntegerValue(totalFloatingInUSD);
                    totalMarginElement.textContent = formatIntegerValue(totalMarginInUSD);
                    totalFreeMarginElement.textContent = formatIntegerValue(totalFreeMarginInUSD);
                    totalCreditElement.textContent = formatIntegerValue(totalCreditInUSD);
                    totalProfitsElement.textContent = formatIntegerValue(totalProfitsInUSD);
                    totalFollowersElement.textContent = formatIntegerValue(totalFollowers);
                    totalAUMElement.textContent = formatIntegerValue(totalAUM);
                } catch (error) {
                    console.error('Error fetching data from API:', error);
                }
            }

            fetchAndDisplayAPIData();

            function sortTable(columnIndex) {
                var table = document.querySelector("table");
                var rows = Array.from(table.querySelectorAll("tr")).slice(1);
                var dir = "asc";
                var switching = false;
                if (table.getAttribute("data-sort-dir") === "asc") {
                    dir = "desc";
                } else {
                    dir = "asc";
                }
                rows.sort(function(a, b) {
                    var x = a.getElementsByTagName("TD")[columnIndex].textContent || a.getElementsByTagName("TD")[columnIndex].innerText;
                    var y = b.getElementsByTagName("TD")[columnIndex].textContent || b.getElementsByTagName("TD")[columnIndex].innerText;
                    const xNumber = parseFloat(x.replace(/,/g, ''));
                    const yNumber = parseFloat(y.replace(/,/g, ''));
                    if (!isNaN(xNumber) && !isNaN(yNumber)) {
                        return dir === "asc" ? xNumber - yNumber : yNumber - xNumber;
                    } else {
                        return dir === "asc" ? x.localeCompare(y) : y.localeCompare(x);
                    }
                });
                rows.forEach(row => row.remove());
                rows.forEach(row => table.appendChild(row));
                table.setAttribute("data-sort-dir", dir);
            }

            document.addEventListener("DOMContentLoaded", function() {
                document.body.style.zoom = "90%";
            });

            function setStickyColumns() {
                const table = document.querySelector('table');
                const stickyColumns = Array.from(table.querySelectorAll('th, td')).filter(cell => cell.classList.contains('sticky'));

                let leftOffset = 0;
                stickyColumns.forEach( (cell, index) => {
                    const columnCells = Array.from(table.querySelectorAll(`tr > :nth-child(${index + 1})`));
                    const columnWidth = cell.offsetWidth;

                    columnCells.forEach(c => {
                        c.style.left = `${leftOffset}px`;
                    }
                    );

                    leftOffset += columnWidth;
                }
                );
            }
            window.addEventListener('resize', setStickyColumns);
            document.addEventListener('DOMContentLoaded', setStickyColumns);
			
			function myFunction() {
			var x = document.getElementById("total-balance-container");
			if (x.style.display === "block") {
				x.style.display = "none";
			} else {
				x.style.display = "block";
			}
			}

            const scrollToTopButton = document.getElementById('scrollToTop');

            window.addEventListener('scroll', () => {
                if (window.scrollY > 300) {
                    scrollToTopButton.style.display = 'block';
                } else {
                    scrollToTopButton.style.display = 'none';
                }
            }
            );

            document.addEventListener("DOMContentLoaded", function() {
                document.body.style.zoom = "58%";
            });
        </script>
        <script src="translation.js"></script>
        <script>
            document.getElementById("language-toggle").addEventListener("click", toggleLanguage);
        </script>
    </body>
</html>
