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

/* SAFETY CHECK */
if (!isset($_GET['id']) || empty($_GET['id'])) {
  echo "<div class='container py-5 text-center'>अमान्य कार्यक्रम</div>";
  include 'includes/footer.php';
  exit;
}

$id = intval($_GET['id']);

/* FETCH EVENT WITH DATE + TIME + LOCATION */
$result = mysqli_query(
  $conn,
  "SELECT title, image, description, event_date, start_time, end_time, event_location 
   FROM social_events 
   WHERE id = $id 
   LIMIT 1"
);

if (!$result || mysqli_num_rows($result) == 0) {
  echo "<div class='container py-5 text-center'>कार्यक्रम नहीं मिला</div>";
  include 'includes/footer.php';
  exit;
}

$event = mysqli_fetch_assoc($result);

/* IMAGE PATH CHECK */
$img = trim($event['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";
}
?>

<style>
.event-details-page {
  background: linear-gradient(180deg, #fff7ec 0%, #ffffff 100%);
}

.main {
  padding-top: 0 !important;
}

.event-image-wrapper {
 width: 100vw;
  height: 100vh;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
}

.event-detail-img {
  width: 100%;
  height: 100%;
  
  object-position: center;
  display: block;
}


.event-meta-bar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 15px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 16px;
  font-weight: 600;
  color: #444;
}

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

.event-meta-bar i {
  color: #ff6a00;
}

.event-content-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 15px 50px;
}

.event-title {
  font-size: 42px;
  font-weight: 900;
  margin-bottom: 20px;
  background: linear-gradient(90deg, #ff9933, #ff6a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.event-desc {
  font-size: 18px;
  line-height: 1.9;
  color: #444;
  font-weight: 500;
}

@media (max-width: 768px) {

  .event-image-wrapper {
    height: 40vh;
  }

  .event-meta-bar {
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
  }

  .event-title {
    font-size: 26px;
  }

  .event-desc {
    font-size: 15.5px;
  }

  .event-content-wrap {
    padding: 25px 15px 40px;
  }
}
</style>

<main class="main">
  <div class="event-details-page">

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

    <!-- DATE + TIME + LOCATION -->
    <div class="event-meta-bar">

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

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

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

    </div>

    <!-- CONTENT -->
    <div class="event-content-wrap">

      <h1 class="event-title">
        <?= htmlspecialchars($event['title']) ?>
      </h1>

      <div class="event-desc">
        <?= nl2br(htmlspecialchars($event['description'])) ?>
      </div>

    </div>

  </div>
</main>

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