@extends('layouts.app')

@section('title', 'Notifications')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="card-title mb-0">Notifications</h1>
        @if(auth()->user()->unreadNotifications->isNotEmpty())
            <form method="POST" action="{{ route('notifications.read-all') }}">
                @csrf
                <button type="submit" class="btn-arena btn-ghost btn-sm">Mark all read</button>
            </form>
        @endif
    </div>

    @if(session('success'))
        <div class="alert alert-success mb-4">{{ session('success') }}</div>
    @endif

    <div class="card-arena">
        @forelse($notifications as $notification)
            <a href="{{ route('notifications.read', $notification->id) }}"
               class="notification-item d-flex gap-3 p-4 text-decoration-none {{ $notification->read_at ? '' : 'unread' }}"
               style="border-bottom: 1px solid var(--arena-border);">
                <div class="notification-icon d-flex align-items-center justify-content-center" style="width:40px;height:40px;border-radius:8px;background:rgba(0,212,255,0.1);">
                    <i class="bi {{ $notification->data['icon'] ?? 'bi-bell' }}"></i>
                </div>
                <div>
                    <div class="fw-600 text-white">{{ $notification->data['title'] ?? 'Notification' }}</div>
                    <div class="text-muted fs-sm">{{ $notification->data['message'] ?? '' }}</div>
                    <div class="fs-xs text-muted mt-1">{{ $notification->created_at->diffForHumans() }}</div>
                </div>
            </a>
        @empty
            <div class="p-5 text-center text-muted">No notifications yet.</div>
        @endforelse
    </div>

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

<form id="mark-read-fallback" method="POST" style="display:none;">@csrf</form>
@endsection
