<?php
session_start();
require 'db_connection.php';

/* ---------------- AUTH ---------------- */
if (!isset($_SESSION['username'])) {
    header("Location: login.php");
    exit();
}

$username  = $_SESSION['username'];
$user_role = $_SESSION['role'] ?? 'general';

/* ---------------- FETCH NOTIFICATIONS ---------------- */
$sql = "
    SELECT 
        n.id,
        n.message_head,
        n.message_body,
        n.created_at,
        r.status
    FROM notifications n
    JOIN notification_recipients r ON n.id = r.notification_id
    WHERE r.role = ? OR r.role = 'general'
    ORDER BY n.created_at DESC
";

$stmt = $conn->prepare($sql);
$stmt->bind_param("s", $user_role);
$stmt->execute();
$result = $stmt->get_result();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All Notifications</title>

    <!-- Bootstrap & Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">

    <style>
        body {
            background: #f4f6fb;
            font-family: 'Segoe UI', sans-serif;
        }

        /* PAGE WRAPPER */
        .page-wrapper {
            max-width: 900px;
            margin: 40px auto;
            padding: 0 15px;
        }

        /* HEADER */
        .page-header {
            background: #fff;
            padding: 20px;
            border-radius: 14px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.06);
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }

        .page-title {
            margin: 0;
            font-weight: 700;
            font-size: 20px;
            color: #333;
        }

        .page-subtitle {
            font-size: 13px;
            color: #777;
        }

        .btn-back {
            background: #3a57e8;
            color: #fff;
            border: none;
            padding: 8px 14px;
            border-radius: 8px;
            text-decoration: none;
            font-size: 14px;
        }

        .btn-back:hover {
            background: #2f46c9;
            color: #fff;
        }

        /* NOTIFICATION CARD */
        .notif-card {
            background: #fff;
            border-radius: 14px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.05);
            transition: 0.2s ease;
            border: 1px solid rgba(0,0,0,0.04);
            text-decoration: none;
            display: block;
            color: inherit;
        }

        .notif-card:hover {
            transform: translateY(-3px);
        }

        .notif-title {
            font-weight: 600;
            font-size: 15px;
            color: #222;
        }

        .notif-body {
            font-size: 14px;
            color: #555;
            margin-top: 6px;
        }

        .notif-meta {
            font-size: 12px;
            color: #888;
            margin-top: 8px;
        }

        .badge-new {
            background: #3a57e8;
        }
    </style>
</head>

<body>

<div class="page-wrapper">

    <!-- HEADER -->
    <div class="page-header">
        <div>
            <h3 class="page-title">
                <i class="fas fa-bell text-primary"></i> All Notifications
            </h3>
            <div class="page-subtitle">
                Welcome, <?= htmlspecialchars($username) ?>
            </div>
        </div>

        <a href="admin_dashboard.php" class="btn-back">
            <i class="fas fa-arrow-left"></i> Back
        </a>
    </div>

    <!-- NOTIFICATIONS -->
    <?php if ($result->num_rows > 0): ?>

        <?php while ($row = $result->fetch_assoc()): ?>
            
            <a href="view_notification.php?id=<?= (int)$row['id'] ?>" class="notif-card">

                <div class="d-flex justify-content-between align-items-center">
                    <div class="notif-title">
                        <?= htmlspecialchars($row['message_head']) ?>
                    </div>

                    <?php if (($row['status'] ?? '') === 'unread'): ?>
                        <span class="badge badge-new">New</span>
                    <?php else: ?>
                        <span class="badge bg-secondary">Read</span>
                    <?php endif; ?>
                </div>

                <div class="notif-body">
                    <?= htmlspecialchars(substr($row['message_body'] ?? '', 0, 120)) ?>...
                </div>

                <div class="notif-meta">
                    <?= date('d M Y h:i A', strtotime($row['created_at'])) ?>
                </div>

            </a>

        <?php endwhile; ?>

    <?php else: ?>

        <div class="alert alert-info text-center">
            No notifications found
        </div>

    <?php endif; ?>

</div>

</body>
</html>