@extends('layouts.app')
@section('title', $lead->customer->name)
@section('heading', 'Lead: '.$lead->customer->name)

@section('content')
@php $c = $lead->customer; @endphp

<div class="flex flex-wrap items-start justify-between gap-3">
    <div>
        <p class="flex flex-wrap items-center gap-2 text-sm">
            <span class="inline-flex rounded-full border px-2.5 py-0.5 text-xs font-semibold {{ $lead->stage->badge() }}">{{ $lead->stage->label() }}</span>
            <x-sla-chip :lead="$lead" />
            <span class="text-muted">{{ config('crm.sources')[$lead->source] ?? $lead->source }}{{ $lead->source_detail ? ' · '.$lead->source_detail : '' }} · opened {{ $lead->created_at->format('d M Y, H:i') }}</span>
        </p>
        <p class="mt-1 text-sm">Owner: <strong>{{ $lead->assignee?->name ?? 'Unassigned' }}</strong>
            @if (! $lead->assignee) @can('leads.edit')<form method="POST" action="{{ route('leads.take', $lead) }}" class="ml-2 inline">@csrf<button class="underline">Take this lead</button></form>@endcan @endif</p>
    </div>
    <div class="flex flex-wrap gap-2">
        <a href="tel:+{{ $c->phone }}" class="btn-quiet">Call {{ $c->display_phone }}</a>
        @if ($c->email)<a href="mailto:{{ $c->email }}" class="btn-quiet">Email</a>@endif
        @can('customers.view')<a href="{{ route('customers.show', $c) }}" class="btn-quiet">Customer profile</a>@endcan
    </div>
</div>

