{{--
    Add / edit contact modal, driven by App\Livewire\Crm\Contacts\Concerns\EditsContacts.
    Expects: $organisationOptions (id => name) when the organisation can be chosen,
    or null when the form is fixed to one organisation.
--}}
<x-dialog-modal wire:model.live="showContactModal" maxWidth="2xl">
    <x-slot name="title">{{ $editingContactId ? __('Edit contact') : __('Add a contact') }}</x-slot>

    <x-slot name="content">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            @if ($organisationOptions !== null)
                <div class="sm:col-span-2">
                    <x-label for="contact-organisation" value="{{ __('Organisation') }}" />
                    <div class="mt-1 grid grid-cols-1 gap-2 sm:grid-cols-2">
                        <x-input type="text" class="block w-full placeholder:text-xs" wire:model.live.debounce.300ms="organisationSearch" placeholder="{{ __('Type to find an organisation') }}" />
                        <select id="contact-organisation" wire:model="contactForm.customer_id" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Choose…') }}</option>
                            @foreach ($organisationOptions as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <x-input-error for="contactForm.customer_id" class="mt-2" />
                </div>
            @endif

            <div>
                <x-label for="contact-name" value="{{ __('Name') }}" />
                <x-input id="contact-name" type="text" class="mt-1 block w-full" wire:model="contactForm.name" />
                <x-input-error for="contactForm.name" class="mt-2" />
            </div>
            <div>
                <x-label for="contact-title" value="{{ __('Job title') }}" />
                <x-input id="contact-title" type="text" class="mt-1 block w-full" wire:model="contactForm.title" />
                <x-input-error for="contactForm.title" class="mt-2" />
            </div>
            <div>
                <x-label for="contact-department" value="{{ __('Department') }}" />
                <x-input id="contact-department" type="text" class="mt-1 block w-full" wire:model="contactForm.department" />
                <x-input-error for="contactForm.department" class="mt-2" />
            </div>
            <div>
                <x-label for="contact-role" value="{{ __('Role in the buying decision') }}" />
                <select id="contact-role" wire:model="contactForm.decision_role" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">{{ __('Not known') }}</option>
                    @foreach (\App\Models\Crm\Contact::DECISION_ROLES as $key => $label)
                        <option value="{{ $key }}">{{ __($label) }}</option>
                    @endforeach
                </select>
                <x-input-error for="contactForm.decision_role" class="mt-2" />
            </div>
            <div>
                <x-label for="contact-email" value="{{ __('Email') }}" />
                <x-input id="contact-email" type="email" class="mt-1 block w-full" wire:model="contactForm.email" />
                <x-input-error for="contactForm.email" class="mt-2" />
            </div>
            <div>
                <x-label for="contact-phone" value="{{ __('Phone') }}" />
                <x-input id="contact-phone" type="text" class="mt-1 block w-full" wire:model="contactForm.phone" />
                <x-input-error for="contactForm.phone" class="mt-2" />
            </div>
            <div>
                <x-label for="contact-whatsapp" value="{{ __('WhatsApp') }}" />
                <x-input id="contact-whatsapp" type="text" class="mt-1 block w-full placeholder:text-xs" wire:model="contactForm.whatsapp" placeholder="{{ __('Leave blank if the same as the phone') }}" />
                <x-input-error for="contactForm.whatsapp" class="mt-2" />
            </div>
            <div>
                <x-label for="contact-linkedin" value="{{ __('LinkedIn') }}" />
                <x-input id="contact-linkedin" type="text" class="mt-1 block w-full placeholder:text-xs" wire:model="contactForm.linkedin" placeholder="https://www.linkedin.com/in/..." />
                <x-input-error for="contactForm.linkedin" class="mt-2" />
            </div>
            <div>
                <x-label for="contact-channel" value="{{ __('Prefers to be reached by') }}" />
                <select id="contact-channel" wire:model="contactForm.preferred_channel" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">{{ __('Not known') }}</option>
                    @foreach (\App\Models\Crm\Contact::CHANNELS as $key => $label)
                        <option value="{{ $key }}">{{ __($label) }}</option>
                    @endforeach
                </select>
                <x-input-error for="contactForm.preferred_channel" class="mt-2" />
            </div>
            <div class="flex items-end">
                <label class="flex w-full cursor-pointer items-center gap-2 rounded-xl border border-slate-200 px-3 py-2.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" wire:model="contactForm.is_primary" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                    {{ __('Main contact at this organisation') }}
                </label>
            </div>

            <div class="sm:col-span-2 rounded-xl border border-slate-200 bg-slate-50/60 p-4">
                <p class="text-sm font-semibold text-slate-700">{{ __('Marketing consent') }}</p>
                <p class="text-xs text-slate-500">{{ __('Whether this person may receive newsletters, offers and campaign messages. Someone who has withdrawn consent is left out of every marketing list and export.') }}</p>
                <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="contact-consent" value="{{ __('Consent') }}" />
                        <select id="contact-consent" wire:model.live="contactForm.marketing_consent" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach (\App\Models\Crm\Contact::CONSENTS as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="contactForm.marketing_consent" class="mt-2" />
                    </div>
                    @if (($contactForm['marketing_consent'] ?? 'unknown') !== 'unknown')
                        <div>
                            <x-label for="contact-consent-source" value="{{ __('Where it came from') }}" />
                            <x-input id="contact-consent-source" type="text" class="mt-1 block w-full placeholder:text-xs" wire:model="contactForm.consent_source" placeholder="{{ __('For example: signed form at the trade fair') }}" />
                            <x-input-error for="contactForm.consent_source" class="mt-2" />
                        </div>
                    @endif
                </div>
            </div>

            <div class="sm:col-span-2">
                <x-label for="contact-notes" value="{{ __('Notes') }}" />
                <textarea id="contact-notes" rows="2" wire:model="contactForm.notes" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                <x-input-error for="contactForm.notes" class="mt-2" />
            </div>
        </div>
    </x-slot>

    <x-slot name="footer">
        <x-secondary-button wire:click="closeContactModal">{{ __('Cancel') }}</x-secondary-button>
        <x-button class="ms-3" wire:click="saveContact" wire:loading.attr="disabled" wire:target="saveContact">
            <span wire:loading.remove wire:target="saveContact">{{ __('Save contact') }}</span>
            <span wire:loading wire:target="saveContact">{{ __('Saving…') }}</span>
        </x-button>
    </x-slot>
</x-dialog-modal>