<?php
$page_title = 'Notifications';
$active_nav = '';
include("includes/header.php");

// list latest, then mark all read for this restaurant
$rows = [];
if ($q = $conn->prepare("SELECT title, message, type, is_read, created_at FROM notifications WHERE restaurant_id=? ORDER BY created_at DESC LIMIT 40")) {
    $q->bind_param("i", $__rest_id); $q->execute();
    $rows = $q->get_result()->fetch_all(MYSQLI_ASSOC);
}
if ($m = $conn->prepare("UPDATE notifications SET is_read=1 WHERE restaurant_id=? AND is_read=0")) {
    $m->bind_param("i", $__rest_id); $m->execute();
}
?>
<style>
.sub-back{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--text);font-weight:700}
.sub-back .b{width:34px;height:34px;border-radius:50%;background:var(--primary-bg);color:var(--primary);display:flex;align-items:center;justify-content:center}
.nt-card{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 4px 18px rgba(15,23,42,.06);padding:14px 16px;margin-bottom:10px;display:flex;gap:12px}
.nt-card .dot{width:9px;height:9px;border-radius:50%;background:var(--primary);flex-shrink:0;margin-top:5px}
.nt-card.read .dot{background:var(--border-dark)}
.nt-card .t{font-weight:700;font-size:.9rem;margin-bottom:2px}
.nt-card .m{font-size:.82rem;color:var(--text-muted);line-height:1.45}
.nt-card .d{font-size:.72rem;color:var(--text-light);margin-top:4px}
.empty{text-align:center;color:var(--text-muted);font-size:.86rem;padding:40px 20px;background:#fff;border:1px dashed var(--border);border-radius:14px}
.empty .ic{width:64px;height:64px;border-radius:50%;background:var(--primary-bg);color:var(--primary);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
</style>

<a href="index.php" class="sub-back"><span class="b"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0l7 7M5 12l7-7"/></svg></span>Notifications</a>

<?php if (!$rows): ?>
  <div class="empty">
    <div class="ic"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg></div>
    You're all caught up — no notifications yet.
  </div>
<?php else: foreach ($rows as $n): ?>
  <div class="nt-card <?php echo $n['is_read'] ? 'read' : ''; ?>">
    <span class="dot"></span>
    <div>
      <div class="t"><?php echo htmlspecialchars($n['title'] ?: 'Notification'); ?></div>
      <div class="m"><?php echo htmlspecialchars($n['message'] ?? ''); ?></div>
      <div class="d"><?php echo date('M j, g:i A', strtotime($n['created_at'])); ?></div>
    </div>
  </div>
<?php endforeach; endif; ?>

<?php include("includes/footer.php"); ?>
