@php
    $control = 'mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 placeholder:text-xs';
@endphp

<div class="mx-auto max-w-5xl px-4 py-6 sm:px-6 lg:px-8">
    <form wire:submit="save" class="space-y-6">
        <div>
            <a href="{{ $record ? route('crm.opportunities.show', $record->id) : route('crm.opportunities.index') }}" wire:navigate class="inline-flex items-center gap-1 text-xs font-medium text-slate-500 hover:text-slate-700">
                <x-icon name="chevron-left" class="h-3.5 w-3.5" /> {{ $record ? $record->title : __('Opportunities') }}
            </a>
            <h1 class="mt-2 text-2xl font-bold tracking-tight text-slate-900">{{ $record ? __('Edit opportunity') : __('New opportunity') }}</h1>
            <p class="mt-1 text-sm text-slate-500">
                {{ $record
                    ? __('The stage, the owner and the originator are not changed here.')
                    : __('It opens at Prospect. Title, organisation, source and a dated next action are required.') }}
            </p>
        </div>

        {{-- The essentials --}}
        <x-card class="overflow-hidden !p-0">
            @include('livewire.crm.opportunities.partials.section-head', ['icon' => 'flag', 'title' => __('The opportunity')])
            <div class="grid grid-cols-1 gap-4 p-5 sm:grid-cols-12">
                <div class="sm:col-span-12">
                    <x-label for="title" value="{{ __('Title') }}" />
                    <x-input id="title" type="text" class="mt-1 block w-full" wire:model="title" placeholder="{{ __('For example: Branded conference packs for the March summit') }}" />
                    <x-input-error for="title" class="mt-2" />
                </div>

                <div class="sm:col-span-6">
                    <x-label for="customer-search" value="{{ __('Organisation') }}" />
                    <x-input id="customer-search" type="text" class="mt-1 block w-full" wire:model.live.debounce.300ms="customerSearch" placeholder="{{ __('Type to find an organisation') }}" />
                    <select id="customer_id" wire:model.live="customer_id" class="{{ $control }}" aria-label="{{ __('Organisation') }}">
                        <option value="">{{ __('Choose an organisation') }}</option>
                        @foreach ($customers as $customer)
                            <option value="{{ $customer->id }}">{{ $customer->lifecycle === 'active' ? $customer->name : $customer->name.' ('.($lifecycles[$customer->lifecycle] ?? $customer->lifecycle).')' }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="customer_id" class="mt-2" />
                    @if ($canAddOrganisation)
                        <a href="{{ route('crm.organisations.create') }}" wire:navigate class="mt-1 inline-block text-xs font-semibold text-indigo-600 hover:text-indigo-800">{{ __('Add a new organisation') }}</a>
                    @endif
                </div>

                <div class="sm:col-span-6">
                    <x-label value="{{ __('Contacts') }}" />
                    @if ($customer_id === '')
                        <p class="mt-2 text-sm text-slate-400">{{ __('Choose the organisation first.') }}</p>
                    @elseif ($contacts->isEmpty())
                        <p class="mt-2 text-sm text-slate-400">{{ __('No contacts recorded at this organisation yet.') }}</p>
                    @else
                        <div class="mt-1 flex flex-wrap gap-2">
                            @foreach ($contacts as $contact)
                                <label wire:key="contact-{{ $contact->id }}" class="flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 px-3 py-1.5 text-sm text-slate-600 has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                    <input type="checkbox" value="{{ $contact->id }}" wire:model="contact_ids" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                    {{ $contact->name }}
                                    @if ($contact->title)
                                        <span class="text-xs text-slate-400">{{ $contact->title }}</span>
                                    @endif
                                </label>
                            @endforeach
                        </div>
                        <p class="mt-1 text-xs text-slate-400">{{ __('The first one ticked is the primary contact.') }}</p>
                    @endif
                    <x-input-error for="contact_ids" class="mt-2" />
                </div>

                <div class="sm:col-span-4">
                    <x-label for="type" value="{{ __('Type') }}" />
                    <select id="type" wire:model="type" class="{{ $control }}">
                        @foreach ($types as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="type" class="mt-2" />
                </div>
                <div class="sm:col-span-4">
                    <x-label for="source" value="{{ __('Source') }}" />
                    <select id="source" wire:model="source" class="{{ $control }}">
                        <option value="">{{ __('Where did it come from?') }}</option>
                        @foreach ($sources as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="source" class="mt-2" />
                </div>
                <div class="sm:col-span-4">
                    <x-label for="priority" value="{{ __('Priority') }}" />
                    <select id="priority" wire:model="priority" class="{{ $control }}">
                        @foreach ($priorities as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="priority" class="mt-2" />
                </div>

                <div class="sm:col-span-8">
                    <x-label for="next_action" value="{{ __('Next action') }}" />
                    <x-input id="next_action" type="text" class="mt-1 block w-full" wire:model="next_action" placeholder="{{ __('For example: Call the procurement officer to confirm quantities') }}" />
                    <x-input-error for="next_action" class="mt-2" />
                </div>
                <div class="sm:col-span-4">
                    <x-label for="next_action_due" value="{{ __('Next action due') }}" />
                    <x-input id="next_action_due" type="date" class="mt-1 block w-full" wire:model="next_action_due" />
                    <x-input-error for="next_action_due" class="mt-2" />
                </div>

                <div class="sm:col-span-4">
                    <x-label for="estimated_value" value="{{ __('Estimated value') }}" />
                    <x-input id="estimated_value" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="estimated_value" placeholder="{{ __('Leave blank if not estimated') }}" />
                    <x-input-error for="estimated_value" class="mt-2" />
                    <button type="button" wire:click="buildEstimatedValue" class="mt-2 text-xs font-semibold text-indigo-600 hover:text-indigo-800">{{ __('Fill from the catalogue lines') }}</button>
                    <p class="mt-1 text-xs text-slate-400">{{ __('Leave this blank when it is not known. It is never saved as zero.') }}</p>
                </div>
                <div class="sm:col-span-4">
                    <x-label for="currency_code" value="{{ __('Currency') }}" />
                    <select id="currency_code" wire:model="currency_code" class="{{ $control }}">
                        @foreach ($currencies as $code)
                            <option value="{{ $code }}">{{ $code }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="currency_code" class="mt-2" />
                </div>
                <div class="sm:col-span-4">
                    <x-label for="expected_close_date" value="{{ __('Expected close') }}" />
                    <x-input id="expected_close_date" type="date" class="mt-1 block w-full" wire:model="expected_close_date" />
                    <x-input-error for="expected_close_date" class="mt-2" />
                </div>

                @if ($picksPeople)
                    <div class="sm:col-span-6">
                        <x-label for="owner_id" value="{{ __('Owner') }}" />
                        <select id="owner_id" wire:model="owner_id" class="{{ $control }}">
                            @foreach ($members as $member)
                                <option value="{{ $member->id }}">{{ $member->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="owner_id" class="mt-2" />
                    </div>
                    <div class="sm:col-span-6">
                        <x-label for="originator_id" value="{{ __('Originator (who brought it in)') }}" />
                        <select id="originator_id" wire:model="originator_id" class="{{ $control }}">
                            @foreach ($members as $member)
                                <option value="{{ $member->id }}">{{ $member->name }}</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-slate-400">{{ __('Set once. It cannot be changed later.') }}</p>
                        <x-input-error for="originator_id" class="mt-2" />
                    </div>
                @elseif ($record)
                    <div class="sm:col-span-12 text-sm text-slate-500">
                        {{ __('Owner: :owner. Originator: :originator.', [
                            'owner' => $record->owner?->name ?? __('No owner'),
                            'originator' => $record->originator?->name ?? __('Not recorded'),
                        ]) }}
                    </div>
                @endif
            </div>
        </x-card>

        {{-- Requirement --}}
        <x-card class="overflow-hidden !p-0">
            @include('livewire.crm.opportunities.partials.section-head', ['icon' => 'document-text', 'title' => __('Requirement')])
            <div class="grid grid-cols-1 gap-4 p-5 sm:grid-cols-12">
                <div class="sm:col-span-12">
                    <x-label for="need" value="{{ __('Need') }}" />
                    <textarea id="need" rows="3" wire:model="need" class="{{ $control }}" placeholder="{{ __('What the client needs, in their words') }}"></textarea>
                    <x-input-error for="need" class="mt-2" />
                </div>
                <div class="sm:col-span-6">
                    <x-label for="products" value="{{ __('Products') }}" />
                    <textarea id="products" rows="2" wire:model="products" class="{{ $control }}" placeholder="{{ __('Anything that is not in the catalogue') }}"></textarea>
                    <x-input-error for="products" class="mt-2" />
                    <p class="mt-1 text-xs text-slate-400">{{ __('For anything that is not in the catalogue. Catalogue items go in the lines below.') }}</p>
                </div>
                <div class="sm:col-span-6">
                    <x-label for="quantity_scope" value="{{ __('Quantity or scope') }}" />
                    <textarea id="quantity_scope" rows="2" wire:model="quantity_scope" class="{{ $control }}"></textarea>
                    <x-input-error for="quantity_scope" class="mt-2" />
                </div>
                <div class="sm:col-span-12">
                    <x-label for="specifications" value="{{ __('Specifications') }}" />
                    <textarea id="specifications" rows="2" wire:model="specifications" class="{{ $control }}"></textarea>
                    <x-input-error for="specifications" class="mt-2" />
                </div>
                <div class="sm:col-span-4">
                    <x-label for="desired_delivery_on" value="{{ __('Wanted by') }}" />
                    <x-input id="desired_delivery_on" type="date" class="mt-1 block w-full" wire:model="desired_delivery_on" />
                    <x-input-error for="desired_delivery_on" class="mt-2" />
                </div>
                <div class="sm:col-span-4">
                    <x-label for="budget" value="{{ __('Budget') }}" />
                    <x-input id="budget" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="budget" placeholder="{{ __('Leave blank if unknown') }}" />
                    <x-input-error for="budget" class="mt-2" />
                </div>
                <div class="sm:col-span-4">
                    <x-label for="budget_note" value="{{ __('Budget note') }}" />
                    <x-input id="budget_note" type="text" class="mt-1 block w-full" wire:model="budget_note" placeholder="{{ __('For example: Unknown until the board meets') }}" />
                    <x-input-error for="budget_note" class="mt-2" />
                </div>
            </div>
        </x-card>

        {{-- Catalogue lines. The free-text Products field above stays. --}}
        <x-card class="overflow-hidden !p-0">
            @include('livewire.crm.opportunities.partials.section-head', ['icon' => 'cube', 'title' => __('Catalogue lines')])
            @include('livewire.crm.opportunities.partials.product-lines', [
                'canEdit' => true,
                'showEstimateButton' => false,
                'showSave' => false,
            ])
        </x-card>

        {{-- Buying process --}}
        <x-card class="overflow-hidden !p-0">
            @include('livewire.crm.opportunities.partials.section-head', ['icon' => 'building-office', 'title' => __('Buying process')])
            <div class="grid grid-cols-1 gap-4 p-5 sm:grid-cols-12">
                <div class="sm:col-span-6">
                    <x-label for="decision_maker" value="{{ __('Decision-maker') }}" />
                    <x-input id="decision_maker" type="text" class="mt-1 block w-full" wire:model="decision_maker" />
                    <x-input-error for="decision_maker" class="mt-2" />
                </div>
                <div class="sm:col-span-6">
                    <x-label for="tender_deadline" value="{{ __('Tender deadline') }}" />
                    <x-input id="tender_deadline" type="date" class="mt-1 block w-full" wire:model="tender_deadline" />
                    <x-input-error for="tender_deadline" class="mt-2" />
                </div>
                <div class="sm:col-span-12">
                    <x-label for="procurement_process" value="{{ __('Procurement process') }}" />
                    <textarea id="procurement_process" rows="2" wire:model="procurement_process" class="{{ $control }}"></textarea>
                    <x-input-error for="procurement_process" class="mt-2" />
                </div>
                <div class="sm:col-span-6">
                    <x-label for="decision_criteria" value="{{ __('Decision criteria') }}" />
                    <textarea id="decision_criteria" rows="2" wire:model="decision_criteria" class="{{ $control }}"></textarea>
                    <x-input-error for="decision_criteria" class="mt-2" />
                </div>
                <div class="sm:col-span-6">
                    <x-label for="competitors" value="{{ __('Competitors') }}" />
                    <textarea id="competitors" rows="2" wire:model="competitors" class="{{ $control }}"></textarea>
                    <x-input-error for="competitors" class="mt-2" />
                </div>
            </div>
        </x-card>

        <div class="sticky bottom-3 z-20 mt-1 flex items-center justify-end gap-3 rounded-2xl border border-slate-200 bg-white/90 px-4 py-3 shadow-[0_8px_30px_-8px_rgba(15,23,42,0.25)] backdrop-blur">
            <a href="{{ $record ? route('crm.opportunities.show', $record->id) : route('crm.opportunities.index') }}" wire:navigate><x-secondary-button type="button">{{ __('Cancel') }}</x-secondary-button></a>
            <x-button type="submit" wire:loading.attr="disabled" wire:target="save">
                <span wire:loading.remove wire:target="save">{{ $record ? __('Save') : __('Open opportunity') }}</span>
                <span wire:loading wire:target="save">{{ __('Saving…') }}</span>
            </x-button>
        </div>
    </form>
</div>