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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hellish - Pet Simulator 99</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/pet-sim-99.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="petSimulator99Btn">
                <img src="static/images/pet-simulator-99-home.png">
                <span>Pet Simulator 99</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="petsGoBtn">
                <img src="static/images/pets-go-home.png">
                <span>Pets Go</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/diamond-icon.png" class="icon" alt="icon">
                    <span>Total Diamonds: <span id="totalDiamondsCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/mini-pinata-icon.png" class="icon" alt="icon">
                    <span>Total Mini Pinatas: <span id="totalMiniPinataCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/mini-lucky-block-icon.png" class="icon" alt="icon">
                    <span>Total Mini Lucky Blocks: <span id="totalMiniLuckyBlockCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/basic-coin-jar-icon.png" class="icon" alt="icon">
                    <span>Total Basic Coin Jars: <span id="totalBasicCoinJarCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/comet-icon.png" class="icon" alt="icon">
                    <span>Total Comets: <span id="totalCometCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/party-box-icon.png" class="icon" alt="icon">
                    <span>Total Party Boxes: <span id="totalPartyBoxCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/hype-egg-icon.png" class="icon" alt="icon">
                    <span>Total Hype Eggs: <span id="totalHypeEggCount">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/magic-shard-icon.png" class="icon" alt="icon">
                    <span>Total Magic Shards: <span id="totalMagicShardCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/bucket-o-magic-icon.png" class="icon" alt="icon">
                    <span>Total Bucket O' Magic: <span id="totalBucketOMagicCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/huge-hunter-icon.png" class="icon" alt="icon">
                    <span>Total Huge Hunters: <span id="totalHugeHunterCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/shiny-hunter-icon.png" class="icon" alt="icon">
                    <span>Total Shiny Hunters: <span id="totalShinyHunterCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/pet-cube-icon.png" class="icon" alt="icon">
                    <span>Total Pet Cubes: <span id="totalPetCubeCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/ultra-pet-cube-icon.png" class="icon" alt="icon">
                    <span>Total Ultra Pet Cubes: <span id="totalUltraPetCubeCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/elemental-gift-icon.png" class="icon" alt="icon">
                    <span>Total Elemental Gifts: <span id="totalElementalGiftCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/wooden-gift-icon.png" class="icon" alt="icon">
                    <span>Total Wooden Gifts: <span id="totalWoodenGiftCount">0</span></span>
                </div>
                <div class="iconTextItem">
                    <img src="static/images/huge-machine-butterfly-egg-icon.png" class="icon" alt="icon">
                    <span>Total Huge Machine Butterfly Eggs: <span
                            id="totalHugeMachineButterflyEggCount">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="ranks">Ranks</th>
                            <th class="sortable" data-sort="rebirths">Rebirths</th>
                            <th class="sortable" data-sort="zones">Zones</th>
                            <th class="sortable" data-sort="pet_slots">Pet Slots</th>
                            <th class="sortable" data-sort="egg_slots">Egg Slots</th>
                            <th class="sortable" data-sort="diamonds">Diamonds</th>
                            <th class="sortable" data-sort="mini_pinatas">Mini Pinatas</th>
                            <th class="sortable" data-sort="mini_lucky_blocks">Mini Lucky Blocks</th>
                            <th class="sortable" data-sort="basic_coin_jars">Basic Coin Jars</th>
                            <th class="sortable" data-sort="comets">Comets</th>
                            <th class="sortable" data-sort="party_boxes">Party Boxes</th>
                            <th class="sortable" data-sort="hype_eggs">Hype Eggs</th>
                            <th class="sortable" data-sort="huges">Huges</th>
                            <th class="sortable" data-sort="magic_shards">Magic Shards</th>
                            <th class="sortable" data-sort="bucket_o_magic">Bucket O' Magic</th>
                            <th class="sortable" data-sort="huge_hunters">Huge Hunters</th>
                            <th class="sortable" data-sort="shiny_hunters">Shiny Hunters</th>
                            <th class="sortable" data-sort="pet_cubes">Pet Cubes</th>
                            <th class="sortable" data-sort="ultra_pet_cubes">Ultra Pet Cubes</th>
                            <th class="sortable" data-sort="elemental_gifts">Elemental Gifts</th>
                            <th class="sortable" data-sort="wooden_gifts">Wooden Gifts</th>
                            <th class="sortable" data-sort="huge_machine_butterfly_eggs">Huge Machine Butterfly Eggs
                            </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>