{{--
    Shared customer fields (customer page + quick-create dialog in the work order form).
    Variables:
      $prefix          Livewire Form property name (default "form")
      $formData        the CustomerFormData instance (defaults to $form)
      $organizations   ulid => name (empty when the organization is not selectable)
      $sellers         ulid => label
      $sellerLocked    bool (seller logins always own their customers)
      $lockedSellerName ?string
--}}
@php
    $p = $prefix ?? 'form';
    $f = $formData ?? $form;
@endphp

<x-ui.form-section title="Customer" description="Residential or business customer. A unique customer number (e.g. CUS-000001) is generated automatically." icon="user">
    @if ($organizations)
        <x-ui.select label="Organization" :name="$p.'.organization_ulid'" :options="$organizations" placeholder="Select organization" :required="true" :live="true" class="sm:col-span-6" />
    @endif

    <fieldset class="sm:col-span-6">
        <legend class="form-label">Customer type <span class="text-rose-600" aria-hidden="true">*</span></legend>
        <div class="mt-2 flex flex-wrap gap-3">
            @foreach (\App\Enums\CustomerType::cases() as $type)
                <label class="flex cursor-pointer items-center gap-2 rounded-lg px-3.5 py-2 text-sm font-medium ring-1 ring-slate-200 has-[:checked]:bg-brand-50 has-[:checked]:text-brand-800 has-[:checked]:ring-brand-400">
                    <input type="radio" wire:model.live="{{ $p }}.customer_type" value="{{ $type->value }}" class="form-radio">
                    <x-icon :name="$type->icon()" class="size-4" />{{ $type->label() }}
                </label>
            @endforeach
        </div>
    </fieldset>

    @if ($f->customer_type === 'business')
        <x-ui.input label="Company name" :name="$p.'.company_name'" :required="true" maxlength="150" autocomplete="organization" class="sm:col-span-6" />
    @endif

    <x-ui.input :label="$f->customer_type === 'business' ? 'Contact first name' : 'First name'" :name="$p.'.first_name'" :required="true" maxlength="80" autocomplete="given-name" class="sm:col-span-2" />
    <x-ui.input label="Middle name" :name="$p.'.middle_name'" maxlength="80" autocomplete="additional-name" class="sm:col-span-2" />
    <x-ui.input :label="$f->customer_type === 'business' ? 'Contact last name' : 'Last name'" :name="$p.'.last_name'" :required="true" maxlength="80" autocomplete="family-name" class="sm:col-span-2" />
</x-ui.form-section>

<div class="border-t border-slate-100"></div>

<x-ui.form-section title="Contact" icon="phone">
    <x-ui.input label="Phone" :name="$p.'.phone'" type="tel" :required="true" maxlength="25" placeholder="(718) 555-0123" autocomplete="tel" class="sm:col-span-3" />
    <x-ui.input label="Alternate phone" :name="$p.'.alternate_phone'" type="tel" maxlength="25" autocomplete="tel" class="sm:col-span-3" />
    <x-ui.input label="E-mail" :name="$p.'.email'" type="email" :required="$f->preferred_contact_method === 'email'" maxlength="191" autocomplete="email" class="sm:col-span-3" />
    <x-ui.select label="Preferred contact method" :name="$p.'.preferred_contact_method'" :options="\App\Enums\ContactMethod::options()" :required="true" :live="true" class="sm:col-span-3" />

    @if ($sellerLocked)
        <x-ui.field label="Assigned seller" class="sm:col-span-6">
            <p class="form-control bg-slate-50">{{ $lockedSellerName ?? '—' }}</p>
        </x-ui.field>
    @else
        <x-ui.select label="Assigned seller" :name="$p.'.seller_ulid'" :options="$sellers" placeholder="Not assigned" class="sm:col-span-6"
            hint="Seller logins only see customers assigned to them." />
    @endif
</x-ui.form-section>

<div class="border-t border-slate-100"></div>

<x-ui.form-section title="Service address" description="Where the service will be installed." icon="map-pin">
    <x-ui.input label="Address line 1" :name="$p.'.service.address_line1'" :required="true" maxlength="150" autocomplete="address-line1" placeholder="Street address" class="sm:col-span-4" />
    <x-ui.input label="Apartment / unit" :name="$p.'.service.unit'" maxlength="30" placeholder="Apt 4B" class="sm:col-span-2" />
    <x-ui.input label="Address line 2" :name="$p.'.service.address_line2'" maxlength="150" autocomplete="address-line2" class="sm:col-span-6" />
    <x-ui.input label="City" :name="$p.'.service.city'" :required="true" maxlength="100" autocomplete="address-level2" class="sm:col-span-2" />
    <x-ui.select label="State" :name="$p.'.service.state'" :options="\App\Support\UsStates::ALL" placeholder="Select" :required="true" class="sm:col-span-2" />
    <x-ui.input label="ZIP code" :name="$p.'.service.zip'" :required="true" maxlength="10" inputmode="numeric" autocomplete="postal-code" placeholder="11375" class="sm:col-span-1" />
    <x-ui.input label="County" :name="$p.'.service.county'" maxlength="100" class="sm:col-span-1" />

    <div class="sm:col-span-6">
        <x-ui.checkbox :name="$p.'.separate_mailing'" label="Mailing address is different from the service address" :live="true" />
    </div>

    @if ($f->separate_mailing)
        <x-ui.input label="Mailing address line 1" :name="$p.'.mailing.address_line1'" :required="true" maxlength="150" class="sm:col-span-4" />
        <x-ui.input label="Apartment / unit" :name="$p.'.mailing.unit'" maxlength="30" class="sm:col-span-2" />
        <x-ui.input label="Mailing address line 2" :name="$p.'.mailing.address_line2'" maxlength="150" class="sm:col-span-6" />
        <x-ui.input label="City" :name="$p.'.mailing.city'" :required="true" maxlength="100" class="sm:col-span-2" />
        <x-ui.select label="State" :name="$p.'.mailing.state'" :options="\App\Support\UsStates::ALL" placeholder="Select" :required="true" class="sm:col-span-2" />
        <x-ui.input label="ZIP code" :name="$p.'.mailing.zip'" :required="true" maxlength="10" class="sm:col-span-1" />
        <x-ui.input label="County" :name="$p.'.mailing.county'" maxlength="100" class="sm:col-span-1" />
    @endif
</x-ui.form-section>

<div class="border-t border-slate-100"></div>

<x-ui.form-section title="Notes" icon="chat-bubble-left-ellipsis">
    <x-ui.textarea label="Customer notes" :name="$p.'.notes'" rows="3" maxlength="5000" class="sm:col-span-6" />
</x-ui.form-section>