<div class="mt-5 grid gap-5 lg:grid-cols-3">
<div class="space-y-5 lg:col-span-2">

    {{-- WhatsApp --}}
    @if ($lead->is_open)
    <section class="rounded-lg border border-line bg-panel p-4" aria-labelledby="wa-h" x-data="{ msg: @js($templates['first_contact']['text']) }">
        <h2 id="wa-h" class="text-sm font-semibold">Message on WhatsApp</h2>
        <form method="POST" action="{{ route('leads.whatsapp', $lead) }}" target="_blank" rel="noopener" class="mt-3 space-y-3">
            @csrf
            <div class="flex flex-wrap gap-2 text-xs">
                @foreach ($templates as $key => $t)<button type="button" class="btn-quiet px-2 py-1" @click="msg = @js($t['text'])">{{ $t['label'] }} template</button>@endforeach
            </div>
            <label for="wa_msg" class="sr-only">Message</label>
            <textarea id="wa_msg" name="message" rows="3" maxlength="1000" x-model="msg" class="field"></textarea>
            <button class="btn-primary">Open WhatsApp to {{ $c->display_phone }}</button>
            <p class="text-xs text-muted">WhatsApp opens with this text ready. You press send there, and the contact is logged here.</p>
        </form>
    </section>
    @endif

    {{-- Stage controls --}}
    @can('leads.edit')
    <section class="rounded-lg border border-line bg-panel p-4" aria-labelledby="stage-h">
        <h2 id="stage-h" class="text-sm font-semibold">Pipeline</h2>
        @if ($lead->is_open)
            <ol class="mt-3 flex flex-wrap gap-2">
                @foreach (\App\Enums\LeadStage::open() as $s)
                    <li><form method="POST" action="{{ route('leads.move', $lead) }}">@csrf<input type="hidden" name="stage" value="{{ $s->value }}">
                        <button class="rounded-md border px-3 py-1.5 text-sm {{ $s === $lead->stage ? $s->badge().' font-semibold' : 'border-line bg-white hover:bg-ground' }}" @if ($s === $lead->stage) aria-current="step" @endif>{{ $s->label() }}</button></form></li>
                @endforeach
            </ol>
            <div class="mt-4 flex flex-wrap items-start gap-3">
                <details class="rounded-md border border-emerald-300">
                    <summary class="cursor-pointer list-none px-3 py-2 text-sm font-medium text-emerald-900 hover:bg-emerald-50">Mark as won</summary>
                    <form method="POST" action="{{ route('leads.win', $lead) }}" class="space-y-3 border-t border-emerald-200 p-3">@csrf
                        <div><label class="mb-1 block text-xs font-medium" for="win_v">Vehicle sold</label>
                            <select id="win_v" name="vehicle_id" required class="field"><option value="">Select vehicle</option>
                                @foreach ($vehicles as $v)<option value="{{ $v->id }}" @selected($lead->interest_vehicle_id === $v->id)>{{ $v->stock_id }} · {{ $v->display_name }}</option>@endforeach</select></div>
                        <div><label class="mb-1 block text-xs font-medium" for="win_p">Final price (KES)</label><input id="win_p" name="price" type="number" min="1" required class="field"></div>
                        <div><label class="mb-1 block text-xs font-medium" for="win_n">Note</label><input id="win_n" name="note" maxlength="300" class="field"></div>
                        <button class="btn-primary">Confirm sale</button>
                    </form>
                </details>
                <details class="rounded-md border border-line">
                    <summary class="cursor-pointer list-none px-3 py-2 text-sm font-medium hover:bg-ground">Mark as lost</summary>
                    <form method="POST" action="{{ route('leads.lose', $lead) }}" class="space-y-3 border-t border-line p-3">@csrf
                        <div><label class="mb-1 block text-xs font-medium" for="lost_r">Reason</label>
                            <select id="lost_r" name="reason" required class="field"><option value="">Select reason</option>@foreach (config('crm.lost_reasons') as $k => $l)<option value="{{ $k }}">{{ $l }}</option>@endforeach</select></div>
                        <div><label class="mb-1 block text-xs font-medium" for="lost_n">Note</label><input id="lost_n" name="note" maxlength="500" class="field"></div>
                        <button class="btn-quiet">Confirm lost</button>
                    </form>
                </details>
            </div>
        @elseif ($lead->stage === \App\Enums\LeadStage::Won)
            <p class="mt-2 text-sm">Won on {{ $lead->won_at->format('d M Y') }}: {{ $lead->wonVehicle?->display_name }} ({{ $lead->wonVehicle?->stock_id }}) for <strong>KSh {{ number_format((float) $lead->won_price) }}</strong>.</p>
        @else
            <p class="mt-2 text-sm">Lost on {{ $lead->lost_at->format('d M Y') }}: {{ config('crm.lost_reasons')[$lead->lost_reason] ?? $lead->lost_reason }}{{ $lead->lost_note ? ' – '.$lead->lost_note : '' }}.</p>
            <form method="POST" action="{{ route('leads.reopen', $lead) }}" class="mt-3">@csrf<button class="btn-quiet">Reopen lead</button></form>
        @endif
    </section>
    @endcan

    {{-- Test drive --}}
    @if ($lead->is_open) @can('testdrives.manage')
    <section class="rounded-lg border border-line bg-panel p-4" aria-labelledby="td-h">
        <h2 id="td-h" class="text-sm font-semibold">Schedule a test drive</h2>
        <form method="POST" action="{{ route('test-drives.store', $lead) }}" class="mt-3 grid gap-3 sm:grid-cols-4">@csrf
            <div class="sm:col-span-2"><label for="td_v" class="mb-1 block text-xs font-medium">Vehicle</label>
                <select id="td_v" name="vehicle_id" required class="field"><option value="">Select vehicle</option>
                    @foreach ($vehicles as $v)<option value="{{ $v->id }}" @selected($lead->interest_vehicle_id === $v->id)>{{ $v->stock_id }} · {{ $v->display_name }}</option>@endforeach</select></div>
            <div><label for="td_when" class="mb-1 block text-xs font-medium">Date and time</label><input id="td_when" type="datetime-local" name="scheduled_for" required min="{{ now()->format('Y-m-d\TH:i') }}" class="field"></div>
            <div><label for="td_len" class="mb-1 block text-xs font-medium">Minutes</label><input id="td_len" type="number" name="duration_minutes" value="{{ config('crm.test_drive.default_minutes') }}" min="10" max="180" class="field"></div>
            <div class="sm:col-span-4"><button class="btn-primary">Book test drive</button></div>
        </form>
        @if ($lead->testDrives->count())
            <ul class="mt-4 divide-y divide-line border-t border-line text-sm">
                @foreach ($lead->testDrives as $t)<li class="flex flex-wrap justify-between gap-2 py-2"><span>{{ $t->scheduled_for->format('D d M, H:i') }} · {{ $t->vehicle->display_name }}</span><span class="text-muted">{{ ucfirst(str_replace('_', ' ', $t->status)) }}{{ $t->is_signed ? ' · indemnity signed' : '' }}</span></li>@endforeach
            </ul>
        @endif
    </section>
    @endcan @endif

    {{-- Timeline --}}
    <section class="rounded-lg border border-line bg-panel p-4" aria-labelledby="tl-h">
        <h2 id="tl-h" class="text-sm font-semibold">Activity</h2>
        @can('leads.edit') @if ($lead->is_open)
        <form method="POST" action="{{ route('leads.activity', $lead) }}" class="mt-3 grid gap-3 sm:grid-cols-4">@csrf
            <div><label for="act_t" class="mb-1 block text-xs font-medium">Type</label>
                <select id="act_t" name="type" class="field"><option value="call">Phone call</option><option value="note">Note</option><option value="sms">SMS</option><option value="email">Email</option><option value="visit">Visit</option></select></div>
            <div class="sm:col-span-3"><label for="act_b" class="mb-1 block text-xs font-medium">What happened</label><input id="act_b" name="body" required maxlength="2000" class="field"></div>
            <div class="sm:col-span-2"><label for="act_f" class="mb-1 block text-xs font-medium">Next follow-up (optional)</label><input id="act_f" type="datetime-local" name="next_follow_up_at" class="field"></div>
            <div class="flex items-end"><button class="btn-primary">Log it</button></div>
        </form>
        @endif @endcan
        <ol class="mt-4 space-y-3 text-sm">
            @foreach ($lead->activities as $a)
                <li class="flex gap-3"><time class="w-28 shrink-0 text-xs text-muted" datetime="{{ $a->occurred_at->toIso8601String() }}">{{ $a->occurred_at->format('d M, H:i') }}</time>
                    <div><span class="rounded bg-ground px-1.5 py-0.5 text-xs">{{ ucfirst(str_replace('_', ' ', $a->type)) }}</span> {{ $a->body }}<span class="block text-xs text-muted">{{ $a->user?->name ?? 'System' }}</span></div></li>
            @endforeach
        </ol>
    </section>
