<!DOCTYPE html>
<html>
<head>
    <title>History</title>
</head>
<body>
    <?php include 'common/menu.php'; ?>
    <div id="historyTable"></div>
    <p id="status"></p>
    <script>
        function loadHistory() {
            const status = document.getElementById('status');
            status.textContent = 'Connecting...';
            fetch('libs/history.php?action=load', {
                method: 'POST'
            })
            .then(response => {
                status.textContent = 'Loading history...';
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    status.textContent = 'Successfully loaded history';
                    document.getElementById('historyTable').innerHTML = data.html;
                    setTimeout(() => status.textContent = '', 1000);
                } else {
                    status.textContent = data.error || 'An error occurred while loading history';
                }
            })
            .catch(error => {
                status.textContent = 'An error occurred: ' + error.message;
            });
        }

        // Load history on page load
        loadHistory();
    </script>
</body>
</html>