<?php
$conn = new mysqli("localhost", "root", "", "news_cms");
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT a.title, a.content, a.view_for, c.name AS category
        FROM articles a
        JOIN categories c ON a.category_id = c.id
        WHERE a.status='published'
        ORDER BY a.published_at DESC";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>เว็บไซต์ข่าวสาร</title>
<style>
body { font-family: 'Sarabun', sans-serif; background: linear-gradient(to bottom right, #f0f4f8, #d9e2ec); margin:0; padding:0; }
header { background:#2b6cb0; color:white; padding:20px; text-align:center; }
.container { width:90%; max-width:1200px; margin:20px auto; }
.article-card { background:white; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,0.1); margin-bottom:20px; padding:20px; transition: transform 0.2s, box-shadow 0.2s; }
.article-card:hover { transform: translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.2); }
.article-title { font-size:1.5rem; color:#2b6cb0; margin-bottom:10px; }
.article-content { font-size:1rem; color:#333; }
.category { display:inline-block; background:#bee3f8; color:#2b6cb0; padding:4px 10px; border-radius:20px; font-size:0.9rem; margin-bottom:10px; }
</style>
</head>
<body>
<header><h1>เว็บไซต์ข่าวสาร</h1></header>
<div class="container">
<?php
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo '<div class="article-card">';
        echo '<div class="category">'.$row['category'].'</div>';
        echo '<div class="article-title">'.$row['title'].'</div>';
        echo '<div class="article-content">'.$row['content'].'</div>';
        echo '</div>';
    }
} else {
    echo '<p>ไม่มีบทความ</p>';
}
$conn->close();
?>
</div>
</body>
</html>
