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

/* सुरक्षा जाँच */
if (!isset($conn) || !$conn) {
    die("डेटाबेस कनेक्शन असफल रहा");
}

/* ब्लॉग प्राप्त करें */
$sql = "SELECT id, image, title, description FROM blogs ORDER BY id DESC";
$blogs = mysqli_query($conn, $sql);

if (!$blogs) {
    die("क्वेरी असफल: " . mysqli_error($conn));
}
?>

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

/* SECTION TITLE */
.section-title h2 {
  font-size: 36px;
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ff9933, #ff6a00);
  -webkit-background-clip: text;
 
}

.section-title p {
  color: #1faa06;
  font-weight: 600;
}

/* ===== BLOG CARD ===== */
.blog-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 4px solid #ff9933;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* IMAGE BOX – NO BLANK SPACE */
.blog-img-box {
  width: 100%;
  aspect-ratio: 16 / 9;     /* 🔥 FULL IMAGE LIKE GALLERY */
  background: #000;
  overflow: hidden;
}

/* IMAGE */
.blog-img-box img {
  width: 100%;
  height: 100%;
         /* 🔥 NO WHITE SPACE */
  object-position: center;
  display: block;
}

/* CONTENT */
.blog-content {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* TITLE */
.blog-content h4 {
  color: #ff6a00;
  font-weight: 800;
  margin-bottom: 10px;
}

/* DESCRIPTION */
.blog-content p {
  font-size: 14px;
  color: #444;
  margin-bottom: 15px;
  flex-grow: 1;
}

/* READ MORE */
.read-more {
  font-weight: 700;
  color: #1faa06;
  text-decoration: none;
}

.read-more:hover {
  color: #ff6a00;
}

/* HOVER (DESKTOP ONLY) */
@media (hover:hover) {
  .blog-card:hover img {
    transform: scale(1.05);
    transition: 0.4s ease;
  }
}

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

  .section-title h2 {
    font-size: 26px;
  }

  .section-title p {
    font-size: 14px;
  }

  .blog-img-box {
    aspect-ratio: 4 / 3;   /* 📱 better mobile ratio */
  }

  .blog-content h4 {
    font-size: 17px;
  }

  .blog-content p {
    font-size: 13px;
  }
}
</style>

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

    <section class="section py-5">
      <div class="container">

        <!-- SECTION TITLE -->
        <div class="section-title text-center mb-5">
          <h2>ब्लॉग</h2>
          <p>नवीनतम अपडेट और गतिविधियाँ</p>
        </div>

        <!-- BLOG GRID -->
        <div class="row g-4">

          <?php if (mysqli_num_rows($blogs) > 0): ?>
            <?php while ($blog = mysqli_fetch_assoc($blogs)): ?>

              <?php
              $img = trim($blog['image']);
              if (file_exists(__DIR__."/admin/uploads/blogs/".$img)) {
                $path = "admin/uploads/blogs/".$img;
              } elseif (file_exists(__DIR__."/uploads/blogs/".$img)) {
                $path = "uploads/blogs/".$img;
              } else {
                $path = "assets/img/placeholder.jpg";
              }
              ?>

              <!-- ✅ 2 PER ROW ON DESKTOP -->
              <div class="col-12 col-md-6 col-lg-6 d-flex">
                <div class="blog-card w-100">

                  <!-- IMAGE -->
                  <div class="blog-img-box">
                    <img src="<?= $path ?>" alt="<?= htmlspecialchars($blog['title']) ?>">
                  </div>

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

                    <p>
                      <?php
                      $desc = trim(strip_tags($blog['description']));
                      if (mb_strlen($desc, 'UTF-8') > 120) {
                        echo htmlspecialchars(mb_substr($desc, 0, 120, 'UTF-8')) . '...';
                      } else {
                        echo htmlspecialchars($desc);
                      }
                      ?>
                    </p>

                    <a href="blog-details.php?id=<?= $blog['id'] ?>" class="read-more">
                      और पढ़ें →
                    </a>
                  </div>

                </div>
              </div>

            <?php endwhile; ?>
          <?php else: ?>
            <div class="col-12 text-center text-muted">
              कोई ब्लॉग उपलब्ध नहीं है
            </div>
          <?php endif; ?>

        </div>

      </div>
    </section>

  </div>
</main>

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