@extends('layouts.app')

@section('title', 'Scheduled Announcements')

@section('content')
<div class="min-h-screen bg-slate-100">
    <div class="mx-auto max-w-6xl p-4 sm:p-6">
        <header class="mb-5">
            <a href="/admin/dashboard" class="text-sm font-semibold text-slate-500">← Admin</a>
            <h1 class="mt-2 text-2xl font-black">Scheduled Announcements</h1>
            <p class="mt-1 text-sm text-slate-500">Schedule messages to Users, Agents or Resellers.</p>
        </header>

        <div class="grid gap-4 lg:grid-cols-3">
            <form id="schedule-form" class="vtu-card space-y-4 lg:col-span-1">
                <div>
                    <label class="vtu-label">Title</label>
                    <input id="title" class="vtu-input" required>
                </div>

                <div>
                    <label class="vtu-label">Message</label>
                    <textarea id="message" class="vtu-input min-h-32" required></textarea>
                </div>

                <div>
                    <label class="vtu-label">Audience</label>
                    <select id="audience" class="vtu-input">
                        <option value="all">All</option>
                        <option value="customer">Customers</option>
                        <option value="agent">Agents</option>
                        <option value="reseller">Resellers</option>
                    </select>
                </div>

                <div>
                    <label class="vtu-label">Channel</label>
                    <select id="channel" class="vtu-input">
                        <option value="in_app">In-App</option>
                        <option value="email">Email</option>
                        <option value="sms">SMS</option>
                        <option value="push">Push</option>
                    </select>
                </div>

                <div>
                    <label class="vtu-label">Schedule time</label>
                    <input id="scheduled_for" type="datetime-local" class="vtu-input" required>
                </div>

                <button class="vtu-btn-primary w-full">Schedule Announcement</button>
            </form>

            <div class="vtu-card lg:col-span-2">
                <h2 class="font-black">Upcoming & Recent</h2>
                <div id="announcement-list" class="mt-4 space-y-3"></div>
            </div>
        </div>
    </div>
</div>

<script>
async function loadAnnouncements() {
    const response = await axios.get('/api/admin/announcements');
    const rows = response.data.data || [];

    document.getElementById('announcement-list').innerHTML = rows.map(item => `
        <div class="rounded-2xl border p-4">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <div class="font-black">${item.title}</div>
                    <div class="mt-1 text-sm text-slate-600">${item.message}</div>
                    <div class="mt-2 text-xs text-slate-500">${item.audience} • ${item.channel} • ${item.status}</div>
                </div>
                ${item.status === 'scheduled' ? `<button onclick="cancelAnnouncement(${item.id})" class="rounded-xl bg-red-50 px-3 py-2 text-xs font-semibold text-red-700">Cancel</button>` : ''}
            </div>
        </div>
    `).join('') || '<p class="text-sm text-slate-500">No announcements yet.</p>';
}

async function cancelAnnouncement(id) {
    await axios.post(`/api/admin/announcements/${id}/cancel`);
    await loadAnnouncements();
}

document.getElementById('schedule-form').addEventListener('submit', async (event) => {
    event.preventDefault();

    await axios.post('/api/admin/announcements/schedule', {
        title: document.getElementById('title').value,
        message: document.getElementById('message').value,
        audience: document.getElementById('audience').value,
        channel: document.getElementById('channel').value,
        scheduled_for: new Date(document.getElementById('scheduled_for').value).toISOString(),
    });

    event.currentTarget.reset();
    await loadAnnouncements();
});

loadAnnouncements();
</script>
@endsection