@extends('layouts.app')

@section('title', 'New Campaign')

@section('content')
    <div class="page-head">
        <div>
            <h1>New Campaign</h1>
            <div class="subtitle">Set up a new email sending campaign</div>
        </div>
    </div>

    <div class="panel">
        <form method="POST" action="{{ route('campaigns.store') }}">
            @csrf

            <div class="grid grid-2">
                <div>
                    <label for="name">Campaign Name</label>
                    <input type="text" name="name" id="name" value="{{ old('name') }}" placeholder="e.g. Welcome Newsletter — Live Launch" required>
                </div>
                <div>
                    <label for="sender_id">Sender</label>
                    <select name="sender_id" id="sender_id" required>
                        <option value="">— Select sender —</option>
                        @foreach ($senders as $sender)
                            <option value="{{ $sender->id }}" @selected(old('sender_id') == $sender->id)>
                                {{ $sender->name }} &lt;{{ $sender->email }}&gt;
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="grid grid-2">
                <div>
                    <label for="email_template_id">Email Template</label>
                    <select name="email_template_id" id="email_template_id" required>
                        <option value="">— Select template —</option>
                        @foreach ($templates as $template)
                            <option value="{{ $template->id }}" @selected(old('email_template_id') == $template->id)>
                                {{ $template->name }} — {{ $template->subject }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="target_count">Campaign Target (total emails, optional)</label>
                    <input type="number" name="target_count" id="target_count" value="{{ old('target_count') }}" min="1" placeholder="e.g. 10000000">
                    <div class="muted" style="font-size:.8rem; margin-top:-8px;">Optional total goal — shows progress toward target in reports.</div>
                </div>
            </div>

            <h3 style="margin-top:8px;">Audience</h3>
            <p class="muted" style="margin-top:-8px; font-size:.88rem;">
                Choose who receives this campaign. Leave both empty to include every active receiver
                (suppressed addresses are excluded automatically).
            </p>

            <div class="grid grid-2">
                <div>
                    <label for="purpose">Purpose (audience label)</label>
                    <select name="purpose" id="purpose">
                        <option value="">— All active receivers —</option>
                        @foreach ($purposes as $purpose)
                            <option value="{{ $purpose }}" @selected(old('purpose') === $purpose)>
                                {{ $purpose }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="receiver_emails">Or select specific receivers</label>
                    <select name="receiver_emails[]" id="receiver_emails" multiple size="6" style="background:#fff;">
                        @foreach ($receiverEmails as $email)
                            <option value="{{ $email }}" @selected(in_array($email, old('receiver_emails', []), true))>
                                {{ $email }}
                            </option>
                        @endforeach
                    </select>
                    <div class="muted" style="font-size:.8rem; margin-top:-8px;">
                        Hold <span class="kbd">Ctrl</span> (or <span class="kbd">Cmd</span>) to pick multiple. If a purpose is also chosen, only matching emails are used.
                    </div>
                </div>
            </div>

            <button type="submit">Create Campaign</button>
        </form>
    </div>
@endsection