@extends('layouts.app')
@section('title', $lead->lead_number)
@section('breadcrumb')<a href="{{ route('leads.index') }}" class="hover:text-white">Leads</a> <i class="fas fa-chevron-right text-xs mx-1 text-slate-600"></i> <span class="text-white">{{ $lead->lead_number }}</span>@endsection

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 space-y-6">
        <!-- Header -->
        <div class="card p-5 flex items-center justify-between">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-full bg-blue-900 flex items-center justify-center font-bold text-blue-300 text-lg">
                    {{ $lead->contact?->initials ?? '??' }}
                </div>
                <div>
                    <h1>{{ $lead->contact?->full_name ?? 'Unknown Contact' }}</h1>
                    <div class="flex items-center gap-2 mt-1">
                        <span class="text-sm text-slate-400">{{ $lead->lead_number }}</span>
                        <span class="badge badge-{{ $lead->statusColor() }}">{{ $lead->statusLabel() }}</span>
                        <span class="badge {{ $lead->priority === 'high' ? 'badge-red' : ($lead->priority === 'medium' ? 'badge-yellow' : 'badge-gray') }}">{{ ucfirst($lead->priority) }} Priority</span>
                    </div>
                </div>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('leads.edit', $lead) }}" class="btn btn-secondary"><i class="fas fa-edit"></i> Edit</a>
                <a href="{{ route('jobs.create') }}" class="btn btn-primary"><i class="fas fa-arrow-right"></i> Convert to Job</a>
            </div>
        </div>

        <!-- Progress Steps -->
        <div class="card p-5">
            <h3 class="mb-4">Lead Progress</h3>
            <div class="flex items-center">
                @foreach([['New', 'new'], ['Consult Booked', 'consult_booked'], ['On Hold / Lost', 'on_hold'], ['Sold', 'sold']] as $i => [$label, $key])
                <div class="stepper-step">
                    @php $active = $lead->status === $key; $done = in_array($lead->status, array_slice(['new','consult_booked','on_hold','sold'], $i+1)); @endphp
                    <div class="stepper-circle {{ $active ? 'bg-blue-600 text-white' : ($done ? 'bg-green-700 text-green-300' : 'bg-slate-700 text-slate-500') }}">
                        @if($done)<i class="fas fa-check" style="font-size:10px;"></i>@else{{ $i+1 }}@endif
                    </div>
                    <div class="text-xs mt-1 {{ $active ? 'text-blue-400' : 'text-slate-500' }}">{{ $label }}</div>
                </div>
                @if($i < 3)<div class="flex-1 h-px bg-slate-700 mb-4"></div>@endif
                @endforeach
            </div>
        </div>

        <!-- Details Grid -->
        <div class="grid grid-cols-2 gap-6">
            <div class="card p-5">
                <h3 class="mb-3">Lead Information</h3>
                <div class="space-y-3">
                    <div><span class="text-xs text-slate-500">Source</span><div class="text-sm text-white mt-0.5">{{ $lead->source ?? '—' }}</div></div>
                    <div><span class="text-xs text-slate-500">Enquiry Date</span><div class="text-sm text-white mt-0.5">{{ $lead->enquiry_date?->format('d M Y') ?? '—' }}</div></div>
                    <div><span class="text-xs text-slate-500">Preferred Contact</span><div class="text-sm text-white mt-0.5">{{ $lead->preferred_contact ?? '—' }}</div></div>
                    <div><span class="text-xs text-slate-500">Assigned To</span><div class="text-sm text-white mt-0.5">{{ $lead->assignedTo?->name ?? '—' }}</div></div>
                </div>
            </div>
            <div class="card p-5">
                <h3 class="mb-3">Project Overview</h3>
                <div class="space-y-3">
                    <div><span class="text-xs text-slate-500">Type</span><div class="text-sm text-white mt-0.5">{{ $lead->project_type ? ucfirst($lead->project_type) : '—' }}</div></div>
                    <div><span class="text-xs text-slate-500">Budget</span><div class="text-sm text-white mt-0.5">{{ $lead->budget_range ?? '—' }}</div></div>
                    <div><span class="text-xs text-slate-500">Expected Start</span><div class="text-sm text-white mt-0.5">{{ $lead->expected_start?->format('M Y') ?? '—' }}</div></div>
                </div>
            </div>
        </div>

        @if($lead->description)
        <div class="card p-5">
            <h3 class="mb-3">Description</h3>
            <p>{{ $lead->description }}</p>
        </div>
        @endif
        @if($lead->notes)
        <div class="card p-5">
            <h3 class="mb-3">Notes</h3>
            <p>{{ $lead->notes }}</p>
        </div>
        @endif
    </div>

    <!-- Right sidebar -->
    <div class="space-y-4">
        @if($lead->contact)
        <div class="card p-5">
            <h3 class="mb-3">Contact Summary</h3>
            <div class="space-y-2">
                @if($lead->contact->email)
                <a href="mailto:{{ $lead->contact->email }}" class="flex items-center gap-2 text-sm text-blue-400 hover:text-blue-300">
                    <i class="fas fa-envelope w-4 text-slate-500"></i>{{ $lead->contact->email }}
                </a>
                @endif
                @if($lead->contact->phone)
                <a href="tel:{{ $lead->contact->phone }}" class="flex items-center gap-2 text-sm text-slate-300">
                    <i class="fas fa-phone w-4 text-slate-500"></i>{{ $lead->contact->phone }}
                </a>
                @endif
                @if($lead->site_address)
                <div class="flex items-start gap-2 text-sm text-slate-300">
                    <i class="fas fa-map-marker-alt w-4 text-slate-500 mt-0.5"></i>
                    <span>{{ $lead->site_address }}<br>{{ $lead->site_suburb }} {{ $lead->site_state }}</span>
                </div>
                @endif
            </div>
        </div>
        @endif

        <div class="card p-5 space-y-2">
            <h3 class="mb-3">Actions</h3>
            <a href="{{ route('leads.edit', $lead) }}" class="btn btn-secondary w-full justify-center"><i class="fas fa-edit"></i> Edit Lead</a>
            <a href="{{ route('jobs.create') }}" class="btn btn-primary w-full justify-center"><i class="fas fa-briefcase"></i> Convert to Job</a>
            <form method="POST" action="{{ route('leads.destroy', $lead) }}">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-danger w-full justify-center" onclick="return confirm('Delete this lead?')">
                    <i class="fas fa-trash"></i> Delete Lead
                </button>
            </form>
        </div>
    </div>
</div>
@endsection