@extends('layouts.app')
@section('title', $lead->full_name)

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $lead->full_name }}</h1>
            <p>
                <span class="mono">{{ $lead->lead_number }}</span>
                &middot; <span class="badge {{ status_color(match ($lead->status) {
                    'converted' => 'active', 'lost' => 'cancelled', 'new' => 'pending', default => 'grace' }) }}">
                    <span class="dot"></span>{{ $lead->status }}</span>
                &middot; <span class="badge muted">{{ title_case_words($lead->source) }}</span>
            </p>
        </div>
        <div class="page-actions">
            @if ($lead->status !== 'converted' && $lead->status !== 'lost')
                <button type="button" class="btn success" data-modal="convert-modal">Convert to customer</button>
                <button type="button" class="btn secondary" data-modal="lose-modal">Mark lost</button>
            @endif
            @if ($lead->customer)
                <a href="{{ route('customers.show', $lead->customer) }}" class="btn">View customer</a>
            @endif
            <a href="{{ route('leads.index') }}" class="btn secondary">&larr; Back</a>
        </div>
    </div>

    <div class="grid grid-4 mb-2">
        @include('components.kpi', ['label' => 'Status', 'value' => title_case_words($lead->status),
            'variant' => $lead->status === 'converted' ? 'good' : ($lead->status === 'lost' ? 'bad' : 'warn'), 'href' => '#'])
        @include('components.kpi', ['label' => 'Est. value', 'value' => $lead->estimated_value > 0 ? money($lead->estimated_value) : '—',
            'variant' => 'info', 'href' => '#'])
        @include('components.kpi', ['label' => 'Next follow-up', 'value' => $lead->next_follow_up_at?->format('d M') ?? '—',
            'variant' => $lead->next_follow_up_at && $lead->next_follow_up_at->isPast() ? 'bad' : '', 'href' => '#'])
        @include('components.kpi', ['label' => 'Activities', 'value' => $lead->activities()->count(), 'href' => '#activity'])
    </div>

    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>Lead detail</h3></div>
            <div class="card-body">
                <dl class="dl">
                    <dt>Lead number</dt><dd class="mono">{{ $lead->lead_number }}</dd>
                    <dt>Full name</dt><dd>{{ $lead->full_name }}</dd>
                    <dt>Company</dt><dd>{{ $lead->company_name ?: '—' }}</dd>
                    <dt>Phone</dt><dd class="mono">{{ $lead->phone }}</dd>
                    <dt>Email</dt><dd>{{ $lead->email ?: '—' }}</dd>
                    <dt>Source</dt><dd>{{ title_case_words($lead->source) }}</dd>
                    <dt>Campaign</dt><dd>{{ $lead->campaign?->name ?? '—' }}</dd>
                    <dt>Owner</dt><dd>{{ $lead->owner?->name ?? 'Unassigned' }}</dd>
                    <dt>Created</dt><dd>{{ $lead->created_at->format('d M Y H:i') }}</dd>
                </dl>
                <hr style="border:none;border-top:1px solid var(--ink-200);margin:.9rem 0;">
                <dl class="dl">
                    <dt>Service type</dt><dd>{{ $lead->serviceType?->name ?? '—' }}</dd>
                    <dt>Plan of interest</dt><dd>{{ $lead->plan?->name ?? 'Not decided' }}</dd>
                    <dt>Address</dt><dd>{{ $lead->address }}</dd>
                    <dt>City / region</dt><dd>{{ trim(($lead->city ?? '').' '.($lead->region ?? '')) ?: '—' }}</dd>
                    <dt>Coordinates</dt>
                    <dd class="mono">{{ $lead->latitude && $lead->longitude ? $lead->latitude.', '.$lead->longitude : '—' }}</dd>
                    <dt>Coverage</dt>
                    <dd>@if ($lead->coverage_checked)
                            <span class="badge {{ $lead->in_coverage ? 'success' : 'danger' }}">
                                {{ $lead->in_coverage ? 'In coverage' : 'Out of coverage' }}</span>
                            @if ($lead->coverage_zone)
                                <div class="tiny muted">{{ $lead->coverage_zone->name }}</div>
                            @endif
                        @else
                            <span class="badge muted">Not checked</span>
                        @endif</dd>
                </dl>
                @if ($lead->notes)
                    <hr style="border:none;border-top:1px solid var(--ink-200);margin:.9rem 0;">
                    <div class="small muted mb-1"><strong>Notes</strong></div>
                    <p class="mb-0" style="white-space:pre-wrap;">{{ $lead->notes }}</p>
                @endif
            </div>
        </div>

        <div class="card" id="activity">
            <div class="card-head"><h3>Activity log</h3>
                <span class="sub">{{ $lead->activities()->count() }} entry(s)</span></div>
            <div class="card-body">
                @if ($lead->activities->isNotEmpty())
                    <div class="timeline">
                        @foreach ($lead->activities as $activity)
                            <div class="timeline-item {{ $activity->type === 'conversion' ? 'ok' : '' }}">
                                <div class="t-head">{{ $activity->user?->name ?? 'System' }}
                                    <span class="badge muted">{{ $activity->type }}</span></div>
                                <div class="t-meta">{{ $activity->created_at->format('d M Y H:i') }}</div>
                                <div class="t-body">{{ $activity->description }}</div>
                            </div>
                        @endforeach
                    </div>
                @else
                    @include('components.empty-state', ['icon' => '&#128221;', 'title' => 'No activity logged yet'])
                @endif

                <hr style="border:none;border-top:1px solid var(--ink-200);margin:1rem 0;">

                <form method="POST" action="{{ route('leads.activity', $lead) }}">
                    @csrf
                    <div class="form-grid cols-1">
                        <div class="field"><label>Activity type <span class="req">*</span></label>
                            <select name="type" required>
                                @foreach (['call','email','meeting','note','follow_up','qualification','proposal'] as $t)
                                    <option value="{{ $t }}">{{ title_case_words($t) }}</option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Description <span class="req">*</span></label>
                            <textarea name="description" rows="3" required placeholder="What happened?"></textarea></div>
                        <div class="field"><label>Next follow-up</label>
                            <input type="datetime-local" name="next_follow_up_at"></div>
                        <button type="submit" class="btn secondary sm">Log activity</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal-backdrop" id="convert-modal">
        <div class="modal">
            <form method="POST" action="{{ route('leads.convert', $lead) }}">
                @csrf
                <div class="modal-head"><h3>Convert to customer</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <p class="small muted">Creates the customer record and optionally provisions the first service.</p>
                    <div class="form-grid cols-1">
                        <div class="field"><label>Customer segment <span class="req">*</span></label>
                            <select name="segment" required>
                                @foreach (['residential','sme','enterprise','wholesale'] as $s)
                                    <option value="{{ $s }}">{{ title_case_words($s) }}</option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Plan to provision</label>
                            <select name="plan_id">
                                <option value="">Do not provision a service yet</option>
                                @foreach ($plans as $plan)
                                    <option value="{{ $plan->id }}" @selected($lead->plan_id == $plan->id)>
                                        {{ $plan->name }} — {{ money($plan->price) }}
                                    </option>
                                @endforeach
                            </select></div>
                        <label class="check"><input type="checkbox" name="create_work_order" value="1">
                            Create an installation work order</label>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn success">Convert lead</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal-backdrop" id="lose-modal">
        <div class="modal">
            <form method="POST" action="{{ route('leads.lose', $lead) }}">
                @csrf
                <div class="modal-head"><h3>Mark lead as lost</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="form-grid cols-1">
                        <div class="field"><label>Reason <span class="req">*</span></label>
                            <select name="reason" required>
                                @foreach (['price','coverage','competitor','no_response','not_ready','technical'] as $r)
                                    <option value="{{ $r }}">{{ title_case_words($r) }}</option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Notes</label>
                            <textarea name="notes" rows="3" placeholder="What did we learn?"></textarea></div>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn danger">Mark lost</button>
                </div>
            </form>
        </div>
    </div>
@endsection