@extends('layouts.app')
@section('title', __('Notifications'))
@section('content')
@if(auth()->user()->isAdmin())
<section class="panel-card mb-5 p-5 sm:p-7">
  <h2 class="text-lg font-bold">{{ __('Send announcement') }}</h2>
  <form method="POST" action="{{ route('admin.notifications.broadcast') }}" class="mt-4 grid gap-4 sm:grid-cols-2">@csrf
    <label class="block text-sm font-semibold">{{ __('Audience') }}<select name="audience" class="field-control mt-2"><option value="all">{{ __('All active users') }}</option><option value="team_leaders">{{ __('Team Leaders') }}</option><option value="employees">{{ __('Employees') }}</option></select></label>
    <label class="block text-sm font-semibold">{{ __('Title') }}<input name="title" maxlength="255" class="field-control mt-2" required></label>
    <label class="block text-sm font-semibold sm:col-span-2">{{ __('Message') }}<textarea name="message" rows="3" maxlength="2000" class="field-control mt-2" required></textarea></label>
    <button class="rounded-xl bg-blue-900 px-5 py-3 text-sm font-bold text-white sm:col-span-2">{{ __('Send announcement') }}</button>
  </form>
</section>
@endif
<section class="panel-card divide-y divide-slate-100">
  @forelse($notifications as $notification)
    @php($data = $notification->data)
    <article class="flex items-start gap-3 p-5 {{ $notification->read_at ? 'bg-white' : 'bg-rose-50/50' }}">
      <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full {{ $notification->read_at ? 'bg-slate-100 text-slate-500' : 'bg-rose-100 text-rose-700' }}"><x-nav-icon name="sparkles" class="h-5 w-5" /></span>
      <div class="min-w-0 flex-1"><h2 class="font-bold text-slate-900"><a href="{{ $data['url'] ?? route('notifications.index') }}" class="hover:text-rose-700">{{ $data['title'] ?? __('Notification') }}</a></h2><p class="mt-1 whitespace-pre-line text-sm text-slate-600">{{ $data['message'] ?? '' }}</p><p class="mt-2 text-xs text-slate-400">{{ $notification->created_at->format('M d, Y · g:i A') }}</p></div>
      @if(! $notification->read_at)<form method="POST" action="{{ route('notifications.read', $notification->id) }}">@csrf @method('PATCH')<button class="text-xs font-bold text-rose-700">{{ __('Mark as read') }}</button></form>@endif
    </article>
  @empty<div class="p-10 text-center text-sm text-slate-400">{{ __('You have no notifications.') }}</div>@endforelse
</section>
<div class="mt-5">{{ $notifications->links() }}</div>
@endsection