@extends('layouts.admin')
@section('title', $mode === 'create' ? 'New Broadcast' : 'Edit Broadcast')

@push('styles')
<style>
    .bf-wrap { max-width:720px; }
    .bf-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.5rem; }
    .bf-row { margin-bottom:1rem; }
    .bf-row label { display:block; font-size:0.82rem; font-weight:600; color:var(--text-secondary,#6b7280); margin-bottom:0.35rem; }
    .bf-row input, .bf-row select, .bf-row textarea { width:100%; padding:0.6rem 0.85rem; border:1px solid var(--border); border-radius:8px; background:var(--bg-secondary); color:var(--text-primary); font-size:0.9rem; font-family:inherit; }
    .bf-row textarea { min-height:96px; resize:vertical; }
    .bf-actions { display:flex; gap:0.5rem; margin-top:1.25rem; }
    .bf-btn { padding:0.65rem 1.1rem; border-radius:8px; font-weight:600; font-size:0.88rem; border:1px solid var(--border); background:var(--bg-card); color:var(--text-primary); cursor:pointer; text-decoration:none; }
    .bf-btn-primary { background:var(--accent,#10BFFF); color:#fff; border-color:var(--accent,#10BFFF); }
    .bf-error { color:#FF4757; font-size:0.78rem; margin-top:0.25rem; }
    .bf-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
    @media (max-width:600px) { .bf-grid-2 { grid-template-columns:1fr; } }
</style>
@endpush

@section('content')
<div class="bf-wrap">
    <a href="{{ route('admin.broadcasts.index') }}" style="display:inline-flex;align-items:center;gap:0.35rem;color:var(--text-secondary,#6b7280);text-decoration:none;font-size:0.85rem;margin-bottom:1rem;">
        <i class="fas fa-arrow-left"></i> Back to broadcasts
    </a>

    <h1 style="font-size:1.5rem;font-weight:700;margin-bottom:0.25rem;">{{ $mode === 'create' ? 'New broadcast' : 'Edit broadcast' }}</h1>
    <p style="color:var(--text-secondary,#6b7280);margin-bottom:1.5rem;font-size:0.88rem;">
        Banners show as a coloured strip at the top of every page for users in the chosen audience. Each user can dismiss the banner once they've read it.
    </p>

    <form method="POST" action="{{ $mode === 'create' ? route('admin.broadcasts.store') : route('admin.broadcasts.update', $announcement->id) }}" class="bf-card">
        @csrf
        @if($mode === 'edit') @method('PUT') @endif

        <div class="bf-row">
            <label>Title</label>
            <input type="text" name="title" required maxlength="200" value="{{ old('title', $announcement->title) }}">
            @error('title')<div class="bf-error">{{ $message }}</div>@enderror
        </div>

        <div class="bf-row">
            <label>Body</label>
            <textarea name="body" required maxlength="2000">{{ old('body', $announcement->body) }}</textarea>
            @error('body')<div class="bf-error">{{ $message }}</div>@enderror
        </div>

        <div class="bf-grid-2">
            <div class="bf-row">
                <label>Severity</label>
                <select name="severity" required>
                    <option value="info"    {{ old('severity', $announcement->severity) === 'info' ? 'selected' : '' }}>Info (blue)</option>
                    <option value="warning" {{ old('severity', $announcement->severity) === 'warning' ? 'selected' : '' }}>Warning (amber)</option>
                    <option value="success" {{ old('severity', $announcement->severity) === 'success' ? 'selected' : '' }}>Success (green)</option>
                    <option value="danger"  {{ old('severity', $announcement->severity) === 'danger' ? 'selected' : '' }}>Danger (red)</option>
                </select>
            </div>

            <div class="bf-row">
                <label>Audience</label>
                <select name="audience" required onchange="document.getElementById('planRow').style.display = this.value === 'plan' ? 'block' : 'none';">
                    <option value="all"       {{ old('audience', $announcement->audience) === 'all' ? 'selected' : '' }}>All users</option>
                    <option value="inventory" {{ old('audience', $announcement->audience) === 'inventory' ? 'selected' : '' }}>Inventory tenants</option>
                    <option value="escrow"    {{ old('audience', $announcement->audience) === 'escrow' ? 'selected' : '' }}>Escrow-only users</option>
                    <option value="admins"    {{ old('audience', $announcement->audience) === 'admins' ? 'selected' : '' }}>Admin team</option>
                    <option value="plan"      {{ old('audience', $announcement->audience) === 'plan' ? 'selected' : '' }}>Specific plan</option>
                </select>
            </div>
        </div>

        <div class="bf-row" id="planRow" style="display: {{ old('audience', $announcement->audience) === 'plan' ? 'block' : 'none' }};">
            <label>Plan slug (e.g. inventory-growth)</label>
            <input type="text" name="plan_slug" maxlength="60" value="{{ old('plan_slug', $announcement->plan_slug) }}">
            @error('plan_slug')<div class="bf-error">{{ $message }}</div>@enderror
        </div>

        <div class="bf-grid-2">
            <div class="bf-row">
                <label>CTA label (optional)</label>
                <input type="text" name="cta_label" maxlength="60" placeholder="e.g. Read more" value="{{ old('cta_label', $announcement->cta_label) }}">
            </div>
            <div class="bf-row">
                <label>CTA URL (optional)</label>
                <input type="url" name="cta_url" maxlength="500" placeholder="https://…" value="{{ old('cta_url', $announcement->cta_url) }}">
                @error('cta_url')<div class="bf-error">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="bf-grid-2">
            <div class="bf-row">
                <label>Starts at (optional)</label>
                <input type="datetime-local" name="starts_at" value="{{ old('starts_at', optional($announcement->starts_at)->format('Y-m-d\TH:i')) }}">
            </div>
            <div class="bf-row">
                <label>Ends at (optional)</label>
                <input type="datetime-local" name="ends_at" value="{{ old('ends_at', optional($announcement->ends_at)->format('Y-m-d\TH:i')) }}">
                @error('ends_at')<div class="bf-error">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="bf-row">
            <label style="display:flex;align-items:center;gap:0.5rem;font-weight:400;">
                <input type="checkbox" name="is_active" value="1" {{ old('is_active', $announcement->is_active) ? 'checked' : '' }}>
                Active (show now if within window)
            </label>
        </div>

        <div class="bf-actions">
            <button class="bf-btn bf-btn-primary"><i class="fas fa-save"></i> {{ $mode === 'create' ? 'Publish' : 'Save changes' }}</button>
            <a href="{{ route('admin.broadcasts.index') }}" class="bf-btn">Cancel</a>
        </div>
    </form>
</div>
@endsection