
<style type="text/css">
    .file_no{
        border-bottom: none !important;
        color: #4c4c4c !important;
        transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    }
    .file_no:hover{
        border-bottom: none !important;
        color: #ff7f00 !important;
        transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    }
    .site-header .dropdown-menu-notif .dropdown-menu-notif-item{
        /*background: #dbe4ea !important;*/
        /*background: aliceblue !important;*/
    }
    /*.site-header .dropdown-menu-notif .dropdown-menu-notif-item .dot{
        display: none;
    }

    .site-header .dropdown-menu-notif .dropdown-menu-notif-item{
        padding: 8px 15px 8px 50px !important;
        border-bottom: .5px dashed #e3e8ec;
    }
    .site-header .dropdown-menu-notif .dropdown-menu-notif-item .photo{
        width: 35px !important;
        height: 35px !important;
    }*/

    .dot{
        display: inline-block;
        vertical-align: middle;
        width: 6px;
        height: 6px;
        margin: 0 0 6px;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #fa424a;
        position: relative;
        top: 2px;
    }
</style>
<div class="tbl form-section" style="margin-bottom: 15px;">
    <div class="tbl-row" style="@if($notification->read_at == null) background: aliceblue; @else background: #fff; @endif">
        <div class="tbl-cell tbl-cell-id left text-center" style="width: 10%;">
            <i class="fa fa-university" style="background: #dbe4ea; padding: 7px; border-radius: 50%; color: #ff7f00; font-size: 13px;"></i>
            
        </div>
        <div class="tbl-cell">
            <div class="box-typical py-3 px-2" style="margin: 10px 0px; border:0px; @if($notification->read_at == null) background: aliceblue; @else background: #fff; @endif">
                <div class="tbl details">
                    <div class="tbl-row">
                        <div class="tbl-cell">
                            <div class="exp-timeline-status">
                                
                                <a href="{{url('/admin/pending-universities')}}" onclick="markAdminAsRead('{{$notification->id}}');" class="file_no"> 
                                    Agent: <span style="text-transform: capitalize;">{{$notification['data']['company']['name']}}</span> has added a new institute <b>{{$notification['data']['university']['name']}}</b> 
                                </a><br>
                            </div>
                        </div>
                    </div>
                    <div class="tbl-row">
                        <div class="tbl-cell">
                            <div class="color-blue-grey-lighter"> 
                                {{$notification->created_at->diffForHumans()}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
   
    function markAdminAsRead(id) {
         $.post('{{url('')}}/admin/notification/mark-as-read', {'_token': '{{ csrf_token() }}','id': id}, function (data) {
            data.success ? (window.location.href = targetHref) : false;
        }, 'json');

        return false;
    }
</script>
