<?php
// =============================
// COTECH MEDIA NETWORK (CMN)
// Sidebar Section - Enhanced Version
// =============================

// Fetch latest news
$latest = $conn->query("
    SELECT id, slug, title, featured_image, image, published_at 
    FROM articles 
    WHERE status='published' 
    ORDER BY published_at DESC 
    LIMIT 5
");

// Fetch trending (most viewed)
$trending = $conn->query("
    SELECT id, slug, title, views 
    FROM articles 
    WHERE status='published' 
    ORDER BY views DESC 
    LIMIT 5
");
?>

<div class="sidebar">

    <!-- Search Box -->
    <div class="sidebar-box">
        <h5><i class="bi bi-search"></i> Search</h5>
        <form action="search.php" method="get" class="search-form">
            <input type="text" name="q" placeholder="Search articles..." required>
            <button type="submit"><i class="bi bi-arrow-right"></i></button>
        </form>
    </div>

    <!-- Latest News -->
    <div class="sidebar-box">
        <h5><i class="bi bi-clock-history"></i> Latest News</h5>
        <ul class="sidebar-list">
            <?php while ($row = $latest->fetch_assoc()): 
                $img = $row['featured_image'] ?? $row['image'] ?? '';
            ?>
            <li>
                <?php if ($img): ?>
                    <img src="../assets/uploads/<?= htmlspecialchars($img) ?>" alt="<?= htmlspecialchars($row['title']) ?>">
                <?php endif; ?>
                <a href="article.php?slug=<?= urlencode($row['slug']) ?>">
                    <?= htmlspecialchars($row['title']) ?>
                </a>
                <small><?= date("M d, Y", strtotime($row['published_at'])) ?></small>
            </li>
            <?php endwhile; ?>
        </ul>
    </div>

    <!-- Trending -->
    <div class="sidebar-box">
        <h5><i class="bi bi-fire"></i> Trending</h5>
        <ol class="sidebar-list trending">
            <?php while ($trend = $trending->fetch_assoc()): ?>
            <li>
                <a href="article.php?slug=<?= urlencode($trend['slug']) ?>">
                    <?= htmlspecialchars($trend['title']) ?>
                </a>
                <small><?= $trend['views'] ?> views</small>
            </li>
            <?php endwhile; ?>
        </ol>
    </div>

    <!-- Newsletter -->
    <div class="sidebar-box newsletter">
        <h5><i class="bi bi-envelope"></i> Stay Updated</h5>
        <p>Get the latest CMN headlines straight to your inbox.</p>
        <form action="#" method="post">
            <input type="email" name="email" placeholder="Enter your email" required>
            <button type="submit"><i class="bi bi-send"></i> Subscribe</button>
        </form>
    </div>

    <!-- Follow Us -->
    <div class="sidebar-box follow-us">
        <h5><i class="bi bi-people"></i> Follow CMN</h5>
        <div class="social-icons">
            <a href="https://www.facebook.com/yourpage" target="_blank" class="social fb"><i class="bi bi-facebook"></i></a>
            <a href="https://twitter.com/yourpage" target="_blank" class="social tw"><i class="bi bi-twitter-x"></i></a>
            <a href="https://www.instagram.com/yourpage" target="_blank" class="social ig"><i class="bi bi-instagram"></i></a>
            <a href="https://www.youtube.com/@yourpage" target="_blank" class="social yt"><i class="bi bi-youtube"></i></a>
        </div>
    </div>

</div>

<style>
.sidebar {
  position: sticky;
  top: 100px;
}

.sidebar-box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 25px;
  transition: all 0.3s ease;
}
.sidebar-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.sidebar-box h5 {
  font-weight: 700;
  color: #007BFF;
  margin-bottom: 15px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-box p {
  font-size: 0.95rem;
  color: #555;
}

.sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 15px;
}
.sidebar-list li img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.sidebar-list li a {
  font-weight: 500;
  color: #333;
  text-decoration: none;
}
.sidebar-list li a:hover {
  color: #007BFF;
  text-decoration: underline;
}
.sidebar-list small {
  display: block;
  color: #777;
  font-size: 0.8rem;
}

.sidebar-list.trending li {
  display: block;
  margin-bottom: 10px;
}
.sidebar-list.trending small {
  font-size: 0.8rem;
  color: #777;
}

/* Search */
.search-form {
  display: flex;
  gap: 8px;
}
.search-form input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
}
.search-form button {
  border: none;
  background: #007BFF;
  color: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
}
.search-form button:hover {
  background: #0056b3;
}

/* Newsletter */
.newsletter form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.newsletter input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
}
.newsletter button {
  background: #007BFF;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  font-weight: 600;
}
.newsletter button:hover {
  background: #0056b3;
}

/* Follow Us */
.follow-us .social-icons {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
.follow-us .social {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}
.social.fb { background: #1877f2; }
.social.tw { background: #000; }
.social.ig { background: #E1306C; }
.social.yt { background: #FF0000; }

.social:hover {
  transform: scale(1.15);
  opacity: 0.9;
}
</style>
