<!DOCTYPE html>
<html>

<head>
    <title>Frozer Client - Settings</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/settings.css">
    <link rel="stylesheet" type="text/css" href="css/background.css">
    <link href="css/dark.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" type="text/css" href="css/sweetalert.css">
</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" href="/logs.php"><img src="/images/icons/logs.svg">Logs</a>
            <a class="dashboard-button" id="selected" 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>Settings</h1>
        </div>

        <div class="settings-container">
            <div class="setting-container">
                <div class="setting-info">
                    <h2>Remove all logs</h2>
                    <p>Remove all logs associated with your account.</p>
                </div>
                <form method="post" id="removeLogsForm">
                    <button id="logsBtn" class="settings-button disabled" name="remove_logs" type="submit">
                        Remove
                    </button>
                </form>
            </div>
            
            <?php if (isStaff()): ?>
                <div class="setting-container">
                    <div class="setting-info">
                        <h2>Staff Panel</h2>
                        <p>Control Panel for Staff.</p>
                    </div>
                    <form method="post" action="staff_panel.php">
                        <button id="staffBtn" class="settings-button disabled" type="submit">
                            Dashboard
                        </button>
                    </form>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <div id="confirmationPopup" class="popup">
        <div class="popup-content">
            <h2>Confirmation</h2>
            <p>Are you sure you want to remove all logs associated with your account? This action cannot be undone.</p>
            <button class="cancelButton" onclick="closePopup()">Cancel</button>
            <button class="confirmButton" onclick="confirmedRemove()">Confirm</button>
        </div>
    </div>

    <script src="js/menu.js"></script>
    <script src="js/redirects.js"></script>
    <script>
        function confirmRemoveLogs(event) {
            event.preventDefault();
            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById("removeLogsForm").submit();
                }
            });
        }

        <?php if (isset($_SESSION['log_removal_status']) && $_SESSION['log_removal_status'] === 'success'): ?>
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: 'Logs removed successfully.'
            });
            <?php unset($_SESSION['log_removal_status']); ?>
        <?php elseif (isset($_SESSION['log_removal_status']) && $_SESSION['log_removal_status'] === 'error'): ?>
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'There was an error removing the logs. Please try again later.'
            });
            <?php unset($_SESSION['log_removal_status']); ?>
        <?php endif; ?>
    </script>
</body>

</html>
