@extends('layouts.app')

@section('title', isset($campaign) ? 'Edit Campaign' : 'New Campaign')
@section('page-title', isset($campaign) ? 'Edit Campaign' : 'New Campaign')
@section('page-subtitle', isset($campaign) ? $campaign->name : 'Set up a new influencer campaign')

@push('styles')
    <style>
        .page-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 300px;
            gap: 24px;
            align-items: start;
            width: 100%;
        }

        @media (max-width: 1000px) {
            .page-grid {
                grid-template-columns: 1fr;
            }

            .page-side {
                order: -1;
            }
        }

        .form-sections {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-bottom: 24px;
            border-bottom: 2px solid #e5e7eb;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 0;
        }

        .section-tabs {
            display: flex;
            gap: 0;
            min-width: max-content;
        }

        .section-tab {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 10px 16px;
            font-size: 12.5px;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border: none;
            background: none;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            margin-bottom: -2px;
            white-space: nowrap;
            transition: color 0.15s, border-color 0.15s;
        }

        .section-tab:hover {
            color: #111827;
        }

        .section-tab.active {
            color: #34BDEB;
            border-bottom-color: #34BDEB;
        }

        .section-tab .tab-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #e5e7eb;
            font-size: 10px;
            font-weight: 700;
            color: #6b7280;
            line-height: 1;
        }

        .section-tab.active .tab-badge {
            background: #34BDEB;
            color: #fff;
        }

        .section-panel {
            display: none;
        }

        .section-panel.active {
            display: block;
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px 20px;
        }

        .form-grid .col-span-2 {
            grid-column: 1 / -1;
        }

        .form-grid .col-span-3 {
            grid-column: 1 / -1;
        }

        @media (max-width: 640px) {
            .form-grid {
                grid-template-columns: 1fr;
            }
        }

        .form-group {
            margin-bottom: 0;
        }

        .form-label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 6px;
        }

        .form-label .required {
            color: #dc2626;
            margin-left: 2px;
        }

        .form-label .optional {
            font-weight: 400;
            text-transform: none;
            letter-spacing: 0;
            color: #9ca3af;
            font-size: 11px;
            margin-left: 4px;
        }

        .form-hint {
            font-size: 11.5px;
            color: #9ca3af;
            margin-top: 5px;
            line-height: 1.4;
        }

        .form-control {
            width: 100%;
            background: #f9fafb;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            color: #111827;
            padding: 9px 12px;
            font-size: 13.5px;
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s;
            box-sizing: border-box;
        }

        .form-control:focus {
            border-color: #34BDEB;
            box-shadow: 0 0 0 3px rgba(52, 189, 235, 0.12);
            background: #fff;
        }

        .form-control::placeholder {
            color: #9ca3af;
        }

        textarea.form-control {
            resize: vertical;
            min-height: 90px;
        }

        .form-error {
            font-size: 12px;
            color: #dc2626;
            margin-top: 4px;
        }


        .check-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 8px;
        }

        .check-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            color: #374151;
            transition: border-color 0.15s, background 0.15s;
            user-select: none;
        }

        .check-item:hover {
            border-color: #34BDEB;
            background: #f0fbff;
        }

        .check-item input[type="checkbox"] {
            accent-color: #34BDEB;
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }

        .check-item input[type="checkbox"]:checked+span {
            color: #111827;
            font-weight: 500;
        }

        .check-item:has(input:checked) {
            border-color: #34BDEB;
            background: #f0fbff;
        }

        .radio-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .radio-pill {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 7px 14px;
            border: 1px solid #d1d5db;
            border-radius: 20px;
            cursor: pointer;
            font-size: 13px;
            color: #374151;
            transition: all 0.15s;
            user-select: none;
        }

        .radio-pill:hover {
            border-color: #34BDEB;
            color: #111827;
        }

        .radio-pill input[type="radio"] {
            display: none;
        }

        .radio-pill:has(input:checked) {
            border-color: #34BDEB;
            background: #34BDEB;
            color: #fff;
            font-weight: 600;
        }

        .toggle-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
        }

        .toggle-label {
            font-size: 13.5px;
            color: #374151;
        }

        .toggle-sub {
            font-size: 11.5px;
            color: #9ca3af;
            margin-top: 1px;
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 22px;
            flex-shrink: 0;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            inset: 0;
            background: #d1d5db;
            border-radius: 22px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .toggle-slider::before {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            left: 3px;
            top: 3px;
            background: #fff;
            border-radius: 50%;
            transition: transform 0.2s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        }

        .toggle-switch input:checked+.toggle-slider {
            background: #34BDEB;
        }

        .toggle-switch input:checked+.toggle-slider::before {
            transform: translateX(18px);
        }

        .rule-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .rule-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            font-size: 13px;
            color: #374151;
            background: #f9fafb;
        }

        .rule-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            flex-shrink: 0;
            font-weight: 700;
        }

        .rule-icon.reject {
            background: #fee2e2;
            color: #dc2626;
        }

        .rule-icon.approve {
            background: #dcfce7;
            color: #16a34a;
        }

        .rule-item input[type="checkbox"] {
            accent-color: #34BDEB;
            margin-left: auto;
            flex-shrink: 0;
        }

        .input-prefix-group {
            display: flex;
        }

        .input-prefix {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 12px;
            background: #e5e7eb;
            border: 1px solid #d1d5db;
            border-right: none;
            border-radius: 6px 0 0 6px;
            font-size: 13px;
            font-weight: 600;
            color: #6b7280;
            white-space: nowrap;
        }

        .input-prefix-group .form-control {
            border-radius: 0 6px 6px 0;
        }

        .sub-heading {
            font-size: 12px;
            font-weight: 700;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding-bottom: 8px;
            border-bottom: 1px solid #f3f4f6;
            margin-bottom: 16px;
            margin-top: 24px;
            grid-column: 1 / -1;
        }

        .sub-heading:first-child {
            margin-top: 0;
        }

        .form-footer {
            display: flex;
            gap: 10px;
            align-items: center;
            padding-top: 20px;
            margin-top: 24px;
            border-top: 1px solid #e5e7eb;
        }

        .form-nav {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-left: auto;
        }

        .side-card {
            position: sticky;
            top: 24px;
        }

        .progress-steps {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .progress-step {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.15s;
            border: 1px solid transparent;
        }

        .progress-step:hover {
            background: #f9fafb;
        }

        .progress-step.active {
            background: #f0fbff;
            border-color: #b3e8f8;
        }

        .progress-step.done {
            opacity: 0.65;
        }

        .step-num {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            background: #e5e7eb;
            color: #6b7280;
            flex-shrink: 0;
        }

        .progress-step.active .step-num {
            background: #34BDEB;
            color: #fff;
        }

        .progress-step.done .step-num {
            background: #16a34a;
            color: #fff;
        }

        .step-label {
            font-size: 13px;
            color: #374151;
            line-height: 1.3;
        }

        .step-sublabel {
            font-size: 11.5px;
            color: #9ca3af;
        }

        .side-heading {
            font-size: 12px;
            font-weight: 700;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 10px;
        }

        .status-legend {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 14px;
        }

        .status-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12.5px;
            color: #374151;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .status-dot.draft {
            background: #9ca3af;
        }

        .status-dot.active {
            background: #16a34a;
        }

        .status-dot.paused {
            background: #f59e0b;
        }

        .status-dot.completed {
            background: #2563eb;
        }

        .file-upload-zone {
            border: 2px dashed #d1d5db;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
            background: #f9fafb;
        }

        .file-upload-zone:hover {
            border-color: #34BDEB;
            background: #f0fbff;
        }

        .file-upload-zone input[type="file"] {
            display: none;
        }

        .file-upload-icon {
            font-size: 22px;
            margin-bottom: 6px;
        }

        .file-upload-text {
            font-size: 13px;
            color: #6b7280;
        }

        .file-upload-text strong {
            color: #34BDEB;
        }

        .tag-input-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            padding: 7px 10px;
            background: #f9fafb;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            min-height: 42px;
            cursor: text;
            transition: border-color 0.15s, box-shadow 0.15s;
        }

        .tag-input-wrap:focus-within {
            border-color: #34BDEB;
            box-shadow: 0 0 0 3px rgba(52, 189, 235, 0.12);
            background: #fff;
        }

        .tag-input-wrap .tag {
            display: flex;
            align-items: center;
            gap: 4px;
            background: #e0f5fd;
            color: #0369a1;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .tag-input-wrap .tag button {
            background: none;
            border: none;
            cursor: pointer;
            color: #0369a1;
            font-size: 13px;
            padding: 0;
            line-height: 1;
        }

        .tag-input-wrap input {
            border: none;
            outline: none;
            background: transparent;
            font-size: 13.5px;
            color: #111827;
            min-width: 80px;
            flex: 1;
        }

        .tag-input-wrap input::placeholder {
            color: #9ca3af;
        }

        /* ── Payment model dynamic sections ── */
        .payment-fields-section {
            display: none;
            grid-column: 1 / -1;
        }

        .payment-fields-section.visible {
            display: contents;
        }

        .payment-fields-section .sub-heading {
            grid-column: 1 / -1;
        }
    </style>
