@extends('portal.layout')
@section('title', 'Watch Notifications')

@section('content')
<div style="max-width:900px;margin:0 auto;padding:32px 24px;">

    <div style="margin-bottom:28px;">
        <a href="{{ route('portal.watches') }}" style="font-size:12px;color:var(--text-secondary);display:inline-flex;align-items:center;gap:4px;margin-bottom:12px;">
            <i data-lucide="arrow-left" style="width:12px;height:12px;"></i> Back to Watches
        </a>
        <h1 style="font-size:22px;font-weight:700;margin-bottom:6px;">{{ $watch->name }} — Notifications</h1>
        <p style="font-size:13px;color:var(--text-secondary);">Regulatory change alerts for this watch.</p>
    </div>

    @if($notifications->count())
    <div style="display:grid;gap:8px;">
        @foreach($notifications as $notif)
        <div class="card" style="padding:14px 16px;{{ !$notif->read_at ? 'border-left:3px solid #f97316;' : '' }}">
            <div style="display:flex;align-items:flex-start;gap:10px;">
                <div style="width:28px;height:28px;background:{{ !$notif->read_at ? 'rgba(249,115,22,.15)' : 'var(--bg)' }};border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;">
                    <i data-lucide="{{ !$notif->read_at ? 'bell-ring' : 'bell' }}" style="width:13px;height:13px;color:{{ !$notif->read_at ? '#f97316' : 'var(--text-muted)' }};"></i>
                </div>
                <div style="flex:1;min-width:0;">
                    <div style="font-size:13px;font-weight:600;">{{ $notif->change_type }}</div>
                    <div style="font-size:12px;color:var(--text-secondary);margin-top:2px;">{{ $notif->summary }}</div>
                    <div style="font-size:10px;color:var(--text-muted);margin-top:6px;">
                        {{ $notif->created_at->diffForHumans() }}
                        @if($notif->read_at)
                        &middot; Read {{ $notif->read_at->diffForHumans() }}
                        @endif
                    </div>
                </div>
                @if(!$notif->read_at)
                <button onclick="markRead({{ $notif->id }})" class="btn btn-secondary" style="padding:4px 10px;font-size:10px;">Mark Read</button>
                @endif
            </div>
        </div>
        @endforeach
    </div>

    <div style="margin-top:16px;">{{ $notifications->links() }}</div>
    @else
    <div class="card" style="padding:40px;text-align:center;">
        <i data-lucide="bell-off" style="width:36px;height:36px;color:var(--text-muted);margin-bottom:12px;"></i>
        <div style="font-size:15px;font-weight:600;margin-bottom:6px;">No Notifications Yet</div>
        <div style="font-size:13px;color:var(--text-secondary);">You'll see alerts here when regulations change.</div>
    </div>
    @endif
</div>
@endsection

@section('scripts')
<script>
function markRead(id) {
    fetch('{{ route("portal.watches.mark-read") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
        body: JSON.stringify({ ids: [id] })
    }).then(() => location.reload());
}
</script>
@endsection