@extends('layouts.admin')

@section('title', '站內通知')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0"><i class="bi bi-bell me-2"></i>站內通知</h4>
    @if(auth()->user()->unreadNotifications->isNotEmpty())
        <form method="POST" action="{{ route('notifications.readAll') }}">
            @csrf
            <button type="submit" class="btn btn-sm btn-outline-primary">
                <i class="bi bi-check2-all me-1"></i>全部標記為已讀
            </button>
        </form>
    @endif
</div>

<div class="card">
    <div class="list-group list-group-flush">
        @forelse($notifications as $notification)
            @php
                $data = $notification->data;
                $levelClass = match ($data['level'] ?? 'info') {
                    'warning' => 'text-warning',
                    'danger' => 'text-danger',
                    default => 'text-primary',
                };
            @endphp
            <div class="list-group-item {{ $notification->unread() ? 'bg-light' : '' }}">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <div class="fw-semibold">
                            <i class="bi bi-dot {{ $levelClass }}"></i>{{ $data['title'] }}
                            @if($notification->unread())
                                <span class="badge bg-primary ms-1">新</span>
                            @endif
                        </div>
                        <div class="text-muted small">{{ $data['body'] }}</div>
                        <div class="text-muted small mt-1">
                            <i class="bi bi-clock"></i> {{ $notification->created_at->format('Y-m-d H:i') }}
                        </div>
                    </div>
                    <div class="text-end">
                        @if(! empty($data['url']))
                            <a href="{{ $data['url'] }}" class="btn btn-sm btn-outline-secondary">
                                查看
                            </a>
                        @endif
                        @if($notification->unread())
                            <form method="POST" action="{{ route('notifications.read', $notification->id) }}" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-link">標記已讀</button>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        @empty
            <div class="list-group-item text-center text-muted py-5">
                <i class="bi bi-bell-slash fs-1 d-block mb-2"></i>
                目前沒有任何通知
            </div>
        @endforelse
    </div>
</div>

{{ $notifications->links() }}
@endsection