@php($isEdit = $order->exists)

<div class="space-y-5">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div>
            <label id="customer_id_label" for="customer_id_trigger" class="label block mb-2" style="color: var(--color-ink-70);">Existing customer (optional)</label>
            <div class="searchable-combobox" data-searchable-combobox>
                <select id="customer_id" name="customer_id" tabindex="-1" aria-hidden="true">
                    <option value="">— Inline only —</option>
                    @foreach ($customers as $c)
                        <option value="{{ $c->id }}" data-name="{{ e($c->name) }}" data-phone="{{ e($c->phone ?? '') }}" data-email="{{ e($c->email ?? '') }}" data-address="{{ e($c->address ?: trim(implode(', ', array_filter([$c->address_line_1, $c->address_line_2, $c->city, $c->postal_code, $c->country])))) }}" @selected(old('customer_id', $order->customer_id) == $c->id)>
                            {{ $c->name }}@if ($c->phone) ({{ $c->phone }})@endif
                        </option>
                    @endforeach
                </select>
                <div class="searchable-combobox__field">
                    <button
                        type="button"
                        id="customer_id_trigger"
                        class="searchable-combobox__trigger"
                        aria-haspopup="listbox"
                        aria-expanded="false"
                        aria-labelledby="customer_id_label"
                    >
                        <span data-combobox-label>Select a customer</span>
                    </button>
                    <input
                        type="text"
                        id="customer_id_search"
                        class="searchable-combobox__search"
                        placeholder="Search name or phone…"
                        autocomplete="off"
                        aria-label="Search customers"
                    >
                    <div class="searchable-combobox__menu">
                        <ul class="searchable-combobox__list" role="listbox" aria-labelledby="customer_id_label">
                            <li
                                class="searchable-combobox__option"
                                role="option"
                                data-value=""
                                data-name=""
                                data-phone=""
                                data-email=""
                                data-address=""
                                data-search="inline only"
                            >— Inline only —</li>
                            @foreach ($customers as $c)
                                <li
                                    class="searchable-combobox__option"
                                    role="option"
                                    data-value="{{ $c->id }}"
                                    data-name="{{ e($c->name) }}"
                                    data-phone="{{ e($c->phone ?? '') }}"
                                    data-email="{{ e($c->email ?? '') }}"
                                    data-address="{{ e($c->address ?: trim(implode(', ', array_filter([$c->address_line_1, $c->address_line_2, $c->city, $c->postal_code, $c->country])))) }}"
                                    data-search="{{ strtolower($c->name . ' ' . ($c->phone ?? '') . ' ' . ($c->email ?? '')) }}"
                                >{{ $c->name }}@if ($c->phone) ({{ $c->phone }})@endif</li>
                            @endforeach
                        </ul>
                        <p class="searchable-combobox__empty">No customers match your search.</p>
                    </div>
                </div>
            </div>
            <p class="mt-1 text-xs" style="color: var(--color-ink-40);">Pick an existing customer or just fill the inline fields.</p>
        </div>
        <div>
            <label for="placed_at" class="label block mb-2" style="color: var(--color-ink-70);">Placed on</label>
            <input id="placed_at" name="placed_at" type="date" value="{{ old('placed_at', optional($order->placed_at)->format('Y-m-d') ?? now()->toDateString()) }}" class="input" required>
            @error('placed_at')<p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>@enderror
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
        <div class="md:col-span-2">
            <label for="customer_name" class="label block mb-2" style="color: var(--color-ink-70);">Customer name</label>
            <input id="customer_name" name="customer_name" type="text" value="{{ old('customer_name', $order->customer_name) }}" class="input" required maxlength="255">
            @error('customer_name')<p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>@enderror
        </div>
        <div>
            <label for="customer_phone" class="label block mb-2" style="color: var(--color-ink-70);">Phone</label>
            <input id="customer_phone" name="customer_phone" type="text" value="{{ old('customer_phone', $order->customer_phone) }}" class="input" maxlength="50">
            @error('customer_phone')<p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>@enderror
        </div>
    </div>

    <div>
        <label for="customer_email" class="label block mb-2" style="color: var(--color-ink-70);">Email (optional)</label>
        <input id="customer_email" name="customer_email" type="email" value="{{ old('customer_email', $order->customer_email) }}" class="input" maxlength="255">
        @error('customer_email')<p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>@enderror
    </div>

    <div>
        <label for="customer_address" class="label block mb-2" style="color: var(--color-ink-70);">Address</label>
        <textarea id="customer_address" name="customer_address" rows="2" class="input">{{ old('customer_address', $order->customer_address) }}</textarea>
        @error('customer_address')<p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>@enderror
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
        <div>
            <label for="source" class="label block mb-2" style="color: var(--color-ink-70);">Source</label>
            <select id="source" name="source" class="input">
                @foreach ($sources as $s)
                    <option value="{{ $s->value }}" @selected(old('source', $order->source?->value) === $s->value)>{{ $s->label() }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label for="payment_method" class="label block mb-2" style="color: var(--color-ink-70);">Payment method</label>
            <select id="payment_method" name="payment_method" class="input">
                @foreach ($paymentMethods as $pm)
                    <option value="{{ $pm->value }}" @selected(old('payment_method', $order->payment_method?->value) === $pm->value)>{{ $pm->label() }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label for="payment_status" class="label block mb-2" style="color: var(--color-ink-70);">Payment status</label>
            <select id="payment_status" name="payment_status" class="input">
                @foreach ($paymentStatuses as $ps)
                    <option value="{{ $ps->value }}" @selected(old('payment_status', $order->payment_status?->value) === $ps->value)>{{ $ps->label() }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-4 gap-5">
        <div>
            <label for="packaging_cost" class="label block mb-2" style="color: var(--color-ink-70);">Packaging / Labeling</label>
            <input type="hidden" name="packaging_cost" value="0">
            <input id="packaging_cost" type="number" step="0.01" min="0" value="0" class="input" disabled>
            <p class="mt-1 text-xs" style="color: var(--color-ink-40);">Disabled here. Packaging is handled in size-level bottle cost pricing.</p>
        </div>
        <div>
            <label for="delivery_fee" class="label block mb-2" style="color: var(--color-ink-70);">Delivery fee</label>
            <input id="delivery_fee" name="delivery_fee" type="number" step="0.01" min="0" value="{{ old('delivery_fee', $order->delivery_fee ?? 0) }}" class="input">
        </div>
        <div>
            <label for="discount" class="label block mb-2" style="color: var(--color-ink-70);">Discount</label>
            <input id="discount" name="discount" type="number" step="0.01" min="0" value="{{ old('discount', $order->discount ?? 0) }}" class="input">
        </div>
        <div>
            <label for="paid_amount" class="label block mb-2" style="color: var(--color-ink-70);">Paid amount</label>
            <input id="paid_amount" name="paid_amount" type="number" step="0.01" min="0" value="{{ old('paid_amount', $order->paid_amount ?? 0) }}" class="input">
        </div>
    </div>

    <div>
        <label for="notes" class="label block mb-2" style="color: var(--color-ink-70);">Notes (optional)</label>
        <textarea id="notes" name="notes" rows="3" class="input">{{ old('notes', $order->notes) }}</textarea>
    </div>

    <div class="flex items-center gap-3 pt-2">
        <button type="submit" class="btn btn-primary">{{ $isEdit ? 'Save Order' : 'Create Order' }}</button>
        <a href="{{ route('admin.orders.index') }}" class="btn btn-ghost">Cancel</a>
    </div>
</div>

<script>
    (() => {
        const customerSelect = document.getElementById('customer_id');
        const nameInput = document.getElementById('customer_name');
        const phoneInput = document.getElementById('customer_phone');
        const emailInput = document.getElementById('customer_email');
        const addressInput = document.getElementById('customer_address');
        const combobox = customerSelect?.closest('[data-searchable-combobox]');

        if (!customerSelect || !nameInput || !phoneInput || !addressInput || !combobox) return;

        const options = [...combobox.querySelectorAll('.searchable-combobox__option')];

        const applyCustomerFields = (source) => {
            if (!source || source.value === '' || source.value === undefined) return;

            nameInput.value = source.name || '';
            phoneInput.value = source.phone || '';
            if (emailInput) emailInput.value = source.email || '';
            addressInput.value = source.address || '';
        };

        const applySelectedCustomer = () => {
            const value = customerSelect.value;
            if (!value) return;

            const match = options.find((option) => option.dataset.value === String(value));
            applyCustomerFields(match?.dataset);
        };

        customerSelect.addEventListener('change', applySelectedCustomer);

        if (customerSelect.value) {
            applySelectedCustomer();
        }
    })();
</script>