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

if (!isset($_SESSION['user_id'])) {
    header("Location: parent_login.php");
    exit();
}

$user_id = $_SESSION['user_id'];

/* GET PARENT */
$stmt = $conn->prepare("SELECT parent_id FROM parents WHERE user_id=?");
$stmt->bind_param("i", $user_id);
$stmt->execute();
$parent_id = $stmt->get_result()->fetch_assoc()['parent_id'];

/* NOTIFICATIONS (UNREAD FIRST) */
$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 = 'parent'
ORDER BY 
    CASE WHEN r.status='unread' THEN 0 ELSE 1 END,
    n.created_at DESC
";

$stmt = $conn->prepare($sql);
$stmt->execute();
$res = $stmt->get_result();
?>
<!DOCTYPE html>
<html>
<head>
<title>Notifications</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

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

/* HEADER */
.header{
    background:linear-gradient(135deg,#3a57e8,#5b7cfa);
    color:#fff;
    padding:25px;
    text-align:center;
    border-radius:0 0 20px 20px;
    box-shadow:0 8px 25px rgba(0,0,0,0.1);
}

/* WRAPPER */
.wrapper{
    max-width:900px;
    margin:30px auto;
}

/* CARD */
.notify-card{
    background:#fff;
    border-radius:14px;
    padding:18px;
    margin-bottom:15px;
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
    border-left:5px solid #3a57e8;
    transition:0.2s;
}

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

/* UNREAD STYLE */
.unread{
    background:#f9fbff;
    border-left:5px solid #ef4444;
}

/* TITLE */
.notify-title{
    font-weight:600;
    color:#111827;
}

/* BODY */
.notify-body{
    color:#6b7280;
    margin-top:5px;
}

/* META */
.meta{
    font-size:12px;
    color:#9ca3af;
    margin-top:10px;
}

/* BADGES */
.badge-cat{
    font-size:11px;
    padding:4px 10px;
    border-radius:20px;
    color:#fff;
    float:right;
}

.general{ background:#3a57e8; }
.fees{ background:#f59e0b; }
.exam{ background:#10b981; }
.announcement{ background:#ef4444; }

/* BUTTON */
.btn-mark{
    font-size:12px;
    padding:5px 10px;
    border-radius:8px;
}
</style>
</head>

<body>

<div class="header">
    <h3><i class="fas fa-bell"></i> Notifications</h3>
    <p>School updates and announcements</p>
</div>

<div class="wrapper">

<?php if($res->num_rows > 0): ?>

<?php while($n = $res->fetch_assoc()): ?>

<div class="notify-card <?= $n['status']=='unread' ? 'unread' : '' ?>">

    <!-- CATEGORY -->
    <span class="badge-cat <?= htmlspecialchars($n['category']) ?>">
        <?= strtoupper($n['category']) ?>
    </span>

    <!-- TITLE -->
    <div class="notify-title">
        <?= htmlspecialchars($n['message_head']) ?>
    </div>

    <!-- BODY -->
    <div class="notify-body">
        <?= nl2br(htmlspecialchars($n['message_body'])) ?>
    </div>

    <!-- META -->
    <div class="meta">
        <i class="fas fa-clock"></i>
        <?= date('d M Y h:i A', strtotime($n['created_at'])) ?>

        <?php if($n['status'] == 'unread'): ?>
            <button 
                class="btn btn-sm btn-primary float-end btn-mark"
                onclick="markRead(<?= $n['id'] ?>)">
                Mark as read
            </button>
        <?php else: ?>
            <span class="float-end text-success">
                <i class="fas fa-check-circle"></i> Read
            </span>
        <?php endif; ?>
    </div>

</div>

<?php endwhile; ?>

<?php else: ?>
    <div class="alert alert-info text-center">
        No notifications available
    </div>
<?php endif; ?>

</div>

<!-- AJAX -->
<script>
function markRead(id){

    fetch("mark_notification_read.php", {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        body: "id=" + id
    })
    .then(res => res.text())
    .then(data => {
        location.reload();
    });

}
</script>

</body>
</html>