{{-- Notifications --}}
@extends('layouts.app')
@section('page-title','Notifications')
@section('content')
<div style="display:flex;justify-content:flex-end;margin-bottom:16px">
    <form method="POST" action="{{ route('notifications.read-all') }}">@csrf
        <button type="submit" class="btn btn-secondary"><i class="fas fa-check-double"></i> Mark All Read</button>
    </form>
</div>
<div class="card">
    @forelse($notifications as $n)
    <div style="padding:16px 20px;border-bottom:1px solid #f1f5f9;display:flex;align-items:flex-start;gap:14px;{{ !$n->is_read ? 'background:#f8faff' : '' }}">
        <div style="width:10px;height:10px;border-radius:50%;background:{{ !$n->is_read ? '#2563eb' : '#e2e8f0' }};margin-top:5px;flex-shrink:0"></div>
        <div style="flex:1">
            <div style="font-weight:{{ !$n->is_read ? '600' : '400' }};font-size:14px">{{ $n->title }}</div>
            <div style="font-size:13px;color:#64748b;margin-top:2px">{{ $n->message }}</div>
            <div style="font-size:11px;color:#94a3b8;margin-top:6px">{{ $n->created_at->diffForHumans() }}</div>
        </div>
        @if(!$n->is_read)
        <form method="POST" action="{{ route('notifications.read',$n) }}">@csrf
            <button type="submit" class="btn btn-secondary btn-sm">Mark Read</button>
        </form>
        @endif
    </div>
    @empty
    <div style="text-align:center;padding:60px;color:#94a3b8"><i class="fas fa-bell" style="font-size:36px;margin-bottom:12px;display:block"></i>No notifications</div>
    @endforelse
</div>
<div class="pagination">{{ $notifications->links('vendor.pagination.simple') }}</div>
@endsection