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

$result = mysqli_query($conn, "SELECT id, image FROM testimonials ORDER BY id DESC");
?>
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>प्रशंसापत्र</title>

<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>
/* ================= GLOBAL FIX ================= */
html, body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100vh;          /* 🔥 KEY FIX */
  overflow-x:hidden;
  font-family:'Source Sans Pro', sans-serif;
  background:#f5f7fa;
}
*{ box-sizing:border-box; }

/* ================= IMAGE ================= */
.test-img{
  width:220px;
  height:220px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #ddd;
  background:#fff;
}

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

.sidebar h4{
  font-weight:700;
}

.sidebar .nav-link{
  color:#cfd8dc;
  font-weight:600;
  padding:10px 12px;
  border-radius:6px;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active{
  background:#2c3e50;
  color:#fff;
}

/* ================= MAIN ================= */
.main{
  margin-left:280px;
  padding:24px;
  min-height:100vh;
  transition:.3s ease;
}

.menu-btn{
  display:none;
  font-size:28px;
  cursor:pointer;
  margin-bottom:16px;
}

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

  .menu-btn{
    display:inline-block;
  }

  .sidebar{
    transform:translateX(-100%);
  }

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

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

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

  .test-img{
    width:140px;
    height:140px;
  }

  table{
    min-width:520px;
  }
}
</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" href="dashboard.php"><i class="bi bi-speedometer2"></i> डैशबोर्ड</a></li>
    <li><a class="nav-link" href="slider.php"><i class="bi bi-images"></i> स्लाइडर</a></li>
    <li><a class="nav-link" href="case_studies.php"><i class="bi bi-briefcase"></i> केस स्टडी</a></li>
    <li><a class="nav-link" href="video.php"><i class="bi bi-camera-video"></i> वीडियो</a></li>
    <li><a class="nav-link" href="event.php"><i class="bi bi-people-fill"></i> सामाजिक कार्यक्रम</a></li>
    <li><a class="nav-link active" href="testimonials.php"><i class="bi bi-chat-quote"></i> प्रशंसापत्र</a></li>
    <li><a class="nav-link" 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 fw-bold">परिचय चित्र</h6>
    <a href="testimonial_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-responsive">
      <table class="table table-bordered align-middle mb-0 text-center">
        <thead class="table-light">
          <tr>
            <th width="260">छवि</th>
            <th width="180">कार्यवाही</th>
          </tr>
        </thead>

        <tbody>
        <?php if(mysqli_num_rows($result) > 0): ?>
          <?php while($row = mysqli_fetch_assoc($result)): ?>
          <tr>
            <td>
              <img
                src="uploads/testimonials/<?= htmlspecialchars($row['image']) ?>"
                class="test-img"
                alt="Testimonial Image">
            </td>

            <td>
              <div class="d-flex justify-content-center gap-2 flex-wrap">
                <a href="testimonial_edit.php?id=<?= $row['id'] ?>" class="btn btn-primary btn-sm px-3">
                  संपादित करें
                </a>

                <a href="testimonial_delete.php?id=<?= $row['id'] ?>"
                   class="btn btn-danger btn-sm px-3"
                   onclick="return confirm('क्या आप इस चित्र को हटाना चाहते हैं?')">
                  हटाएँ
                </a>
              </div>
            </td>
          </tr>
          <?php endwhile; ?>
        <?php else: ?>
          <tr>
            <td colspan="2" class="text-muted py-3">
              कोई परिचय चित्र जोड़े नहीं गए हैं
            </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>
