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

@section('content')
    <div class="mb-4">
        <a href="{{ route('admin.announcements') }}" class="inline-flex items-center rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-4 py-2 text-sm font-semibold text-[var(--admin-text)] hover:bg-[var(--admin-bg)]">
            Open Announcement Manager (Text/Image/Video)
        </a>
    </div>

    <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>
                <div>
                    <div class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">External Channels (Optional)</div>
                    <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
                        <label class="flex items-center gap-2 rounded border p-2 text-xs">
                            <input type="checkbox" name="channels[]" value="email" class="rounded border-slate-300">
                            <span>Email</span>
                        </label>
                        <label class="flex items-center gap-2 rounded border p-2 text-xs">
                            <input type="checkbox" name="channels[]" value="whatsapp" class="rounded border-slate-300">
                            <span>WhatsApp</span>
                        </label>
                        <label class="flex items-center gap-2 rounded border p-2 text-xs">
                            <input type="checkbox" name="channels[]" value="sms" class="rounded border-slate-300">
                            <span>SMS</span>
                        </label>
                    </div>
                    <div class="mt-1 text-xs text-slate-500">In-app notification is always stored. External channels are queued.</div>
                </div>
                <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