@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        @php echo get_session_message() @endphp
        @php echo get_session_errors($errors) @endphp
        

        <div class="col-lg-10 right">
            <div class="box shadow-sm rounded bg-white mb-3">
                @if($notifications->count() > 0) 
                    <div class="box-title border-bottom p-3">
                        <h6 class="m-0">Notifications</h6>
                    </div>
                    <div class="box-body p-0">
                        @foreach( $notifications as $notify )
                        <div class="p-3 d-flex align-items-center bg-light border-bottom osahan-post-header">
                            <!-- <div class="dropdown-list-image mr-3">
                                <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" />
                            </div> -->
                            <div class="font-weight-bold mr-3 col-md-8">
                                <div class="text-truncate">{!! $notify->data['subject'] !!}</div>
                                <div class="small">{!! $notify->data['body'] !!}</div>
                                <div class="text-muted pt-1">{{ $notify->created_at->diffForHumans() }}</div>
                            </div>
                            <div class="ml-auto mb-auto col-md-4 text-right">
                                <div class="btn-group">
                                    <a href="{{route('notify-destroy',$notify->id)}}" onclick="return confirm('Do you really want to delete ?')" class="dropdown-item text-danger" type="button">
                                        <i class="mdi mdi-delete"></i> Delete
                                    </a>
                                    
                                    <a href="{{route('mark-read',$notify->id)}}" class="dropdown-item text-primary" type="button">
                                        <i class="fas fa-check"></i> Mark read
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                @else
                    <div class="box-title border-bottom p-3">
                        <h6 class="m-0">There are no new notifications</h6>
                    </div>
                @endif
            </div>

        </div>
    </div>
</div>
@endsection