@extends('layouts.app')

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

@section('content')
<h1>New campaign</h1>
<div class="card">
    <form method="post" action="{{ route('campaigns.store') }}">
        @csrf
        <label style="display:block; margin-bottom:8px; font-weight:500;">Platform</label>
        <select name="platform" required style="width:100%; padding:8px 12px; margin-bottom:16px; border:1px solid var(--m3-outline); border-radius:8px;">
            <option value="facebook" {{ old('platform') === 'facebook' ? 'selected' : '' }}>Facebook</option>
            <option value="instagram" {{ old('platform') === 'instagram' ? 'selected' : '' }}>Instagram</option>
            <option value="whatsapp" {{ old('platform') === 'whatsapp' ? 'selected' : '' }}>WhatsApp</option>
            <option value="linkedin" {{ old('platform') === 'linkedin' ? 'selected' : '' }}>LinkedIn</option>
        </select>
        @error('platform')<span style="color:#c62828;font-size:0.875rem;">{{ $message }}</span>@enderror

        <label style="display:block; margin-bottom:8px; font-weight:500;">Publish to (optional)</label>
        <select name="social_account_id" style="width:100%; padding:8px 12px; margin-bottom:16px; border:1px solid var(--m3-outline); border-radius:8px;">
            <option value="">No account selected</option>
            @foreach($socialAccounts as $acc)
                <option value="{{ $acc->id }}" {{ old('social_account_id') === $acc->id ? 'selected' : '' }}>{{ ucfirst($acc->platform) }}{{ $acc->account_id ? ' — ' . $acc->account_id : '' }}</option>
            @endforeach
        </select>
        @error('social_account_id')<span style="color:#c62828;font-size:0.875rem;">{{ $message }}</span>@enderror

        <label style="display:block; margin-bottom:8px; font-weight:500;">Schedule at (optional)</label>
        <input type="datetime-local" name="scheduled_at" value="{{ old('scheduled_at') }}" style="width:100%; padding:8px 12px; margin-bottom:16px; border:1px solid var(--m3-outline); border-radius:8px;">

        <label style="display:block; margin-bottom:8px; font-weight:500;">Status</label>
        <select name="status" style="width:100%; padding:8px 12px; margin-bottom:16px; border:1px solid var(--m3-outline); border-radius:8px;">
            <option value="draft" {{ old('status', 'draft') === 'draft' ? 'selected' : '' }}>Draft</option>
            <option value="scheduled" {{ old('status') === 'scheduled' ? 'selected' : '' }}>Scheduled</option>
        </select>

        <div style="display:flex; gap:12px; margin-top:16px;">
            <a href="{{ route('campaigns.index') }}" style="padding:10px 20px; border-radius:8px; background:var(--m3-surface-variant); color:var(--m3-on-surface); text-decoration:none;">Cancel</a>
            <button type="submit" style="padding:10px 20px; border-radius:8px; background:var(--m3-primary); color:var(--m3-on-primary); border:none; cursor:pointer;">Create campaign</button>
        </div>
    </form>
</div>
@endsection