@extends('layouts.app')

@section('title', 'Notifications')

@section('content')
    <!-- Header -->
    <div class="text-center mb-10 fade-in">
        <h1 class="text-3xl sm:text-4xl font-bold text-white mb-3">Notifications</h1>
        <p class="text-white max-w-md mx-auto">
            Important updates and announcements
        </p>
    </div>

    @if($messages->isEmpty())
        <!-- Empty State -->
        <div class="rounded-2xl bg-white p-8 text-center text-gray-600 shadow-md fade-in mb-16">
            <i class="fas fa-bell-slash text-gray-400 text-3xl mb-3"></i>
            <p class="text-lg font-medium">No notifications at this time.</p>
        </div>
    @else
        <!-- Notifications Grid -->
        <div class="max-w-3xl mx-auto space-y-3">
    @foreach ($messages as $msg)
    @php
        // Check if the message content contains Urdu characters
        $isUrdu = preg_match('/[\x{0600}-\x{06FF}]/u', $msg->content);
    @endphp

    <div class="flex items-start gap-3 p-4 bg-white rounded-2xl shadow hover:shadow-md transition">
        <!-- Icon -->
        <div class="flex-shrink-0">
            <div class="w-10 h-10 flex items-center justify-center rounded-full bg-amber-100 text-amber-700">
                <i class="fas fa-envelope"></i>
            </div>
        </div>

        <!-- Message Content -->
        <div class="flex-1">
            <div class="flex justify-between items-center mb-1">
                <h4 class="font-semibold text-gray-800">{{ $msg->title ?? 'New Message' }}</h4>
                <span class="text-xs text-gray-400">{{ $msg->created_at->diffForHumans() }}</span>
            </div>
            <p class="text-gray-600 text-sm {{ $isUrdu ? 'urdu-text leading-10' : '' }}">
                {{ $msg->content }}
            </p>
        </div>
    </div>
@endforeach

</div>

    @endif
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Use sessionStorage instead of localStorage → auto clears when browser closes
        const messageIds = @json($messages->pluck('id'));
        let seenMessages = JSON.parse(sessionStorage.getItem('seenMessages') || '[]');

        messageIds.forEach(id => {
            if (!seenMessages.includes(id)) {
                seenMessages.push(id);
            }
        });

        sessionStorage.setItem('seenMessages', JSON.stringify(seenMessages));

        // Hide notification dot if exists
        const dot = document.getElementById('notificationDot');
        if (dot) dot.classList.add('hidden');
    });
</script>
@endpush
