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

/* UPDATED QUERY — REMOVED event_time */
$result = mysqli_query($conn, 
"SELECT id, image, title, description, event_date, start_time, end_time, event_location 
 FROM social_events 
 ORDER BY event_date DESC, start_time DESC");

if(!$result){
    die("Database Error: " . mysqli_error($conn));
}
?>
<!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 ================= */
html, body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100vh;
  overflow-x:hidden;
  font-family:'Source Sans Pro', sans-serif;
  background:#f5f7fa;
}
*{ box-sizing:border-box; }

/* ================= 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 .nav-link{
  color:#cfd8dc;
  font-weight:600;
  border-radius:6px;
  padding:10px 12px;
}

.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;
}

/* ================= IMAGE ================= */
.event-img{
  width:160px;
  height:100px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid #ddd;
  background:#fff;
}

/* ================= 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);
  }

  table{
    min-width:750px;
  }
}
</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 active" href="event.php"><i class="bi bi-people-fill"></i> सामाजिक कार्यक्रम</a></li>
    <li><a class="nav-link" 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="event_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="180">छवि</th>
            <th>शीर्षक</th>
            <th>समय</th>
            <th>स्थान</th>
            <th width="260">विवरण</th>
            <th width="160">कार्यवाही</th>
          </tr>
        </thead>

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

          <tr>
            <td>
              <img src="uploads/events/<?php echo htmlspecialchars($row['image']); ?>" class="event-img">
            </td>

            <td><?php echo htmlspecialchars($row['title']); ?></td>

   <td>
            <?php
            if(!empty($row['event_date'])){
                echo date("d M Y", strtotime($row['event_date'])) . "<br>";
            }

            if(!empty($row['start_time']) && !empty($row['end_time'])){
                echo date("h:i A", strtotime($row['start_time'])) . " - " .
                     date("h:i A", strtotime($row['end_time']));
            }
            ?>
            </td>




            <td><?php echo htmlspecialchars($row['event_location']); ?></td>

            <!-- LIMITED DESCRIPTION -->
            <td>
              <?php
                $desc = strip_tags($row['description']);
                if(strlen($desc) > 100){
                    echo htmlspecialchars(substr($desc,0,100)) . "...";
                } else {
                    echo htmlspecialchars($desc);
                }
              ?>
            </td>

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

                <a href="event_delete.php?id=<?php echo $row['id']; ?>"
                   class="btn btn-danger btn-sm"
                   onclick="return confirm('क्या आप हटाना चाहते हैं?')">
                   हटाएँ
                </a>
              </div>
            </td>
          </tr>

          <?php endwhile; ?>
        <?php else: ?>
          <tr>
            <td colspan="6" 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>
