<?php
include_once "../includes/header.php";

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

$user_id = $_SESSION['user_id'];

// Fetch all notifications
$notifs = mysqli_query($conn, "SELECT * FROM user_notifications WHERE user_id = $user_id ORDER BY created_at DESC");
?>

<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-bell me-2 text-orange"></i>My Notifications</h2>
                <?php if($unread_count > 0): ?>
                    <button id="markAllRead" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-check-double me-1"></i>Mark all as read
                    </button>
                <?php endif; ?>
            </div>

            <div class="card shadow-sm border-0" style="border-radius: 15px;">
                <div class="card-body p-0">
                    <?php if(mysqli_num_rows($notifs) > 0): ?>
                        <div class="list-group list-group-flush">
                            <?php while($n = mysqli_fetch_assoc($notifs)): ?>
                                <div class="list-group-item p-4 <?php echo $n['is_read'] == 0 ? 'bg-light border-start border-primary border-4' : ''; ?>" id="notif-<?php echo $n['id']; ?>">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <h5 class="mb-1 <?php echo $n['type'] == 'danger' ? 'text-danger' : ($n['type'] == 'warning' ? 'text-warning' : 'text-primary'); ?>">
                                                <?php echo htmlspecialchars($n['title']); ?>
                                            </h5>
                                            <p class="mb-2 text-muted"><?php echo htmlspecialchars($n['message']); ?></p>
                                            <small class="text-secondary">
                                                <i class="far fa-clock me-1"></i><?php echo date('F j, Y, g:i A', strtotime($n['created_at'])); ?>
                                            </small>
                                        </div>
                                        <?php if($n['is_read'] == 0): ?>
                                            <button class="btn btn-link text-decoration-none mark-read-btn" data-id="<?php echo $n['id']; ?>">
                                                <i class="fas fa-circle-check"></i> Mark read
                                            </button>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            <?php endwhile; ?>
                        </div>
                    <?php else: ?>
                        <div class="text-center py-5">
                            <i class="fas fa-bell-slash fa-4x text-muted opacity-25 mb-3"></i>
                            <h4 class="text-muted">No notifications yet</h4>
                            <p class="text-secondary">You're all caught up! Important alerts will appear here.</p>
                            <a href="../index.php" class="btn btn-orange mt-3">Back to Home</a>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('.mark-read-btn').click(function() {
        const id = $(this).data('id');
        const btn = $(this);
        const item = $('#notif-' + id);

        $.post('mark_notif_read.php', { id: id }, function(response) {
            if(response.success) {
                btn.fadeOut();
                item.removeClass('bg-light border-start border-primary border-4');
            }
        }, 'json');
    });

    $('#markAllRead').click(function() {
        $.post('mark_notif_read.php', { all: true }, function(response) {
            if(response.success) {
                location.reload();
            }
        }, 'json');
    });
});
</script>

<?php include_once "../includes/footer.php"; ?>
