<?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/notifications'); ?>" class="headerButton">
                <ion-icon name="chevron-back-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle">Notification</div>
        <div class="right">
            <a href="<?php echo base_url('dashboard/notifications'); ?>" class="headerButton">
                <ion-icon name="close-outline"></ion-icon>
            </a>
        </div>
    </div>

    <!-- App Capsule -->
    <div id="appCapsule">
        <div class="section mt-2">
            <div class="card">
                <div class="card-body">
                    <!-- Notification Icon -->
                    <div class="text-center mb-3">
                        <div class="icon-box bg-<?php echo $notification->type == 'transaction' ? 'primary' : ($notification->type == 'security' ? 'danger' : 'secondary'); ?> rounded-circle mx-auto" style="width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;">
                            <ion-icon name="<?php echo $notification->type == 'transaction' ? 'card-outline' : ($notification->type == 'security' ? 'shield-outline' : 'notifications-outline'); ?>" style="font-size: 32px;"></ion-icon>
                        </div>
                    </div>
                    
                    <!-- Title -->
                    <h2 class="text-center mb-2"><?php echo htmlspecialchars($notification->title); ?></h2>
                    
                    <!-- Timestamp -->
                    <p class="text-center text-muted mb-4">
                        <ion-icon name="time-outline"></ion-icon>
                        <?php echo date('F j, Y \a\t g:i A', strtotime($notification->created_at)); ?>
                    </p>
                    
                    <!-- Message -->
                    <div class="notification-content">
                        <p><?php echo nl2br(htmlspecialchars($notification->message)); ?></p>
                    </div>
                    
                    <?php if (!empty($notification->data)): ?>
                    <!-- Additional Data -->
                    <div class="mt-3 pt-3 border-top">
                        <?php 
                        $data = json_decode($notification->data, true);
                        if ($data): 
                        ?>
                        <ul class="listview simple-listview no-space">
                            <?php foreach ($data as $key => $value): ?>
                            <li>
                                <span class="text-muted"><?php echo ucwords(str_replace('_', ' ', $key)); ?></span>
                                <strong><?php echo htmlspecialchars($value); ?></strong>
                            </li>
                            <?php endforeach; ?>
                        </ul>
                        <?php endif; ?>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        
        <!-- Action Buttons -->
        <div class="section mt-2 mb-3">
            <?php if ($notification->type == 'transaction' && !empty($notification->data)): ?>
                <?php 
                $data = json_decode($notification->data, true);
                if (isset($data['transaction_id'])): 
                ?>
                <a href="<?php echo base_url('transactions/view/' . $data['transaction_id']); ?>" class="btn btn-primary btn-block btn-lg">
                    <ion-icon name="receipt-outline"></ion-icon>
                    View Transaction
                </a>
                <?php endif; ?>
            <?php endif; ?>
            
            <a href="<?php echo base_url('dashboard/notifications'); ?>" class="btn btn-outline-secondary btn-block">
                <ion-icon name="arrow-back-outline"></ion-icon>
                Back to Notifications
            </a>
        </div>
    </div>

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

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