@extends('layouts.app')
@section('title', 'Notifications')
@section('page', 'notifications')
@section('content')
@php
  $isClient = auth()->user()->isClient();
  $cats = $isClient ? ['approval' => 'Approvals', 'message' => 'Messages', 'invoice' => 'Invoices', 'file' => 'Files']
                    : ['approval' => 'Approvals', 'message' => 'Messages', 'payment' => 'Payments', 'ai' => 'AI assistant', 'team' => 'Team'];
  $groups = $items->groupBy(fn ($n) => $n->created_at->isToday() ? 'Today' : ($n->created_at->gte(now()->subDays(7)) ? 'This week' : 'Earlier'));
@endphp
<div class="page-head">
  <div><h1>Notifications</h1><p>@if ($isClient)Updates from your projects. Choose what you get by email in <a href="{{ route('portal.profile') }}#p-notify">notification settings</a>.@else What's happened across your clients. Choose what you're told about in <a href="{{ route('admin.profile') }}#pr-notify">your profile</a>.@endif</p></div>
  <div class="actions"><button class="btn" id="mark-all" data-action="{{ route(($isClient ? 'portal' : 'admin').'.notifications.read-all') }}"><i data-icon="check"></i>Mark all as read</button></div>
</div>
<section class="panel">
  <div class="toolbar"><div class="chips" data-filter-target="#notif-list">
    <button class="chip active" data-filter="all">All</button>@foreach ($cats as $k => $label)<button class="chip" data-filter="{{ $k }}">{{ $label }}</button>@endforeach
  </div></div>
  <div id="notif-list">
    @foreach ($groups as $label => $list)
      <div class="group-label" data-status="{{ implode(' ', array_keys($cats)) }}">{{ $label }}</div>
      @foreach ($list as $n)
        <a class="list-item {{ $n->read_at ? '' : 'unread' }}" href="{{ route('notifications.open', $n->id) }}" data-status="{{ $n->data['category'] ?? '' }}"><span class="ic-box {{ $n->data['tone'] ?? '' }}"><i data-icon="{{ $n->data['icon'] ?? 'bell' }}"></i></span><div class="grow"><strong>{{ $n->data['title'] }}</strong><div class="meta">{{ $n->data['meta'] }}, {{ $n->created_at->isToday() ? ($n->created_at->gt(now()->subHour()) ? ago($n->created_at) : $n->created_at->format('H:i')) : d_smart($n->created_at) }}</div></div></a>
      @endforeach
    @endforeach
  </div>
  <div class="empty {{ $items->count() ? 'hidden' : '' }}" data-empty-for="#notif-list"><strong>No notifications</strong>You're all caught up.</div>
</section>
@endsection
@push('scripts')
<script>
document.getElementById("mark-all").addEventListener("click", function(){ document.querySelectorAll(".list-item.unread").forEach(function(x){ x.classList.remove("unread"); }); var d = document.querySelector(".topbar .dot"); if (d) d.remove(); });
</script>
@endpush