@extends(ucfirst(getScope()).'.Layout.master')
@section('content')
    <h2 class="notificationPageHeading">
        <div class="notficationTitle">
            <i class="fa fa-bell"></i>
            {{ _t('notification.notification') }}
        </div>
    </h2>
    <div class="row notificationListWrapper">
        {{--<div class="action">
            @if(getScope() == 'admin')
                <a href="{{ scopeRoute('settings.notification') }}">{{ _t('notification.settings') }}</a>
            @endif
        </div>--}}
        @if($notifications->count())
            <div class="col-md-4">
                <div class="notificationNavWrapper">
                    @foreach($notifications as $notification)
                        <div class="eachNotification {{ $notification->read() ? 'read' : '' }}"
                             data-id="{{ $notification->id }}">
                            <div class="icon">
                                @if(collect($notification->data)->get('icon'))
                                    <i class="{{ collect($notification->data)->get('icon') }}"></i>
                                @else
                                    <i class="fa fa-bell"></i>
                                @endif
                            </div>
                            <div class="notLabel">
                                <label>
                                    {{ collect($notification->data)->get('subject') }}
                                </label>
                                <span style="padding-left: 5px;font-size: 10px;">{{ date('Y-m-d H:i:s',strtotime($notification->created_at)) }}</span>
                            </div>

                        </div>
                    @endforeach
                </div>
                <div class="paginationWrapper">
                    {!! $notifications->links() !!}
                </div>

            </div>
        @else
            <th> {{ _t('notification.no_notifications_found') }}</th>
        @endif
        <div class="col-md-8">
            <div class="notificationPanel">

            </div>
        </div>
    </div>
    <style>
        .page-content {
            background: #eee;
        }
    </style>
    <script type="text/javascript">
        function viewNotification(id) {
            simulateLoading('.notificationPanel');
            return $.get('{{ scopeRoute("getNotification") }}', {id: id}, function (response) {
                $('.notificationPanel').html(response);
            });
        }

        $(function () {
            viewNotification($('.notificationNavWrapper .eachNotification').first().data('id'));
        });

        $('.eachNotification').click(function () {
            $(this).css('background','#f4f4f400','color','#888')
            viewNotification($(this).data('id'));
        });
    </script>
    <style>
        .page-content {
           background: #fff !important;
        }
        .eachNotification{
            cursor: pointer;
        }
        .eachNotification .icon {
            padding: 6px;
            border: solid 1px #e3e3e3;
        }
        .eachNotification
        label {
            font-size: 14px;
            font-weight: 600;
        }
        .eachNotification.read span {
            font-size: 10px;
            padding-left: 5px;
        }
        h2.notificationPageHeading{
            display: none;
        }
    </style>
@endsection