</div>

<aside class="space-y-5">
    <section class="rounded-lg border border-line bg-panel p-4" aria-labelledby="det-h">
        <h2 id="det-h" class="text-sm font-semibold">Details</h2>
        @can('leads.edit')
        <form method="POST" action="{{ route('leads.update', $lead) }}" class="mt-3 space-y-3 text-sm">
            @csrf @method('PUT')
            <input type="hidden" name="source" value="{{ $lead->source }}">
            <div><label class="mb-1 block text-xs font-medium" for="d_veh">Vehicle of interest</label>
                <select id="d_veh" name="interest_vehicle_id" class="field"><option value="">None</option>@foreach ($vehicles as $v)<option value="{{ $v->id }}" @selected($lead->interest_vehicle_id === $v->id)>{{ $v->stock_id }} · {{ $v->display_name }}</option>@endforeach</select></div>
            <div class="grid grid-cols-2 gap-2">
                <div><label class="mb-1 block text-xs font-medium" for="d_pri">Priority</label><select id="d_pri" name="priority" class="field">@foreach (config('crm.priorities') as $k => $l)<option value="{{ $k }}" @selected($lead->priority === $k)>{{ $l }}</option>@endforeach</select></div>
                <div><label class="mb-1 block text-xs font-medium" for="d_pay">Paying by</label><select id="d_pay" name="payment_intent" class="field">@foreach (config('crm.payment_intents') as $k => $l)<option value="{{ $k }}" @selected($lead->payment_intent === $k)>{{ $l }}</option>@endforeach</select></div>
                <div><label class="mb-1 block text-xs font-medium" for="d_bmin">Budget from</label><input id="d_bmin" name="budget_min" type="number" min="0" value="{{ $lead->budget_min }}" class="field"></div>
                <div><label class="mb-1 block text-xs font-medium" for="d_bmax">Budget to</label><input id="d_bmax" name="budget_max" type="number" min="0" value="{{ $lead->budget_max }}" class="field"></div>
            </div>
            <div><label class="mb-1 block text-xs font-medium" for="d_notes">Notes</label><textarea id="d_notes" name="interest_notes" rows="3" class="field">{{ $lead->interest_notes }}</textarea></div>
            <label class="flex items-center gap-2"><input type="checkbox" name="has_trade_in" value="1" @checked($lead->has_trade_in) class="rounded border-line"> Has a trade-in</label>
            <div><label class="mb-1 block text-xs font-medium" for="d_fu">Next follow-up @if ($lead->next_follow_up_at)<span class="text-muted">(now {{ $lead->next_follow_up_at->format('d M H:i') }})</span>@endif</label><input id="d_fu" type="datetime-local" name="next_follow_up_at" class="field"></div>
            <button class="btn-primary w-full">Save details</button>
        </form>
        @endcan
    </section>

    @can('leads.assign')
    <section class="rounded-lg border border-line bg-panel p-4" aria-labelledby="as-h">
        <h2 id="as-h" class="text-sm font-semibold">Reassign</h2>
        <form method="POST" action="{{ route('leads.assign', $lead) }}" class="mt-3 flex gap-2">@csrf
            <label class="sr-only" for="as_u">Salesperson</label>
            <select id="as_u" name="assigned_to" class="field">@foreach ($agents as $a)<option value="{{ $a->id }}" @selected($lead->assigned_to === $a->id)>{{ $a->name }}</option>@endforeach</select>
            <button class="btn-quiet">Assign</button>
        </form>
    </section>
    @endcan

    @can('wishlists.manage') @if ($lead->is_open)
    <section class="rounded-lg border border-line bg-panel p-4" aria-labelledby="wl-h" x-data="{ makes: @js($makes->load('models:id,make_id,name')), make: '' }">
        <h2 id="wl-h" class="text-sm font-semibold">Notify me when a match arrives</h2>
        <form method="POST" action="{{ route('wishlists.store') }}" class="mt-3 space-y-3 text-sm">@csrf
            <input type="hidden" name="customer_id" value="{{ $c->id }}"><input type="hidden" name="lead_id" value="{{ $lead->id }}">
            <div class="grid grid-cols-2 gap-2">
                <div><label class="mb-1 block text-xs font-medium" for="w_make">Make</label>
                    <select id="w_make" name="make_id" x-model="make" class="field"><option value="">Any</option><template x-for="m in makes" :key="m.id"><option :value="m.id" x-text="m.name"></option></template></select></div>
                <div><label class="mb-1 block text-xs font-medium" for="w_model">Model</label>
                    <select id="w_model" name="model_id" :disabled="!make" class="field"><option value="">Any</option><template x-for="m in (makes.find(x => x.id == make)?.models ?? [])" :key="m.id"><option :value="m.id" x-text="m.name"></option></template></select></div>
                <div><label class="mb-1 block text-xs font-medium" for="w_yf">Year from</label><input id="w_yf" name="year_from" type="number" class="field"></div>
                <div><label class="mb-1 block text-xs font-medium" for="w_yt">Year to</label><input id="w_yt" name="year_to" type="number" class="field"></div>
            </div>
            <div><label class="mb-1 block text-xs font-medium" for="w_price">Maximum price (KES)</label><input id="w_price" name="max_price" type="number" min="0" value="{{ $lead->budget_max }}" class="field"></div>
            <button class="btn-quiet w-full">Save wishlist</button>
        </form>
    </section>
    @endif @endcan
</aside>
</div>
@endsection