Notification icon hide number after click - php

Question

I use October and I have made plugin with builder and I just add notification icon in menu.
I want to show "!" if there is a new item and hide "!" if user click that (it open bootstrap modal). And when I add new item it shows "!" again etc... I don't know exactly what is the best way to do this. Thank you if you can help me with this.
Menu:
<li>
<a data-toggle="modal" data-target="#itemModal"><i class="fa fa-bell"></i>
<span>! {{ Item }}</span></a>
</li>
Code:
function onStart()
{
$this['Item'] = Db::table('items')->count();
}

Answer 1

for this you need db table and you need to save last seen/click date.
so idea here is like you will add current date when user click !, you will show bootstrap modal and fire ajax request and set current date.
fire ajax request at that time and add new date for param.
for this you can use CMS default params table
<?php
use System\Models\Parameter;
....
// something like this in ajax request
Parameter::set('your_plugin_name::items.last_click_date', time() );
// this is when page reload
use System\Models\Parameter;
function onStart()
{
// now
$lastClickDate = Parameter::get('your_plugin_name::items.last_click_date');
if($lastClickDate == null) {
// first time it will just count items directly as user never click on icon
$count = Db::table('items')->count();
}
else {
// new this will call next time as user called that modal and we added click date
// so we compare if any record added after that date if it is then show `!`
$count = Db::table('items')->where('created_at', '>', $lastClickDate)->count();
}
$this['item_count'] = $count;
$this['new_items'] = $count > 0 ? true : false;
}
html
<li>
<a data-toggle="modal" data-target="#itemModal">
<i class="fa fa-bell"></i>
{% if new_items %}
<span>! {{ item_count }} </span>
{% endif %}
</a>
</li
please add comment if you face any problem.