@php
    $customer = $this->selectedCustomer;
    $package = $this->selectedPackage;
    $promoActive = $package && $package->promotionAppliesOn($work_order_date ?: \App\Support\BusinessClock::todayString());
@endphp
<div>
    <x-ui.page-header :title="$workOrder ? 'Edit work order '.$workOrder->work_order_number : 'New work order'"
        :description="$workOrder ? null : 'Customer, seller, vendor and package. Services, play type and pricing load automatically from the package and are saved as a snapshot.'"
        :breadcrumbs="['Work Orders' => route('work-orders.index'), ($workOrder ? $workOrder->work_order_number : 'New') => ($workOrder ? route('work-orders.show', $workOrder) : null), ...($workOrder ? ['Edit' => null] : [])]">
        @if ($workOrder)
            <x-slot:meta><div class="mt-2"><x-ui.status-badge :status="$workOrder->status" /></div></x-slot:meta>
        @endif
    </x-ui.page-header>

    <form wire:submit="save(false)" novalidate class="@container">
        <div class="grid grid-cols-1 gap-6 @4xl:grid-cols-3">
            <div class="space-y-6 @4xl:col-span-2">

                {{-- 1. Customer --}}
                <x-ui.card title="1. Customer" description="Who is the service for?" icon="user">
                    @if ($customer)
                        <div class="flex flex-col gap-4 rounded-xl bg-slate-50 p-4 ring-1 ring-slate-200 sm:flex-row sm:items-start sm:justify-between">
                            <div class="flex gap-3">
                                <span class="icon-tile tone-brand"><x-icon :name="$customer->customer_type->icon()" class="size-5" /></span>
                                <div class="min-w-0 text-sm">
                                    <p class="font-semibold text-slate-900">{{ $customer->displayName() }} <span class="font-mono text-xs font-normal text-slate-500">{{ $customer->customer_number }}</span></p>
                                    <p class="text-slate-600">{{ format_phone($customer->phone) }}{{ $customer->email ? ' · '.$customer->email : '' }}</p>
                                    @if ($customer->serviceAddress)
                                        <p class="mt-1 flex items-start gap-1 text-slate-600"><x-icon name="map-pin" class="mt-0.5 size-4 shrink-0 text-slate-400" />{{ $customer->serviceAddress->streetLine() }}, {{ $customer->serviceAddress->cityLine() }}</p>
                                    @endif
                                    @if (auth()->user()->hasMultipleOrganizations())
                                        <p class="mt-1 text-xs text-slate-500">Organization: {{ $customer->organization?->name }}</p>
                                    @endif
                                </div>
                            </div>
                            @unless ($workOrder)
                                <x-ui.button variant="secondary" size="sm" icon="arrow-path" wire:click="clearCustomer">Change customer</x-ui.button>
                            @endunless
                        </div>
                        @if ($workOrder)
                            <div class="mt-4">
                                <x-ui.checkbox name="refresh_address" label="Update the work order's service address from the customer profile"
                                    description="The address saved on this work order: {{ $workOrder->serviceStreetLine() }}, {{ $workOrder->serviceCityLine() }}" />
                            </div>
                        @endif
                    @else
                        <div class="flex flex-col gap-3 sm:flex-row">
                            <x-ui.search-input model="customerSearch" placeholder="Search by name, customer #, phone or e-mail..." label="Search customers" class="flex-1" />
                            @if ($canCreateCustomer)
                                <x-ui.button variant="secondary" icon="user-plus" wire:click="openCustomerModal">New customer</x-ui.button>
                            @endif
                        </div>
                        @error('customer_ulid')<p class="form-error" role="alert"><x-icon name="exclamation-circle" class="mt-px size-3.5" />{{ $message }}</p>@enderror

                        @if (mb_strlen(trim($customerSearch)) >= 2)
                            <ul class="mt-3 divide-y divide-slate-100 overflow-hidden rounded-xl ring-1 ring-slate-200" role="listbox" aria-label="Matching customers">
                                @forelse ($this->customerResults as $result)
                                    <li wire:key="cr-{{ $result->ulid }}">
                                        <button type="button" wire:click="selectCustomer('{{ $result->ulid }}')" class="flex w-full items-center justify-between gap-3 px-4 py-3 text-left text-sm hover:bg-brand-50/60 focus:bg-brand-50/60" role="option">
                                            <span class="min-w-0">
                                                <span class="block font-medium text-slate-900">{{ $result->displayName() }} <span class="font-mono text-xs font-normal text-slate-500">{{ $result->customer_number }}</span></span>
                                                <span class="block truncate text-xs text-slate-500">{{ format_phone($result->phone) }} · {{ $result->serviceAddress?->streetLine() }}, {{ $result->serviceAddress?->cityLine() }}</span>
                                            </span>
                                            <x-icon name="chevron-right" class="size-4 shrink-0 text-slate-400" />
                                        </button>
                                    </li>
                                @empty
                                    <li class="px-4 py-6 text-center text-sm text-slate-500">
                                        No active customers match "{{ $customerSearch }}".
                                        @if ($canCreateCustomer)<button type="button" wire:click="openCustomerModal" class="font-medium text-brand-700 hover:underline">Create a new customer</button>@endif
                                    </li>
                                @endforelse
                            </ul>
                        @else
                            <p class="mt-3 text-xs text-slate-500">Type at least 2 characters to search active customers.</p>
                        @endif
                    @endif
                </x-ui.card>

                @if ($customer)
                    {{-- 2. Seller & assignment --}}
                    <x-ui.card title="2. Seller & handling" icon="identification">
                        <div class="grid grid-cols-1 gap-5 sm:grid-cols-6">
                            @if ($lockedSeller)
                                <x-ui.field label="Seller" class="sm:col-span-3"><p class="form-control bg-slate-50">{{ $lockedSeller->fullName() }}</p></x-ui.field>
                            @else
                                <x-ui.select label="Seller" name="seller_ulid" :options="$this->sellerChoices" placeholder="Select seller" :required="true" class="sm:col-span-3" />
                            @endif
                            <x-ui.select label="Priority" name="priority" :options="\App\Enums\WorkOrderPriority::options()" :required="true" class="sm:col-span-3" />
                            @if ($canAssign)
                                <x-ui.select label="Assigned operations user" name="assigned_user_ulid" :options="$this->assigneeOptions" placeholder="Unassigned" class="sm:col-span-3" />
                            @endif
                            <x-ui.input label="Vendor order # (external)" name="external_order_number" maxlength="100" class="sm:col-span-3" hint="Optional reference from the vendor's system." />
                        </div>
                    </x-ui.card>

                    {{-- 3. Vendor & package --}}
                    <x-ui.card title="3. Vendor & package" description="Only active vendors and packages available to the customer's organization are listed." icon="cube">
                        @if ($packageLocked)
                            <x-ui.alert tone="info" class="mb-4">The package cannot be changed once a work order is {{ strtolower($workOrder->status->label()) }}. The price snapshot below is preserved.</x-ui.alert>
                        @endif
                        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                            <x-ui.field label="Vendor" for="vendor_ulid" name="vendor_ulid" :required="true">
                                <select id="vendor_ulid" wire:model.live="vendor_ulid" class="form-control" @disabled($packageLocked) aria-invalid="{{ $errors->has('vendor_ulid') ? 'true' : 'false' }}">
                                    <option value="">Select vendor</option>
                                    @foreach ($this->vendorOptions as $vendor)<option value="{{ $vendor->ulid }}">{{ $vendor->name }}</option>@endforeach
                                </select>
                            </x-ui.field>
                            <x-ui.field label="Package" for="package_ulid" name="package_ulid" :required="true">
                                <select id="package_ulid" wire:model.live="package_ulid" class="form-control" @disabled($packageLocked || $vendor_ulid === '') aria-invalid="{{ $errors->has('package_ulid') ? 'true' : 'false' }}">
                                    <option value="">{{ $vendor_ulid === '' ? 'Select a vendor first' : 'Select package' }}</option>
                                    @foreach ($this->packageOptions as $option)
                                        <option value="{{ $option->ulid }}">{{ $option->name }} — {{ $option->play_type->label() }} — {{ format_money($option->price) }}{{ $option->price_frequency->suffix() }}</option>
                                    @endforeach
                                </select>
                            </x-ui.field>
                        </div>
                        @if ($vendor_ulid !== '' && $this->packageOptions->isEmpty())
                            <p class="mt-3 text-sm text-amber-700">This vendor has no packages available on the selected work order date.</p>
                        @endif

                        <div wire:loading.flex wire:target="vendor_ulid,package_ulid" class="mt-5 hidden items-center gap-2 text-sm text-slate-500">
                            <svg class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                            Loading package services...
                        </div>

                        @if ($package)
                            <div class="mt-5 rounded-xl ring-1 ring-brand-200" wire:loading.remove wire:target="vendor_ulid,package_ulid">
                                <div class="flex flex-wrap items-center justify-between gap-3 border-b border-brand-100 bg-brand-50/60 px-4 py-3">
                                    <div>
                                        <p class="text-sm font-semibold text-slate-900">{{ $package->name }} <span class="font-mono text-xs font-normal text-slate-500">{{ $package->code }}</span></p>
                                        <p class="text-xs text-slate-600">{{ $package->vendor?->name }}</p>
                                    </div>
                                    <x-ui.play-type :type="\App\Enums\PlayType::fromServiceCount($package->serviceItems->count())" :count="$package->serviceItems->count()" />
                                </div>
                                <ul class="grid grid-cols-1 gap-3 p-4 sm:grid-cols-3">
                                    @foreach ($package->serviceItems as $item)
                                        <li class="flex items-start gap-2.5">
                                            <span class="icon-tile size-8 tone-brand"><x-icon :name="$item->service->iconName()" class="size-4" /></span>
                                            <span class="min-w-0 text-sm">
                                                <span class="block font-medium text-slate-900">{{ $item->service->name }}</span>
                                                <span class="block text-xs text-slate-500">{{ \App\Services\Packages\ServiceDetailSchema::summary($item->service->category, $item->details) ?: 'Included' }}</span>
                                            </span>
                                        </li>
                                    @endforeach
                                </ul>
                                @if ($package->description)<p class="border-t border-slate-100 px-4 py-3 text-xs text-slate-600">{{ $package->description }}</p>@endif
                            </div>
                        @endif
                    </x-ui.card>

                    {{-- 4. Dates --}}
                    <x-ui.card title="4. Dates & deadline" description="Dates are calendar days in {{ \App\Support\BusinessClock::timezone() }}." icon="calendar-days">
                        <div class="grid grid-cols-1 gap-5 sm:grid-cols-3">
                            <x-ui.input label="Work order date" name="work_order_date" type="date" :required="true" :live="true" />
                            <x-ui.input label="Requested installation date" name="requested_installation_date" type="date" />
                            <x-ui.input label="Deadline / due date" name="deadline_date" type="date" :required="true" :blur="true"
                                :hint="'Defaults to '.$defaultDeadlineDays.' days after the work order date.'" />
                        </div>
                    </x-ui.card>

                    {{-- 5. Notes --}}
                    <x-ui.card title="5. Notes" icon="chat-bubble-left-ellipsis">
                        <div class="grid grid-cols-1 gap-5">
                            <x-ui.textarea label="Customer notes" name="customer_notes" rows="2" maxlength="2000" hint="Visible on the printed work order (e.g. gate code, best time to call)." />
                            @unless ($workOrder)
                                <x-ui.textarea label="Internal note" name="internal_note" rows="2" maxlength="5000" hint="Staff-only. Added to the internal notes timeline." />
                            @endunless
                        </div>
                    </x-ui.card>
                @endif

                @error('general')<x-ui.alert tone="danger">{{ $message }}</x-ui.alert>@enderror
            </div>

            {{-- Summary --}}
            <aside>
                <div class="card sticky top-24 overflow-hidden">
                    <div class="border-b border-slate-100 px-5 py-4">
                        <h2 class="text-base font-semibold text-slate-900">Order summary</h2>
                        <p class="text-xs text-slate-500">{{ $workOrder ? 'Prices shown are the saved snapshot.' : 'Prices are captured when the order is created.' }}</p>
                    </div>
                    <dl class="space-y-3 px-5 py-4 text-sm">
                        <div class="flex justify-between gap-3"><dt class="text-slate-500">Customer</dt><dd class="text-right font-medium">{{ $customer?->displayName() ?? '—' }}</dd></div>
                        <div class="flex justify-between gap-3"><dt class="text-slate-500">Package</dt><dd class="text-right font-medium">{{ $package?->name ?? '—' }}</dd></div>
                        <div class="flex justify-between gap-3"><dt class="text-slate-500">Service type</dt>
                            <dd>@if ($package)<x-ui.play-type :type="\App\Enums\PlayType::fromServiceCount($package->serviceItems->count())" />@else — @endif</dd></div>
                        @if ($workOrder && $packageLocked)
                            <div class="flex justify-between gap-3"><dt class="text-slate-500">Monthly price</dt><dd class="font-semibold tabular-nums">{{ format_money($workOrder->monthly_price) }}</dd></div>
                            <div class="flex justify-between gap-3"><dt class="text-slate-500">Installation</dt><dd class="tabular-nums">{{ format_money($workOrder->installation_charge) }}</dd></div>
                            <div class="flex justify-between gap-3"><dt class="text-slate-500">Activation</dt><dd class="tabular-nums">{{ format_money($workOrder->activation_charge) }}</dd></div>
                        @elseif ($package)
                            <div class="flex justify-between gap-3"><dt class="text-slate-500">Package price</dt><dd class="font-semibold tabular-nums">{{ format_money($package->price) }}<span class="text-xs font-normal text-slate-500">{{ $package->price_frequency->suffix() }}</span></dd></div>
                            <div class="flex justify-between gap-3"><dt class="text-slate-500">Monthly price</dt><dd class="tabular-nums">{{ format_money($package->monthlyRate()) }}</dd></div>
                            @if ($promoActive)
                                <div class="flex justify-between gap-3"><dt class="text-slate-500">Promotional price</dt><dd class="tabular-nums text-emerald-700">{{ format_money($package->promotional_price) }}</dd></div>
                            @endif
                            <div class="flex justify-between gap-3"><dt class="text-slate-500">Installation</dt><dd class="tabular-nums">{{ format_money($package->installation_price) }}</dd></div>
                            <div class="flex justify-between gap-3"><dt class="text-slate-500">Activation</dt><dd class="tabular-nums">{{ format_money($package->activation_price) }}</dd></div>
                        @endif
                        <div class="flex justify-between gap-3 border-t border-slate-100 pt-3"><dt class="text-slate-500">Order date</dt><dd>{{ $work_order_date ? format_date($work_order_date) : '—' }}</dd></div>
                        <div class="flex justify-between gap-3"><dt class="text-slate-500">Deadline</dt><dd class="font-medium">{{ $deadline_date ? format_date($deadline_date) : '—' }}</dd></div>
                    </dl>
                    <div class="space-y-2 border-t border-slate-100 bg-slate-50/70 px-5 py-4">
                        @if ($workOrder)
                            <x-ui.button type="submit" icon="check" loading="save" class="w-full">Save changes</x-ui.button>
                            <x-ui.button variant="secondary" :href="route('work-orders.show', $workOrder)" class="w-full">Cancel</x-ui.button>
                        @else
                            @if ($canSubmit)
                                <x-ui.button icon="paper-airplane" wire:click="save(true)" loading="save" class="w-full" :disabled="! $customer">Create &amp; submit</x-ui.button>
                            @endif
                            <x-ui.button type="submit" :variant="$canSubmit ? 'secondary' : 'primary'" icon="pencil-square" loading="save" class="w-full" :disabled="! $customer">Save as draft</x-ui.button>
                            <p class="text-center text-xs text-slate-500">A work order number is generated on save.</p>
                        @endif
                    </div>
                </div>
            </aside>
        </div>
    </form>

    {{-- Quick customer creation --}}
    @if ($canCreateCustomer)
        <x-ui.modal wire:model="showCustomerModal" title="New customer" description="The customer is created and selected for this work order." size="xl" icon="user-plus">
            <form wire:submit="saveCustomer" id="quick-customer-form" novalidate>
                @include('livewire.customers.partials.customer-fields', [
                    'prefix' => 'customerForm',
                    'formData' => $customerForm,
                    'organizations' => $modalOrganizations,
                    'sellers' => $modalSellers,
                    'sellerLocked' => (bool) $lockedSeller,
                    'lockedSellerName' => $lockedSeller?->fullName(),
                ])
                @error('customerForm.general')<x-ui.alert tone="danger" class="mt-4">{{ $message }}</x-ui.alert>@enderror
            </form>
            <x-slot:footer>
                <x-ui.button variant="secondary" x-on:click="open = false">Cancel</x-ui.button>
                <x-ui.button type="submit" form="quick-customer-form" icon="check" loading="saveCustomer">Create customer</x-ui.button>
            </x-slot:footer>
        </x-ui.modal>
    @endif
</div>