<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="css/main/main.css?ver=<?php echo time(); ?>">
    <script src="js/main/main.js?ver=<?php echo time(); ?>" defer></script>
    <script src="https://api.squizee.in/datatable/main.js?ver=<?php echo time(); ?>" defer></script>

    <style>
        #data-table-container {
            margin-top: 20px;
            max-height: calc(100vh - 200px) !important;
            overflow: auto;
            border-radius: 3px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        table, th, td {
            border: 1px solid #ddd;
        }

        th, td {
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>

    <!-- Left Panel (Navigation) -->
    <div class="left-panel left-panel-show" id="left-panel">
    </div>

    <!-- Main Content Area -->
    <div class="main-content main-content-normal" id="main-content">

        <!-- Content Area (Dynamic Content Based on the selected menu) -->
        <div id="content">
            <div id="data-table-wrapper"></div>
        </div>
    </div>

    <script>
        // Fetch data from fetch_message_log.php and display it in the table
        function fetchData() {
            fetch('../php/fetch_message_log.php') // URL to your PHP file
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json(); // Assuming the response is in JSON format
                })
                .then(data => {
                    // Define the headers with the proper case and replacements for clarity
                    const options = {
                        replace_headers: [
                            ['timestamp', 'Timestamp'],
                            ['recipient', 'Recipient'],
                            ['original_message', 'Original Message'],
                            ['reply_message', 'Reply Message'],
                            ['status', 'Status']
                        ],
                        // Define the column arrangement
                        arrange_columns: [
                            'Timestamp', 
                            'Recipient', 
                            'Original Message',
                            'Reply Message',
                            'Status'
                        ],
                        filter_blanks: true,
                        sort_by: 'Timestamp',
                        sort_direction: 'desc'
                    };
    
                    // Call loadData with the 2D array and options
                    loadData(data, 'json', options);
                })
                .catch(error => {
                    console.error('There was a problem with the fetch operation:', error);
                });
        }

        // Load data when the page is loaded
        document.addEventListener('DOMContentLoaded', fetchData);
    </script>

</body>
</html>
