<?php
header('Content-Type: text/html; charset=UTF-8');
session_start();
include 'db.php';

// Fetch all blogs
$blogs = $pdo->query("SELECT * FROM blogs ORDER BY created_at DESC")->fetchAll();

// Fetch latest blogs for sidebar
$latestBlogs = $pdo->query("
  SELECT id, title 
  FROM blogs
  ORDER BY created_at DESC 
  LIMIT 5
")->fetchAll();

// Latest reviews
$latestReviews = $pdo->query("
  SELECT r.comment, r.rating, u.username, c.name AS company_name
  FROM reviews r
  JOIN users u ON r.user_id = u.id
  JOIN companies c ON r.company_id = c.id
  ORDER BY r.id DESC
  LIMIT 5
")->fetchAll();

// Top rated companies
$topCompanies = $pdo->query("
  SELECT c.id, c.name, c.image, ROUND(AVG(r.rating),1) AS avg_rating
  FROM companies c
  JOIN reviews r ON c.id = r.company_id
  GROUP BY c.id
  HAVING COUNT(r.id) >= 1
  ORDER BY avg_rating DESC
  LIMIT 5
")->fetchAll();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Review Stream - Blog</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<!-- Sans-serif fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet">


<!-- Favicon -->
<link rel="icon" href="/favicon.png" type="image/png" />


<style>
body { margin:0; font-family:Arial,sans-serif; background:#f9f9f9; padding-bottom: 140px}
.container { max-width:1200px; margin:20px auto; padding:0 10px; }
.content-layout { display: flex; gap: 20px; flex-wrap: wrap; }
.main-content { 
  flex: 3; 
  min-width: 250px; 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: 15px; 
}
.sidebar { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 20px; }
.sidebar-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.07);
  transition: box-shadow 0.3s ease;
}
.sidebar-card:hover { box-shadow: 0 6px 14px rgba(0,0,0,0.12); }
.review-box {
  background: white;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 15px;
}
.hero {
  background: linear-gradient(90deg, #007BFF, #00b67a);
  color: white;
  text-align: center;
  padding: 40px 20px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}
.hero h2 { margin: 0; font-size: 28px; }
.star-box { display: inline-block; width: 20px; height: 20px; margin-right: 2px; text-align: center; line-height: 20px; border-radius: 3px; }
.star-box.filled { background: #00b67a; color: white; }
.star-box.empty { background: #d3d3d3; color: white; }
/* Blog cards grid style */
.blog-card { 
  background: white; 
  border-radius: 12px; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.07); 
  overflow: hidden; 
  transition: transform 0.2s; 
  display: flex; 
  flex-direction: column;
}
.blog-card:hover { transform: translateY(-3px); }
.blog-card img { width: 100%; height: 150px; object-fit:cover; }
.blog-card-content { padding: 10px; }
.blog-card h4 { margin:0; font-size:16px; }
.blog-card p { font-size: 14px; color:#555; margin-top:5px; }

 .fixed-footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      background: #222;
      text-align: center;
      padding: 10px 0;
      color: #fff;
      z-index: 1000;
    }
	.fixed-footer p{
		font-family: 'Poppins', sans-serif !important;
		font-size: 13px !important;
	}

    .footer-menu a {
      margin: 0 10px;
      text-decoration: none;
      color: #fff;
	  font-family: 'Poppins', sans-serif !important;
	  font-size: 13px !important;
    }

    .footer-menu a:hover {
      text-decoration: underline;
    }
	



.topbar {
  background-color: #007BFF; /* Blue */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 18px;
}

.logo-icon {
  background: linear-gradient(135deg, #a2d4f5, #fefb72);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}

.menu-toggle {
  font-size: 1.5em;
  color: #fff;
  cursor: pointer;
  display: none;
}

.menu {
  display: flex;
  gap: 15px;
}

.menu a, .menu button {
  color: #fff;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}

/* Mobile styles */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .menu {
    flex-direction: column;
    background-color: #007BFF;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    display: none;
    padding: 10px 0;
    z-index: 1000;
  }

  .menu.active {
    display: flex;
  }

  .menu a, .menu button {
    padding: 10px 15px;
  }
}



</style>
</head>
<body>

<div class="topbar">
  <div class="logo">
    <div class="logo-icon">
      <i class="fas fa-shield-alt" style="color:#4A90E2; font-size: 25px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); margin-left: 1px"></i>
    </div>
    REVIEW STREAM
  </div>

  <div class="menu-toggle" onclick="toggleMenu()">
    <i class="fas fa-bars"></i>
  </div>

  <div class="menu" id="topMenu">
    <a href="index.php">Home</a>
    <a href="companies.php">Companies</a>
	<a href="blog.php">Newsroom</a>
    <?php if(isset($_SESSION['user_id'])): ?>
      <a href="user-settings.php">My Settings</a>
      <a href="logout.php">Logout</a>
    <?php else: ?>
      <a href="login.php">Login</a>
    <?php endif; ?>
    <button class="dark-mode-toggle" onclick="document.body.classList.toggle('dark-mode')">🌓</button>
  </div>
</div>




<div class="container">
  <div class="hero">
    <h2>📰 Newsroom</h2>
  </div>
  <div class="content-layout">
    <div class="main-content">
      <?php foreach($blogs as $blog): ?>
        <div class="blog-card">
          <a href="blog_details.php?id=<?= $blog['id'] ?>">
            <img src="uploads/<?= htmlspecialchars($blog['image']) ?>" alt="<?= htmlspecialchars($blog['title']) ?>">
          </a>
          <div class="blog-card-content">
            <h4><a href="blog_details.php?id=<?= $blog['id'] ?>"><?= htmlspecialchars($blog['title']) ?></a></h4>
            <p><?= htmlspecialchars(substr($blog['content'],0,60)) ?>...</p>
          </div>
        </div>
      <?php endforeach; ?>
    </div>
    
   
    <div class="sidebar">
      <div class="sidebar-card">
        <h4>Latest Reviews</h4>
        <?php foreach($latestReviews as $rev): ?>
          <p><strong><?= htmlspecialchars($rev['username']) ?></strong> on <em><?= htmlspecialchars($rev['company_name']) ?></em>:</p>
          <div>
            <?php for($i=1;$i<=5;$i++): ?>
              <span class="star-box <?= $i<=$rev['rating'] ? 'filled' : 'empty' ?>">★</span>
            <?php endfor; ?>
            (<?= $rev['rating'] ?>/5)
          </div>
          <p style="margin-top:2px;"><?= htmlspecialchars(substr($rev['comment'],0,50)) ?>...</p>
          <hr>
        <?php endforeach; ?>
      </div>
      <div class="sidebar-card">
        <h4>Top Rated Companies</h4>
        <?php foreach($topCompanies as $top): ?>
          <div style="display:flex;align-items:center;gap:8px;margin-bottom:5px;">
            <img src="images/companies/<?= htmlspecialchars($top['image']) ?>" alt="<?= htmlspecialchars($top['name']) ?>" style="width:30px;height:30px;object-fit:contain;">
            <span><?= htmlspecialchars($top['name']) ?> (<?= $top['avg_rating'] ?>/5)</span>
          </div>
        <?php endforeach; ?>
      </div>
      <div class="sidebar-card">
        <h4>Latest Blog Posts</h4>
        <?php foreach($latestBlogs as $b): ?>
          <p><a href="blog_details.php?id=<?= $b['id'] ?>"><?= htmlspecialchars($b['title']) ?></a></p>
        <?php endforeach; ?>
      </div>
    </div>
    
    
    
  </div>
</div>
<?php include 'footer.php'; ?>


<script>
  function toggleMenu() {
    document.getElementById('topMenu').classList.toggle('active');
  }
</script>

</body>
</html>
