<!DOCTYPE html>

<head>
    <title>Frozer Client - Logs</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <html lang="en">
    <link rel="stylesheet" type="text/css" href="css/background.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/logs.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.13.7/sorting/datetime-moment.js"></script>
</head>

<body>
    <img class="open-menu-button" src="/images/icons/menu.svg" />
    <div class="menu-overlay"></div>

    <div class="animated-bg"></div><div class="animated-bg bg2"></div>    <div class="menu-container">
        <img src="images/frozerlogo.webp" alt="logo" class="logo dash-logo" onclick="goHome()" />

        
<div class="dashboard-buttons">
    <a class="dashboard-button"  href="/home.php"><img src="/images/icons/home.svg">Home</a>
    <a class="dashboard-button"  href="/account.php"><img src="/images/icons/account.svg">Account</a>
    <a class="dashboard-button"  href="/subscriptions.php"><img src="/images/icons/subscriptions.svg">Subscriptions</a>
    <a class="dashboard-button" id="selected" href="/logs.php"><img src="/images/icons/logs.svg">Logs</a>
    <a class="dashboard-button"  href="/settings.php"><img src="/images/icons/settings.svg">Settings</a>
</div>


<div class="bottom-menu">
    <div class="menu-user">
        <div class="user-avatar-container">
            <img class="user-avatar" src="/images/frozerlogo.webp">
        </div>
        <div class="user-info-container">
            <div class="user-name"><?php echo getUsername(); ?></div>
            <div class="user-uid">UID: <?php echo getUserId(); ?></div>
        </div>
    </div>
    <img class="logout-button" src="/images/icons/logout.svg" onclick="logout()"></i>
</div>    </div>

    <div class="content-container">
        <div class="title-container">
            <h1>Logs
            </h1>
        </div>
        <div class="table-container">
            <table class="logs-table" id="logs-table">
                <thead>
                    <tr>
                        <th>Username</th>
                        <th>IP<span class="hover-reveal"> (Hover to reveal)</span><button class="showAllButton" onclick="toggleVisibility()">Show All</button></th>
                        <th>User Agent</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    if ($result->num_rows > 0) {
                        while ($row = $result->fetch_assoc()) {
                            echo "<tr>";
                            echo "<td>" . htmlspecialchars($row['username']) . "</td>";
                            echo "<td class='ip-column'>" . htmlspecialchars($row['ip_address']) . "</td>";
                            echo "<td>" . htmlspecialchars($row['user_agent']) . "</td>";
                            echo "<td>" . htmlspecialchars($row['timestamp']) . "</td>";
                            echo "</tr>";
                        }
                    } else {
                        echo "<tr><td colspan='4'>No logs found</td></tr>";
                    }
                    ?>
                </tbody>
            </table>
        </div>
    </div>
</body>

</html>


<script src="js/menu.js"></script>
<script src="js/redirects.js"></script>
<script>
    var showingAll = false;

    function logout() {
        window.location.href = 'login.php';
    }

    function goHome() {
        window.location.href = 'home.php';
    }

    function toggleVisibility() {
        var showAllButton = document.querySelector(".showAllButton");
        var ipCells = document.querySelectorAll(".ip-column");

        if (showingAll) {
            for (var i = 0; i < ipCells.length; i++) {
                ipCells[i].style.transition = "";
                ipCells[i].style.filter = ""; 
            }
            showAllButton.style.backgroundColor = "#851212";
            showAllButton.innerText = "Show All";
            showingAll = false;
        } else {
            for (var i = 0; i < ipCells.length; i++) {
                ipCells[i].style.transition = "filter 0.3s ease-out";
                ipCells[i].style.filter = "none"; 
            }
            showAllButton.style.backgroundColor = "green";
            showAllButton.innerText = "Hide All";
            showingAll = true;
        }
    }
</script>

