<?php 
$this->load->view('layouts/header');
$this->load->helper('layout');
?>

    <!-- App Header -->
    <div class="appHeader">
        <div class="left">
            <a href="<?php echo base_url('dashboard'); ?>" class="headerButton">
                <ion-icon name="chevron-back-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle">Notifications</div>
        <div class="right">
            <?php if (!empty($notifications)): ?>
            <a href="<?php echo base_url('dashboard/mark_all_read'); ?>" class="headerButton">
                <ion-icon name="checkmark-done-outline"></ion-icon>
            </a>
            <?php endif; ?>
        </div>
    </div>

    <!-- App Capsule -->
    <div id="appCapsule">
        <div class="section mt-2">
            <?php if (empty($notifications)): ?>
            <div class="text-center py-5">
                <ion-icon name="notifications-off-outline" style="font-size: 64px; color: #ccc;"></ion-icon>
                <h3 class="mt-2">No notifications</h3>
                <p class="text-muted">You don't have any notifications yet</p>
            </div>
            <?php else: ?>
            <ul class="listview image-listview flush">
                <?php foreach ($notifications as $notif): ?>
                <li class="<?php echo !$notif->is_read ? 'active' : ''; ?>">
                    <a href="<?php echo base_url('dashboard/notification/' . $notif->id); ?>" class="item">
                        <div class="icon-box bg-<?php echo $notif->type == 'transaction' ? 'primary' : ($notif->type == 'security' ? 'danger' : 'secondary'); ?>">
                            <ion-icon name="<?php echo $notif->type == 'transaction' ? 'card-outline' : ($notif->type == 'security' ? 'shield-outline' : 'notifications-outline'); ?>"></ion-icon>
                        </div>
                        <div class="in">
                            <div>
                                <strong><?php echo htmlspecialchars($notif->title); ?></strong>
                                <p><?php echo htmlspecialchars(character_limiter($notif->message, 50)); ?></p>
                                <footer><?php echo time_ago($notif->created_at); ?></footer>
                            </div>
                            <?php if (!$notif->is_read): ?>
                            <span class="badge badge-primary">New</span>
                            <?php endif; ?>
                        </div>
                    </a>
                </li>
                <?php endforeach; ?>
            </ul>
            <?php endif; ?>
        </div>
    </div>

    <!-- App Bottom Menu -->
    <?php echo get_bottom_menu(''); ?>

<?php $this->load->view('layouts/footer'); ?>
