@extends('layouts.school')

@section('title', 'Notifications')
@section('header', 'Notifications')

@section('content')
    <div class="mb-4 flex items-center justify-between">
        <p class="text-sm text-gray-500">{{ $unreadCount }} unread notification{{ $unreadCount === 1 ? '' : 's' }}</p>
        @if($unreadCount > 0)
            <form method="POST" action="{{ route('school.communications.notifications.read-all', request()->route('schoolId')) }}">
                @csrf
                <button type="submit" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Mark all as read</button>
            </form>
        @endif
    </div>

    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 divide-y divide-gray-100">
        @forelse($notifications as $notification)
            <div class="flex items-start gap-4 px-6 py-4 {{ $notification->is_read ? '' : 'bg-primary-50/40' }}">
                @php
                    $icons = [
                        'application' => ['bg-blue-100 text-blue-600', 'M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z'],
                        'admission_decision' => ['bg-green-100 text-green-600', 'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z'],
                        'announcement' => ['bg-amber-100 text-amber-600', 'M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.52-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46'],
                        'absence' => ['bg-red-100 text-red-600', 'M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z'],
                        'default' => ['bg-gray-100 text-gray-600', 'M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0'],
                    ];
                    $icon = $icons[$notification->type] ?? $icons['default'];
                @endphp
                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg {{ $icon[0] }}">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="{{ $icon[1] }}" />
                    </svg>
                </div>
                <div class="min-w-0 flex-1">
                    <div class="flex items-center gap-2">
                        <p class="text-sm font-medium text-gray-900">{{ $notification->title }}</p>
                        @if(!$notification->is_read)
                            <span class="h-2 w-2 rounded-full bg-primary-500"></span>
                        @endif
                    </div>
                    @if($notification->body)
                        <p class="mt-0.5 text-sm text-gray-500">{{ $notification->body }}</p>
                    @endif
                    <p class="mt-1 text-xs text-gray-400">{{ $notification->created_at->diffForHumans() }} &middot; {{ ucfirst($notification->type) }}</p>
                </div>
                @if(!$notification->is_read)
                    <form method="POST" action="{{ route('school.communications.notifications.read', [request()->route('schoolId'), $notification->id]) }}">
                        @csrf
                        <button type="submit" class="text-xs font-medium text-primary-600 hover:text-primary-700 whitespace-nowrap">Mark read</button>
                    </form>
                @endif
            </div>
        @empty
            <div class="px-6 py-12 text-center text-sm text-gray-500">No notifications yet.</div>
        @endforelse
    </div>

    <div class="mt-4">{{ $notifications->links() }}</div>
@endsection