{{-- The campaign form. Shared by the list (create) and the campaign page (edit). --}}
@php
    $select = 'mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
@endphp

<div class="space-y-5">
    <x-input-error for="formBrief" class="rounded-xl bg-rose-50 px-3 py-2" />

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div class="sm:col-span-2">
            <x-label for="cmp-name" value="{{ __('Name') }}" />
            <x-input id="cmp-name" type="text" class="mt-1 block w-full" wire:model="formName" placeholder="{{ __('e.g. Back-to-school banners, January') }}" />
            <x-input-error for="formName" class="mt-2" />
        </div>
        <div>
            <x-label for="cmp-owner" value="{{ __('Run by') }}" />
            <select id="cmp-owner" wire:model="formOwnerId" class="{{ $select }}">
                @foreach ($teamUsers as $person)
                    <option value="{{ $person->id }}">{{ $person->name }}</option>
                @endforeach
            </select>
            <x-input-error for="formOwnerId" class="mt-2" />
        </div>
        <div>
            <x-label for="cmp-code" value="{{ __('Tracking code') }}" />
            <x-input id="cmp-code" type="text" class="mt-1 block w-full uppercase" wire:model="formCode" placeholder="{{ __('Leave blank to generate one') }}" />
            <p class="mt-1 text-xs text-slate-500">{{ __('Carried on the tracked link and QR code. Fixed once the campaign is scheduled.') }}</p>
            <x-input-error for="formCode" class="mt-2" />
        </div>
        <div>
            <x-label for="cmp-start" value="{{ __('Starts') }}" />
            <x-input id="cmp-start" type="date" class="mt-1 block w-full" wire:model="formStartsOn" />
            <x-input-error for="formStartsOn" class="mt-2" />
        </div>
        <div>
            <x-label for="cmp-end" value="{{ __('Ends (optional)') }}" />
            <x-input id="cmp-end" type="date" class="mt-1 block w-full" wire:model="formEndsOn" />
            <x-input-error for="formEndsOn" class="mt-2" />
        </div>
    </div>

    <div class="rounded-2xl border border-slate-200 bg-slate-50/60 p-4">
        <p class="text-sm font-semibold text-slate-900">{{ __('The brief') }}</p>
        <p class="mt-0.5 text-xs text-slate-500">{{ __('Fill it in as the plan firms up. Every part is needed before the campaign can be scheduled.') }}</p>

        <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div class="sm:col-span-2">
                <x-label for="cmp-objective" value="{{ __('Objective') }}" />
                <textarea id="cmp-objective" rows="2" wire:model="formObjective" class="{{ $select }}" placeholder="{{ __('What should this campaign achieve?') }}"></textarea>
                <x-input-error for="formObjective" class="mt-2" />
            </div>
            <div>
                <x-label for="cmp-sector" value="{{ __('Target sector') }}" />
                <select id="cmp-sector" wire:model="formTargetSector" class="{{ $select }}">
                    <option value="">{{ __('Choose…') }}</option>
                    @foreach ($sectors as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                    @endforeach
                </select>
                <x-input-error for="formTargetSector" class="mt-2" />
            </div>
            <div>
                <x-label for="cmp-spend" value="{{ __('Planned spend (:base)', ['base' => $base]) }}" />
                <x-input id="cmp-spend" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="formPlannedSpend" placeholder="{{ __('0 is an answer; blank is not') }}" />
                <p class="mt-1 text-xs text-slate-500">{{ __('A plan only. Actual spend comes from Marketing expenses linked to the campaign.') }}</p>
                <x-input-error for="formPlannedSpend" class="mt-2" />
            </div>
            <div class="sm:col-span-2">
                <x-label for="cmp-offer" value="{{ __('Offer') }}" />
                <textarea id="cmp-offer" rows="2" wire:model="formOffer" class="{{ $select }}" placeholder="{{ __('What are we offering, and to whom?') }}"></textarea>
                <x-input-error for="formOffer" class="mt-2" />
            </div>
            <div>
                <x-label for="cmp-cta" value="{{ __('Call to action') }}" />
                <x-input id="cmp-cta" type="text" class="mt-1 block w-full" wire:model="formCallToAction" placeholder="{{ __('e.g. Scan to request a quote') }}" />
                <x-input-error for="formCallToAction" class="mt-2" />
            </div>
            <div>
                <x-label for="cmp-measure" value="{{ __('Success measure') }}" />
                <x-input id="cmp-measure" type="text" class="mt-1 block w-full" wire:model="formSuccessMeasure" placeholder="{{ __('e.g. 20 enquiries, 5 qualified') }}" />
                <x-input-error for="formSuccessMeasure" class="mt-2" />
            </div>
            @if ($channels !== [])
                <div class="sm:col-span-2">
                    <x-label value="{{ __('Channels') }}" />
                    <div class="mt-1 flex flex-wrap gap-2">
                        @foreach ($channels as $value => $label)
                            <label wire:key="cmp-channel-{{ $value }}" class="flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-600 transition has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                <input type="checkbox" value="{{ $value }}" wire:model="formChannels" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                {{ $label }}
                            </label>
                        @endforeach
                    </div>
                    <x-input-error for="formChannels" class="mt-2" />
                </div>
            @endif
        </div>
    </div>
</div>