@php
    use App\Services\Leads\LeadModule;
    use App\Services\Leads\RemarkRule;
    $name = trim((string) $lead->user_name) ?: 'Unnamed lead';
    $fields = collect($sections)->collapse();
    // Initial values for client-side toggles (validation errors keep the submitted value).
    $initial = $fields->map(fn ($f, $col) => (string) old($col, $f['type'] === 'date' ? LeadModule::inputDate($lead->getAttribute($col)) : $lead->getAttribute($col)))->all();
    $outcomes = collect($module->options('final_remark', $lead->final_remark))->keys()
        ->mapWithKeys(fn ($r) => [$r => RemarkRule::outcome($r)])->filter()->all();
    $showIf = function (array $f): ?string {
        $cond = $f['show_if'] ?? null;
        if ($cond === 'live') {
            return "outcome === 'LIVE'";
        }
        if (is_array($cond)) {
            return collect($cond)->map(fn ($v, $k) => 'v['.json_encode($k).'] === '.json_encode($v))->implode(' && ');
        }

        return null;
    };
    $toggles = $fields->filter(fn ($f) => is_array($f['show_if'] ?? null))->flatMap(fn ($f) => array_keys($f['show_if']))->unique()->push('final_remark')->all();
@endphp
<x-layouts.app :title="'Edit '.$name" :subtitle="$module->label().' lead #'.$lead->getKey()"
               :breadcrumbs="['Leads & Messaging' => null, $module->label() => route('leads.index', $module->key), $name => route('leads.show', [$module->key, $lead->getKey()]), 'Edit' => null]">
    <form method="POST" action="{{ route('leads.update', [$module->key, $lead->getKey()]) }}" class="grid gap-6 lg:grid-cols-3"
          x-data="{ v: @js($initial), outcomes: @js($outcomes), get outcome() { return this.outcomes[this.v.final_remark] || null } }">
        @csrf @method('PUT')

        <div class="space-y-6 lg:col-span-2">
            @foreach ($sections as $section => $sectionFields)
                <x-card :title="$section" :subtitle="$section === 'Joining & KYC' ? 'Sensitive details — visible and editable by administrators only.' : null">
                    @if ($section === 'Joining & KYC')
                        <x-slot:actions><span class="badge badge-amber"><x-heroicon-m-lock-closed class="h-3.5 w-3.5" /> Admin only</span></x-slot:actions>
                        <p class="mb-4 text-sm text-ink-500" x-show="v.joining !== 'YES'">Set <span class="font-medium">Joined</span> to “Yes” to record KYC and bank details.</p>
                    @endif
                    <div class="grid gap-5 sm:grid-cols-2">
                        @foreach ($sectionFields as $col => $f)
                            @php
                                $cond = $showIf($f);
                                $value = $initial[$col] ?? '';
                                $model = in_array($col, $toggles, true) ? 'v.'.$col : null;
                                $label = $module->columnLabel($col);
                            @endphp
                            <div @class(['sm:col-span-2' => ($f['span'] ?? null) === 'full']) @if ($cond) x-show="{{ $cond }}" x-cloak @endif>
                                @switch($f['type'])
                                    @case('remark')
                                        <x-select :name="$col" :label="$label" :options="$module->options($col, $lead->getAttribute($col))" :value="$value" placeholder="— None —" x-model="v.final_remark" />
                                        <p class="form-hint flex items-center gap-1.5">
                                            Status after saving:
                                            <span x-show="outcome === 'LIVE'" class="badge badge-green">Live</span>
                                            <span x-show="outcome === 'LOST'" class="badge badge-red" x-cloak>Lost</span>
                                            <span x-show="!outcome" class="badge badge-violet" x-cloak>New</span>
                                        </p>
                                        @break
                                    @case('select')
                                        <x-select :name="$col" :label="$label" :options="$module->options($col, $lead->getAttribute($col))" :value="$value" placeholder="— None —"
                                                  :enhance="! $model && ! empty($f['enhance'])" :required="! empty($f['required'])"
                                                  :x-model="$model" />
                                        @break
                                    @case('date')
                                        <x-input type="date" :name="$col" :label="$label" :value="$value" :hint="$f['hint'] ?? (($f['show_if'] ?? null) === 'live' ? 'Required for live leads.' : null)" />
                                        @break
                                    @case('textarea')
                                        <x-textarea :name="$col" :label="$label" :value="$value" rows="3" :maxlength="$f['max'] ?? 200" />
                                        @break
                                    @case('number')
                                        <x-input :name="$col" :label="$label" :value="$value" inputmode="numeric" pattern="[0-9]*" :maxlength="$f['max'] ?? 10" />
                                        @break
                                    @case('phone')
                                        <x-input type="tel" :name="$col" :label="$label" :value="$value" :required="! empty($f['required'])" inputmode="tel" maxlength="16" :hint="$f['hint'] ?? '10-digit mobile number'" />
                                        @break
                                    @default
                                        <x-input :name="$col" :label="$label" :value="$value" :required="! empty($f['required'])" :maxlength="$f['max'] ?? 200"
                                                 :hint="$f['hint'] ?? null" autocomplete="off" />
                                @endswitch
                            </div>
                        @endforeach
                    </div>
                </x-card>
            @endforeach
        </div>

        <div class="space-y-6">
            <x-card title="Summary">
                <dl class="space-y-3 text-sm">
                    <div class="flex justify-between gap-3"><dt class="text-ink-500">Current status</dt><dd>@include('leads.partials.status', ['value' => $lead->live_data])</dd></div>
                    <div class="flex justify-between gap-3"><dt class="text-ink-500">Captured</dt><dd class="text-ink-900 tabular-nums dark:text-white">{{ $lead->date ?: '—' }}</dd></div>
                    <div class="flex justify-between gap-3"><dt class="text-ink-500">IP address</dt><dd class="font-mono text-xs text-ink-700 dark:text-ink-300">{{ $lead->user_ip_address ?: '—' }}</dd></div>
                </dl>
                <div class="mt-4 rounded-xl bg-ink-50 p-3 text-xs text-ink-500 dark:bg-ink-800/60">
                    <x-heroicon-m-information-circle class="mr-1 inline h-4 w-4 text-ink-400" />
                    The final remark sets the status: “interested” remarks make the lead <span class="font-medium text-emerald-600">Live</span> and need a due date; “not interested” remarks mark it <span class="font-medium text-rose-600">Lost</span>.
                </div>
            </x-card>

            <div class="flex gap-2">
                <button class="btn btn-brand flex-1"><x-heroicon-m-check class="h-4 w-4" /> Save changes</button>
                <a href="{{ route('leads.show', [$module->key, $lead->getKey()]) }}" class="btn btn-secondary">Cancel</a>
            </div>
        </div>
    </form>
</x-layouts.app>