@extends('layouts.app')
@section('title', 'Notifications')
@section('breadcrumb')
    <span style="font-weight:600;color:var(--text-primary);">Notifications</span>
@endsection

@section('content')
    <div class="page-header">
        <h1>🔔 Notifications</h1>
        <div class="page-header-actions">
            <form method="POST" action="{{ route('notifications.read-all') }}">
                @csrf
                <button type="submit" class="btn btn-secondary btn-sm">Mark All as Read</button>
            </form>
        </div>
    </div>

    <div class="card">
        <div>
            @forelse($notifications as $notification)
                <div class="task-item" style="{{ !$notification->read_at ? 'background:rgba(99,102,241,0.05);border-left:3px solid var(--accent-primary);' : '' }}">
                    <div class="activity-icon" style="width:36px;height:36px;">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;color:{{ !$notification->read_at ? 'var(--accent-primary)' : 'var(--text-tertiary)' }};"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
                    </div>
                    <div class="task-info">
                        @php $data = is_string($notification->data) ? json_decode($notification->data, true) : $notification->data; @endphp
                        <div class="task-title">{{ $data['title'] ?? 'Notification' }}</div>
                        <div class="text-xs text-muted">{{ $data['message'] ?? '' }}</div>
                        <div class="text-xs text-muted mt-1">{{ $notification->created_at->diffForHumans() }}</div>
                    </div>
                    @if(!$notification->read_at)
                        <form method="POST" action="{{ route('notifications.read', $notification->id) }}">
                            @csrf @method('PATCH')
                            <button type="submit" class="btn btn-ghost btn-sm">Mark Read</button>
                        </form>
                    @endif
                </div>
            @empty
                <div class="empty-state">
                    <div class="empty-state-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
                    </div>
                    <div class="empty-state-title">No notifications</div>
                    <div class="empty-state-text">You're all caught up!</div>
                </div>
            @endforelse
        </div>
    </div>
    @if($notifications->hasPages())
        <div class="pagination">{{ $notifications->links() }}</div>
    @endif
@endsection