<?php
include("auth.php");
include("config/db.php");

$result = mysqli_query($conn, "SELECT * FROM blogs ORDER BY id DESC");
?>
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<title>ब्लॉग</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- ✅ SOURCE SANS PRO FONT -->
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

<style>
html,body{
  margin:0;
  height:100%;
  overflow-x:hidden;
  color:#706c83 !important;
  font-family:'Source Sans Pro', sans-serif !important;
}

*{
  box-sizing:border-box;
}

/* IMAGE */
.blog-img{
  width:220px;
  height:130px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid #ddd;
}

/* ===== SIDEBAR ===== */
.sidebar{
  position:fixed;
  top:0;
  left:0;
  width:300px;
  height:100vh;
  background:#1f2d3d;
  color:#fff;
  padding:20px;
  transition:transform .3s ease;
  z-index:1000;
}

/* ===== MAIN ===== */
.main{
  margin-left:300px;
  background:#f5f7fa;
  min-height:100vh;
  padding:20px;
  overflow-x:hidden;
  transition:transform .3s ease, margin-left .3s ease;
}

/* MENU ICON */
.menu-btn{
  display:none;
  font-size:26px;
  cursor:pointer;
}

/* ===== TABLE SCROLL ===== */
.table-scroll{
  width:100%;
  overflow-x:auto;
}

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

  .menu-btn{
    display:inline-block;
    margin-bottom:15px;
  }

  .sidebar{
    transform:translateX(-300px);
  }

  .sidebar.show{
    transform:translateX(0);
  }

  .main{
    margin-left:0;
    padding:12px;
  }

  .main.shift{
    transform:translateX(300px);
  }

  table{
    min-width:750px;
    font-size:13px;
  }

  .blog-img{
    width:120px;
    height:70px;
  }

  .btn{
    font-size:12px;
    padding:4px 6px;
  }
}
</style>
</head>

<body>

<!-- ===== SIDEBAR ===== -->
<div class="sidebar" id="sidebar">
  <h4 class="mb-4">एडमिन पैनल</h4>

  <ul class="nav flex-column gap-2">
    <li>
      <a class="nav-link text-white" href="dashboard.php">
        <i class="bi bi-speedometer2"></i> डैशबोर्ड
      </a>
    </li>

    <li>
      <a class="nav-link text-white" href="slider.php">
        <i class="bi bi-images"></i> स्लाइडर
      </a>
    </li>

    <li>
      <a class="nav-link text-white" href="case_studies.php">
        <i class="bi bi-briefcase"></i> केस स्टडी
      </a>
    </li>

    <li>
      <a class="nav-link text-white" href="video.php">
        <i class="bi bi-camera-video"></i> वीडियो सेक्शन
      </a>
    </li>

    <li>
      <a class="nav-link text-white" href="event.php">
        <i class="bi bi-people-fill"></i> सामाजिक कार्यक्रम
      </a>
    </li>

    <li>
      <a class="nav-link text-white" href="testimonials.php">
        <i class="bi bi-chat-quote"></i> प्रशंसापत्र
      </a>
    </li>

    <li>
      <a class="nav-link text-white" href="blog_manage.php">
        <i class="bi bi-journal-text"></i> ब्लॉग
      </a>
    </li>

    <li>
      <a class="nav-link text-danger" href="logout.php">
        <i class="bi bi-box-arrow-right"></i> लॉगआउट
      </a>
    </li>
  </ul>
</div>


<!-- ===== MAIN ===== -->
<div class="main" id="main">

  <i class="bi bi-list menu-btn" id="menuBtn"></i>

  <div class="card shadow-sm">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h6 class="mb-0">सभी ब्लॉग</h6>
      <a href="blog_add.php" class="btn btn-success btn-sm">
        <i class="bi bi-plus"></i> जोड़ें
      </a>
    </div>

    <div class="card-body p-0">
      <div class="table-scroll">
        <table class="table table-bordered align-middle mb-0">

          <thead>
            <tr>
              <th width="180">छवि</th>
              <th>शीर्षक</th>
              <th>विवरण</th>
              <th width="120">कार्यवाही</th>
            </tr>
          </thead>

          <tbody>
          <?php if(mysqli_num_rows($result) > 0): ?>
            <?php while($blog = mysqli_fetch_assoc($result)): ?>
            <tr>

              <td>
                <?php if(!empty($blog['image'])): ?>
                  <img src="uploads/blogs/<?= htmlspecialchars($blog['image']) ?>" class="blog-img">
                <?php else: ?>
                  <span class="text-muted">कोई छवि नहीं</span>
                <?php endif; ?>
              </td>

              <td style="color:#212529BF"><?= htmlspecialchars($blog['title']) ?></td>

              <td style="color:#212529BF">
                <?= !empty($blog['heading']) 
                    ? htmlspecialchars(substr($blog['heading'], 0, 150)) . '...'
                    : '<span class="text-muted">—</span>'; ?>
              </td>

              <td>
                <a href="blog_edit.php?id=<?= $blog['id'] ?>" 
                   class="btn btn-primary btn-sm mb-1 w-100">
                  संपादित करें
                </a>
                <a href="blog_delete.php?id=<?= $blog['id'] ?>" 
                   class="btn btn-danger btn-sm w-100"
                   onclick="return confirm('क्या आप वाकई इस ब्लॉग को हटाना चाहते हैं?')">
                  हटाएँ
                </a>
              </td>

            </tr>
            <?php endwhile; ?>
          <?php else: ?>
            <tr>
              <td colspan="5" class="text-center text-muted">
                कोई ब्लॉग जोड़ा नहीं गया है
              </td>
            </tr>
          <?php endif; ?>
          </tbody>

        </table>
      </div>
    </div>
  </div>

</div>

<script>
const menuBtn = document.getElementById("menuBtn");
const sidebar = document.getElementById("sidebar");
const main = document.getElementById("main");

menuBtn.addEventListener("click", () => {
  sidebar.classList.toggle("show");
  main.classList.toggle("shift");
});
</script>

</body>
</html>
