@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-black text-slate-900">Notification Management</h1>
            <p class="text-slate-500 mt-1">Send notifications to users across the portal</p>
        </div>
        <a href="{{ route('admin.notifications.create') }}" class="btn-primary">
            <span class="material-icons-round text-sm mr-2">add</span>
            Send Notification
        </a>
    </div>

    <!-- Quick Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-6 rounded-2xl shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-blue-100 text-sm font-bold mb-1">Total Sent</p>
                    <p class="text-3xl font-black">{{ \DB::table('notifications')->count() }}</p>
                </div>
                <span class="material-icons-round text-5xl opacity-20">send</span>
            </div>
        </div>

        <div class="bg-gradient-to-br from-green-500 to-green-600 text-white p-6 rounded-2xl shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-green-100 text-sm font-bold mb-1">Active Users</p>
                    <p class="text-3xl font-black">
                        {{ \App\Models\User::count() + \App\Models\Staff::where('is_confirmed', true)->count() + \App\Models\Student::where('is_confirmed', true)->count() }}
                    </p>
                </div>
                <span class="material-icons-round text-5xl opacity-20">people</span>
            </div>
        </div>

        <div class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-6 rounded-2xl shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-purple-100 text-sm font-bold mb-1">Today's Sent</p>
                    <p class="text-3xl font-black">
                        {{ \DB::table('notifications')->whereDate('created_at', today())->count() }}
                    </p>
                </div>
                <span class="material-icons-round text-5xl opacity-20">today</span>
            </div>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="bg-white rounded-2xl shadow-lg border border-slate-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
            <h2 class="text-lg font-black text-slate-900">Recent Notifications</h2>
            <a href="{{ route('admin.notifications.history') }}" class="text-sm font-bold text-brand-primary hover:text-brand-secondary transition">
                View All
            </a>
        </div>

        @php
            $recentNotifications = \DB::table('notifications')->latest()->take(10)->get();
        @endphp

        @forelse($recentNotifications as $notification)
        <div class="px-6 py-4 border-b border-slate-50 hover:bg-slate-50 transition">
            <div class="flex items-start gap-4">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-primary to-brand-secondary flex items-center justify-center flex-shrink-0">
                    <span class="material-icons-round text-white text-sm">
                        {{ json_decode($notification->data)->icon ?? 'notifications' }}
                    </span>
                </div>
                <div class="flex-1">
                    <h3 class="font-bold text-slate-900 text-sm mb-1">
                        {{ json_decode($notification->data)->title ?? 'Notification' }}
                    </h3>
                    <p class="text-xs text-slate-600 mb-2">
                        {{ json_decode($notification->data)->message ?? '' }}
                    </p>
                    <p class="text-xs text-slate-400">
                        {{ \Carbon\Carbon::parse($notification->created_at)->diffForHumans() }}
                    </p>
                </div>
            </div>
        </div>
        @empty
        <div class="px-6 py-12 text-center">
            <span class="material-icons-round text-slate-300 text-5xl mb-3">notifications_none</span>
            <p class="text-sm text-slate-500 font-bold">No notifications sent yet</p>
        </div>
        @endforelse
    </div>
</div>
@endsection