<?php 
// 🔐 डैशबोर्ड सुरक्षा
include("auth.php");
include("config/db.php");

function getCount($conn, $table){
    $q = mysqli_query($conn, "SELECT COUNT(*) AS total FROM $table");
    return $q ? mysqli_fetch_assoc($q)['total'] : 0;
}

$products = getCount($conn, "products");
$admins   = getCount($conn, "admins");
?>

<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<title>एडमिन डैशबोर्ड</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<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{
  height:100%;
  margin:0;
  overflow-x:hidden;
}
*{ box-sizing:border-box; }

.app{
  min-height:100vh;
  display:flex;
}

/* ===== साइडबार ===== */
.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{
  margin-left:300px;
  width:calc(100% - 300px);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:#f5f7fa;
  transition:transform .3s ease, margin-left .3s ease;
}

/* हेडर */
.header{
  padding:16px 20px;
  background:#fff;
  border-bottom:1px solid #e5e5e5;
  display:flex;
  align-items:center;
  gap:15px;
}

/* मेनू बटन */
.menu-btn{
  display:none;
  font-size:26px;
  cursor:pointer;
}

/* कंटेंट */
.content{
  flex:1;
  padding:20px;
}

.dashboard-footer{
  border-top:1px solid #e5e5e5;
  padding:15px 0;
  margin-top:auto;
  text-align:center;
}

/* ===== मोबाइल ===== */
@media (max-width:768px){
  .menu-btn{ display:block; }

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

  .main{
    margin-left:0;
    width:100%;
  }

  .main.shift{
    transform:translateX(300px);
  }
}
</style>
</head>

<body>

<div class="app">

<!-- साइडबार -->
<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>

<!-- मुख्य भाग -->
<div class="main" id="main">

  <!-- हेडर -->
  <div class="header">
    <i class="bi bi-list menu-btn" id="menuBtn"></i>
    <div>
      <h5 class="mb-0">डैशबोर्ड</h5>
      <small class="text-muted">एडमिन नियंत्रण पैनल</small>
    </div>
  </div>

  <!-- कंटेंट -->
  <div class="content">
    <div class="card shadow-sm mb-4">
      <div class="card-body p-4">
        <h3>स्वागत है, एडमिन 👋</h3>
        <p class="text-muted mb-0">
          इस पैनल से उत्पादों और एडमिन डेटा को प्रबंधित करें।
        </p>
      </div>
    </div>
  </div>

  <!-- फुटर -->
  <div class="dashboard-footer">
    <small class="text-muted d-block">© 2026 एडमिन पैनल</small>
    <small class="text-muted d-block">BM IT Solutions के लिए डिज़ाइन किया गया</small>
  </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>
