<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adminsystem</title>
    <link rel="stylesheet" href="style/main.css">
    <script src="script/main.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div id="menu" style="display: none;">
        <div id="header">
            <h1>IslandState</h1>
            <div id="adminMenu">Adminmenü</div>
        </div>
        <ul id="menuItems">
            <!-- Menüelemente werden hier dynamisch eingefügt -->
        </ul>
    </div>
    <div id="subMenu" style="display: none;">
        <ul id="subMenuItems">
            <!-- Submenüelemente werden hier dynamisch eingefügt -->
        </ul>
    </div>
    <div id="playerListWindow" style="display: none;">
        <div id="titleBar">
            <div>
                <h2>Spieler Liste</h2>
                <span id="playerCount">0/64 Spieler</span>
            </div>
            <div id="filterBox">
                <select id="filterSelect">
                    <option value="all">Online Spieler</option>
                    <option value="banned">Gebannte Spieler</option>
                    <option value="offline">Alle Spieler</option>
                </select>
            </div>
            <div id="searchBox">
                <input type="text" id="searchBoxInput" placeholder="Suche...">
            </div>
        </div>
        <div id="playerListItemsContainer">
            <ul id="playerListItems">
                <!-- Spieler werden hier dynamisch eingefügt -->
            </ul>
        </div>
    </div>
    <div id="moreWindow" style="display: none;">
        <div id="moreContent">
            <div class="options-header">
                <div class="more-category active" data-content="moreCharInfoContent">Char Infos</div>
                <div class="more-category" data-content="moreIdentifiersContent">Identifiers</div>
                <div class="more-category" data-content="moreActionsContent">Aktionen</div>
            </div>
            <div class="options-body">
                <div id="moreCharInfoContent" class="more-content active">
                    <div class="info-grid">
                        <!-- Charakter Name und FiveM Name -->
                        <div>
                            <div class="info-label">Charakter Name:</div>
                            <div class="info-value" id="charName"></div>
                        </div>
                        <div>
                            <div class="info-label">FiveM Name:</div>
                            <div class="info-value" id="fivemName"></div>
                        </div>
                
                        <!-- Job und Rang -->
                        <div>
                            <div class="info-label">Job:</div>
                            <div class="info-value" id="playerJob"></div>
                        </div>
                        <div>
                            <div class="info-label">Rang:</div>
                            <div class="info-value" id="playerRank"></div>
                        </div>
                
                        <!-- Bargeld und Bank -->
                        <div>
                            <div class="info-label">Bargeld:</div>
                            <div class="info-value" id="playerCash"></div>
                        </div>
                        <div>
                            <div class="info-label">Bank:</div>
                            <div class="info-value" id="playerBank"></div>
                        </div>
                    </div>
                
                    <!-- Koordinaten -->
                    <div class="coords">
                        <h4>Koordinaten:</h4>
                        <div class="coords-value" id="coordsDisplay"></div>
                    </div>
                </div>
                <div id="moreIdentifiersContent" class="more-content">
                    <div class="info-grid">
                        <div>
                            <div class="info-label">Steam:</div>
                            <div class="info-value" id="steamid"></div>
                        </div>
                
                        <div>
                            <div class="info-label">License:</div>
                            <div class="info-value" id="license"></div>
                        </div>
                
                        <div>
                            <div class="info-label">Discord:</div>
                            <div class="info-value" id="discord"></div>
                        </div>
                
                        <div>
                            <div class="info-label">XBL:</div>
                            <div class="info-value" id="xbl"></div>
                        </div>
                
                        <div>
                            <div class="info-label">Live ID:</div>
                            <div class="info-value" id="liveid"></div>
                        </div>
                    </div>
                </div>
                <div id="moreActionsContent" class="more-content">
                    <h4 style="text-align: center;">Spieler Kicken/Bannen</h4>
                    <div class="button-container">
                        <button id="kickButton" class="button">Kick</button>
                        <button id="banButton" class="button">Ban</button>
                    </div>
                    <h4 style="text-align: center;">Inventare leeren</h4>
                    <div class="button-container">
                        <button id="clearTrunksButton" class="button">Kofferräume</button>
                        <button id="clearGloveBoxButton" class="button">Handschuhfächer</button>
                        <button id="clearInventoryButton" class="button">Inventar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="reasonWindow" style="display: none;">
        <h4 id="reasonTitle"></h4>
        <input type="text" id="reasonInput" placeholder="Gib einen Grund ein">
    
        <div class="ban-duration">
            <div class="duration-container">
                <label for="banMinutes">Minuten</label>
                <input type="number" id="banMinutes" placeholder="0">
            </div>
            <div class="duration-container">
                <label for="banHours">Stunden</label>
                <input type="number" id="banHours" placeholder="0">
            </div>
            <div class="duration-container">
                <label for="banDays">Wochen</label>
                <input type="number" id="banDays" placeholder="0">
            </div>
        </div>
    
        <div class="perma-ban">
            <label for="permaBan">Perma Ban</label>
            <input type="checkbox" id="permaBan">
        </div>
    
        <button id="submitReasonButton" class="button">Weiter</button>
        <button id="cancelReasonButton" class="button">Abbrechen</button>
    </div>
    <div id="optionsWindow" style="display: none;">
        <div id="optionsContent">
            <div class="options-header">
                <div class="option-category active" data-content="charInfoContent">Char Infos</div>
                <div class="option-category" data-content="identifiersContent">Identifiers</div>
            </div>
            <div class="options-body">
                <div id="charInfoContent" class="option-content" style="display: block;">
                    <h4>Char Infos</h4>
                    <!-- Die Inhalte werden hier dynamisch eingefügt -->
                </div>
                <div id="identifiersContent" class="option-content" style="display: none;">
                    <h4>Identifiers</h4>
                    <p>Details zu Identifiers...</p>
                </div>
                <div id="actionsContent" class="option-content" style="display: none;">
                    <h4>Aktionen</h4>
                    <p>Details zu Aktionen...</p>
                </div>
            </div>
        </div>
    </div>
    <div id="serverSettingsWindow">
        <div class="server-sidebar">
            <img src="img/intrologo.png" alt="Logo" class="server-sidebar-logo">
            <ul class="server-sidebar-categories">
                <li data-category="dashboard" class="server-category-item selected">
                    <svg width="64px" height="64px" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M13 12C13 11.4477 13.4477 11 14 11H19C19.5523 11 20 11.4477 20 12V19C20 19.5523 19.5523 20 19 20H14C13.4477 20 13 19.5523 13 19V12Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path> <path d="M4 5C4 4.44772 4.44772 4 5 4H9C9.55228 4 10 4.44772 10 5V12C10 12.5523 9.55228 13 9 13H5C4.44772 13 4 12.5523 4 12V5Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path> <path d="M4 17C4 16.4477 4.44772 16 5 16H9C9.55228 16 10 16.4477 10 17V19C10 19.5523 9.55228 20 9 20H5C4.44772 20 4 19.5523 4 19V17Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path> <path d="M13 5C13 4.44772 13.4477 4 14 4H19C19.5523 4 20 4.44772 20 5V7C20 7.55228 19.5523 8 19 8H14C13.4477 8 13 7.55228 13 7V5Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path> </g></svg>
                    Dashboard
                </li>
                <li data-category="logs" class="server-category-item">
                    <svg fill="#ffffff" width="64px" height="64px" viewBox="-6.4 -6.4 44.80 44.80" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff" stroke-width="0.00032"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.064"></g><g id="SVGRepo_iconCarrier"> <title>logs</title> <path d="M0 24q0 0.832 0.576 1.44t1.44 0.576h1.984q0 2.496 1.76 4.224t4.256 1.76h6.688q-2.144-1.504-3.456-4h-3.232q-0.832 0-1.44-0.576t-0.576-1.408v-20q0-0.832 0.576-1.408t1.44-0.608h16q0.8 0 1.408 0.608t0.576 1.408v7.232q2.496 1.312 4 3.456v-10.688q0-2.496-1.76-4.256t-4.224-1.76h-16q-2.496 0-4.256 1.76t-1.76 4.256h-1.984q-0.832 0-1.44 0.576t-0.576 1.408 0.576 1.44 1.44 0.576h1.984v4h-1.984q-0.832 0-1.44 0.576t-0.576 1.408 0.576 1.44 1.44 0.576h1.984v4h-1.984q-0.832 0-1.44 0.576t-0.576 1.408zM10.016 24h2.080q0-0.064-0.032-0.416t-0.064-0.576 0.064-0.544 0.032-0.448h-2.080v1.984zM10.016 20h2.464q0.288-1.088 0.768-1.984h-3.232v1.984zM10.016 16h4.576q0.992-1.216 2.112-1.984h-6.688v1.984zM10.016 12h16v-1.984h-16v1.984zM10.016 8h16v-1.984h-16v1.984zM14.016 23.008q0 1.824 0.704 3.488t1.92 2.88 2.88 1.92 3.488 0.704 3.488-0.704 2.88-1.92 1.92-2.88 0.704-3.488-0.704-3.488-1.92-2.88-2.88-1.92-3.488-0.704-3.488 0.704-2.88 1.92-1.92 2.88-0.704 3.488zM18.016 23.008q0-2.080 1.44-3.52t3.552-1.472 3.52 1.472 1.472 3.52q0 2.080-1.472 3.52t-3.52 1.472-3.552-1.472-1.44-3.52zM22.016 23.008q0 0.416 0.288 0.704t0.704 0.288h1.984q0.416 0 0.704-0.288t0.32-0.704-0.32-0.704-0.704-0.288h-0.992v-0.992q0-0.416-0.288-0.704t-0.704-0.32-0.704 0.32-0.288 0.704v1.984z"></path> </g></svg>
                    Logs
                </li>
                <li data-category="datenbank" class="server-category-item">
                    <svg width="64px" height="64px" viewBox="-3.2 -3.2 22.40 22.40" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff" stroke-width="0.5599999999999999" transform="matrix(1, 0, 0, 1, 0, 0)rotate(0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.032"></g><g id="SVGRepo_iconCarrier"> <path d="M13.1371 6.91018C13.4184 6.7695 13.7123 6.59981 14 6.40001V8C14 9.65685 11.3137 11 8 11C4.68629 11 2 9.65685 2 8V6.40001C2.28772 6.59981 2.58158 6.7695 2.86293 6.91018C4.28096 7.61919 6.09998 8 8 8C9.90002 8 11.719 7.61919 13.1371 6.91018Z" fill="#ffffff"></path> <path d="M2 11.4V13C2 14.6569 4.68629 16 8 16C11.3137 16 14 14.6569 14 13V11.4C13.7123 11.5998 13.4184 11.7695 13.1371 11.9102C11.719 12.6192 9.90002 13 8 13C6.09998 13 4.28096 12.6192 2.86293 11.9102C2.58158 11.7695 2.28772 11.5998 2 11.4Z" fill="#ffffff"></path> <path d="M8 0C11.3137 0 14 1.34315 14 3C14 4.65685 11.3137 6 8 6C4.68629 6 2 4.65685 2 3C2 1.34315 4.68629 0 8 0Z" fill="#ffffff"></path> </g></svg>
                    Datenbank
                </li>
                <li data-category="rechte" class="server-category-item">
                    <svg width="64px" height="64px" viewBox="0 0 512.00 512.00" id="Layer_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#ffffff" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><style type="text/css"> .st0{fill:#ffffff;} .st1{fill:#ffffff;} .st2{fill:#ffffff;} </style><path class="st1" d="M449.4,136.3c-41.3,0-74.8-33.5-74.8-74.8c0-2.4,0.1-4.9,0.4-7.3H140.8c0.2,2.4,0.3,4.8,0.3,7.3 c0,10.4-2.1,20.4-6,29.4c-11.4,26.8-38,45.5-68.9,45.5c-3.3,0-6.4-0.2-9.6-0.6c1.3,35.5,6.9,69.6,16.4,101.7 c11.3,38.6,28.1,74.2,49.3,105.6c34.5,51.1,80.6,91.2,133.7,114.8c112.8-50.2,194-174.6,199.3-321.8 C453.3,136.2,451.4,136.3,449.4,136.3z M389,253.6H256.1v157.3c0,0,0,0-0.1,0c-38.3-20.8-72.2-52.1-98.7-91.5 c-13.7-20.3-25.2-42.4-34.3-65.8h133.1V96.3h81.6c11,35,38,63,72.4,75.3C406.2,200,399.1,227.6,389,253.6z"></path></g></svg>
                    Rechte
                </li>
            </ul>
        </div> 
        <div class="server-content-box">
            <h2 id="server-category-title">Dashboard</h2>
            <div id="server-category-content">
            </div>
        </div>
    </div>    
</body>
</html>
