@php($dueValue = preg_match('/^\d{4}-\d{2}-\d{2}$/', (string) $lead->due_date) ? $lead->due_date : null)
<x-layouts.app title="Update doctor lead" :subtitle="$lead->user_name.' · '.$lead->user_number"
               :breadcrumbs="['Doctor' => route('doctor.dashboard'), 'SMS doctor' => route('doctor.sms.index'), ($lead->user_name ?: '#'.$lead->id) => null]">
    <form method="POST" action="{{ route('doctor.sms.update', $lead) }}" class="grid gap-6 lg:grid-cols-3"
          x-data="{
              remark: @js(old('final_remark', $lead->final_remark ?: 'none')),
              data: @js(old('live_data', $lead->live_data) ?? ''),
              exec: @js(old('field_manager', $lead->field_manager) ?? ''),
              phones: @js($executivePhones),
              lost: @js(\App\Models\DoctorChat::LOST_REMARKS),
              live: @js(\App\Models\DoctorChat::LIVE_REMARKS),
              get derived() { return this.lost.includes(this.remark) ? 'LOST' : (this.live.includes(this.remark) ? 'LIVE' : null) },
              get showDue() { return (this.derived || this.data) === 'LIVE' },
          }"
          x-effect="if (derived) data = derived">
        @csrf @method('PUT')

        <div class="space-y-6 lg:col-span-2">
            <x-card title="Customer">
                <div class="grid gap-5 sm:grid-cols-2">
                    <x-input name="name" label="Customer name" :value="$lead->user_name" required maxlength="200" />
                    <x-input name="number" label="Customer number" :value="$lead->user_number" required maxlength="20" inputmode="tel" />
                    <x-input name="type" label="Type" :value="$lead->type" maxlength="200" />
                    <x-input name="rs_range" label="Range" :value="$lead->rs_range" maxlength="200" />
                </div>
            </x-card>

            <x-card title="Qualification" subtitle="The final remark decides LIVE / LOST automatically.">
                <div class="grid gap-5 sm:grid-cols-2">
                    <div>
                        <label for="final_remark" class="form-label">Final remark</label>
                        <select id="final_remark" name="final_remark" class="form-input" x-model="remark">
                            @foreach ($remarks as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('final_remark')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="live_data" class="form-label">Data</label>
                        <select id="live_data" name="live_data" class="form-input" x-model="data" :disabled="!!derived">
                            <option value="">None</option>
                            <option value="LIVE">Live</option>
                            <option value="LOST">Lost</option>
                        </select>
                        <input type="hidden" name="live_data" :value="data" :disabled="!derived">
                        @error('live_data')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="field_manager" class="form-label">Executive</label>
                        <select id="field_manager" name="field_manager" class="form-input" x-model="exec">
                            <option value="">— None —</option>
                            @foreach ($executives as $e)
                                <option value="{{ $e }}">{{ $e }}</option>
                            @endforeach
                        </select>
                        @error('field_manager')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="form-label">Executive mobile</label>
                        <input class="form-input" readonly :value="phones[exec] || ''" placeholder="—">
                    </div>
                    <div x-show="showDue" x-cloak>
                        <x-input name="due_date" type="date" label="Follow-up date" :value="$dueValue" />
                    </div>
                </div>
            </x-card>
        </div>

        <div class="space-y-6">
            <x-card title="Enquiry">
                <dl class="space-y-2 text-sm">
                    <div class="flex justify-between gap-3"><dt class="text-ink-500">Received</dt><dd class="text-right font-medium">{{ $lead->date ?: '—' }}</dd></div>
                    <div class="flex justify-between gap-3"><dt class="text-ink-500">Lead ID</dt><dd class="font-medium">#{{ $lead->id }}</dd></div>
                    <div class="flex justify-between gap-3"><dt class="text-ink-500">Source IP</dt><dd class="font-medium">{{ $lead->user_ip_address ?: '—' }}</dd></div>
                </dl>
            </x-card>
            <div class="flex gap-2">
                <button class="btn btn-brand flex-1"><x-heroicon-m-check class="h-4 w-4" /> Save</button>
                <a href="{{ route('doctor.sms.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </div>
    </form>
</x-layouts.app>