@extends('layouts.admin')

@section('title', 'Push Notifications')

@section('content')
<div class="max-w-[1200px] mx-auto p-6 space-y-6">
    @if(session('success'))
        <div class="bg-green-50 border border-green-200 text-green-800 p-4 rounded-xl">
            {{ session('success') }}
        </div>
    @endif

    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-extrabold tracking-tight">Push Notifications</h1>
            <p class="text-sm text-gray-500 mt-1">History of notifications sent to users</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.settings.index') }}#notifications" class="px-4 py-2 rounded-xl border border-gray-200 text-sm font-bold hover:bg-gray-50">Configure OneSignal</a>
            <a href="{{ route('admin.notifications.create') }}" class="px-4 py-2 rounded-xl bg-emerald-600 text-white text-sm font-extrabold hover:bg-emerald-700">New Notification</a>
        </div>
    </div>

    <div class="bg-white border border-gray-100 rounded-2xl overflow-hidden">
        <table class="min-w-full divide-y divide-gray-100">
            <thead class="bg-gray-50/50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Title</th>
                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Message</th>
                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Image</th>
                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">URL</th>
                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Sent At</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($notifications as $n)
                    <tr class="hover:bg-gray-50/40">
                        <td class="px-6 py-4 font-semibold text-gray-900">{{ $n->title }}</td>
                        <td class="px-6 py-4 text-gray-600">{{ \Illuminate\Support\Str::limit($n->message, 80) }}</td>
                        <td class="px-6 py-4">
                            @if($n->image_url)
                                <img src="{{ $n->image_url }}" class="w-10 h-10 object-cover rounded-lg border border-gray-100" />
                            @else
                                <span class="text-xs text-gray-400">—</span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            @if($n->url)
                                <a href="{{ $n->url }}" target="_blank" class="text-emerald-600 text-sm font-bold hover:underline">Open</a>
                            @else
                                <span class="text-xs text-gray-400">—</span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            @php $color = $n->status === 'sent' ? 'bg-emerald-50 text-emerald-700' : ($n->status === 'failed' ? 'bg-rose-50 text-rose-700' : 'bg-amber-50 text-amber-700'); @endphp
                            <span class="px-2 py-1 rounded-lg text-xs font-bold {{ $color }}">{{ ucfirst($n->status) }}</span>
                        </td>
                        <td class="px-6 py-4 text-gray-600 text-sm">{{ $n->created_at->format('d M, Y h:i A') }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-6 py-10 text-center text-gray-500">No notifications yet.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
        <div class="p-4 border-t border-gray-100">
            {{ $notifications->links() }}
        </div>
    </div>
</div>
@endsection
