<?php
// customer/notifications.php
session_start();
require_once '../config/database.php';

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

$database = new Database();
$db = $database->getConnection();

// Mark all notifications as read when viewing this page
$update_query = "UPDATE notifications SET is_read = 1, read_at = NOW() 
                 WHERE customer_id = :id AND is_read = 0";
$update_stmt = $db->prepare($update_query);
$update_stmt->execute([':id' => $_SESSION['customer_id']]);

// Get all notifications
$query = "SELECT * FROM notifications 
          WHERE customer_id = :id 
          ORDER BY created_at DESC";
$stmt = $db->prepare($query);
$stmt->execute([':id' => $_SESSION['customer_id']]);
$notifications = $stmt->fetchAll(PDO::FETCH_ASSOC);

$pageTitle  = 'Notifications';
$activePage = 'notifications';
$notifCount = 0;
include __DIR__ . '/includes/header.php';
?>
<style>
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin-bottom: 70px;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .notification-card {
            cursor: pointer;
            background: transparent;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.15);
            border-left: 4px solid transparent;
            transition: all 0.3s;
            border: 1px solid rgba(96, 165, 250, 0.22);
        }
        
        .notification-card:hover {
            transform: translateX(5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.25);
        }
        
        .notification-card.unread {
            background: rgba(22, 59, 120, 0.45);
            border-left-color: #60a5fa;
        }
        
        .notification-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            float: left;
            margin-right: 15px;
        }
        
        .notification-content {
            margin-left: 55px;
        }
        
        .notification-title {
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 5px;
        }
        
        .notification-message {
            color: #d7e7ff;
            font-size: 14px;
            margin-bottom: 5px;
        }
        
        .notification-time {
            font-size: 12px;
            color: #aebbd4;
        }
        
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        }
        
        .nav-item {
            text-align: center;
            color: #95a5a6;
            text-decoration: none;
            font-size: 12px;
        }
        
        .nav-item.active {
            color: #667eea;
        }
        
        .nav-item i {
            font-size: 22px;
            display: block;
            margin-bottom: 4px;
        }
        
        .empty-state {
            text-align: center;
            padding: 60px 20px;
        }
        
        .empty-state i {
            font-size: 60px;
            color: #bdc3c7;
            margin-bottom: 20px;
        }
    </style>

    <div class="container mt-3">
        <?php if(empty($notifications)): ?>
            <div class="empty-state">
                <i class="fas fa-bell-slash"></i>
                <h5>No Notifications</h5>
                <p class="text-muted">You don't have any notifications at the moment.</p>
            </div>
        <?php else: ?>
            <?php foreach($notifications as $notif): ?>
            <div class="notification-card <?php echo $notif['is_read'] ? '' : 'unread'; ?>"
                 role="button" tabindex="0"
                 onclick="window.location.href='open_notification.php?id=<?php echo (int)$notif['id']; ?>'"
                 onkeypress="if(event.key==='Enter'){window.location.href='open_notification.php?id=<?php echo (int)$notif['id']; ?>'}">
                <div class="notification-icon" style="background: <?php 
                    switch($notif['type']) {
                        case 'success': echo '#d4edda'; break;
                        case 'warning': echo '#fff3cd'; break;
                        case 'danger': echo '#f8d7da'; break;
                        default: echo '#e3f2fd';
                    }
                ?>">
                    <i class="fas <?php 
                        switch($notif['type']) {
                            case 'success': echo 'fa-check-circle text-success'; break;
                            case 'warning': echo 'fa-exclamation-triangle text-warning'; break;
                            case 'danger': echo 'fa-times-circle text-danger'; break;
                            default: echo 'fa-info-circle text-info';
                        }
                    ?>"></i>
                </div>
                <div class="notification-content">
                    <div class="notification-title"><?php echo htmlspecialchars($notif['title']); ?></div>
                    <div class="notification-message"><?php echo htmlspecialchars($notif['message']); ?></div>
                    <div class="notification-time">
                        <?php 
                        $time = strtotime($notif['created_at']);
                        echo date('M d, Y h:i A', $time);
                        ?>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>

<?php include __DIR__ . '/includes/footer.php'; ?>
</body>
</html>