@extends('layouts.admin')
@section('content')
<p class="hms-kicker">Marketing consent</p>
<div class="flex flex-wrap items-end justify-between gap-4">
    <div><h1 class="font-serif text-4xl">Newsletter</h1><p class="mt-2 text-black/55">Manage double-opt-in subscribers and create email campaigns. Campaigns can be sent or scheduled directly; there is no separate approval queue.</p></div>
    <a class="hms-button border border-black/15" href="{{ route('admin.newsletter.export') }}">Export active CSV</a>
</div>

<div class="mt-7 grid gap-3 sm:grid-cols-3">
    @foreach(['pending','active','unsubscribed'] as $state)
        <a class="rounded-xl border border-black/10 bg-white p-4" href="{{ route('admin.newsletter.index',['status'=>$state]) }}"><span class="text-xs uppercase tracking-wider text-black/45">{{ $state }}</span><strong class="mt-1 block text-2xl">{{ $counts[$state]??0 }}</strong></a>
    @endforeach
</div>

<section class="mt-8 rounded-2xl border border-black/10 bg-white p-6">
    <h2 class="font-serif text-2xl">Create campaign</h2>
    <p class="mt-2 text-sm text-black/55">Leave the schedule blank to create a draft you can send manually. Add a future date/time to have the scheduler send it when due.</p>
    <form class="mt-5 grid gap-4" method="POST" action="{{ route('admin.newsletter.campaigns.store') }}">
        @csrf
        <label class="grid gap-2 text-sm font-semibold">Internal campaign name<input class="rounded-xl border border-black/15 px-4 py-3" name="name" required maxlength="160"></label>
        <label class="grid gap-2 text-sm font-semibold">Email subject<input class="rounded-xl border border-black/15 px-4 py-3" name="subject" required maxlength="200"></label>
        <label class="grid gap-2 text-sm font-semibold">Message<textarea class="min-h-56 rounded-xl border border-black/15 px-4 py-3" name="body" required maxlength="30000"></textarea></label>
        <label class="grid gap-2 text-sm font-semibold">Schedule for later <span class="font-normal text-black/45">Optional</span><input class="rounded-xl border border-black/15 px-4 py-3" type="datetime-local" name="scheduled_for"><span class="text-xs font-normal text-black/45">If set, the campaign will be eligible for automatic sending when the HMS scheduler runs.</span></label>
        <button class="hms-button hms-button-primary justify-self-start">Create campaign</button>
    </form>
</section>

<section class="mt-8">
    <h2 class="font-serif text-2xl">Campaigns</h2>
    <div class="mt-4 grid gap-4">
        @forelse($campaigns as $campaign)
            <article class="rounded-2xl border border-black/10 bg-white p-5">
                <div class="flex flex-wrap items-start justify-between gap-4">
                    <div>
                        <div class="flex flex-wrap items-center gap-2"><h3 class="font-serif text-xl">{{ $campaign->name }}</h3><span class="rounded-full bg-black/5 px-2 py-1 text-xs font-semibold">{{ str($campaign->status)->headline() }}</span></div>
                        <p class="mt-1 text-sm font-semibold">{{ $campaign->subject }}</p>
                        <p class="mt-2 max-w-3xl whitespace-pre-line text-sm text-black/55">{{ str($campaign->body)->limit(300) }}</p>
                        @if($campaign->scheduled_for && $campaign->status!=='sent')<p class="mt-2 text-xs text-black/45">Scheduled for {{ $campaign->scheduled_for->toDayDateTimeString() }}</p>@endif
                        @if($campaign->sent_at)<p class="mt-2 text-xs text-black/45">Sent {{ $campaign->sent_at->toDayDateTimeString() }} · {{ $campaign->recipient_count }} recipient(s)</p>@endif
                    </div>
                    @if($campaign->status!=='sent')
                        <form method="POST" action="{{ route('admin.newsletter.campaigns.send',$campaign) }}" onsubmit="return confirm('Queue this campaign now for every active, non-suppressed subscriber?')">@csrf<button class="hms-button hms-button-primary">Send now</button></form>
                    @endif
                </div>
            </article>
        @empty
            <p class="rounded-2xl border border-dashed border-black/15 p-6 text-black/45">No campaigns yet.</p>
        @endforelse
    </div>
</section>

<section class="mt-8">
    <h2 class="font-serif text-2xl">Subscribers</h2>
    <div class="mt-4 overflow-x-auto rounded-2xl border border-black/10 bg-white">
        <table class="min-w-full text-sm">
            <thead class="bg-black/[.03] text-left text-xs uppercase tracking-wider text-black/45"><tr><th class="p-4">Email</th><th class="p-4">Status</th><th class="p-4">Requested</th><th class="p-4">Confirmed</th><th class="p-4">Unsubscribed</th><th class="p-4">Source</th></tr></thead>
            <tbody>
                @forelse($subscribers as $subscriber)
                    <tr class="border-t border-black/5"><td class="p-4">{{ $subscriber->email_encrypted }}</td><td class="p-4 font-semibold">{{ str($subscriber->status)->headline() }}</td><td class="p-4 text-black/55">{{ $subscriber->requested_at?->toDayDateTimeString() }}</td><td class="p-4 text-black/55">{{ $subscriber->confirmed_at?->toDayDateTimeString() }}</td><td class="p-4 text-black/55">{{ $subscriber->unsubscribed_at?->toDayDateTimeString() }}</td><td class="p-4 text-black/55">{{ $subscriber->source }}</td></tr>
                @empty<tr><td class="p-8 text-center text-black/45" colspan="6">No subscribers match this filter.</td></tr>@endforelse
            </tbody>
        </table>
    </div>
    <div class="mt-5">{{ $subscribers->links() }}</div>
</section>
@endsection