@extends('layouts.portal.app')
	@section('content')
		<div class="content-wrapper">
			<div class="container-xxl flex-grow-1 container-p-y">
				<div class="card">
					<div class="card-header d-flex border-top rounded-0 flex-wrap py-2">
						<h4 class="breadcrumb"> <span class="text-muted fw-light breadcrumb-link"> Home / </span> Notificatons - {{ number_format($notifications->total()) }} records fetched </h4>
					</div>
				</div>

				<div class="pt-4">
					<div class="card">
						<div class="card-datatable table-responsive text-nowrap">
							<table class="table">
								<thead class="border-top">
									<tr>
										<th> # </th>
										<th> Title </th>
										<th> Content </th>
										<th> Notification Date </th>
										<th> Action </th>
									</tr>
								</thead>

								<tbody>
									@foreach($notifications as $notification)
										<tr>
											<td> {{ $loop->iteration }} </td>

											<td> {{ $notification->title }} </td>

											<td> {{ Str::limit($notification->content, 35) }} </td>

											<td> {{ \Carbon\Carbon::parse($notification->created_at)->format('d M Y') }} </td>

											<td> <a href="{{ $notification->id }}" content="{{ $notification->content }}" class="notification-details"> <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-eye-dotted"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12h.01" /><path d="M3 12h.01" /><path d="M5 15h.01" /><path d="M5 9h.01" /><path d="M19 15h.01" /><path d="M12 18h.01" /><path d="M12 6h.01" /><path d="M8 17h.01" /><path d="M8 7h.01" /><path d="M16 17h.01" /><path d="M16 7h.01" /><path d="M19 9h.01" /></svg> </a> </td>
										</tr>
									@endforeach
								</tbody>
							</table>

							<div class="pr-5"> {{ $notifications->render() }} </div>
						</div>
					</div>
				</div>
			</div>
	@endsection