@extends('layouts.admin', ['heading' => 'Broadcast Notifications', 'subheading' => 'Send system-wide messages'])

@section('content')
    <div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
        <div class="admin-card p-5">
            <div class="mb-4 text-sm font-semibold text-slate-700">Send Broadcast</div>
            <form method="POST" action="{{ route('admin.notifications.store') }}" class="space-y-3">
                @csrf
                <input name="title" placeholder="Title" class="w-full rounded border p-2" required>
                <textarea name="message" rows="4" placeholder="Message" class="w-full rounded border p-2" required></textarea>
                <input name="link" placeholder="Optional link" class="w-full rounded border p-2">
                <select name="role" class="w-full rounded border p-2">
                    <option value="user">Users</option>
                    <option value="franchise">Franchise</option>
                    <option value="admin">Admins</option>
                </select>
                <button class="w-full rounded bg-slate-900 px-4 py-2 text-sm text-white">Send Broadcast</button>
            </form>
        </div>

        <div class="admin-card p-5">
            <div class="mb-4 text-sm font-semibold text-slate-700">Recent Broadcasts</div>
            <div class="space-y-3">
                @forelse($recent as $note)
                    <div class="rounded-xl border border-slate-200 p-3">
                        <div class="text-sm font-semibold">{{ $note->title }}</div>
                        <div class="text-xs text-slate-500">{{ optional($note->created_at)->format('Y-m-d H:i') }}</div>
                        <div class="mt-2 text-sm text-slate-600">{{ $note->message }}</div>
                    </div>
                @empty
                    <div class="text-sm text-slate-500">No broadcasts yet.</div>
                @endforelse
            </div>
        </div>
    </div>
@endsection