@endpush

@section('content')
    <form method="POST" action="{{ isset($campaign) ? route('campaigns.update', $campaign) : route('campaigns.store') }}"
        enctype="multipart/form-data" id="campaignForm">
        @csrf
        @if (isset($campaign))
            @method('PUT')
        @endif

        <div class="page-grid">
            {{-- ── MAIN FORM ── --}}
            <div class="page-main">
                <div class="card">
                    <div class="card-body" style="padding-bottom: 0;">
                        {{-- Section tabs --}}
                        <div class="form-sections">
                            <div class="section-tabs">
                                <button type="button" class="section-tab active" data-section="basics">
                                    Basics
                                </button>
                                <button type="button" class="section-tab" data-section="eligibility">
                                    Eligibility
                                </button>
                                <button type="button" class="section-tab" data-section="payment">
                                    Payment
                                </button>
                                <button type="button" class="section-tab" data-section="content">
                                    Content Brief
                                </button>
                                <button type="button" class="section-tab" data-section="compliance">
                                    Compliance
                                </button>
                                <button type="button" class="section-tab" data-section="approval">
                                    Approval Rules
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="card-body" style="padding-top: 4px;">

                        {{-- ── BASICS ── --}}
                        <div class="section-panel active" id="section-basics">
                            <div class="form-grid">
                                <div class="sub-heading">Campaign overview</div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Campaign Name <span class="required">*</span></label>
                                    <input type="text" name="name" class="form-control"
                                        value="{{ old('name', $campaign->name ?? '') }}"
                                        placeholder="e.g. Summer Product Launch 2026" required>
                                    @error('name')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Brand / Product / Service <span
                                            class="required">*</span></label>
                                    <input type="text" name="brand_name" class="form-control"
                                        value="{{ old('brand_name', $campaign->brand_name ?? '') }}"
                                        placeholder="e.g. Arissa CRM, Nike Air Max">
                                    @error('brand_name')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Industry / Category <span class="required">*</span></label>
                                    <select name="industry" class="form-control">
                                        <option value="">Select industry…</option>
                                        <option value="any_industry"
                                            {{ old('industry', $campaign->industry ?? '') === 'any_industry' ? 'selected' : '' }}>
                                            Any
                                            Industry</option>
                                        @foreach (['Fashion & Apparel', 'Beauty & Skincare', 'Health & Wellness', 'Food & Beverage', 'Technology & SaaS', 'Consumer Electronics', 'Finance & Fintech', 'Travel & Hospitality', 'Education & E-learning', 'Home & Lifestyle', 'Sports & Fitness', 'Entertainment & Media', 'Automotive', 'Real Estate', 'B2B / Professional Services', 'Other'] as $ind)
                                            <option value="{{ $ind }}"
                                                {{ old('industry', $campaign->industry ?? '') === $ind ? 'selected' : '' }}>
                                                {{ $ind }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('industry')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Campaign Objective <span class="required">*</span></label>
                                    <input type="text" name="objective" class="form-control"
                                        value="{{ old('objective', $campaign->objective ?? '') }}"
                                        placeholder="e.g. Drive brand awareness among urban millennials, generate 500 leads for product X…">
                                    <div class="form-hint">Describe the primary goal of this campaign in your own words.
                                    </div>
                                    @error('objective')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Description</label>
                                    <textarea name="description" class="form-control"
                                        placeholder="Describe campaign goals, key messages, and expected deliverables…">{{ old('description', $campaign->description ?? '') }}</textarea>
                                    @error('description')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Target Audience</label>
                                    <textarea name="target_audience" class="form-control" style="min-height:70px;"
                                        placeholder="e.g. Women 25–35 interested in skincare, urban India, tier 1 cities…">{{ old('target_audience', $campaign->target_audience ?? '') }}</textarea>
                                    @error('target_audience')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="sub-heading">Schedule &amp; ownership</div>

                                <div class="form-group">
                                    <label class="form-label">Start Date</label>
                                    <input type="date" name="start_date" class="form-control"
                                        value="{{ old('start_date', isset($campaign) ? \Carbon\Carbon::parse($campaign->start_date)->format('Y-m-d') : '') }}">
                                    @error('start_date')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">End Date</label>
                                    <input type="date" name="end_date" class="form-control"
                                        value="{{ old('end_date', isset($campaign) ? \Carbon\Carbon::parse($campaign->end_date)->format('Y-m-d') : '') }}">
                                    @error('end_date')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Status</label>
                                    <select name="status" class="form-control">
                                        @foreach (['draft', 'active', 'paused', 'completed'] as $s)
                                            <option value="{{ $s }}"
                                                {{ old('status', $campaign->status ?? 'draft') === $s ? 'selected' : '' }}>
                                                {{ ucfirst($s) }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('status')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Campaign Manager</label>
                                    <select name="campaign_manager" class="form-control">
                                        <option value="">-- Select Manager --</option>
                                        @foreach ($managers as $id => $name)
                                            <option value="{{ $name }}"
                                                {{ old('campaign_manager', $campaign->campaign_manager ?? '') === $name ? 'selected' : '' }}>
                                                {{ $name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('campaign_manager')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-footer">
                                <a href="{{ route('campaigns.index') }}" class="btn btn-ghost">Cancel</a>
                                <div class="form-nav">
                                    <button type="button" class="btn btn-primary" data-next="eligibility">
                                        Next: Eligibility →
                                    </button>
                                </div>
                            </div>
                        </div>

                        {{-- ── ELIGIBILITY ── --}}
                        <div class="section-panel" id="section-eligibility">
                            <div class="form-grid">
                                <div class="sub-heading">Platforms</div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Allowed Platforms</label>
                                    <div class="check-grid">
                                        @foreach (['Instagram', 'YouTube'] as $platform)
                                            <label class="check-item">
                                                <input type="checkbox" name="allowed_platforms[]"
                                                    value="{{ $platform }}"
                                                    {{ in_array($platform, old('allowed_platforms', $campaign->allowed_platforms ?? [])) ? 'checked' : '' }}>
                                                <span>{{ $platform }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                    @error('allowed_platforms')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="sub-heading">Audience size requirements</div>

                                <div class="form-group">
                                    <label class="form-label">Minimum Followers / Subscribers</label>
                                    <input type="number" name="min_followers" class="form-control"
                                        value="{{ old('min_followers', $campaign->min_followers ?? '') }}"
                                        placeholder="e.g. 10000" min="0">
                                    @error('min_followers')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Minimum Average Views</label>
                                    <input type="number" name="min_avg_views" class="form-control"
                                        value="{{ old('min_avg_views', $campaign->min_avg_views ?? '') }}"
                                        placeholder="e.g. 5000" min="0">
                                    @error('min_avg_views')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="sub-heading">Location &amp; language</div>

                                <div class="form-group">
                                    <label class="form-label">Country / City Eligibility</label>
                                    <input type="text" name="geo_eligibility" class="form-control"
                                        value="{{ old('geo_eligibility', $campaign->geo_eligibility ?? '') }}"
                                        placeholder="e.g. India, US, UK — or leave blank for global">
                                    @error('geo_eligibility')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Language Requirement</label>
                                    <input type="text" name="language_requirement" class="form-control"
                                        value="{{ old('language_requirement', $campaign->language_requirement ?? '') }}"
                                        placeholder="e.g. English, Hindi, or any">
                                    @error('language_requirement')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>


                                <div class="sub-heading">Audience profile</div>

                                <div class="form-group">
                                    <label class="form-label">Gender Preference
                                        <span class="optional">(only if legally appropriate)</span>
                                    </label>
                                    <select name="gender_preference" class="form-control">
                                        <option value="">No preference</option>
                                        <option value="any"
                                            {{ old('gender_preference', $campaign->gender_preference ?? '') === 'any' ? 'selected' : '' }}>
                                            Any</option>
                                        <option value="male"
                                            {{ old('gender_preference', $campaign->gender_preference ?? '') === 'male' ? 'selected' : '' }}>
                                            Predominantly Male</option>
                                        <option value="female"
                                            {{ old('gender_preference', $campaign->gender_preference ?? '') === 'female' ? 'selected' : '' }}>
                                            Predominantly Female</option>
                                    </select>
                                    @error('gender_preference')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Audience Age Range
                                        <span class="optional">(only if legally appropriate)</span>
                                    </label>
                                    <input type="text" name="age_preference" class="form-control"
                                        value="{{ old('age_preference', $campaign->age_preference ?? '') }}"
                                        placeholder="e.g. 18–35">
                                    @error('age_preference')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group col-span-2">
                                    <div class="toggle-row">
                                        <div>
                                            <div class="toggle-label">Manual approval required</div>
                                            <div class="toggle-sub">Each influencer must be individually approved before
                                                joining</div>
                                        </div>
                                        <label class="toggle-switch">
                                            <input type="hidden" name="manual_approval" value="0">
                                            <input type="checkbox" name="manual_approval" value="1"
                                                {{ old('manual_approval', $campaign->manual_approval ?? false) ? 'checked' : '' }}>
                                            <span class="toggle-slider"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-footer">
                                <button type="button" class="btn btn-ghost" data-prev="basics">← Basics</button>
                                <div class="form-nav">
                                    <button type="button" class="btn btn-primary" data-next="payment">Next: Payment
                                        →</button>
                                </div>
                            </div>
                        </div>

                        {{-- ── PAYMENT ── --}}
                        <div class="section-panel" id="section-payment">
                            <div class="form-grid">
                                <div class="sub-heading">Payment model</div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Payment Model <span class="required">*</span></label>
                                    <div class="radio-grid">
                                        @foreach ([['per_view', 'Per View'], ['fixed_fee', 'Fixed Fee'], ['per_post', 'Per Post'], ['per_conversion', 'Per Conversion'], ['hybrid', 'Hybrid']] as [$val, $label])
                                            <label class="radio-pill">
                                                <input type="radio" name="payment_model" value="{{ $val }}"
                                                    {{ old('payment_model', $campaign->payment_model ?? '') === $val ? 'checked' : '' }}>
                                                {{ $label }}
                                            </label>
                                        @endforeach
                                    </div>
                                    @error('payment_model')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Currency</label>
                                    <select name="payment_currency" class="form-control">
                                        @foreach (['INR', 'USD', 'EUR', 'GBP', 'AED', 'SGD'] as $cur)
                                            <option value="{{ $cur }}"
                                                {{ old('payment_currency', $campaign->payment_currency ?? 'INR') === $cur ? 'selected' : '' }}>
                                                {{ $cur }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('payment_currency')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Payout Release Rule</label>
                                    <select name="payout_release_rule" class="form-control">
                                        <option value="">Select rule…</option>
                                        @foreach ([
            'after_approval' => 'After manager approval',
            'after_posting' => 'After video is posted',
            'after_7_days' => 'After 7 days',
            'after_14_days' => 'After 14 days',
            'after_30_days' => 'After 30 days',
            'after_verified_views' => 'After verified views confirmed',
        ] as $val => $label)
                                            <option value="{{ $val }}"
                                                {{ old('payout_release_rule', $campaign->payout_release_rule ?? '') === $val ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('payout_release_rule')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="payment-fields-section" id="fields-per_view" data-models="per_view">
                                    <div class="sub-heading">Per-view pricing</div>

                                    <div class="form-group">
                                        <label class="form-label">Per-View Price</label>
                                        <div class="input-prefix-group">
                                            <span class="input-prefix currency-prefix">₹</span>
                                            <input type="number" name="per_view_price" class="form-control"
                                                value="{{ old('per_view_price', $campaign->per_view_price ?? '') }}"
                                                placeholder="0.00" min="0" step="0.001">
                                        </div>
                                        @error('per_view_price')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">Max Payable Views per Video</label>
                                        <input type="number" name="max_payable_views" class="form-control"
                                            value="{{ old('max_payable_views', $campaign->max_payable_views ?? '') }}"
                                            placeholder="e.g. 1000000" min="0">
                                        <div class="form-hint">Views beyond this cap are not compensated.</div>
                                        @error('max_payable_views')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">Minimum Views for Payout</label>
                                        <input type="number" name="min_view_threshold" class="form-control"
                                            value="{{ old('min_view_threshold', $campaign->min_view_threshold ?? '') }}"
                                            placeholder="e.g. 1000" min="0">
                                        <div class="form-hint">Influencer must reach this view count to qualify.</div>
                                        @error('min_view_threshold')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">Platform Commission / Service Fee (%)</label>
                                        <input type="number" name="platform_commission" class="form-control"
                                            value="{{ old('platform_commission', $campaign->platform_commission ?? '') }}"
                                            placeholder="e.g. 10" min="0" max="100" step="0.01">
                                        @error('platform_commission')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>


                                <div class="payment-fields-section" id="fields-fixed_fee" data-models="fixed_fee">
                                    <div class="sub-heading">Fixed fee details</div>

                                    <div class="form-group">
                                        <label class="form-label">Fixed Fee per Influencer</label>
                                        <div class="input-prefix-group">
                                            <span class="input-prefix currency-prefix">₹</span>
                                            <input type="number" name="fixed_fee_amount" class="form-control"
                                                value="{{ old('fixed_fee_amount', $campaign->fixed_fee_amount ?? '') }}"
                                                placeholder="0.00" min="0" step="0.01">
                                        </div>
                                        @error('fixed_fee_amount')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">Platform Commission / Service Fee (%)</label>
                                        <input type="number" name="platform_commission" class="form-control"
                                            value="{{ old('platform_commission', $campaign->platform_commission ?? '') }}"
                                            placeholder="e.g. 10" min="0" max="100" step="0.01">
                                        @error('platform_commission')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="payment-fields-section" id="fields-per_post" data-models="per_post">
                                    <div class="sub-heading">Per-post pricing</div>

                                    <div class="form-group">
                                        <label class="form-label">Rate per Post</label>
                                        <div class="input-prefix-group">
                                            <span class="input-prefix currency-prefix">₹</span>
                                            <input type="number" name="per_post_rate" class="form-control"
                                                value="{{ old('per_post_rate', $campaign->per_post_rate ?? '') }}"
                                                placeholder="0.00" min="0" step="0.01">
                                        </div>
                                        @error('per_post_rate')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">Max Posts per Influencer</label>
                                        <input type="number" name="max_posts_per_influencer" class="form-control"
                                            value="{{ old('max_posts_per_influencer', $campaign->max_posts_per_influencer ?? '') }}"
                                            placeholder="e.g. 3" min="1">
                                        <div class="form-hint">Leave blank for unlimited posts.</div>
                                        @error('max_posts_per_influencer')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">Platform Commission / Service Fee (%)</label>
                                        <input type="number" name="platform_commission" class="form-control"
                                            value="{{ old('platform_commission', $campaign->platform_commission ?? '') }}"
                                            placeholder="e.g. 10" min="0" max="100" step="0.01">
                                        @error('platform_commission')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>


                                <div class="payment-fields-section" id="fields-per_conversion"
                                    data-models="per_conversion">
                                    <div class="sub-heading">Per-conversion pricing</div>

                                    <div class="form-group">
                                        <label class="form-label">Payout per Conversion</label>
                                        <div class="input-prefix-group">
                                            <span class="input-prefix currency-prefix">₹</span>
                                            <input type="number" name="per_conversion_rate" class="form-control"
                                                value="{{ old('per_conversion_rate', $campaign->per_conversion_rate ?? '') }}"
                                                placeholder="0.00" min="0" step="0.01">
                                        </div>
                                        @error('per_conversion_rate')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">Conversion Event</label>
                                        <input type="text" name="conversion_event" class="form-control"
                                            value="{{ old('conversion_event', $campaign->conversion_event ?? '') }}"
                                            placeholder="e.g. Purchase, App Install, Form Submission">
                                        @error('conversion_event')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">Max Conversions per Influencer</label>
                                        <input type="number" name="max_conversions_per_influencer" class="form-control"
                                            value="{{ old('max_conversions_per_influencer', $campaign->max_conversions_per_influencer ?? '') }}"
                                            placeholder="e.g. 500" min="0">
                                        <div class="form-hint">Conversions beyond this cap are not compensated.</div>
                                        @error('max_conversions_per_influencer')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">Platform Commission / Service Fee (%)</label>
                                        <input type="number" name="platform_commission" class="form-control"
                                            value="{{ old('platform_commission', $campaign->platform_commission ?? '') }}"
                                            placeholder="e.g. 10" min="0" max="100" step="0.01">
                                        @error('platform_commission')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                {{-- ─────────────────────────────────────────────────────────────────────
                                 HYBRID fields — visible when payment_model = hybrid
                                 Shows a subset of both per-view and fixed fields
                            ──────────────────────────────────────────────────────────────────────── --}}
                                <div class="payment-fields-section" id="fields-hybrid" data-models="hybrid">
                                    <div class="sub-heading">Hybrid — base fee</div>

                                    <div class="form-group">
                                        <label class="form-label">Base Fixed Fee per Influencer</label>
                                        <div class="input-prefix-group">
                                            <span class="input-prefix currency-prefix">₹</span>
                                            <input type="number" name="fixed_fee_amount" class="form-control"
                                                value="{{ old('fixed_fee_amount', $campaign->fixed_fee_amount ?? '') }}"
                                                placeholder="0.00" min="0" step="0.01">
                                        </div>
                                        @error('fixed_fee_amount')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">Platform Commission / Service Fee (%)</label>
                                        <input type="number" name="platform_commission" class="form-control"
                                            value="{{ old('platform_commission', $campaign->platform_commission ?? '') }}"
                                            placeholder="e.g. 10" min="0" max="100" step="0.01">
                                        @error('platform_commission')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="sub-heading">Hybrid — performance bonus (per view)</div>

                                    <div class="form-group">
                                        <label class="form-label">Bonus Per-View Price</label>
                                        <div class="input-prefix-group">
                                            <span class="input-prefix currency-prefix">₹</span>
                                            <input type="number" name="per_view_price" class="form-control"
                                                value="{{ old('per_view_price', $campaign->per_view_price ?? '') }}"
                                                placeholder="0.00" min="0" step="0.001">
                                        </div>
                                        @error('per_view_price')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">Max Payable Views per Video</label>
                                        <input type="number" name="max_payable_views" class="form-control"
                                            value="{{ old('max_payable_views', $campaign->max_payable_views ?? '') }}"
                                            placeholder="e.g. 1000000" min="0">
                                        <div class="form-hint">Views beyond this cap are not compensated.</div>
                                        @error('max_payable_views')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">Minimum Views for Bonus Payout</label>
                                        <input type="number" name="min_view_threshold" class="form-control"
                                            value="{{ old('min_view_threshold', $campaign->min_view_threshold ?? '') }}"
                                            placeholder="e.g. 1000" min="0">
                                        <div class="form-hint">Influencer must reach this view count to earn the view
                                            bonus.</div>
                                        @error('min_view_threshold')
                                            <div class="form-error">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                {{-- ─────────────────────────────────────────────────────────────────────
                                 BUDGET TRACKING — always visible
                            ──────────────────────────────────────────────────────────────────────── --}}
                                <div class="sub-heading">Budget tracking</div>

                                <div class="form-group">
                                    <label class="form-label">Campaign Total Budget</label>
                                    <div class="input-prefix-group">
                                        <span class="input-prefix currency-prefix">₹</span>
                                        <input type="number" name="total_budget" class="form-control"
                                            value="{{ old('total_budget', $campaign->total_budget ?? '') }}"
                                            placeholder="0.00" min="0">
                                    </div>
                                    @error('total_budget')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Budget Consumed</label>
                                    <div class="input-prefix-group">
                                        <span class="input-prefix currency-prefix">₹</span>
                                        <input type="number" name="budget_consumed" class="form-control"
                                            value="{{ old('budget_consumed', $campaign->budget_consumed ?? 0) }}"
                                            placeholder="0.00" min="0">
                                    </div>
                                    <div class="form-hint">Updated automatically as payments are released.</div>
                                    @error('budget_consumed')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="sub-heading">Tax &amp; deductions</div>

                                <div class="form-group">
                                    <label class="form-label">GST Applicable (%)</label>
                                    <input type="number" name="gst_percent" class="form-control"
                                        value="{{ old('gst_percent', $campaign->gst_percent ?? '') }}"
                                        placeholder="e.g. 18" min="0" max="100">
                                    @error('gst_percent')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">TDS Deductible (%)</label>
                                    <input type="number" name="tds_percent" class="form-control"
                                        value="{{ old('tds_percent', $campaign->tds_percent ?? '') }}"
                                        placeholder="e.g. 10" min="0" max="100">
                                    @error('tds_percent')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Tax / Invoice Notes <span
                                            class="optional">(optional)</span></label>
                                    <input type="text" name="tax_notes" class="form-control"
                                        value="{{ old('tax_notes', $campaign->tax_notes ?? '') }}"
                                        placeholder="e.g. TDS deducted at source under section 194C">
                                    @error('tax_notes')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-footer">
                                <button type="button" class="btn btn-ghost" data-prev="eligibility">←
                                    Eligibility</button>
                                <div class="form-nav">
                                    <button type="button" class="btn btn-primary" data-next="content">Next: Content
                                        Brief →</button>
                                </div>
                            </div>
                        </div>

                        {{-- ── CONTENT BRIEF ── --}}
                        <div class="section-panel" id="section-content">
                            <div class="form-grid">
                                <div class="sub-heading">Video format</div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Video Format</label>
                                    <div class="check-grid">
                                        @foreach (['YouTube Video', 'YouTube Short'] as $fmt)
                                            <label class="check-item">
                                                <input type="checkbox" name="video_formats[]"
                                                    value="{{ $fmt }}"
                                                    {{ in_array($fmt, old('video_formats', $campaign->video_formats ?? [])) ? 'checked' : '' }}>
                                                <span>{{ $fmt }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                    @error('video_formats')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Required Duration</label>
                                    <input type="text" name="required_duration" class="form-control"
                                        value="{{ old('required_duration', $campaign->required_duration ?? '') }}"
                                        placeholder="e.g. 30–60 seconds, minimum 3 minutes">
                                    @error('required_duration')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Required Aspect Ratio</label>
                                    <select name="aspect_ratio" class="form-control">
                                        <option value="">Any</option>
                                        @foreach (['9:16 (Vertical)', '16:9 (Landscape)', '1:1 (Square)', '4:5 (Portrait)'] as $ar)
                                            <option value="{{ $ar }}"
                                                {{ old('aspect_ratio', $campaign->aspect_ratio ?? '') === $ar ? 'selected' : '' }}>
                                                {{ $ar }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('aspect_ratio')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="sub-heading">Brand requirements</div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Caption Instructions</label>
                                    <textarea name="caption_instructions" class="form-control" placeholder="Instructions for the post caption…">{{ old('caption_instructions', $campaign->caption_instructions ?? '') }}</textarea>
                                    @error('caption_instructions')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Hashtags to Include</label>
                                    <div class="tag-input-wrap" id="hashtags-wrap">
                                    </div>
                                    <input type="hidden" name="required_hashtags" id="hashtags-hidden"
                                        value="{{ old('required_hashtags', $campaign->required_hashtags ?? '') }}">
                                    <div class="form-hint">Type a hashtag and press <kbd
                                            style="font-size:10.5px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:3px;padding:1px 5px;">Enter</kbd>
                                        or <kbd
                                            style="font-size:10.5px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:3px;padding:1px 5px;">Space</kbd>
                                        to add. Click × to remove.</div>
                                    @error('required_hashtags')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Mandatory Keywords / Phrases</label>
                                    <div class="tag-input-wrap" id="keywords-wrap">
                                        {{-- Tags rendered by JS --}}
                                    </div>
                                    <input type="hidden" name="mandatory_keywords" id="keywords-hidden"
                                        value="{{ old('mandatory_keywords', $campaign->mandatory_keywords ?? '') }}">
                                    <div class="form-hint">Type a keyword or phrase and press <kbd
                                            style="font-size:10.5px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:3px;padding:1px 5px;">Enter</kbd>
                                        to add. Click × to remove.</div>
                                    @error('mandatory_keywords')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Mandatory CTA</label>
                                    <input type="text" name="mandatory_cta" class="form-control"
                                        value="{{ old('mandatory_cta', $campaign->mandatory_cta ?? '') }}"
                                        placeholder="e.g. 'Link in bio', 'Swipe up', 'Use code…'">
                                    @error('mandatory_cta')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Promo Code</label>
                                    <input type="text" name="promo_code" class="form-control"
                                        value="{{ old('promo_code', $campaign->promo_code ?? '') }}"
                                        placeholder="e.g. INFLUENCER20">
                                    @error('promo_code')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Landing Page / Link</label>
                                    <input type="url" name="landing_page_url" class="form-control"
                                        value="{{ old('landing_page_url', $campaign->landing_page_url ?? '') }}"
                                        placeholder="https://…">
                                    @error('landing_page_url')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group col-span-2">
                                    <div class="toggle-row">
                                        <div>
                                            <div class="toggle-label">Mandatory product shots required</div>
                                            <div class="toggle-sub">Video must include a close-up or featured shot of the
                                                product</div>
                                        </div>
                                        <label class="toggle-switch">
                                            <input type="hidden" name="mandatory_product_shots" value="0">
                                            <input type="checkbox" name="mandatory_product_shots" value="1"
                                                {{ old('mandatory_product_shots', $campaign->mandatory_product_shots ?? false) ? 'checked' : '' }}>
                                            <span class="toggle-slider"></span>
                                        </label>
                                    </div>
                                </div>

                                <div class="sub-heading">Creative direction</div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Content Tone</label>
                                    <div class="check-grid">
                                        @foreach (['Professional', 'Funny / Humorous', 'Educational', 'Lifestyle', 'Inspirational', 'Casual', 'Dramatic', 'ASMR / Soothing'] as $tone)
                                            <label class="check-item">
                                                <input type="checkbox" name="content_tone[]"
                                                    value="{{ $tone }}"
                                                    {{ in_array($tone, old('content_tone', $campaign->content_tone ?? [])) ? 'checked' : '' }}>
                                                <span>{{ $tone }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                    @error('content_tone')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Script Guidance</label>
                                    <textarea name="script_guidance" class="form-control"
                                        placeholder="Outline, talking points, or full script guidance for creators…">{{ old('script_guidance', $campaign->script_guidance ?? '') }}</textarea>
                                    @error('script_guidance')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Do's</label>
                                    <textarea name="content_dos" class="form-control" style="min-height:80px;"
                                        placeholder="• Show the product in use&#10;• Mention the key benefit&#10;• Include the link in bio">{{ old('content_dos', $campaign->content_dos ?? '') }}</textarea>
                                    @error('content_dos')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Don'ts</label>
                                    <textarea name="content_donts" class="form-control" style="min-height:80px;"
                                        placeholder="• Do not show competitor products&#10;• No misleading claims&#10;• Avoid clickbait thumbnails">{{ old('content_donts', $campaign->content_donts ?? '') }}</textarea>
                                    @error('content_donts')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Example Videos / References</label>
                                    <input type="text" name="reference_videos" class="form-control"
                                        value="{{ old('reference_videos', $campaign->reference_videos ?? '') }}"
                                        placeholder="Paste YouTube/Instagram links, comma-separated">
                                    @error('reference_videos')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Brand Assets / Files <span class="optional">(logos, product
                                            photos, brand kit)</span></label>
                                    <label class="file-upload-zone" for="brand_assets_upload">
                                        <input type="file" id="brand_assets_upload" name="brand_assets[]" multiple
                                            accept=".jpg,.jpeg,.png,.pdf,.zip,.mp4,.mov">
                                        <div class="file-upload-icon">📁</div>
                                        <div class="file-upload-text">
                                            <strong>Choose files</strong> or drag &amp; drop<br>
                                            <span style="font-size:11.5px;color:#9ca3af;">JPG, PNG, PDF, ZIP, MP4 — max 50
                                                MB each</span>
                                        </div>
                                    </label>
                                    @error('brand_assets')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-footer">
                                <button type="button" class="btn btn-ghost" data-prev="payment">← Payment</button>
                                <div class="form-nav">
                                    <button type="button" class="btn btn-primary" data-next="compliance">Next:
                                        Compliance →</button>
                                </div>
                            </div>
                        </div>

                        {{-- ── COMPLIANCE ── --}}
                        <div class="section-panel" id="section-compliance">
                            <div class="form-grid">
                                <div class="sub-heading">Disclosure requirements</div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Required Disclosure Text</label>
                                    <input type="text" name="disclosure_text" class="form-control"
                                        value="{{ old('disclosure_text', $campaign->disclosure_text ?? 'Paid partnership with @BrandName') }}"
                                        placeholder="e.g. #Ad, #Sponsored, Paid partnership with @BrandName">
                                    <div class="form-hint">This exact text or label must appear in every post caption or
                                        video.</div>
                                    @error('disclosure_text')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Platform-Specific Disclosure Instructions</label>
                                    <textarea name="platform_disclosure_instructions" class="form-control"
                                        placeholder="e.g. Instagram: use Paid Partnership tag; YouTube: tick 'Contains paid promotion'; TikTok: use Branded Content toggle">{{ old('platform_disclosure_instructions', $campaign->platform_disclosure_instructions ?? '') }}</textarea>
                                    @error('platform_disclosure_instructions')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group col-span-2">
                                    <div class="toggle-row">
                                        <div>
                                            <div class="toggle-label">YouTube paid promotion checkbox required</div>
                                            <div class="toggle-sub">Creator must tick "Contains paid promotion" in YouTube
                                                video settings</div>
                                        </div>
                                        <label class="toggle-switch">
                                            <input type="hidden" name="youtube_paid_promotion_required" value="0">
                                            <input type="checkbox" name="youtube_paid_promotion_required" value="1"
                                                {{ old('youtube_paid_promotion_required', $campaign->youtube_paid_promotion_required ?? false) ? 'checked' : '' }}>
                                            <span class="toggle-slider"></span>
                                        </label>
                                    </div>
                                </div>

                                <div class="form-group col-span-2">
                                    <div
                                        style="background:#fffbeb;border:1px solid #fcd34d;border-radius:8px;padding:14px 16px;">
                                        <div style="display:flex;gap:10px;align-items:flex-start;">
                                            <span style="font-size:18px;flex-shrink:0;">⚖️</span>
                                            <div>
                                                <div
                                                    style="font-size:13px;font-weight:600;color:#92400e;margin-bottom:4px;">
                                                    FTC Disclosure Reminder</div>
                                                <div style="font-size:12.5px;color:#78350f;line-height:1.5;">
                                                    Under FTC guidelines, any material connection between an influencer and
                                                    a brand — including free products, payments, or discounts — must be
                                                    clearly and conspicuously disclosed. The disclosure must be placed so
                                                    consumers see it before engaging with the content, not hidden in a
                                                    cluster of hashtags or below the fold. Ensure all influencers in this
                                                    campaign comply.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-span-2">
                                    <label class="form-label">Additional Compliance Notes</label>
                                    <textarea name="compliance_notes" class="form-control"
                                        placeholder="Any country-specific advertising standards, age-gate requirements, category restrictions (e.g. alcohol, finance, pharma)…">{{ old('compliance_notes', $campaign->compliance_notes ?? '') }}</textarea>
                                    @error('compliance_notes')
                                        <div class="form-error">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-footer">
                                <button type="button" class="btn btn-ghost" data-prev="content">← Content Brief</button>
                                <div class="form-nav">
                                    <button type="button" class="btn btn-primary" data-next="approval">Next: Approval
                                        Rules →</button>
                                </div>
                            </div>
                        </div>

                        {{-- ── APPROVAL RULES ── --}}
                        <div class="section-panel" id="section-approval">
                            <div class="form-grid">
                                <div class="sub-heading">Rejection criteria — video will be rejected if</div>

                                <div class="form-group col-span-2">
                                    <div class="rule-list">
                                        @foreach ([
            'reject_missing_hashtag_cta' => 'Missing mandatory hashtag or CTA',
            'reject_wrong_product' => 'Wrong product or service shown',
            'reject_misleading_claim' => 'False or misleading claim made',
            'reject_poor_quality' => 'Poor audio or video quality',
            'reject_competitor_visible' => 'Competitor brand visible in video',
            'reject_offensive_content' => 'Offensive or inappropriate content',
            'reject_no_disclosure' => 'No disclosure or sponsored label present',
            'reject_wrong_language' => 'Video in wrong language',
            'reject_after_deadline' => 'Uploaded after submission deadline',
            'reject_fake_engagement' => 'AI-generated or fake engagement suspected',
        ] as $field => $label)
                                            <label class="rule-item" style="cursor:pointer;">
                                                <span class="rule-icon reject">✕</span>
                                                <span style="flex:1;">{{ $label }}</span>
                                                <input type="checkbox" name="{{ $field }}" value="1"
                                                    {{ old($field, $campaign->$field ?? true) ? 'checked' : '' }}>
                                            </label>
                                        @endforeach
                                    </div>
                                    <div class="form-hint" style="margin-top:8px;">Uncheck any rule that does not apply to
                                        this campaign.</div>
                                </div>

                                <div class="sub-heading">Approval criteria — video will only be approved if</div>

                                <div class="form-group col-span-2">
                                    <div class="rule-list">
                                        @foreach ([
            'approve_mandatory_included' => 'All mandatory items are included',
            'approve_brand_message' => 'Brand message is clearly communicated',
            'approve_quality_standard' => 'Video quality meets minimum standard',
            'approve_disclosure_visible' => 'Disclosure label is clearly visible',
            'approve_cta_included' => 'CTA, link, and/or promo code is included',
            'approve_platform_format' => 'Correct platform format and aspect ratio used',
            'approve_manager_sign_off' => 'Campaign manager has given final approval',
        ] as $field => $label)
                                            <label class="rule-item" style="cursor:pointer;">
                                                <span class="rule-icon approve">✓</span>
                                                <span style="flex:1;">{{ $label }}</span>
                                                <input type="checkbox" name="{{ $field }}" value="1"
                                                    {{ old($field, $campaign->$field ?? true) ? 'checked' : '' }}>
                                            </label>
                                        @endforeach
                                    </div>
                                </div>

                                <div class="sub-heading">Approval flow</div>

                                <div class="form-group col-span-2">
                                    <div
                                        style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:14px 16px;">
                                        <div
                                            style="font-size:12.5px;font-weight:700;color:#15803d;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.04em;">
                                            Recommended submission flow</div>
                                        <ol style="margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;">
                                            @foreach (['Influencer applies or accepts campaign terms', 'Manager approves the influencer for this campaign', 'Influencer uploads video draft for review', 'Manager approves, rejects, or requests revision', 'Influencer posts approved video and submits live URL', 'Views are tracked and payment is calculated'] as $i => $step)
                                                <li style="font-size:13px;color:#166534;line-height:1.4;">
                                                    {{ $step }}</li>
                                            @endforeach
                                        </ol>
                                    </div>
                                </div>
                            </div>

                            <div class="form-footer">
                                <button type="button" class="btn btn-ghost" data-prev="compliance">← Compliance</button>
                                <div class="form-nav">
                                    <button type="submit" class="btn btn-primary">
                                        {{ isset($campaign) ? '💾 Save Changes' : '🚀 Create Campaign' }}
                                    </button>
                                    <a href="{{ route('campaigns.index') }}" class="btn btn-ghost">Cancel</a>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            {{-- ── SIDEBAR ── --}}
            <aside class="page-side">
                <div class="card side-card">
                    <div class="card-body">
                        <div class="side-heading" style="margin-bottom:14px;">Sections</div>
                        <div class="progress-steps">
                            @foreach ([['basics', '1', 'Campaign Basics', 'Name, objective, dates'], ['eligibility', '2', 'Eligibility', 'Platforms, followers, geo'], ['payment', '3', 'Payment', 'Model, budget, tax'], ['content', '4', 'Content Brief', 'Format, CTA, brand assets'], ['compliance', '5', 'Compliance', 'FTC, disclosure, YouTube'], ['approval', '6', 'Approval Rules', 'Reject/approve criteria']] as [$sec, $num, $label, $sub])
                                <div class="progress-step {{ $sec === 'basics' ? 'active' : '' }}"
                                    data-target="{{ $sec }}" id="step-{{ $sec }}">
                                    <div class="step-num">{{ $num }}</div>
                                    <div>
                                        <div class="step-label">{{ $label }}</div>
                                        <div class="step-sublabel">{{ $sub }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div style="margin-top:22px;padding-top:16px;border-top:1px solid #f3f4f6;">
                            <div class="side-heading">Status guide</div>
                            <div class="status-legend">
                                <div class="status-item"><span class="status-dot draft"></span> Draft — still being set up
                                </div>
                                <div class="status-item"><span class="status-dot active"></span> Active — currently
                                    running</div>
                                <div class="status-item"><span class="status-dot paused"></span> Paused — temporarily on
                                    hold</div>
                                <div class="status-item"><span class="status-dot completed"></span> Completed — finished
                                    &amp; archived</div>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>
        </div>
    </form>
@endsection

@push('scripts')
    <script>
        (function() {
            const SECTIONS = ['basics', 'eligibility', 'payment', 'content', 'compliance', 'approval'];

            const tabs = document.querySelectorAll('.section-tab');
            const panels = document.querySelectorAll('.section-panel');
            const steps = document.querySelectorAll('.progress-step');
            const nextBtns = document.querySelectorAll('[data-next]');
            const prevBtns = document.querySelectorAll('[data-prev]');

            function activate(name) {
                const idx = SECTIONS.indexOf(name);
                tabs.forEach(t => t.classList.toggle('active', t.dataset.section === name));
                panels.forEach(p => p.classList.toggle('active', p.id === 'section-' + name));
                steps.forEach((s, i) => {
                    s.classList.remove('active', 'done');
                    if (i === idx) s.classList.add('active');
                    else if (i < idx) s.classList.add('done');
                });
                if (window.innerWidth < 1000) {
                    document.querySelector('#section-' + name)
                        ?.closest('.card')
                        ?.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                }
            }

            tabs.forEach(t => t.addEventListener('click', () => activate(t.dataset.section)));
            steps.forEach(s => s.addEventListener('click', () => activate(s.dataset.target)));
            nextBtns.forEach(b => b.addEventListener('click', () => activate(b.dataset.next)));
            prevBtns.forEach(b => b.addEventListener('click', () => activate(b.dataset.prev)));

            const paymentRadios = document.querySelectorAll('input[name="payment_model"]');
            const paymentSections = document.querySelectorAll('.payment-fields-section');

            function updatePaymentFields(selectedModel) {
                paymentSections.forEach(section => {
                    const models = (section.dataset.models || '').split(',').map(m => m.trim());
                    section.classList.toggle('visible', models.includes(selectedModel));
                });
            }

            paymentRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    updatePaymentFields(this.value);
                });
            });

            const checkedModel = document.querySelector('input[name="payment_model"]:checked');
            updatePaymentFields(checkedModel ? checkedModel.value : '');

            const currencySelect = document.querySelector('[name="payment_currency"]');
            const symbols = {
                INR: '₹',
                USD: '$',
                EUR: '€',
                GBP: '£',
                AED: 'د.إ',
                SGD: 'S$'
            };

            function updateCurrencyPrefixes(currency) {
                document.querySelectorAll('.currency-prefix').forEach(el => {
                    el.textContent = symbols[currency] || currency;
                });
            }

            if (currencySelect) {
                currencySelect.addEventListener('change', function() {
                    updateCurrencyPrefixes(this.value);
                });
                // Set on load
                updateCurrencyPrefixes(currencySelect.value);
            }

            const fileInput = document.getElementById('brand_assets_upload');
            if (fileInput) {
                fileInput.addEventListener('change', function() {
                    const label = this.closest('.file-upload-zone');
                    const text = label?.querySelector('.file-upload-text');
                    if (text && this.files.length) {
                        text.innerHTML =
                            `<strong>${this.files.length} file(s) selected</strong><br>
                    <span style="font-size:11.5px;color:#9ca3af;">${Array.from(this.files).map(f=>f.name).join(', ')}</span>`;
                    }
                });
            }

            activate('basics');
        })();

        function initTagInput(wrapId, hiddenId, {
            delimiter = /[\s,]+/,
            prefix = null
        } = {}) {
            const wrap = document.getElementById(wrapId);
            const hidden = document.getElementById(hiddenId);
            if (!wrap || !hidden) return;

            let tags = hidden.value ?
                hidden.value.split(',').map(t => t.trim()).filter(Boolean) : [];

            function sync() {
                hidden.value = tags.join(',');
            }

            function renderTag(text) {
                const tag = document.createElement('span');
                tag.className = 'tag';
                tag.textContent = text;
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.textContent = '×';
                btn.addEventListener('click', () => {
                    tags = tags.filter(t => t !== text);
                    tag.remove();
                    sync();
                });
                tag.appendChild(btn);
                return tag;
            }

            function addTag(raw) {
                const value = raw.trim();
                if (!value || tags.includes(value)) return;
                const final = prefix && !value.startsWith(prefix) ? prefix + value : value;
                if (tags.includes(final)) return;
                tags.push(final);
                wrap.insertBefore(renderTag(final), inp);
                sync();
            }

            const inp = document.createElement('input');
            inp.type = 'text';
            inp.placeholder = prefix === '#' ? 'e.g. BrandName, Campaign2026…' : 'Type and press Enter…';

            tags.forEach(t => wrap.appendChild(renderTag(t)));
            tags = [];
            const existing = hidden.value ? hidden.value.split(',').map(t => t.trim()).filter(Boolean) : [];
            tags.length = 0;
            wrap.innerHTML = '';
            wrap.appendChild(inp);
            existing.forEach(t => {
                tags.push(t);
                wrap.insertBefore(renderTag(t), inp);
            });
            sync();

            inp.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' || (delimiter.source.includes('\\s') && e.key === ' ')) {
                    e.preventDefault();
                    const parts = this.value.split(delimiter).filter(Boolean);
                    parts.forEach(addTag);
                    this.value = '';
                } else if (e.key === 'Backspace' && !this.value && tags.length) {
                    const last = tags[tags.length - 1];
                    tags.pop();
                    wrap.querySelector(`.tag:last-of-type`)?.remove();
                    sync();
                    this.value = last.replace(/^#/, '');
                }
            });

            inp.addEventListener('blur', function() {
                if (this.value.trim()) {
                    const parts = this.value.split(delimiter).filter(Boolean);
                    parts.forEach(addTag);
                    this.value = '';
                }
            });

            wrap.addEventListener('click', () => inp.focus());
        }

        initTagInput('hashtags-wrap', 'hashtags-hidden', {
            delimiter: /[\s,]+/,
            prefix: '#'
        });
        initTagInput('keywords-wrap', 'keywords-hidden', {
            delimiter: /,/,
            prefix: null
        });
    </script>
@endpush