@extends('layouts.'.$layout)

@section('content')
<div class="nk-block-head nk-block-head-sm">
    <div class="nk-block-between">
        <div class="nk-block-head-content">
            <h3 class="nk-block-title page-title">Notification</h3>
            <p>You have total <span id="count"></span> notifications.</p>
        </div><!-- .nk-block-head-content -->
        <div class="nk-block-head-content">
            <div class="toggle-wrap nk-block-tools-toggle">
                <a href="#" class="btn btn-icon btn-trigger toggle-expand mr-n1" data-target="pageMenu"><em class="icon ni ni-menu-alt-r"></em></a>
                <div class="toggle-expand-content" data-content="pageMenu">
                    <ul class="nk-block-tools g-3">
                        <li class="nk-block-tools-opt"><a href="#" onclick="markAllAsRead({{$user->id}});" class="btn btn-primary" id="mark_all_as_read_1"><em class="icon ni ni-check-round"></em><span>Mark all as read</span></a></li>
                    </ul>
                </div>
            </div><!-- .toggle-wrap -->
        </div><!-- .nk-block-head-content -->
    </div><!-- .nk-block-between -->
</div><!-- .nk-block-head -->
<div class="nk-block">
    <div class="nk-notification" id="notifications_table">
        @foreach($notifications as $notification)
        <div class="nk-notification-item dropdown-inner" @if($notification->is_read == 0) style="background-color:#FFF" @endif>
            <div class="nk-notification-icon">
                <em class="icon icon-circle bg-warning-dim ni ni-curve-down-right"></em>
            </div>
            <a href="{{ url('/').$notification->link }}" target="_blank" onclick="markRead('{{ $notification->id }}');">
                <div class="nk-notification-content">
                    <div class="nk-notification-text">
                        <h6>{{ $notification->title }} @if($notification->is_read == 0)<span class="badge badge-primary badge-pill" id="nk-notification-1">Unread</span>@endif</h6>
                    </div>
                    <div class="nk-notification-text">
                        {{ $notification->text }}
                    </div>
                    <div class="nk-notification-time">{{ $notification->created_at->diffForHumans() }}</div>
                </div>
            </a>
        </div>
        @endforeach
    </div>

    <!-- <div class="row g-3">
        <div class="col-lg-7 offset-lg-5">
            <div class="form-group mt-2">
                <button type="button" class="btn btn-primary" id="load-more"><em class="icon ni ni-reload"></em><span>Load More</span></button>
            </div>
        </div>
    </div> -->
</div><!-- .nk-block -->
<script type="text/javascript">
    function markRead(id) {
        $.ajax({
            type: "GET",
            url: "{{ url('/user/update-notification')}}/"+id,
            success: function(data){
                location.reload();
            }
        });
    }

    function markAllAsRead(userId){
        $.ajax({
            type: "GET",
            url: "{{ url('/user/mark-all-as-read')}}/"+userId,
            success: function(data){
                location.reload();
            }
        });
    }
</script>
@endsection

@push('footerScripts')
<!-- <script src="{{url('js/all-notifications.js')}}"></script> -->
@endpush