@extends('layouts.app')

@section('title', 'Send Proposal')
@section('page-title', 'Send Proposal')
@section('page-subtitle', $campaign->name)

@section('topbar-actions')
    <a href="{{ route('campaigns.show', $campaign) }}" class="btn btn-ghost btn-sm">← Back to Campaign</a>
@endsection

@php
    use App\Models\CampaignProposal as CP;

    $oldArr = fn ($key, $fallback = []) => old($key, $existing->{$key} ?? $fallback) ?? [];

    $selCountry = $oldArr('audience_countries');   // Primary Audience Country
    $selLocCtry = $oldArr('location_countries');   // Top Audience Locations — country
    $selState   = $oldArr('audience_states');
    $selCity    = $oldArr('audience_cities');
    $selCat     = $oldArr('content_categories');
    $selType    = $oldArr('content_types');
    $selLang    = $oldArr('audience_languages');
    $selInt     = $oldArr('audience_interests');
    $ages       = $oldArr('audience_age_distribution');
    $genders    = $oldArr('audience_gender_distribution');
@endphp

@push('styles')
<style>
    .pf-wrap { width: 100%; max-width: 100%; }

    .pf-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 24px;
        margin-bottom: 18px;
    }

    .pf-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #34BDEB;
        color: #fff;
        font-size: 11.5px;
        font-weight: 700;
        margin-right: 9px;
    }

    .pf-card h3 {
        display: flex;
        align-items: center;
        font-size: 15px;
        font-weight: 700;
        color: #000;
        margin: 0 0 4px;
    }

    .pf-card .pf-sub {
        font-size: 12.5px;
        color: #6b7280;
        margin: 0 0 18px 31px;
    }

    .pf-summary {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 18px 20px;
        margin-bottom: 18px;
    }

    .pf-summary-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 14px;
    }

    .pf-summary-item .lbl {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #000;
        display: block;
        margin-bottom: 3px;
    }

    .pf-summary-item .val {
        font-size: 13.5px;
        font-weight: 400;
        color: #000;
    }

    .pf-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .pf-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

    @media (max-width: 700px) {
        .pf-row, .pf-row-3 { grid-template-columns: 1fr; }
    }

    .pf-field { margin-bottom: 16px; }

    .pf-field label {
        display: block;
        font-size: 12.5px;
        font-weight: 600;
        color: #000;
        margin-bottom: 6px;
    }

    .pf-field .req { color: #dc2626; }

    .pf-field input[type="text"],
    .pf-field input[type="url"],
    .pf-field input[type="number"],
    .pf-field input[type="date"],
    .pf-field select,
    .pf-field textarea {
        width: 100%;
        border: 1px solid #d1d5db;
        border-radius: 7px;
        padding: 9px 11px;
        font-size: 13.5px;
        font-family: inherit;
        color: #111827;
        background: #fff;
    }

    .pf-field input:focus,
    .pf-field select:focus,
    .pf-field textarea:focus {
        outline: none;
        border-color: #34BDEB;
        box-shadow: 0 0 0 3px rgba(52,189,235,.15);
    }

    .pf-field textarea { resize: vertical; min-height: 120px; }

    .pf-hint  { font-size: 11.5px; color: #9ca3af; margin-top: 5px; }
    .pf-error { font-size: 12px; color: #dc2626; margin-top: 5px; }

    /* ---- multi-select dropdown ---- */
    .pf-ms { position: relative; }

    .pf-ms-toggle {
        width: 100%;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: 1px solid #d1d5db;
        border-radius: 7px;
        padding: 9px 11px;
        font-size: 13.5px;
        font-family: inherit;
        color: #111827;
        background: #fff;
        cursor: pointer;
        text-align: left;
    }

    .pf-ms-toggle:hover { border-color: #9ca3af; }

    .pf-ms-toggle:disabled {
        background: #f9fafb;
        cursor: not-allowed;
        color: #9ca3af;
    }

    .pf-ms.open .pf-ms-toggle {
        border-color: #34BDEB;
        box-shadow: 0 0 0 3px rgba(52,189,235,.15);
    }

    .pf-ms-label { flex: 1; line-height: 1.45; word-break: break-word; }
    .pf-ms-label.empty { color: #9ca3af; }

    .pf-ms-caret {
        flex-shrink: 0;
        align-self: center;
        width: 9px;
        height: 9px;
        border-right: 2px solid #6b7280;
        border-bottom: 2px solid #6b7280;
        transform: rotate(45deg) translateY(-2px);
        transition: transform .15s;
    }

    .pf-ms.open .pf-ms-caret { transform: rotate(-135deg) translateY(-2px); }

    .pf-ms-panel {
        display: none;
        position: absolute;
        z-index: 40;
        top: calc(100% + 5px);
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 9px;
        box-shadow: 0 8px 24px rgba(15,23,42,.13);
        overflow: hidden;
    }

    .pf-ms.open .pf-ms-panel { display: block; }

    .pf-ms-search {
        width: 100%;
        border: 0;
        border-bottom: 1px solid #f3f4f6;
        padding: 10px 12px;
        font-size: 13px;
        font-family: inherit;
        outline: none;
    }

    .pf-ms-list {
        max-height: 260px;
        overflow-y: auto;
        padding: 5px;
    }


    .pf-ms-opt {
        display: flex;
        align-items: center;
        padding: 8px 10px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        cursor: pointer;
        margin: 0;
    }

    .pf-ms-opt:hover { background: #f9fafb; }

    .pf-ms-opt input {
        margin: 0 9px 0 0;
        flex-shrink: 0;
        width: 15px;
        height: 15px;
        accent-color: #34BDEB;
        cursor: pointer;
    }

    /* Blade-rendered options have a whitespace text node between the input and
       the span; JS-built ones do not. An explicit margin keeps both identical. */
    .pf-ms-opt > span { flex: 1; }

    .pf-ms-opt:has(input:checked) { color: #0b5f7d; font-weight: 600; }
    .pf-ms-opt.hidden { display: none; }

    .pf-ms-opt.manual span::after {
        content: ' (added)';
        color: #9ca3af;
        font-weight: 400;
        font-size: 11px;
    }

    .pf-ms-msg {
        padding: 16px 12px;
        text-align: center;
        font-size: 12.5px;
        color: #9ca3af;
        grid-column: 1 / -1;
    }

    .pf-ms-group {
        grid-column: 1 / -1;
        padding: 10px 12px 4px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #000;
        border-top: 1px solid #f3f4f6;
    }

    .pf-ms-add {
        display: flex;
        gap: 6px;
        border-top: 1px solid #f3f4f6;
        padding: 8px 10px;
        background: #fbfbfc;
    }

    .pf-ms-add input {
        flex: 1;
        min-width: 0;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        padding: 6px 9px;
        font-size: 12.5px;
        font-family: inherit;
        outline: none;
    }

    .pf-ms-add input:focus { border-color: #34BDEB; }

    .pf-ms-add button {
        flex-shrink: 0;
        border: 0;
        border-radius: 6px;
        background: #34BDEB;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        font-family: inherit;
        padding: 6px 14px;
        cursor: pointer;
    }

    .pf-ms-add button:hover { background: #22a8d4; }

    .pf-ms-foot {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #f3f4f6;
        padding: 7px 10px;
    }

    .pf-ms-foot button {
        background: none;
        border: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: #34BDEB;
        cursor: pointer;
        font-family: inherit;
        padding: 3px 5px;
    }

    .pf-ms-foot button:hover { text-decoration: underline; }

    /* ---- percentage splits ---- */
    .pf-split {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
        gap: 11px;
    }

    .pf-split .pf-field { margin-bottom: 0; }

    .pf-total {
        font-size: 12px;
        font-weight: 600;
        margin-top: 9px;
        padding: 7px 11px;
        border-radius: 6px;
        background: #f3f4f6;
        color: #4b5563;
        display: inline-block;
    }

    .pf-total.ok  { background: #d1fae5; color: #065f46; }
    .pf-total.bad { background: #fee2e2; color: #991b1b; }

    .pf-check {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 13px 15px;
    }

    .pf-check input { margin-top: 2px; flex-shrink: 0; }

    .pf-check label {
        font-size: 12.5px;
        color: #374151;
        line-height: 1.55;
        margin: 0;
        font-weight: 400;
    }

    .pf-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        padding-top: 4px;
        padding-bottom: 30px;
    }

    .pf-alert {
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #991b1b;
        border-radius: 8px;
        padding: 13px 16px;
        font-size: 12.5px;
        margin-bottom: 18px;
    }

    .pf-alert ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.7; }
</style>
@endpush

@section('content')
<div class="pf-wrap">

    @if ($errors->any())
        <div class="pf-alert">
            <strong>Please fix the following:</strong>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="pf-summary">
        <div class="pf-summary-grid">
            <div class="pf-summary-item">
                <span class="lbl">Brand</span>
                <span class="val">{{ $campaign->brand_name ?? '—' }}</span>
            </div>
            <div class="pf-summary-item">
                <span class="lbl">Industry</span>
                <span class="val">{{ $campaign->industry ?: 'Any Industry' }}</span>
            </div>
            <div class="pf-summary-item">
                <span class="lbl">Min Followers</span>
                <span class="val">
                    {{ $campaign->min_followers ? number_format($campaign->min_followers) : 'No minimum' }}
                </span>
            </div>
            <div class="pf-summary-item">
                <span class="lbl">Closes</span>
                <span class="val">
                    {{ $campaign->end_date ? $campaign->end_date->format('d M Y') : 'Open' }}
                </span>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ route('campaigns.proposals.store', $campaign) }}">
        @csrf

        {{-- ─────────── 1. CHANNEL INFORMATION ─────────── --}}
        <div class="pf-card">
            <h3><span class="pf-num">1</span> Channel Information</h3>
            <p class="pf-sub">Where your content is published.</p>

            <div class="pf-row">
                <div class="pf-field">
                    <label>Channel Name <span class="req">*</span></label>
                    <input type="text" name="channel_name"
                           value="{{ old('channel_name', $existing->channel_name ?? auth()->user()->channel_name ?? '') }}"
                           required>
                    @error('channel_name') <div class="pf-error">{{ $message }}</div> @enderror
                </div>

                <div class="pf-field">
                    <label>Social Media Platform <span class="req">*</span></label>
                    <select name="platform" required>
                        <option value="">Select platform</option>
                        @foreach (CP::PLATFORMS as $p)
                            <option value="{{ $p }}"
                                {{ old('platform', $existing->platform ?? '') === $p ? 'selected' : '' }}>
                                {{ $p }}
                            </option>
                        @endforeach
                    </select>
                    @error('platform') <div class="pf-error">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="pf-field">
                <label>Channel / Profile URL <span class="req">*</span></label>
                <input type="url" name="channel_url"
                       placeholder="https://youtube.com/@yourchannel"
                       value="{{ old('channel_url', $existing->channel_url ?? auth()->user()->channel_url ?? '') }}"
                       required>
                @error('channel_url') <div class="pf-error">{{ $message }}</div> @enderror
            </div>

            <div class="pf-row">
                <div class="pf-field">
                    <label>Content Category <span class="req">*</span></label>
                    <div class="pf-ms" data-ms data-placeholder="Select categories">
                        <button type="button" class="pf-ms-toggle">
                            <span class="pf-ms-label empty">Select categories</span>
                            <span class="pf-ms-caret"></span>
                        </button>
                        <div class="pf-ms-panel">
                            <input type="text" class="pf-ms-search" placeholder="Search…">
                            <div class="pf-ms-list">
                                @foreach (CP::CONTENT_CATEGORIES as $opt)
                                    <label class="pf-ms-opt">
                                        <input type="checkbox" name="content_categories[]" value="{{ $opt }}"
                                               {{ in_array($opt, $selCat) ? 'checked' : '' }}>
                                        <span>{{ $opt }}</span>
                                    </label>
                                @endforeach
                            </div>
                            <div class="pf-ms-foot">
                                <button type="button" data-ms-all>Select all</button>
                                <button type="button" data-ms-clear>Clear</button>
                            </div>
                        </div>
                    </div>
                    @error('content_categories') <div class="pf-error">{{ $message }}</div> @enderror
                </div>

                <div class="pf-field">
                    <label>Content Type <span class="req">*</span></label>
                    <div class="pf-ms" data-ms data-placeholder="Select content types">
                        <button type="button" class="pf-ms-toggle">
                            <span class="pf-ms-label empty">Select content types</span>
                            <span class="pf-ms-caret"></span>
                        </button>
                        <div class="pf-ms-panel">
                            <input type="text" class="pf-ms-search" placeholder="Search…">
                            <div class="pf-ms-list">
                                @foreach (CP::CONTENT_TYPES as $opt)
                                    <label class="pf-ms-opt">
                                        <input type="checkbox" name="content_types[]" value="{{ $opt }}"
                                               {{ in_array($opt, $selType) ? 'checked' : '' }}>
                                        <span>{{ $opt }}</span>
                                    </label>
                                @endforeach
                            </div>
                            <div class="pf-ms-foot">
                                <button type="button" data-ms-all>Select all</button>
                                <button type="button" data-ms-clear>Clear</button>
                            </div>
                        </div>
                    </div>
                    @error('content_types') <div class="pf-error">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="pf-row">
                <div class="pf-field">
                    <label>Followers / Subscribers <span class="req">*</span></label>
                    <input type="number" name="follower_count" min="0" required
                           value="{{ old('follower_count', $existing->follower_count ?? auth()->user()->yt_subscriber_count ?? '') }}">
                    @if ($campaign->min_followers)
                        <div class="pf-hint">
                            This campaign requires at least {{ number_format($campaign->min_followers) }}.
                        </div>
                    @endif
                    @error('follower_count') <div class="pf-error">{{ $message }}</div> @enderror
                </div>

                <div class="pf-field">
                    <label>Account Type</label>
                    <select name="account_type">
                        <option value="">Select</option>
                        @foreach (CP::ACCOUNT_TYPES as $a)
                            <option value="{{ $a }}"
                                {{ old('account_type', $existing->account_type ?? '') === $a ? 'selected' : '' }}>
                                {{ $a }}
                            </option>
                        @endforeach
                    </select>
                    @error('account_type') <div class="pf-error">{{ $message }}</div> @enderror
                </div>
            </div>
        </div>

        {{-- ─────────── 2. AUDIENCE INFORMATION ─────────── --}}
        <div class="pf-card">
            <h3><span class="pf-num">2</span> Audience Information</h3>
            <p class="pf-sub">Who actually watches your content.</p>

            {{-- Primary Audience Country — standalone --}}
            <div class="pf-field">
                <label>Primary Audience Country <span class="req">*</span></label>
                <div class="pf-ms" data-ms data-placeholder="Select countries">
                    <button type="button" class="pf-ms-toggle">
                        <span class="pf-ms-label empty">Select countries</span>
                        <span class="pf-ms-caret"></span>
                    </button>
                    <div class="pf-ms-panel">
                        <input type="text" class="pf-ms-search" placeholder="Search countries…">
                        <div class="pf-ms-list">
                            @foreach ($countries as $c)
                                <label class="pf-ms-opt">
                                    <input type="checkbox" name="audience_countries[]" value="{{ $c }}"
                                           {{ in_array($c, $selCountry) ? 'checked' : '' }}>
                                    <span>{{ $c }}</span>
                                </label>
                            @endforeach
                        </div>
                        <div class="pf-ms-foot">
                            <button type="button" data-ms-clear>Clear</button>
                        </div>
                    </div>
                </div>
                <div class="pf-hint">The countries most of your audience lives in.</div>
                @error('audience_countries') <div class="pf-error">{{ $message }}</div> @enderror
            </div>

            {{-- Top Audience Locations — its own Country / State / City cascade --}}
            <div class="pf-field">
                <label>Top Audience Locations <span class="req">*</span></label>
                <div class="pf-hint" style="margin:0 0 9px">
                    Narrow it down. Pick countries, then their states, then cities. Cities are listed for the states you tick.
                </div>

                <div class="pf-row-3">

                    <div class="pf-field">
                        <label style="font-size:11.5px;color:#000">Country</label>
                        <div class="pf-ms" data-ms data-geo="country" data-placeholder="Select countries">
                            <button type="button" class="pf-ms-toggle">
                                <span class="pf-ms-label empty">Select countries</span>
                                <span class="pf-ms-caret"></span>
                            </button>
                            <div class="pf-ms-panel">
                                <input type="text" class="pf-ms-search" placeholder="Search countries…">
                                <div class="pf-ms-list">
                                    @foreach ($countries as $c)
                                        <label class="pf-ms-opt">
                                            <input type="checkbox" name="location_countries[]" value="{{ $c }}"
                                                   {{ in_array($c, $selLocCtry) ? 'checked' : '' }}>
                                            <span>{{ $c }}</span>
                                        </label>
                                    @endforeach
                                </div>
                                <div class="pf-ms-foot">
                                    <button type="button" data-ms-clear>Clear</button>
                                </div>
                            </div>
                        </div>
                        @error('location_countries') <div class="pf-error">{{ $message }}</div> @enderror
                    </div>

                    <div class="pf-field">
                        <label style="font-size:11.5px;color:#000">State / Region</label>
                        <div class="pf-ms" data-ms data-geo="state" data-placeholder="Pick a country first">
                            <button type="button" class="pf-ms-toggle" disabled>
                                <span class="pf-ms-label empty">Pick a country first</span>
                                <span class="pf-ms-caret"></span>
                            </button>
                            <div class="pf-ms-panel">
                                <input type="text" class="pf-ms-search" placeholder="Search states…">
                                <div class="pf-ms-list"></div>
                                <div class="pf-ms-add">
                                    <input type="text" class="pf-ms-manual" placeholder="Not listed? Type a state and press Add">
                                    <button type="button" data-ms-add>Add</button>
                                </div>
                                <div class="pf-ms-foot">
                                    <button type="button" data-ms-all>Select all</button>
                                    <button type="button" data-ms-clear>Clear</button>
                                </div>
                            </div>
                        </div>
                        @error('audience_states') <div class="pf-error">{{ $message }}</div> @enderror
                    </div>

                    <div class="pf-field">
                        <label style="font-size:11.5px;color:#000">City</label>
                        <div class="pf-ms" data-ms data-geo="city" data-placeholder="Pick a state first">
                            <button type="button" class="pf-ms-toggle" disabled>
                                <span class="pf-ms-label empty">Pick a state first</span>
                                <span class="pf-ms-caret"></span>
                            </button>
                            <div class="pf-ms-panel">
                                <input type="text" class="pf-ms-search" placeholder="Search cities…">
                                <div class="pf-ms-list"></div>
                                <div class="pf-ms-add">
                                    <input type="text" class="pf-ms-manual" placeholder="Not listed? Type a city and press Add">
                                    <button type="button" data-ms-add>Add</button>
                                </div>
                                <div class="pf-ms-foot">
                                    <button type="button" data-ms-all>Select all</button>
                                    <button type="button" data-ms-clear>Clear</button>
                                </div>
                            </div>
                        </div>
                        @error('audience_cities') <div class="pf-error">{{ $message }}</div> @enderror
                    </div>

                </div>
            </div>

            <div class="pf-row">
                <div class="pf-field">
                    <label>Primary Audience Language</label>
                    <div class="pf-ms" data-ms data-placeholder="Select languages">
                        <button type="button" class="pf-ms-toggle">
                            <span class="pf-ms-label empty">Select languages</span>
                            <span class="pf-ms-caret"></span>
                        </button>
                        <div class="pf-ms-panel">
                            <input type="text" class="pf-ms-search" placeholder="Search…">
                            <div class="pf-ms-list">
                                @foreach (CP::LANGUAGES as $opt)
                                    <label class="pf-ms-opt">
                                        <input type="checkbox" name="audience_languages[]" value="{{ $opt }}"
                                               {{ in_array($opt, $selLang) ? 'checked' : '' }}>
                                        <span>{{ $opt }}</span>
                                    </label>
                                @endforeach
                            </div>
                            <div class="pf-ms-foot">
                                <button type="button" data-ms-clear>Clear</button>
                            </div>
                        </div>
                    </div>
                    @error('audience_languages') <div class="pf-error">{{ $message }}</div> @enderror
                </div>

                <div class="pf-field">
                    <label>Audience Interests <span class="req">*</span></label>
                    <div class="pf-ms" data-ms data-placeholder="Select interests">
                        <button type="button" class="pf-ms-toggle">
                            <span class="pf-ms-label empty">Select interests</span>
                            <span class="pf-ms-caret"></span>
                        </button>
                        <div class="pf-ms-panel">
                            <input type="text" class="pf-ms-search" placeholder="Search…">
                            <div class="pf-ms-list">
                                @foreach (CP::AUDIENCE_INTERESTS as $opt)
                                    <label class="pf-ms-opt">
                                        <input type="checkbox" name="audience_interests[]" value="{{ $opt }}"
                                               {{ in_array($opt, $selInt) ? 'checked' : '' }}>
                                        <span>{{ $opt }}</span>
                                    </label>
                                @endforeach
                            </div>
                            <div class="pf-ms-foot">
                                <button type="button" data-ms-all>Select all</button>
                                <button type="button" data-ms-clear>Clear</button>
                            </div>
                        </div>
                    </div>
                    @error('audience_interests') <div class="pf-error">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="pf-field">
                <label>Audience Age Distribution <span class="req">*</span></label>
                <div class="pf-split">
                    @foreach (CP::AGE_RANGES as $range)
                        <div class="pf-field">
                            <label style="font-size:11.5px;color:#000">{{ $range }}</label>
                            <input type="number" class="age-pct"
                                   name="audience_age_distribution[{{ $range }}]"
                                   min="0" max="100" step="0.1" placeholder="0"
                                   value="{{ $ages[$range] ?? '' }}">
                        </div>
                    @endforeach
                </div>
                <div class="pf-total" id="ageTotal">Total: 0%</div>
                <div class="pf-hint">Must add up to 100%.</div>
                @error('audience_age_distribution') <div class="pf-error">{{ $message }}</div> @enderror
            </div>

            <div class="pf-field">
                <label>Audience Gender Distribution <span class="req">*</span></label>
                <div class="pf-row-3">
                    @foreach (CP::GENDERS as $g)
                        <div class="pf-field">
                            <label style="font-size:11.5px;color:#000">{{ $g }}</label>
                            <input type="number" class="gender-pct"
                                   name="audience_gender_distribution[{{ $g }}]"
                                   min="0" max="100" step="0.1" placeholder="0"
                                   value="{{ $genders[$g] ?? '' }}">
                        </div>
                    @endforeach
                </div>
                <div class="pf-total" id="genderTotal">Total: 0%</div>
                <div class="pf-hint">Must add up to 100%.</div>
                @error('audience_gender_distribution') <div class="pf-error">{{ $message }}</div> @enderror
            </div>
        </div>

        {{-- ─────────── 3. CHANNEL PERFORMANCE ─────────── --}}
        <div class="pf-card">
            <h3><span class="pf-num">3</span> Channel Performance</h3>
            <p class="pf-sub">Your typical numbers across recent content.</p>

            <div class="pf-row-3">
                <div class="pf-field">
                    <label>Engagement Rate (%) <span class="req">*</span></label>
                    <input type="number" name="engagement_rate" min="0" max="100" step="0.01" required
                           placeholder="e.g. 4.5"
                           value="{{ old('engagement_rate', $existing->engagement_rate ?? '') }}">
                    @error('engagement_rate') <div class="pf-error">{{ $message }}</div> @enderror
                </div>

                <div class="pf-field">
                    <label>Average Views <span class="req">*</span></label>
                    <input type="number" name="avg_views" min="0" required
                           value="{{ old('avg_views', $existing->avg_views ?? '') }}">
                    @error('avg_views') <div class="pf-error">{{ $message }}</div> @enderror
                </div>

                <div class="pf-field">
                    <label>Average Likes <span class="req">*</span></label>
                    <input type="number" name="avg_likes" min="0" required
                           value="{{ old('avg_likes', $existing->avg_likes ?? '') }}">
                    @error('avg_likes') <div class="pf-error">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="pf-row-3">
                <div class="pf-field">
                    <label>Average Comments <span class="req">*</span></label>
                    <input type="number" name="avg_comments" min="0" required
                           value="{{ old('avg_comments', $existing->avg_comments ?? '') }}">
                    @error('avg_comments') <div class="pf-error">{{ $message }}</div> @enderror
                </div>

                <div class="pf-field">
                    <label>Average Shares</label>
                    <input type="number" name="avg_shares" min="0"
                           value="{{ old('avg_shares', $existing->avg_shares ?? '') }}">
                    @error('avg_shares') <div class="pf-error">{{ $message }}</div> @enderror
                </div>

                <div class="pf-field">
                    <label>Average Saves</label>
                    <input type="number" name="avg_saves" min="0"
                           value="{{ old('avg_saves', $existing->avg_saves ?? '') }}">
                    @error('avg_saves') <div class="pf-error">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="pf-row-3">
                <div class="pf-field">
                    <label>Average Story Views</label>
                    <input type="number" name="avg_story_views" min="0"
                           value="{{ old('avg_story_views', $existing->avg_story_views ?? '') }}">
                    @error('avg_story_views') <div class="pf-error">{{ $message }}</div> @enderror
                </div>

                <div class="pf-field">
                    <label>Average Reel / Video Views</label>
                    <input type="number" name="avg_reel_video_views" min="0"
                           value="{{ old('avg_reel_video_views', $existing->avg_reel_video_views ?? '') }}">
                    @error('avg_reel_video_views') <div class="pf-error">{{ $message }}</div> @enderror
                </div>

                <div class="pf-field">
                    <label>Average Monthly Reach</label>
                    <input type="number" name="avg_monthly_reach" min="0"
                           value="{{ old('avg_monthly_reach', $existing->avg_monthly_reach ?? '') }}">
                    @error('avg_monthly_reach') <div class="pf-error">{{ $message }}</div> @enderror
                </div>
            </div>
        </div>

        {{-- ─────────── TERMS ─────────── --}}
        <div class="pf-card">
            <div class="pf-check">
                <input type="checkbox" name="agreed_to_terms" id="agreed_to_terms" value="1"
                       {{ old('agreed_to_terms') ? 'checked' : '' }} required>
                <label for="agreed_to_terms">
                    I confirm the details above are accurate, and that I can deliver the required
                    content within the stated timeline and quality standard.
                </label>
            </div>
            @error('agreed_to_terms') <div class="pf-error">{{ $message }}</div> @enderror
        </div>

        <div class="pf-actions">
            <a href="{{ route('campaigns.show', $campaign) }}" class="btn btn-ghost">Cancel</a>
            <button type="submit" class="btn btn-primary">Send Proposal</button>
        </div>

    </form>
</div>

<script>
(function () {

    const STATES_URL = @json(route('geo.states'));
    const CITIES_URL = @json(route('geo.cities'));
    const KEEP_STATE = @json(array_values($selState));
    const KEEP_CITY  = @json(array_values($selCity));

    // Cities are searched on the server and capped at 300, so the list is
    // rebuilt on every search. Ticked cities are remembered here (name → state)
    // so they survive a new search or another state being added.
    const citySel = new Map();
    let cityReq   = 0;

    /* ────────────── generic multi-select ────────────── */

    function setup(ms) {
        const toggle = ms.querySelector('.pf-ms-toggle');
        const label  = ms.querySelector('.pf-ms-label');
        const search = ms.querySelector('.pf-ms-search');
        const list   = ms.querySelector('.pf-ms-list');
        const panel  = ms.querySelector('.pf-ms-panel');
        const allBtn = ms.querySelector('[data-ms-all]');
        const clrBtn = ms.querySelector('[data-ms-clear]');
        const manual = ms.querySelector('.pf-ms-manual');
        const addBtn = ms.querySelector('[data-ms-add]');

        ms._holder = ms.dataset.placeholder || 'Select';

        ms.boxes   = () => list.querySelectorAll('input[type="checkbox"]');
        ms.opts    = () => list.querySelectorAll('.pf-ms-opt');
        ms.checked = () => Array.from(ms.boxes()).filter(b => b.checked).map(b => b.value);

        ms.refresh = function () {
            if (ms.dataset.geo === 'city') {
                ms.boxes().forEach(function (b) {
                    if (b.checked) {
                        if (!citySel.get(b.value)) citySel.set(b.value, b.dataset.state || null);
                    } else {
                        citySel.delete(b.value);
                    }
                });
            }

            const picked = ms.checked();

            if (picked.length === 0) {
                label.textContent = ms._holder;
                label.classList.add('empty');
            } else {
                label.textContent = picked.join(', ');
                label.classList.remove('empty');
            }
        };

        ms.bindBoxes = function () {
            ms.boxes().forEach(function (b) {
                if (b._bound) return;
                b._bound = true;
                b.addEventListener('change', function () {
                    ms.refresh();
                    if (ms.dataset.geo === 'country') buildStates();
                    if (ms.dataset.geo === 'state')   buildCities();
                });
            });
        };

        ms.setEnabled = function (on, holder) {
            toggle.disabled = !on;
            if (holder) ms._holder = holder;
            ms.refresh();
        };

        ms.addManual = function (value) {
            value = (value || '').trim();
            if (!value) return;

            const match = Array.from(ms.boxes())
                .filter(b => b.value.toLowerCase() === value.toLowerCase());

            if (match.length) {
                match.forEach(b => b.checked = true);
                ms.refresh();
                if (ms.dataset.geo === 'state') buildCities();
                return;
            }

            const field = ms.dataset.geo === 'state' ? 'audience_states' : 'audience_cities';

            const lab = document.createElement('label');
            lab.className = 'pf-ms-opt manual';

            const box = document.createElement('input');
            box.type    = 'checkbox';
            box.name    = field + '[]';
            box.value   = value;
            box.checked = true;

            const span = document.createElement('span');
            span.textContent = value;

            lab.appendChild(box);
            lab.appendChild(span);

            const msg = list.querySelector('.pf-ms-msg');
            if (msg) msg.remove();

            list.insertBefore(lab, list.firstChild);

            ms.bindBoxes();
            ms.refresh();

            if (ms.dataset.geo === 'state') buildCities();
        };

        toggle.addEventListener('click', function (e) {
            e.stopPropagation();
            if (toggle.disabled) return;
            const wasOpen = ms.classList.contains('open');
            document.querySelectorAll('[data-ms]').forEach(g => g.classList.remove('open'));
            if (!wasOpen) {
                ms.classList.add('open');
                if (search) search.focus();
            }
        });

        panel.addEventListener('click', e => e.stopPropagation());

        if (search) {
            search.addEventListener('input', function () {
                const q = this.value.trim().toLowerCase();

                // cities live in a 150k row table — filter on the server
                if (ms.dataset.geo === 'city') {
                    clearTimeout(ms._t);
                    ms._t = setTimeout(() => buildCities(q), 280);
                    return;
                }

                ms.opts().forEach(function (o) {
                    const txt = o.textContent.toLowerCase();
                    o.classList.toggle('hidden', q !== '' && txt.indexOf(q) === -1);
                });
            });
        }

        if (allBtn) {
            allBtn.addEventListener('click', function () {
                ms.opts().forEach(function (o) {
                    if (!o.classList.contains('hidden')) o.querySelector('input').checked = true;
                });
                ms.refresh();
                if (ms.dataset.geo === 'state') buildCities();
            });
        }

        if (clrBtn) {
            clrBtn.addEventListener('click', function () {
                // manual entries stay — they cannot be rebuilt from the config
                ms.boxes().forEach(function (b) {
                    if (!b.closest('.pf-ms-opt').classList.contains('manual')) b.checked = false;
                });
                ms.refresh();
                if (ms.dataset.geo === 'country') buildStates();
                if (ms.dataset.geo === 'state')   buildCities();
            });
        }

        if (addBtn && manual) {
            addBtn.addEventListener('click', function () {
                ms.addManual(manual.value);
                manual.value = '';
                manual.focus();
            });

            manual.addEventListener('keydown', function (e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    ms.addManual(manual.value);
                    manual.value = '';
                }
            });
        }

        ms.bindBoxes();
        ms.refresh();
        return ms;
    }

    const all     = Array.from(document.querySelectorAll('[data-ms]')).map(setup);
    const country = all.find(m => m.dataset.geo === 'country');
    const state   = all.find(m => m.dataset.geo === 'state');
    const city    = all.find(m => m.dataset.geo === 'city');

    document.addEventListener('click', function () {
        all.forEach(g => g.classList.remove('open'));
    });

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') all.forEach(g => g.classList.remove('open'));
    });

    /* ────────────── cascading geography ────────────── */

    function makeOpt(field, name, st, checked) {
        const lab = document.createElement('label');
        lab.className = 'pf-ms-opt';

        const box = document.createElement('input');
        box.type    = 'checkbox';
        box.name    = field + '[]';
        box.value   = name;
        box.checked = checked;
        if (st) box.dataset.state = st;

        const span = document.createElement('span');
        span.textContent = name;

        lab.appendChild(box);
        lab.appendChild(span);
        return lab;
    }

    function fill(ms, rows, field, keep, note, sticky) {
        const list = ms.querySelector('.pf-ms-list');

        const manual = Array.from(list.querySelectorAll('.pf-ms-opt.manual'));
        list.innerHTML = '';
        manual.forEach(m => list.appendChild(m));

        const seen   = new Set(manual.map(m => m.querySelector('input').value.toLowerCase()));
        const byName = {};
        rows.forEach(r => byName[r.name.toLowerCase()] = r);

        // Already-picked values stay in the list (ticked, at the top) even
        // when the current results do not include them.
        (sticky || []).forEach(function (name) {
            const key = name.toLowerCase();
            if (seen.has(key)) return;
            seen.add(key);
            const row = byName[key];
            list.appendChild(makeOpt(field, name, row ? row.state : null, true));
        });

        if (note) {
            const msg = document.createElement('div');
            msg.className = 'pf-ms-msg';
            msg.textContent = note;
            list.appendChild(msg);
        }

        const grouped = field === 'audience_cities';
        let lastGroup = null;

        rows.forEach(function (row) {
            if (seen.has(row.name.toLowerCase())) return;
            seen.add(row.name.toLowerCase());

            if (grouped && row.state) {
                const g = row.state + (row.country ? ', ' + row.country : '');
                if (g !== lastGroup) {
                    const h = document.createElement('div');
                    h.className = 'pf-ms-group';
                    h.textContent = g;
                    list.appendChild(h);
                    lastGroup = g;
                }
            }

            list.appendChild(makeOpt(field, row.name, row.state, keep.indexOf(row.name) !== -1));
        });

        ms.bindBoxes();
        ms.refresh();
    }

    function buildStates() {
        const picked = country.checked();
        const keep   = state.checked();

        if (picked.length === 0) {
            fill(state, [], 'audience_states', [], 'Pick a country first');
            state.setEnabled(false, 'Pick a country first');
            fill(city, [], 'audience_cities', [], 'Pick a state first');
            city.setEnabled(false, 'Pick a state first');
            return;
        }

        const qs = picked.map(c => 'countries[]=' + encodeURIComponent(c)).join('&');

        fill(state, [], 'audience_states', [], 'Loading…');
        state.setEnabled(true, 'Loading…');

        fetch(STATES_URL + '?' + qs, { headers: { 'Accept': 'application/json' } })
            .then(r => r.json())
            .then(function (res) {
                const rows    = (res.items || []).map(r => ({ name: r.name }));
                const missing = res.missing || [];

                let note = null;

                if (rows.length === 0) {
                    note = 'No states listed for ' + picked.join(', ') + ' — add one below';
                } else if (missing.length) {
                    note = 'No states listed for ' + missing.join(', ') + ' — add them below';
                }

                fill(state, rows, 'audience_states', keep, note);
                state.setEnabled(true, rows.length ? 'Select states' : 'Add a state');
                buildCities();
            })
            .catch(function () {
                fill(state, [], 'audience_states', [], 'Could not load states — add one below');
                state.setEnabled(true, 'Add a state');
            });
    }

    function cityQuery(states) {
        return states.map(st => 'states[]=' + encodeURIComponent(st))
            .concat(country.checked().map(c => 'countries[]=' + encodeURIComponent(c)))
            .join('&');
    }

    function buildCities(term) {
        const picked = state.checked();

        // Forget cities whose state was just unticked. Cities with no known
        // state (typed in by hand) are kept.
        citySel.forEach(function (st, name) {
            if (st && picked.indexOf(st) === -1) citySel.delete(name);
        });

        const keep = Array.from(citySel.keys());
        const req  = ++cityReq;

        if (picked.length === 0) {
            fill(city, [], 'audience_cities', [], 'Pick a state first');
            city.setEnabled(false, 'Pick a state first');
            return;
        }

        let qs = cityQuery(picked);
        if (term) qs += '&q=' + encodeURIComponent(term);

        fill(city, [], 'audience_cities', [], 'Loading…', keep);
        city.setEnabled(true, 'Loading…');

        fetch(CITIES_URL + '?' + qs, { headers: { 'Accept': 'application/json' } })
            .then(r => r.json())
            .then(function (res) {
                if (req !== cityReq) return; // a newer search has started

                const rows  = (res.items || []).map(r => ({ name: r.name, state: r.state, country: r.country }));
                const empty = res.empty || [];

                let note = null;
                if (rows.length === 0) {
                    note = term
                        ? 'No city matching "' + term + '" in ' + picked.join(', ')
                          + '. Only cities in the states you picked are searched. Tick more states, or add it below.'
                        : 'No cities listed for ' + picked.join(', ') + ' — add one below';
                } else if (empty.length) {
                    note = (term ? 'No match in ' : 'No cities listed for ') + empty.join(', ');
                }

                fill(city, rows, 'audience_cities', keep, note, keep);
                city.setEnabled(true, rows.length ? 'Select cities' : 'Add a city');

                if (res.truncated) {
                    const msg = document.createElement('div');
                    msg.className = 'pf-ms-msg';
                    msg.textContent = 'Showing the first cities of each state. Type to find others.';
                    city.querySelector('.pf-ms-list').appendChild(msg);
                }
            })
            .catch(function () {
                if (req !== cityReq) return;
                fill(city, [], 'audience_cities', [], 'Could not load cities — add one below', keep);
                city.setEnabled(true, 'Add a city');
            });
    }

    /* restore after a validation error, including manual entries */
    if (country.checked().length) {
        const qs = country.checked().map(c => 'countries[]=' + encodeURIComponent(c)).join('&');

        fetch(STATES_URL + '?' + qs, { headers: { 'Accept': 'application/json' } })
            .then(r => r.json())
            .then(function (res) {
                const rows = (res.items || []).map(r => ({ name: r.name }));
                fill(state, rows, 'audience_states', KEEP_STATE);
                state.setEnabled(true, rows.length ? 'Select states' : 'Add a state');

                KEEP_STATE.forEach(function (v) {
                    const hit = Array.from(state.boxes()).filter(b => b.value === v);
                    if (hit.length) hit.forEach(b => b.checked = true);
                    else state.addManual(v);
                });
                state.refresh();

                if (!state.checked().length) return;

                const cqs = cityQuery(state.checked());

                return fetch(CITIES_URL + '?' + cqs, { headers: { 'Accept': 'application/json' } })
                    .then(r => r.json())
                    .then(function (cres) {
                        const crows = (cres.items || []).map(r => ({ name: r.name, state: r.state, country: r.country }));
                        KEEP_CITY.forEach(v => citySel.set(v, null));
                        fill(city, crows, 'audience_cities', KEEP_CITY, null, KEEP_CITY);
                        city.setEnabled(true, crows.length ? 'Select cities' : 'Add a city');
                    });
            })
            .catch(function () {
                KEEP_STATE.forEach(v => state.addManual(v));
                KEEP_CITY.forEach(v => city.addManual(v));
                state.setEnabled(true, 'Add a state');
                city.setEnabled(true, 'Add a city');
            });
    } else {
        state.setEnabled(false, 'Pick a country first');
        city.setEnabled(false, 'Pick a state first');
    }

    /* ────────────── percentage totals ────────────── */

    function wireTotals(selector, boxId) {
        const inputs = document.querySelectorAll(selector);
        const box    = document.getElementById(boxId);
        if (!box) return;

        function refresh() {
            let total = 0;
            inputs.forEach(i => total += parseFloat(i.value) || 0);
            total = Math.round(total * 10) / 10;

            box.textContent = 'Total: ' + total + '%';
            box.classList.remove('ok', 'bad');
            if (total === 0) return;
            box.classList.add(Math.abs(total - 100) < 0.5 ? 'ok' : 'bad');
        }

        inputs.forEach(i => i.addEventListener('input', refresh));
        refresh();
    }

    wireTotals('.age-pct', 'ageTotal');
    wireTotals('.gender-pct', 'genderTotal');

})();
</script>
@endsection