<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hellish - Pets Go</title>
    <link rel="icon" href="static/images/webicon.png" type="image/x-icon">
    <link rel="stylesheet" href="static/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script type="module" crossorigin src="static/js/pets-go.js"></script>
</head>

<body>
    <div id="topbar">
        <div id="logoContainer">
            <img src="static/images/login-screen-main-logo.png" alt="Logo" id="topbarLogo">
        </div>
        <div id="topbarButtons">
            <button class="topbarBtn" id="menuToggleBtn">
                <i class="fas fa-bars"></i>
                Menu
            </button>
            <button class="logoutBtn" id="logoutBtn">Logout</button>
            <img class="profile-image" alt="Profile Image">
        </div>
    </div>

    <div id="sidebarMenu">
        <button id="closeMenuBtn">
            <i class="fas fa-times"></i>
        </button>
        <div id="sidebarSelectedButtons">
            <button class="sidebarCategoryButton selected" id="petsGoBtn">
                <img src="static/images/pets-go-home.png">
                <span>Pets Go</span>
            </button>
        </div>
        <div id="sidebarHeader">
            <span id="sidebarTitle">Stats</span>
        </div>
        <div id="sidebarButtons">
            <button class="sidebarCategoryButton" id="animeDefendersBtn">
                <img src="static/images/anime-defenders-home.jpg">
                <span>Anime Defenders</span>
            </button>
            <button class="sidebarCategoryButton" id="petSimulator99Btn">
                <img src="static/images/pet-simulator-99-home.png">
                <span>Pet Simulator 99</span>
            </button>
        </div>
    </div>

    <div id="playerData">
        <div id="statsContainer">
            <div class="statBox">
                <p>Total Online Accounts: <span id="totalOnlineCount" class="totalOnline">0</span></p>
            </div>
            <div class="statBox">
                <p>Total Offline Accounts: <span id="totalOfflineCount" class="totalOffline">0</span></p>
            </div>
        </div>
        <div id="iconTextTableContainer">
            <div id="iconTextRow">
                <div class="iconTextItem">
                    <img src="static/images/pg-coin-icon.png" class="icon" alt="icon">
                    <span>Total Coins: <span id="totalCoinCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/pg-diamond-icon.png" class="icon" alt="icon">
                    <span>Total Diamonds: <span id="totalDiamondCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/pg-dice-icon.png" class="icon" alt="icon">
                    <span>Total Rolls: <span id="totalRollCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/random-huge-icon.png" class="icon" alt="icon">
                    <span>Total Huges & Titanics: <span id="totalHugeCount">0</span></span>
                    <button id="showHugeNamesBtn" class="blue-btn" disabled>Show</button>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/pg-index-token.png" class="icon" alt="icon">
                    <span>Total Index Tokens: <span id="totalIndexTokenCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/pg-golden-dice-potion-icon.png" class="icon" alt="icon">
                    <span>Total Golden Dice Potions: <span id="totalGoldenDicePotionsCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/pg-rainbow-dice-potion-icon.png" class="icon" alt="icon">
                    <span>Total Rainbow Dice Potions: <span id="totalRainbowDicePotionsCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/pg-cocktail-potion-icon.png" class="icon" alt="icon">
                    <span>Total Cocktail Potions: <span id="totalCocktailPotionsCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/pg-fishing-token-icon.png" class="icon" alt="icon">
                    <span>Total Fishing Tokens: <span id="totalFishingTokenCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/pg-basic-treasure-chest-icon.png" class="icon" alt="icon">
                    <span>Total Basic Treasure Chests: <span id="totalBasicTreasureChestCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/pg-rare-treasure-chest-icon.png" class="icon" alt="icon">
                    <span>Total Rare Treasure Chests: <span id="totalRareTreasureChestCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/pg-epic-treasure-chest-icon.png" class="icon" alt="icon">
                    <span>Total Epic Treasure Chests: <span id="totalEpicTreasureChestCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/pg-legendary-treasure-chest-icon.png" class="icon" alt="icon">
                    <span>Total Legendary Treasure Chests: <span id="totalLegendaryTreasureChestCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/pg-exclusive-treasure-chest-icon.png" class="icon" alt="icon">
                    <span>Total Exclusive Treasure Chests: <span id="totalExclusiveTreasureChestCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/pg-crystal-key-icon.png" class="icon" alt="icon">
                    <span>Total Crystal Keys: <span id="totalCrystalKeyCount">0</span></span>&nbsp;(
                    <span id="totalCrystalKeyLowerHalfCount">L: 0</span>&nbsp;+&nbsp;
                    <span id="totalCrystalKeyUpperHalfCount">U: 0</span>
                    )
                </div>
                <div class="iconTextItem">
                    <img src="static/images/pg-secret-key-icon.png" class="icon" alt="icon">
                    <span>Total Secret Keys: <span id="totalSecretKeyCount">0</span></span>&nbsp;(
                    <span id="totalSecretKeyLowerHalfCount">L: 0</span>&nbsp;+&nbsp;
                    <span id="totalSecretKeyUpperHalfCount">U: 0</span>
                    )
                </div>
                <div class="iconTextItem">
                    <img src="static/images/pg-god-potion-icon.png" class="icon" alt="icon">
                    <span>Total God Potions: <span id="totalGodPotionCount">0</span></span>
                </div>
            </div>
        </div>
        <div id="playerDataContent">
            <div style="overflow-x:auto;">
                <table>
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="selectAllBtn">
                            </th>
                            <th class="sortable" data-sort="status">Status</th>
                            <th class="sortable" data-sort="device">Device</th>
                            <th class="sortable" data-sort="usernames">Usernames</th>
                            <th class="sortable" data-sort="coins">Coins</th>
                            <th class="sortable" data-sort="diamonds">Diamonds</th>
                            <th class="sortable" data-sort="rolls">Rolls</th>
                            <th class="sortable" data-sort="huges">Huges</th>
                            <th class="sortable" data-sort="index_tokens">Index Tokens</th>
                            <th class="sortable" data-sort="rank">Rank</th>
                            <th class="sortable" data-sort="level">Level</th>
                            <th class="sortable" data-sort="best_roll">Best Roll</th>
                            <th class="sortable" data-sort="best_fishing_rod">Best Fishing Rod</th>
                            <th class="sortable" data-sort="golden_dice_potions">Golden Dice Potions</th>
                            <th class="sortable" data-sort="rainbow_dice_potions">Rainbow Dice Potions</th>
                            <th class="sortable" data-sort="cocktail_potions">Cocktail Potions</th>
                            <th class="sortable" data-sort="life_best_roll">Life Best Roll</th>
                            <th class="sortable" data-sort="fishing_tokens">Fishing Tokens</th>
                            <th class="sortable" data-sort="basic_treasure_chests">Basic Treasure Chests</th>
                            <th class="sortable" data-sort="rare_treasure_chests">Rare Treasure Chests</th>
                            <th class="sortable" data-sort="epic_treasure_chests">Epic Treasure Chests</th>
                            <th class="sortable" data-sort="legendary_treasure_chests">Legendary Treasure Chests</th>
                            <th class="sortable" data-sort="exclusive_treasure_chests">Exclusive Treasure Chests</th>
                            <th class="sortable" data-sort="crystal_keys">Crystal Keys</th>
                            <th class="sortable" data-sort="crystal_key_lower_halfs">Crystal Key Lower Halfs</th>
                            <th class="sortable" data-sort="crystal_key_upper_halfs">Crystal Key Upper Halfs</th>
                            <th class="sortable" data-sort="secret_keys">Secret Keys</th>
                            <th class="sortable" data-sort="secret_key_lower_halfs">Secret Key Lower Halfs</th>
                            <th class="sortable" data-sort="secret_key_upper_halfs">Secret Key Upper Halfs</th>
                            <th class="sortable" data-sort="god_potions">God Potions</th>
                        </tr>
                    </thead>
                    <tbody id="playerDataBody">
                    </tbody>
                </table>
            </div>
            <button id="deleteBtn" style="display: none;">Delete Selected</button>
        </div>
    </div>
    </div>
    <div id="hugeNamesPopup" class="popup hidden">
        <div class="popup-content">
            <button id="closePopupBtn" class="close-btn">✖</button>
            <h2>Detected Huges: </h2>
            <ul id="hugeNamesList"></ul>
        </div>
    </div>
</body>

</html>