@extends('layouts.admin', ['title' => 'Notifications'])

@section('admin-content')
<section class="space-y-6">
    <div class="grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
        <div class="rounded-[2rem] border border-white/10 bg-slate-900/70 p-6">
            <h1 class="font-display text-3xl font-bold text-white">Notifications</h1>
            <p class="mt-2 text-sm text-slate-400">Send in-app, email, webhook, or WhatsApp-style notification records to customers.</p>
            <form method="POST" action="{{ route('admin.notifications.store') }}" class="mt-6 space-y-4">
                @csrf
                <select name="user_id" title="Choose a specific customer, or leave this as a system-wide notification" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                    <option value="">Global/system notification</option>
                    @foreach ($users as $user)
                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                    @endforeach
                </select>
                <input name="type" placeholder="Type e.g. renewal_reminder" title="Use a short event or notification type label" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                <input name="title" placeholder="Title" title="Enter the customer-facing notification headline" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                <select name="channel" title="Choose how this notification should be presented or delivered" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                    <option value="in_app">In-app</option>
                    <option value="email">Email</option>
                    <option value="webhook">Webhook</option>
                    <option value="whatsapp">WhatsApp</option>
                </select>
                <input name="action_url" placeholder="Optional action URL" title="Optional: send the user to a page like billing, downloads, or support" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                <textarea name="message" rows="4" placeholder="Message" title="Write the main message shown to the customer" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required></textarea>
                <button type="submit" class="w-full rounded-2xl bg-brand-500 px-5 py-3 font-semibold text-white">Create notification</button>
            </form>
        </div>
        <div class="rounded-[2rem] border border-white/10 bg-slate-900/70 p-6">
            <h2 class="font-display text-2xl font-semibold text-white">Recent notifications</h2>
            <div class="mt-6 space-y-3">
                @foreach ($notifications as $notification)
                    <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
                        <div class="flex items-center justify-between gap-4">
                            <div>
                                <div class="font-medium text-white">{{ $notification->title }}</div>
                                <div class="text-sm text-slate-400">{{ $notification->user?->name ?: 'System' }} • {{ $notification->channel }} • {{ $notification->status }}</div>
                            </div>
                            <div class="text-xs text-slate-500">{{ $notification->sent_at?->diffForHumans() }}</div>
                        </div>
                        <div class="mt-2 text-sm text-slate-300">{{ $notification->message }}</div>
                    </div>
                @endforeach
            </div>
            <div class="mt-6">{{ $notifications->links() }}</div>
        </div>
    </div>
</section>
@endsection