@extends('layouts.user', ['heading' => 'Company Updates', 'subheading' => 'Official notices and account notifications'])

@section('content')
    <div class="grid grid-cols-1 gap-4 xl:grid-cols-3">
        <div class="user-card p-4 xl:col-span-2">
            <div class="mb-3 text-sm font-semibold">My Notifications</div>
            <div class="space-y-3">
                @forelse($notifications as $notification)
                    <div class="rounded-xl border border-[var(--user-border)] p-3 {{ $notification->read_at ? 'bg-white' : 'bg-sky-50/60' }}">
                        <div class="flex flex-wrap items-center justify-between gap-2">
                            <div class="text-sm font-semibold">{{ $notification->title ?: ucfirst($notification->type) }}</div>
                            <div class="text-xs text-[var(--user-muted)]">{{ optional($notification->created_at)->format('d M Y H:i') }}</div>
                        </div>
                        <div class="mt-1 text-sm text-[var(--user-text)]">{{ $notification->message }}</div>
                        @if($notification->link)
                            <a href="{{ $notification->link }}" class="mt-2 inline-block text-xs text-[var(--user-primary)] underline">Open Link</a>
                        @endif
                    </div>
                @empty
                    <div class="text-sm text-[var(--user-muted)]">No notifications found.</div>
                @endforelse
            </div>
            <div class="mt-4">{{ $notifications->links() }}</div>
        </div>

        <div class="space-y-4">
            <div class="user-card p-4">
                <div class="mb-2 text-sm font-semibold">Notice Ticker</div>
                <div class="space-y-2 text-sm">
                    @forelse($noticeTickers as $notice)
                        <div class="rounded border border-[var(--user-border)] p-2">
                            <div class="font-semibold">{{ $notice->message }}</div>
                            <div class="text-xs text-[var(--user-muted)]">Priority: {{ $notice->priority }}</div>
                        </div>
                    @empty
                        <div class="text-xs text-[var(--user-muted)]">No active ticker notices.</div>
                    @endforelse
                </div>
            </div>

            <div class="user-card p-4">
                <div class="mb-2 text-sm font-semibold">Popup Announcements</div>
                <div class="space-y-2 text-sm">
                    @forelse($popups as $popup)
                        <div class="rounded border border-[var(--user-border)] p-2">
                            <div class="font-semibold">{{ $popup->title }}</div>
                            <div class="text-xs text-[var(--user-muted)]">{{ $popup->message }}</div>
                            @if($popup->media_type === 'image' && $popup->media_url)
                                <img src="{{ $popup->media_url }}" alt="{{ $popup->title }}" class="mt-2 max-h-40 w-full rounded object-cover">
                            @elseif($popup->media_type === 'video')
                                @if($popup->media_url)
                                    <video controls class="mt-2 max-h-40 w-full rounded bg-black">
                                        <source src="{{ $popup->media_url }}">
                                    </video>
                                @elseif($popup->video_url)
                                    <a href="{{ $popup->video_url }}" target="_blank" rel="noopener noreferrer" class="mt-2 inline-block text-xs text-[var(--user-primary)] underline">
                                        Watch video
                                    </a>
                                @endif
                            @endif
                            @if($popup->cta_label && $popup->cta_url)
                                <a href="{{ $popup->cta_url }}" class="mt-1 inline-block text-xs text-[var(--user-primary)] underline">{{ $popup->cta_label }}</a>
                            @endif
                        </div>
                    @empty
                        <div class="text-xs text-[var(--user-muted)]">No active popup announcements.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
@endsection