@extends('layouts.app')

@section('title', 'Lead details')
@section('heading', 'Lead details')

@section('content')
    <div class="grid gap-6 lg:grid-cols-3">
        <x-card class="lg:col-span-2">
            <h2 class="mb-4 text-lg font-semibold text-slate-900">{{ $lead->company_name }}</h2>
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <p class="text-xs uppercase text-slate-500">Contact person</p>
                    <p class="text-sm text-slate-800">{{ $lead->contact_person_name }}</p>
                </div>
                <div>
                    <p class="text-xs uppercase text-slate-500">Mobile</p>
                    <p class="text-sm text-slate-800">{{ $lead->mobile }}</p>
                </div>
                <div>
                    <p class="text-xs uppercase text-slate-500">Email</p>
                    <p class="text-sm text-slate-800">{{ $lead->email ?: '—' }}</p>
                </div>
                <div>
                    <p class="text-xs uppercase text-slate-500">Source</p>
                    <p class="text-sm text-slate-800">{{ ucfirst(str_replace('_', ' ', $lead->source)) }}</p>
                </div>
                <div>
                    <p class="text-xs uppercase text-slate-500">Employee count</p>
                    <p class="text-sm text-slate-800">{{ number_format($lead->employee_count) }}</p>
                </div>
                <div>
                    <p class="text-xs uppercase text-slate-500">Status</p>
                    <p class="text-sm text-slate-800">{{ ucfirst(str_replace('_', ' ', $lead->status)) }}</p>
                </div>
                <div>
                    <p class="text-xs uppercase text-slate-500">Meeting</p>
                    <p class="text-sm text-slate-800">{{ $lead->meeting_at?->format('d M Y H:i') ?? '—' }} {{ $lead->meeting_mode ? '(' . ucfirst($lead->meeting_mode) . ')' : '' }}</p>
                </div>
            </div>
        </x-card>

        <x-card>
            <h3 class="mb-3 text-sm font-semibold text-slate-900">Update status</h3>
            <form method="post" action="{{ route('superadmin.leads.status', $lead) }}" class="space-y-3">
                @csrf
                <select name="status" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2">
                    @foreach(['new', 'contacted', 'qualified', 'meeting_scheduled', 'converted', 'rejected'] as $status)
                        <option value="{{ $status }}" {{ $lead->status === $status ? 'selected' : '' }}>{{ ucfirst(str_replace('_', ' ', $status)) }}</option>
                    @endforeach
                </select>
                <textarea name="notes" rows="3" placeholder="Notes..." class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">{{ $lead->notes }}</textarea>
                <button type="submit" class="w-full rounded-lg bg-primary px-3 py-2 text-sm font-medium text-white">Save status</button>
            </form>
            <form method="post" action="{{ route('superadmin.leads.convert', $lead) }}" class="mt-3">
                @csrf
                <button
                    type="submit"
                    class="w-full rounded-lg bg-emerald-600 px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-60"
                    {{ $lead->status === 'converted' ? 'disabled' : '' }}
                    onclick="return confirm('Convert this lead into a company now?');"
                >
                    {{ $lead->status === 'converted' ? 'Already converted' : 'Convert to company' }}
                </button>
            </form>
        </x-card>
    </div>

    <div class="mt-6 grid gap-6 lg:grid-cols-2">
        <x-card>
            <h3 class="mb-3 text-sm font-semibold text-slate-900">Schedule follow-up</h3>
            <form method="post" action="{{ route('superadmin.leads.followups.store', $lead) }}" class="space-y-3">
                @csrf
                <input type="datetime-local" name="followup_at" required class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                <select name="channel" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2">
                    @foreach(['call', 'whatsapp', 'sms', 'email', 'meeting'] as $channel)
                        <option value="{{ $channel }}">{{ strtoupper($channel) }}</option>
                    @endforeach
                </select>
                <input type="text" name="message" placeholder="Message" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                <textarea name="notes" rows="2" placeholder="Notes" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"></textarea>
                <button type="submit" class="w-full rounded-lg bg-primary px-3 py-2 text-sm font-medium text-white">Add follow-up</button>
            </form>
        </x-card>

        <x-card>
            <h3 class="mb-3 text-sm font-semibold text-slate-900">Schedule meeting</h3>
            <form method="post" action="{{ route('superadmin.leads.meeting.schedule', $lead) }}" class="space-y-3">
                @csrf
                <input type="datetime-local" name="meeting_at" required class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                <select name="meeting_mode" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2">
                    <option value="online">Online</option>
                    <option value="offline">Offline</option>
                    <option value="phone">Phone</option>
                </select>
                <textarea name="notes" rows="2" placeholder="Meeting notes" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"></textarea>
                <button type="submit" class="w-full rounded-lg bg-primary px-3 py-2 text-sm font-medium text-white">Schedule meeting</button>
            </form>
        </x-card>
    </div>

    <div class="mt-6 grid gap-6 lg:grid-cols-2">
        <x-card>
            <h3 class="mb-3 text-sm font-semibold text-slate-900">Follow-ups</h3>
            <div class="space-y-3">
                @forelse($lead->followups as $followup)
                    <div class="rounded-lg border border-slate-200 p-3">
                        <p class="text-sm font-medium text-slate-800">{{ strtoupper($followup->channel) }} - {{ $followup->followup_at?->format('d M Y H:i') }}</p>
                        <p class="mt-1 text-xs text-slate-500">Status: {{ ucfirst($followup->status) }}{{ $followup->outcome ? ' | Outcome: ' . $followup->outcome : '' }}</p>
                        @if($followup->notes)<p class="mt-1 text-xs text-slate-600">{{ $followup->notes }}</p>@endif
                        @if($followup->status !== 'completed')
                            <form method="post" action="{{ route('superadmin.leads.followups.complete', [$lead, $followup]) }}" class="mt-2 flex gap-2">
                                @csrf
                                <input type="text" name="outcome" required placeholder="Outcome" class="w-full rounded-lg border border-slate-300 px-2 py-1 text-xs">
                                <button type="submit" class="rounded-lg bg-emerald-600 px-2 py-1 text-xs font-medium text-white">Mark done</button>
                            </form>
                        @endif
                    </div>
                @empty
                    <p class="text-sm text-slate-500">No follow-ups yet.</p>
                @endforelse
            </div>
        </x-card>

        <x-card>
            <h3 class="mb-3 text-sm font-semibold text-slate-900">Activity timeline</h3>
            <div class="space-y-3">
                @forelse($lead->activities as $activity)
                    <div class="rounded-lg border border-slate-200 p-3">
                        <p class="text-sm font-medium text-slate-800">{{ ucfirst(str_replace('_', ' ', $activity->activity_type)) }}</p>
                        @if($activity->description)<p class="mt-1 text-xs text-slate-600">{{ $activity->description }}</p>@endif
                        <p class="mt-1 text-xs text-slate-500">{{ $activity->created_at->format('d M Y H:i') }}{{ $activity->performer?->name ? ' by ' . $activity->performer->name : '' }}</p>
                    </div>
                @empty
                    <p class="text-sm text-slate-500">No activity logged.</p>
                @endforelse
            </div>
        </x-card>
    </div>
@endsection