    <!DOCTYPE html>
    <html>
    <head>
        <title>API Test</title>
    </head>
    <body>
        <h2>Comment System API Test</h2>
        
        <h3>1. Test POST Request to This File:</h3>
        <button onclick="testPost()">Test POST Request</button>
        <div id="postResult"></div>
        
        <h3>2. Test Actual API Files:</h3>
        <button onclick="testComments()">Test get_comments.php</button>
        <div id="commentsResult"></div>
        
        <br>
        <button onclick="testRatings()">Test get_ratings.php</button>
        <div id="ratingsResult"></div>
        
        <h3>3. File Existence Check:</h3>
        <div id="fileCheck">
        ✅ get_comments.php<br>✅ get_ratings.php<br>✅ config.php<br>✅ submit_comment.php<br>        </div>
        
        <script>
        async function testPost() {
            const result = document.getElementById('postResult');
            result.innerHTML = 'Testing...';
            
            try {
                const response = await fetch('comprehensive_test.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        test: 'data',
                        blog_id: 123,
                        csrf_token: 'test_token'
                    })
                });
                
                const data = await response.text();
                result.innerHTML = '<pre>' + data + '</pre>';
            } catch (error) {
                result.innerHTML = 'Error: ' + error.message;
            }
        }
        
        async function testComments() {
            const result = document.getElementById('commentsResult');
            result.innerHTML = 'Testing get_comments.php...';
            
            try {
                const response = await fetch('get_comments.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        blog_id: 1,
                        csrf_token: 'test_token'
                    })
                });
                
                const data = await response.text();
                result.innerHTML = '<pre>' + data.substring(0, 500) + (data.length > 500 ? '...' : '') + '</pre>';
            } catch (error) {
                result.innerHTML = 'Error: ' + error.message;
            }
        }
        
        async function testRatings() {
            const result = document.getElementById('ratingsResult');
            result.innerHTML = 'Testing get_ratings.php...';
            
            try {
                const response = await fetch('get_ratings.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        blog_id: 1,
                        csrf_token: 'test_token'
                    })
                });
                
                const data = await response.text();
                result.innerHTML = '<pre>' + data.substring(0, 500) + (data.length > 500 ? '...' : '') + '</pre>';
            } catch (error) {
                result.innerHTML = 'Error: ' + error.message;
            }
        }
        </script>
    </body>
    </html>
    