@model string
@inject IDataContextFactory<SeniorDataContext> dbFactory

@{
    var db = dbFactory.Create();
    var num = 0;
    var notifications = db.GetLastMessages(db.Notifications, Model, ref num);
}

<a id="id-notification-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">
    <i class="fa fa-bell-o"></i>
    @if (num != 0)
    {
        <span class="label label-warning">@num</span>
    }
</a>
<ul id="id-notification-drop" class="dropdown-menu" style="box-shadow: black 0px 0px 2px">
    <li class="header">Hai @num nuove notifiche</li>
    <li>
        <!-- Inner Menu: contains the notifications -->
        <ul class="menu">
            @foreach (var notification in notifications)
            {
                if (notification != null)
                {
                    <li>
                        <!-- start notification -->
                        <a id="notification-@notification.Id" class="@if (notification.Seen != default) {<text>bg-gray</text>}" href="@notification.Url">
                            <i class="fa fa-users text-aqua">@notification.Time</i><br />
                            @notification.Body
                        </a>
                    </li>
                    <!-- end notification -->
                }
            }
        </ul>
    </li>
    <!-- <li class="footer"><a href="#">View all</a></li> -->
</ul>

<script>
    var user = "@Model";
    $("[id^='notification-']").on("click", function () {
        var id = this.id.replace(/notification-/g, '');
        var allId = this.id;
        $.ajax({
            type: "PUT",
            dataType: "json",
            url: "/Account/_notification",
            data: { id: id },
            success: function () {
                $("#" + allId).addClass("bg-gray");
                var num = parseInt($("#id-notification-toggle span").html()) - 1;
                if (num == 0)
                    $("#id-notification-toggle span").remove();
                else
                    $("#id-notification-toggle span").html(num);
            }
        });
    });
</script>