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

/* LATEST EVENTS (TOP 3 BASED ON DATE + TIME) */
$latestQuery = mysqli_query(
  $conn,
  "SELECT * FROM social_events 
   ORDER BY event_date DESC, start_time DESC 
   LIMIT 3"
);

/* OLD EVENTS (AFTER TOP 3) */
$oldQuery = mysqli_query(
  $conn,
  "SELECT * FROM social_events 
   ORDER BY event_date DESC, start_time DESC
   LIMIT 18446744073709551615 OFFSET 3"
);
?>

<style>
*{
  font-family:'Poppins', sans-serif !important;
}
.event-section{
  max-width:1200px;
  margin:60px auto;
  padding:0 15px;
}

.section-title{
  text-align:center;
  font-size:28px;
  font-weight:900;
  color:#2e7d32;
  margin-bottom:40px;
}

.event-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

@media(max-width:992px){
  .event-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){
  .event-grid{
    grid-template-columns:1fr;
  }
}

.event-card{
  background:#fff;
  border:3px solid #ff9800;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  transition:.3s;
}

@media (hover:hover){
  .event-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 36px rgba(0,0,0,.2);
  }
}

.event-image{
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
}

.event-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.event-meta{
  padding:12px 16px;
  background:#fff8e1;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  font-size:14px;
  font-weight:600;
}

.event-meta span{
  display:flex;
  align-items:center;
  gap:6px;
}

.event-meta i{
  color:#ff6f00;
}

.event-content{
  padding:18px;
}

.event-content h3{
  font-size:20px;
  font-weight:800;
  color:#ff6f00;
  margin-bottom:10px;
}

.event-content p{
  font-size:15px;
  color:#333;
  line-height:1.6;
  margin-bottom:12px;
}

.read-more{
  color:#2e7d32;
  font-weight:700;
  text-decoration:none;
}

.read-more:hover{
  color:#ff6f00;
}
</style>


<!-- ================= LATEST EVENTS ================= -->
<div class="event-section">
  <div class="section-title">नवीनतम कार्यक्रम</div>

  <div class="event-grid">

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

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

      <div class="event-card">

        <div class="event-image">
          <img src="<?= $path ?>" alt="<?= htmlspecialchars($row['title']) ?>">
        </div>

        <div class="event-meta">

          <?php if(!empty($row['event_date'])): ?>
            <span>
              <i class="bi bi-calendar-event"></i>
              <?= date("d M Y", strtotime($row['event_date'])) ?>
            </span>
          <?php endif; ?>

          <?php if(!empty($row['start_time']) && !empty($row['end_time'])): ?>
            <span>
              <i class="bi bi-clock"></i>
              <?= date("h:i A", strtotime($row['start_time'])) ?>
              -
              <?= date("h:i A", strtotime($row['end_time'])) ?>
            </span>
          <?php endif; ?>

          <?php if(!empty($row['event_location'])): ?>
            <span>
              <i class="bi bi-geo-alt"></i>
              <?= htmlspecialchars($row['event_location']) ?>
            </span>
          <?php endif; ?>

        </div>

        <div class="event-content">
          <h3><?= htmlspecialchars($row['title']) ?></h3>
          <p><?= mb_strimwidth(strip_tags($row['description']),0,140,"...") ?></p>
          <a href="event-detail.php?id=<?= $row['id'] ?>" class="read-more">और पढ़ें →</a>
        </div>

      </div>

    <?php endwhile; ?>
  <?php else: ?>
    <p class="text-center text-muted">कोई नवीनतम कार्यक्रम उपलब्ध नहीं है</p>
  <?php endif; ?>

  </div>
</div>


<!-- ================= OLD EVENTS ================= -->
<div class="event-section">
  <div class="section-title">पुराने कार्यक्रम</div>

  <div class="event-grid">

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

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

      <div class="event-card">

        <div class="event-image">
          <img src="<?= $path ?>" alt="<?= htmlspecialchars($row['title']) ?>">
        </div>

        <div class="event-meta">

          <?php if(!empty($row['event_date'])): ?>
            <span>
              <i class="bi bi-calendar-event"></i>
              <?= date("d M Y", strtotime($row['event_date'])) ?>
            </span>
          <?php endif; ?>

          <?php if(!empty($row['start_time']) && !empty($row['end_time'])): ?>
            <span>
              <i class="bi bi-clock"></i>
              <?= date("h:i A", strtotime($row['start_time'])) ?>
              -
              <?= date("h:i A", strtotime($row['end_time'])) ?>
            </span>
          <?php endif; ?>

          <?php if(!empty($row['event_location'])): ?>
            <span>
              <i class="bi bi-geo-alt"></i>
              <?= htmlspecialchars($row['event_location']) ?>
            </span>
          <?php endif; ?>

        </div>

        <div class="event-content">
          <h3><?= htmlspecialchars($row['title']) ?></h3>
          <p><?= mb_strimwidth(strip_tags($row['description']),0,140,"...") ?></p>
          <a href="event-detail.php?id=<?= $row['id'] ?>" class="read-more">और पढ़ें →</a>
        </div>

      </div>

    <?php endwhile; ?>
  <?php else: ?>
    <p class="text-center text-muted">कोई पुराने कार्यक्रम उपलब्ध नहीं हैं</p>
  <?php endif; ?>

  </div>
</div>

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