<?php
include 'includes/header.php';
include_once __DIR__ . '/admin/config/db.php';

/* SAFETY CHECK */
if (!isset($_GET['id']) || empty($_GET['id'])) {
  echo "<div class='container py-5 text-center'>अमान्य ब्लॉग</div>";
  include 'includes/footer.php';
  exit;
}

$id = intval($_GET['id']);

/* FETCH BLOG (CHANGED FROM social_events → blogs) */
$result = mysqli_query(
  $conn,
  "SELECT title, image, description FROM blogs WHERE id = $id LIMIT 1"
);

if (!$result || mysqli_num_rows($result) == 0) {
  echo "<div class='container py-5 text-center'>ब्लॉग नहीं मिला</div>";
  include 'includes/footer.php';
  exit;
}

$blog = mysqli_fetch_assoc($result);
?>

<style>
/* PAGE BACKGROUND */
.blog-details-page {
  background: linear-gradient(180deg, #fff7ec 0%, #ffffff 100%);
}

/* REMOVE TOP GAP */
.main {
  padding-top: 0 !important;
}

/* FULL SCREEN IMAGE WRAPPER */
.blog-image-wrapper {
  width: 100vw;
  height: 100vh;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
}

/* IMAGE – FULL WIDTH + FULL HEIGHT */
.blog-detail-img {
  width: 100%;
  height: 100%;
  
  object-position: center;
  display: block;
}

/* CONTENT AREA */
.blog-content-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 15px;
}

/* TITLE */
.blog-detail-title {
  font-size: 40px;
  font-weight: 900;
  margin-bottom: 20px;
  background: linear-gradient(90deg, #ff9933, #ff6a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* DESCRIPTION */
.blog-detail-desc {
  font-size: 18px;
  line-height: 1.9;
  color: #444;
  font-weight: 500;
}

/* =====================
   MOBILE FIX
===================== */
@media (max-width: 768px) {

  .blog-image-wrapper {
    height: 40vh;
  }

  .blog-detail-title {
    font-size: 28px;
  }

  .blog-detail-desc {
    font-size: 15.5px;
  }

  .blog-content-wrap {
    padding: 25px 15px;
  }
}
</style>

<main class="main">
  <div class="blog-details-page">

    <!-- FULL SCREEN IMAGE -->
    <div class="blog-image-wrapper">
      <img
        src="admin/uploads/blogs/<?= htmlspecialchars($blog['image']) ?>"
        alt="<?= htmlspecialchars($blog['title']) ?>"
        class="blog-detail-img">
    </div>

    <!-- CONTENT -->
    <div class="blog-content-wrap">
      <h1 class="blog-detail-title">
        <?= htmlspecialchars($blog['title']) ?>
      </h1>

      <div class="blog-detail-desc">
        <?= nl2br(htmlspecialchars($blog['description'])) ?>
      </div>
    </div>

  </div>
</main>

<?php include 'includes/footer.php'; ?>
