@extends('layouts.app')
@section('title', 'Notifications')
@section('content')

  @include('partials.flash')

  <div class="flex items-center justify-between gap-3 mb-stack-lg">
    <p class="text-body-md font-body-md text-outline">
      {{ auth()->user()->unreadNotifications()->count() }} unread
    </p>
    @if(auth()->user()->unreadNotifications()->exists())
      <form method="POST" action="{{ route('notifications.readAll') }}" class="m-0">
        @csrf
        <button type="submit" class="inline-flex items-center gap-1.5 text-label-md font-label-md text-primary font-bold hover:underline">
          <span class="material-symbols-outlined text-[18px]">done_all</span> Mark all as read
        </button>
      </form>
    @endif
  </div>

  <div class="surface-card rounded-xl overflow-hidden">
    <ul class="divide-y divide-outline-variant">
      @forelse($notifications as $notification)
        @php
          $data = $notification->data;
          $isUnread = is_null($notification->read_at);
        @endphp
        <li class="flex items-start gap-4 px-5 py-4 {{ $isUnread ? 'bg-primary/5' : '' }}">
          <div class="w-10 h-10 rounded-lg bg-secondary-container flex items-center justify-center text-primary shrink-0">
            <span class="material-symbols-outlined text-[20px]">{{ $data['icon'] ?? 'notifications' }}</span>
          </div>
          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2">
              <p class="text-body-md font-body-md text-on-surface font-semibold">{{ $data['title'] ?? 'Notification' }}</p>
              @if($isUnread)
                <span class="w-2 h-2 rounded-full bg-primary shrink-0"></span>
              @endif
            </div>
            <p class="text-body-md font-body-md text-on-surface-variant mt-0.5">{{ $data['message'] ?? '' }}</p>
            <p class="text-label-md font-label-md text-outline mt-1">{{ $notification->created_at->diffForHumans() }}</p>
          </div>
          <div class="flex items-center gap-1 shrink-0">
            @if(!empty($data['url']))
              <form method="POST" action="{{ route('notifications.read', $notification->id) }}" class="m-0">
                @csrf
                <button type="submit" title="Open"
                  class="w-9 h-9 flex items-center justify-center rounded-lg text-outline hover:text-primary hover:bg-surface-container-high transition-colors">
                  <span class="material-symbols-outlined text-[20px]">open_in_new</span>
                </button>
              </form>
            @endif
            <form method="POST" action="{{ route('notifications.destroy', $notification->id) }}" class="m-0">
              @csrf @method('DELETE')
              <button type="submit" title="Remove"
                class="w-9 h-9 flex items-center justify-center rounded-lg text-outline hover:text-error hover:bg-error-container transition-colors">
                <span class="material-symbols-outlined text-[20px]">delete</span>
              </button>
            </form>
          </div>
        </li>
      @empty
        <li class="px-5 py-16 text-center">
          <span class="material-symbols-outlined text-[42px] text-outline mb-2">notifications_off</span>
          <p class="text-body-lg font-body-lg text-on-surface font-semibold">You're all caught up</p>
          <p class="text-body-md font-body-md text-outline">Notifications about courses, assignments and sessions will appear here.</p>
        </li>
      @endforelse
    </ul>
  </div>

  <div class="mt-stack-lg">{{ $notifications->links() }}</div>

@endsection