<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>

<div class="rounded-2xl border border-border bg-card shadow-sm dark:border-slate-700 dark:bg-slate-900">
    <div class="flex items-center justify-between border-b border-border px-5 py-4 dark:border-slate-700">
        <h4 class="text-sm font-semibold text-foreground"><?= lang('all') . ' ' . lang('notification'); ?></h4>
        <a href="#" onclick="mark_all_as_read(); return false;" class="text-xs font-semibold text-primary hover:underline"><?php echo lang('mark_all_as_read'); ?></a>
    </div>
    <div class="p-5">
        <div class="overflow-hidden rounded-xl border border-border bg-card dark:border-slate-700 dark:bg-slate-900">
        <table class="w-full border-collapse text-sm" id="Transation_DataTables">
            <thead class="bg-muted/50 text-xs uppercase tracking-[0.14em] text-muted-foreground dark:bg-slate-800/80 dark:text-slate-400">
                <tr>
                    <th class="border-b border-border px-4 py-3 text-left font-semibold dark:border-slate-700"><?= lang('notification'); ?></th>
                </tr>
            </thead>
            <tbody>
                <?php
                $user_notifications = $this->common_model->get_user_notifications(false, true);
                if (!empty($user_notifications)) {
                    foreach ($user_notifications as $notification) {
                        if (!empty($notification->link)) {
                            $link = base_url() . $notification->link;
                        } else {
                            $link = '#';
                        }
                        $description = lang($notification->description, $notification->value);
                        if ($notification->from_user_id != 0) {
                            $description = fullname($notification->from_user_id) . ' - ' . $description;
                        }
                ?>
                        <tr class="border-t border-border dark:border-slate-700">
                            <td class="px-4 py-4 <?php echo ($notification->read_inline == 0) ? 'border-l-2 border-amber-400 dark:border-amber-500' : ''; ?>">
                                <div class="flex items-start justify-between gap-3">
                                    <a href="<?= $link ?>" class="block flex-1 text-inherit no-underline">
                                        <span class="block text-sm text-foreground"><?php echo $description; ?></span>
                                        <span class="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground"><i data-lucide="clock-3" class="h-3.5 w-3.5"></i> <?php echo time_ago($notification->date); ?></span>
                                    </a>
                                    <div class="shrink-0">
                                    </div>
                                    <?php if ($notification->read_inline == 0) { ?>
                                        <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background text-muted-foreground transition hover:bg-muted hover:text-foreground dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700" onclick="read_inline(<?php echo $notification->notifications_id; ?>);" data-placement="top" data-toggle="tooltip" data-title="<?php echo lang('mark_as_read'); ?>">
                                            <i data-lucide="circle" class="h-4 w-4"></i>
                                        </button>
                                    <?php } ?>
                                </div>
                            </td>
                        </tr>
                <?php
                    }
                } else {
                ?>
                    <tr>
                        <td class="px-4 py-10 text-center text-sm text-muted-foreground dark:text-slate-400"><?= lang('no_data_found') ?></td>
                    </tr>
                <?php
                }
                ?>
            </tbody>
        </table>
        </div>
    </div>
</div>


