@extends('layouts.admin')

@section('title', trans('admin.Notifications'))
@section('page-title', trans('admin.Notifications'))

@section('content')

<style>
  .notif-cell b{ display:block; font-size:14px; }
  .notif-cell span{ display:block; margin-top:2px; font-size:13px; color:var(--text-muted); white-space:normal; }
  .notif-cell.is-unread b::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--primary); margin-inline-end:8px; vertical-align:middle; }
</style>

<section class="dpage active">
    <div class="page-head">
        <div>
            <h2>{{ trans('admin.Notifications') }}</h2>
            <p>{{ trans('admin.notifications subtitle') }}</p>
        </div>
    </div>

    <div class="card">
        <div class="table-wrap">
            <table class="table" id="notificationsTable" style="width:100%;">
                <thead>
                <tr>
                    <th>{{ trans('admin.Notification') }}</th>
                    <th>{{ trans('admin.Date') }}</th>
                    <th>{{ trans('admin.Status') }}</th>
                    <th>{{ trans('admin.Actions') }}</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</section>

@endsection

@section('script')
<script type="text/javascript">
    $('#notificationsTable').DataTable({
        processing: true,
        serverSide: true,
        searching: false,
        pageLength: 10,
        lengthMenu: [10, 25, 50, 100],
        order: [[1, 'desc']],
        ajax: {
          "url": "{{ route('dashboard.notifications.index') }}",
          "data": { fresh_since: {{ $freshSince }} },
        },
        columns: [
            {data: 'notification', name: 'notification', orderable: false, searchable: false},
            {data: 'created_at', name: 'created_at', searchable: false},
            {data: 'status', name: 'read_at', searchable: false},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ],
        language: {
            loadingRecords: "{{ __('admin.loading') }}",
            emptyTable: "{{ __('admin.no_result') }}",
            zeroRecords: "{{ __('admin.no_result') }}",
            lengthMenu: "{{ __('admin.Show') }} _MENU_ {{ __('admin.entries') }}",
            paginate: {
                previous: "{{ __('admin.previous') }}",
                next: "{{ __('admin.next') }}",
            }
        },
    });
</script>
@endsection