@extends('layouts.admin', ['heading' => 'Announcement Manager', 'subheading' => 'Create popup announcements for homepage and post-login screens'])

@section('content')
    <div class="grid grid-cols-1 gap-6 xl:grid-cols-5">
        <div class="admin-card p-5 xl:col-span-2">
            <div class="mb-4 text-lg font-semibold">Create Announcement</div>
            <form method="POST" action="{{ route('admin.announcements.store') }}" enctype="multipart/form-data" class="space-y-4">
                @csrf
                <div>
                    <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-[var(--admin-muted)]">Title</label>
                    <input type="text" name="title" value="{{ old('title') }}" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm" required>
                </div>

                <div>
                    <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-[var(--admin-muted)]">Message</label>
                    <textarea name="message" rows="4" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm" placeholder="Optional text message">{{ old('message') }}</textarea>
                </div>

                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                    <div>
                        <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-[var(--admin-muted)]">Audience</label>
                        <select name="target_audience" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">
                            <option value="all" @selected(old('target_audience') === 'all')>All</option>
                            <option value="public" @selected(old('target_audience') === 'public')>Public (Homepage)</option>
                            <option value="user" @selected(old('target_audience') === 'user')>Users</option>
                            <option value="franchise" @selected(old('target_audience') === 'franchise')>Franchise</option>
                        </select>
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-[var(--admin-muted)]">Display Surface</label>
                        <select name="display_surface" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">
                            <option value="both" @selected(old('display_surface') === 'both')>Both</option>
                            <option value="homepage" @selected(old('display_surface') === 'homepage')>Homepage Only</option>
                            <option value="after_login" @selected(old('display_surface') === 'after_login')>After Login Only</option>
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                    <div>
                        <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-[var(--admin-muted)]">Media Type</label>
                        <select name="media_type" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">
                            <option value="none" @selected(old('media_type') === 'none')>Text Only</option>
                            <option value="image" @selected(old('media_type') === 'image')>Image</option>
                            <option value="video" @selected(old('media_type') === 'video')>Video</option>
                        </select>
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-[var(--admin-muted)]">Media File</label>
                        <input type="file" name="media_file" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                    <div>
                        <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-[var(--admin-muted)]">Video URL (Optional)</label>
                        <input type="url" name="video_url" value="{{ old('video_url') }}" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm" placeholder="https://...">
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-[var(--admin-muted)]">Display Order</label>
                        <input type="number" name="display_order" min="0" value="{{ old('display_order', 0) }}" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                    <div>
                        <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-[var(--admin-muted)]">CTA Label</label>
                        <input type="text" name="cta_label" value="{{ old('cta_label') }}" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm" placeholder="Learn More">
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-[var(--admin-muted)]">CTA URL</label>
                        <input type="url" name="cta_url" value="{{ old('cta_url') }}" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm" placeholder="https://...">
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                    <div>
                        <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-[var(--admin-muted)]">Start At</label>
                        <input type="datetime-local" name="start_at" value="{{ old('start_at') }}" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-[var(--admin-muted)]">End At</label>
                        <input type="datetime-local" name="end_at" value="{{ old('end_at') }}" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">
                    </div>
                </div>

                <div class="flex flex-wrap items-center gap-4">
                    <label class="inline-flex items-center gap-2 text-sm">
                        <input type="hidden" name="show_once" value="0">
                        <input type="checkbox" name="show_once" value="1" class="rounded border-slate-300" @checked(old('show_once', true))>
                        Show once
                    </label>
                    <label class="inline-flex items-center gap-2 text-sm">
                        <input type="hidden" name="is_active" value="0">
                        <input type="checkbox" name="is_active" value="1" class="rounded border-slate-300" @checked(old('is_active', true))>
                        Active
                    </label>
                </div>

                <button type="submit" class="w-full rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white">Publish Announcement</button>
            </form>
        </div>

        <div class="space-y-4 xl:col-span-3">
            @forelse($announcements as $announcement)
                <div class="admin-card p-5">
                    <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
                        <div>
                            <div class="text-base font-semibold">{{ $announcement->title }}</div>
                            <div class="text-xs text-[var(--admin-muted)]">
                                #{{ $announcement->id }} | Updated {{ optional($announcement->updated_at)->format('d M Y H:i') }}
                            </div>
                        </div>
                        <div class="flex flex-wrap gap-2">
                            <span class="admin-badge {{ $announcement->is_active ? 'success' : 'danger' }}">{{ $announcement->is_active ? 'Active' : 'Inactive' }}</span>
                            <span class="admin-badge warning">{{ strtoupper($announcement->target_audience) }}</span>
                            <span class="admin-badge">{{ strtoupper($announcement->display_surface) }}</span>
                        </div>
                    </div>

                    @if($announcement->message)
                        <div class="mb-3 rounded-xl border border-[var(--admin-border)] bg-[var(--admin-bg)] p-3 text-sm">
                            {{ $announcement->message }}
                        </div>
                    @endif

                    @if($announcement->media_type === 'image' && $announcement->media_url)
                        <img src="{{ $announcement->media_url }}" alt="{{ $announcement->title }}" class="mb-3 max-h-52 w-full rounded-xl object-cover">
                    @elseif($announcement->media_type === 'video')
                        @if($announcement->media_url)
                            <video controls class="mb-3 max-h-52 w-full rounded-xl bg-black">
                                <source src="{{ $announcement->media_url }}">
                            </video>
                        @elseif($announcement->video_url)
                            <a href="{{ $announcement->video_url }}" target="_blank" rel="noopener noreferrer" class="mb-3 inline-block text-sm text-[var(--admin-primary)] underline">
                                Open linked video
                            </a>
                        @endif
                    @endif

                    <form method="POST" action="{{ route('admin.announcements.update', $announcement) }}" enctype="multipart/form-data" class="grid grid-cols-1 gap-3 rounded-xl border border-[var(--admin-border)] p-3 md:grid-cols-2">
                        @csrf
                        <div>
                            <label class="mb-1 block text-xs text-[var(--admin-muted)]">Title</label>
                            <input type="text" name="title" value="{{ $announcement->title }}" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm" required>
                        </div>
                        <div>
                            <label class="mb-1 block text-xs text-[var(--admin-muted)]">Order</label>
                            <input type="number" name="display_order" min="0" value="{{ $announcement->display_order }}" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">
                        </div>
                        <div class="md:col-span-2">
                            <label class="mb-1 block text-xs text-[var(--admin-muted)]">Message</label>
                            <textarea name="message" rows="3" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">{{ $announcement->message }}</textarea>
                        </div>
                        <div>
                            <label class="mb-1 block text-xs text-[var(--admin-muted)]">Audience</label>
                            <select name="target_audience" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">
                                <option value="all" @selected($announcement->target_audience === 'all')>All</option>
                                <option value="public" @selected($announcement->target_audience === 'public')>Public</option>
                                <option value="user" @selected($announcement->target_audience === 'user')>User</option>
                                <option value="franchise" @selected($announcement->target_audience === 'franchise')>Franchise</option>
                            </select>
                        </div>
                        <div>
                            <label class="mb-1 block text-xs text-[var(--admin-muted)]">Surface</label>
                            <select name="display_surface" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">
                                <option value="both" @selected($announcement->display_surface === 'both')>Both</option>
                                <option value="homepage" @selected($announcement->display_surface === 'homepage')>Homepage</option>
                                <option value="after_login" @selected($announcement->display_surface === 'after_login')>After Login</option>
                            </select>
                        </div>
                        <div>
                            <label class="mb-1 block text-xs text-[var(--admin-muted)]">Media Type</label>
                            <select name="media_type" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">
                                <option value="none" @selected($announcement->media_type === 'none')>Text</option>
                                <option value="image" @selected($announcement->media_type === 'image')>Image</option>
                                <option value="video" @selected($announcement->media_type === 'video')>Video</option>
                            </select>
                        </div>
                        <div>
                            <label class="mb-1 block text-xs text-[var(--admin-muted)]">Replace Media</label>
                            <input type="file" name="media_file" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="mb-1 block text-xs text-[var(--admin-muted)]">Video URL</label>
                            <input type="url" name="video_url" value="{{ $announcement->video_url }}" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="mb-1 block text-xs text-[var(--admin-muted)]">CTA Label</label>
                            <input type="text" name="cta_label" value="{{ $announcement->cta_label }}" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="mb-1 block text-xs text-[var(--admin-muted)]">CTA URL</label>
                            <input type="url" name="cta_url" value="{{ $announcement->cta_url }}" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="mb-1 block text-xs text-[var(--admin-muted)]">Start At</label>
                            <input type="datetime-local" name="start_at" value="{{ optional($announcement->start_at)->format('Y-m-d\\TH:i') }}" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="mb-1 block text-xs text-[var(--admin-muted)]">End At</label>
                            <input type="datetime-local" name="end_at" value="{{ optional($announcement->end_at)->format('Y-m-d\\TH:i') }}" class="w-full rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm">
                        </div>
                        <div class="md:col-span-2 flex flex-wrap items-center justify-between gap-3">
                            <div class="flex gap-4">
                                <label class="inline-flex items-center gap-2 text-sm">
                                    <input type="hidden" name="show_once" value="0">
                                    <input type="checkbox" name="show_once" value="1" class="rounded border-slate-300" @checked($announcement->show_once)>
                                    Show once
                                </label>
                                <label class="inline-flex items-center gap-2 text-sm">
                                    <input type="hidden" name="is_active" value="0">
                                    <input type="checkbox" name="is_active" value="1" class="rounded border-slate-300" @checked($announcement->is_active)>
                                    Active
                                </label>
                            </div>
                            <button type="submit" class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Update</button>
                        </div>
                    </form>

                    <form method="POST" action="{{ route('admin.announcements.delete', $announcement) }}" class="mt-3">
                        @csrf
                        <button type="submit" data-confirm="Delete this announcement?" class="rounded-lg border border-rose-300 px-4 py-2 text-sm font-semibold text-rose-600">
                            Delete
                        </button>
                    </form>
                </div>
            @empty
                <div class="admin-card p-5 text-sm text-[var(--admin-muted)]">No announcements created yet.</div>
            @endforelse

            <div>{{ $announcements->links() }}</div>
        </div>
    </div>
@endsection