@extends('layouts.admin')
@section('content')
<div class="max-w-6xl">
    <div class="flex flex-col justify-between gap-4 md:flex-row md:items-end">
        <div>
            <p class="hms-kicker">Public messaging</p>
            <h1 class="font-serif text-4xl">Announcements</h1>
            <p class="mt-3 max-w-3xl text-black/60">Publish factual store notices to the homepage. Up to three currently active Published announcements are shown, with Emergency, Closure, and Important notices prioritized ahead of ordinary informational notices.</p>
        </div>
        <a class="text-sm font-semibold text-[var(--hms-forest)]" href="{{ route('home') }}" target="_blank" rel="noopener">View homepage ↗</a>
    </div>

    <div class="mt-6 rounded-2xl border border-amber-200 bg-amber-50 p-5 text-sm leading-relaxed text-amber-950">
        <strong>Use announcements for operational information.</strong> Appropriate examples include adjusted hours, closures, access notices, or urgent store updates. Do not use this module to bypass the Specials or compliance workflows for promotional cannabis claims.
    </div>

    <section class="mt-8 rounded-2xl border border-black/10 bg-white p-6">
        <div class="grid gap-6 lg:grid-cols-[.8fr_1.5fr]">
            <div>
                <h2 class="font-serif text-2xl">Create announcement</h2>
                <p class="mt-2 text-sm leading-relaxed text-black/55">Publishing makes the notice eligible for homepage display immediately unless a future start time is set. An end time removes it from display automatically after that time.</p>
            </div>
            <form class="grid gap-4 md:grid-cols-2" method="POST" action="{{ route('admin.announcements.store') }}">
                @csrf
                <label class="grid gap-1.5 text-sm font-semibold md:col-span-2">Title<span class="text-xs font-normal text-black/45">Short public headline shown on the homepage.</span><input class="rounded-xl border border-black/15 px-4 py-3" name="title" value="{{ old('title') }}" placeholder="Example: Adjusted hours today" required></label>
                <label class="grid gap-1.5 text-sm font-semibold md:col-span-2">Message<span class="text-xs font-normal text-black/45">Concise factual detail supporting the headline.</span><textarea class="min-h-28 rounded-xl border border-black/15 px-4 py-3" name="body" placeholder="Public message">{{ old('body') }}</textarea></label>
                <label class="grid gap-1.5 text-sm font-semibold">Notice type<span class="text-xs font-normal text-black/45">Controls urgency and homepage priority.</span><select class="rounded-xl border border-black/15 px-4 py-3" name="kind"><option value="informational">Informational — routine notice</option><option value="important">Important — elevated notice</option><option value="closure">Closure — store/access closure</option><option value="emergency">Emergency — highest priority</option></select></label>
                <label class="grid gap-1.5 text-sm font-semibold">Status<span class="text-xs font-normal text-black/45">Draft stays private. Published is eligible for display during its schedule.</span><select class="rounded-xl border border-black/15 px-4 py-3" name="status"><option value="draft">Draft</option><option value="published">Published</option></select></label>
                <label class="grid gap-1.5 text-sm font-semibold">Starts at<span class="text-xs font-normal text-black/45">Optional. Leave blank to start as soon as it is published.</span><input class="rounded-xl border border-black/15 px-4 py-3" type="datetime-local" name="starts_at" value="{{ old('starts_at') }}"></label>
                <label class="grid gap-1.5 text-sm font-semibold">Ends at<span class="text-xs font-normal text-black/45">Optional automatic stop time. Must be after Starts at.</span><input class="rounded-xl border border-black/15 px-4 py-3" type="datetime-local" name="ends_at" value="{{ old('ends_at') }}"></label>
                <button class="hms-button hms-button-primary justify-self-start md:col-span-2">Create announcement</button>
            </form>
        </div>
    </section>

    <section class="mt-8">
        <div><h2 class="font-serif text-2xl">Existing announcements</h2><p class="mt-1 text-sm text-black/50">Open an announcement to edit its wording, urgency, status, or schedule.</p></div>
        <div class="mt-4 grid gap-3">
            @forelse($announcements as $announcement)
                @php($currentlyVisible = $announcement->status === 'published' && (!$announcement->starts_at || $announcement->starts_at->lte(now())) && (!$announcement->ends_at || $announcement->ends_at->gte(now())))
                <details class="overflow-hidden rounded-2xl border border-black/10 bg-white">
                    <summary class="flex cursor-pointer list-none flex-col justify-between gap-3 p-5 hover:bg-black/[.015] sm:flex-row sm:items-center [&::-webkit-details-marker]:hidden">
                        <div class="min-w-0">
                            <div class="flex flex-wrap items-center gap-2"><strong>{{ $announcement->title }}</strong><span class="rounded-full bg-black/[.05] px-2 py-1 text-[10px] font-bold uppercase tracking-wide">{{ str($announcement->kind)->headline() }}</span></div>
                            <p class="mt-1 text-xs text-black/45">{{ $currentlyVisible ? 'Visible now' : ($announcement->status === 'published' ? 'Published, outside active schedule' : str($announcement->status)->headline()) }}@if($announcement->starts_at) · Starts {{ $announcement->starts_at->format('M j, Y g:i A') }}@endif @if($announcement->ends_at) · Ends {{ $announcement->ends_at->format('M j, Y g:i A') }}@endif</p>
                        </div>
                        <div class="flex shrink-0 items-center gap-3"><span class="rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide {{ $currentlyVisible ? 'bg-green-100 text-green-800' : ($announcement->status === 'draft' ? 'bg-amber-100 text-amber-800' : 'bg-black/5 text-black/50') }}">{{ $currentlyVisible ? 'Live' : $announcement->status }}</span><span class="text-xs font-semibold text-black/40">Edit ▾</span></div>
                    </summary>
                    <div class="border-t border-black/10 bg-black/[.015] p-5">
                        <form class="grid gap-4 md:grid-cols-2" method="POST" action="{{ route('admin.announcements.update', $announcement) }}">
                            @csrf @method('PUT')
                            <label class="grid gap-1 text-sm font-semibold md:col-span-2">Title<input class="rounded-xl border border-black/15 bg-white px-4 py-3" name="title" value="{{ $announcement->title }}" required></label>
                            <label class="grid gap-1 text-sm font-semibold md:col-span-2">Message<textarea class="min-h-28 rounded-xl border border-black/15 bg-white px-4 py-3" name="body">{{ $announcement->body }}</textarea></label>
                            <label class="grid gap-1 text-sm font-semibold">Notice type<select class="rounded-xl border border-black/15 bg-white px-4 py-3" name="kind">@foreach(['informational','important','closure','emergency'] as $kind)<option value="{{ $kind }}" @selected($announcement->kind === $kind)>{{ str($kind)->headline() }}</option>@endforeach</select></label>
                            <label class="grid gap-1 text-sm font-semibold">Status<select class="rounded-xl border border-black/15 bg-white px-4 py-3" name="status">@foreach(['draft','published','expired'] as $status)<option value="{{ $status }}" @selected($announcement->status === $status)>{{ str($status)->headline() }}</option>@endforeach</select></label>
                            <label class="grid gap-1 text-sm font-semibold">Starts at<input class="rounded-xl border border-black/15 bg-white px-4 py-3" type="datetime-local" name="starts_at" value="{{ optional($announcement->starts_at)->format('Y-m-d\TH:i') }}"></label>
                            <label class="grid gap-1 text-sm font-semibold">Ends at<input class="rounded-xl border border-black/15 bg-white px-4 py-3" type="datetime-local" name="ends_at" value="{{ optional($announcement->ends_at)->format('Y-m-d\TH:i') }}"></label>
                            <button class="hms-button border border-black/15 bg-white justify-self-start">Save announcement</button>
                        </form>
                        <form class="mt-4 border-t border-black/10 pt-4" method="POST" action="{{ route('admin.announcements.destroy', $announcement) }}" onsubmit="return confirm('Archive this announcement? It will no longer appear publicly.')">
                            @csrf @method('DELETE')
                            <button class="text-sm font-semibold text-red-700">Archive announcement</button>
                        </form>
                    </div>
                </details>
            @empty
                <p class="rounded-2xl border border-dashed border-black/15 p-8 text-center text-black/50">No announcements yet.</p>
            @endforelse
        </div>
        <div class="mt-6">{{ $announcements->links() }}</div>
    </section>
</div>
@endsection