@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', ['from_lead' => $lead->id]) }}" 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">Showroom Consultant</span><div class="text-sm text-white mt-0.5">{{ $lead->assignedTo?->name ?? '—' }}</div></div>
                    <div><span class="text-xs text-slate-500">Designer</span><div class="text-sm text-white mt-0.5">{{ $lead->designer?->name ?? '—' }}</div></div>
                    <div><span class="text-xs text-slate-500">Booking Date</span><div class="text-sm text-white mt-0.5">{{ $lead->booking_date?->format('d M Y') ?? '—' }}</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><span class="text-xs text-slate-500">Site Address</span><div class="text-sm text-white mt-0.5">{{ $lead->site_address ? $lead->site_address.', '.$lead->site_suburb : '—' }}</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

        <!-- ── Appointments Table ──────────────────────────────────────────── -->
        <div class="card overflow-hidden" style="border:1px solid #334155; border-radius:10px;">
            <div class="flex items-center justify-between px-5 py-4" style="border-bottom:1px solid #334155; background:#0f172a;">
                <h3 class="flex items-center gap-2 mb-0" style="color:#e2e8f0; font-size:1rem; font-weight:600;">
                    <i class="fas fa-calendar-check" style="color:#60a5fa;"></i> Appointments
                    <span style="background:#1e3a5f; color:#93c5fd; font-size:0.75rem; padding:2px 10px; border-radius:999px;">
                        {{ $lead->appointments->count() }}
                    </span>
                </h3>
                <a href="{{ route('leads.edit', $lead) }}#appointments-section" class="btn btn-secondary" style="font-size:0.8rem; padding:6px 14px;">
                    <i class="fas fa-plus me-1"></i> Manage
                </a>
            </div>
            @if($lead->appointments->isEmpty())
                <div class="text-center py-8" style="color:#64748b;">
                    <i class="fas fa-calendar-times fa-2x mb-2 d-block" style="color:#334155;"></i>
                    <p class="text-sm">No appointments yet.</p>
                </div>
            @else
                <div style="overflow-x:auto;">
                    <table style="width:100%; border-collapse:collapse;">
                        <thead>
                            <tr style="background:#0f172a; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:#64748b;">
                                <th style="padding:10px 16px; text-align:left; font-weight:600;">#</th>
                                <th style="padding:10px 16px; text-align:left; font-weight:600;">Appt. With</th>
                                <th style="padding:10px 16px; text-align:left; font-weight:600;">Date &amp; Time</th>
                                <th style="padding:10px 16px; text-align:left; font-weight:600;">Designer</th>
                                <th style="padding:10px 16px; text-align:left; font-weight:600;">Fee</th>
                                <th style="padding:10px 16px; text-align:left; font-weight:600;">Location</th>
                                <th style="padding:10px 16px; text-align:center; font-weight:600;">Both Avail.</th>
                                <th style="padding:10px 16px; text-align:left; font-weight:600;">Note</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($lead->appointments as $i => $appt)
                            <tr style="border-top:1px solid #1e293b; {{ $i % 2 === 0 ? 'background:#1e293b;' : 'background:#172033;' }}">
                                <td style="padding:12px 16px; color:#94a3b8; font-size:0.8rem;">{{ $i + 1 }}</td>
                                <td style="padding:12px 16px; color:#e2e8f0; font-size:0.875rem; font-weight:500;">{{ $appt->appointment_with ?? '—' }}</td>
                                <td style="padding:12px 16px;">
                                    @if($appt->appointment_date)
                                        <div style="color:#e2e8f0; font-size:0.875rem; font-weight:500;">{{ $appt->appointment_date->format('d M Y') }}</div>
                                        @if($appt->appointment_time)
                                            <div style="color:#60a5fa; font-size:0.75rem; margin-top:2px;">{{ \Carbon\Carbon::createFromFormat('H:i:s', $appt->appointment_time)->format('h:i A') }}</div>
                                        @endif
                                    @else
                                        <span style="color:#475569;">—</span>
                                    @endif
                                </td>
                                <td style="padding:12px 16px; color:#e2e8f0; font-size:0.875rem;">{{ $appt->designer?->name ?? '—' }}</td>
                                <td style="padding:12px 16px;">
                                    @if($appt->appointment_fee)
                                        <span style="color:#4ade80; font-weight:600; font-size:0.875rem;">${{ number_format($appt->appointment_fee, 2) }}</span>
                                    @else
                                        <span style="color:#475569;">—</span>
                                    @endif
                                </td>
                                <td style="padding:12px 16px; color:#cbd5e1; font-size:0.875rem;">{{ $appt->appointment_location ?? '—' }}</td>
                                <td style="padding:12px 16px; text-align:center;">
                                    @if($appt->both_available === 'Yes')
                                        <span style="background:#14532d44; color:#4ade80; border:1px solid #16a34a55; padding:3px 10px; border-radius:999px; font-size:0.75rem; font-weight:600;">Yes</span>
                                    @else
                                        <span style="background:#7f1d1d44; color:#f87171; border:1px solid #dc262655; padding:3px 10px; border-radius:999px; font-size:0.75rem; font-weight:600;">No</span>
                                    @endif
                                </td>
                                <td style="padding:12px 16px; color:#94a3b8; font-size:0.8rem;">{{ Str::limit($appt->note, 50) ?? '—' }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>

        <!-- ── Follow-Ups Table ───────────────────────────────────────────── -->
        <div class="card overflow-hidden" style="border:1px solid #334155; border-radius:10px;">
            <div class="flex items-center justify-between px-5 py-4" style="border-bottom:1px solid #334155; background:#0f172a;">
                <h3 class="flex items-center gap-2 mb-0" style="color:#e2e8f0; font-size:1rem; font-weight:600;">
                    <i class="fas fa-phone-alt" style="color:#4ade80;"></i> Follow-Ups
                    <span style="background:#14532d44; color:#4ade80; font-size:0.75rem; padding:2px 10px; border-radius:999px;">
                        {{ $lead->followUps->count() }}
                    </span>
                </h3>
                <a href="{{ route('leads.edit', $lead) }}#followups-section" class="btn btn-secondary" style="font-size:0.8rem; padding:6px 14px;">
                    <i class="fas fa-plus me-1"></i> Manage
                </a>
            </div>
            @if($lead->followUps->isEmpty())
                <div class="text-center py-8" style="color:#64748b;">
                    <i class="fas fa-comments fa-2x mb-2 d-block" style="color:#334155;"></i>
                    <p class="text-sm">No follow-ups yet.</p>
                </div>
            @else
                <div style="overflow-x:auto;">
                    <table style="width:100%; border-collapse:collapse;">
                        <thead>
                            <tr style="background:#0f172a; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:#64748b;">
                                <th style="padding:10px 16px; text-align:left; font-weight:600;">#</th>
                                <th style="padding:10px 16px; text-align:left; font-weight:600;">Type</th>
                                <th style="padding:10px 16px; text-align:left; font-weight:600;">Date</th>
                                <th style="padding:10px 16px; text-align:left; font-weight:600;">Time</th>
                                <th style="padding:10px 16px; text-align:left; font-weight:600;">Feedback</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($lead->followUps as $i => $fu)
                            @php
                                $typeStyle = match($fu->follow_up_type) {
                                    'Online Meeting'  => 'background:#0c4a6e44; color:#38bdf8; border:1px solid #0369a155;',
                                    'Offline Meeting' => 'background:#4a1d9644; color:#a78bfa; border:1px solid #7c3aed55;',
                                    default           => 'background:#164e6344; color:#2dd4bf; border:1px solid #0d948855;',
                                };
                            @endphp
                            <tr style="border-top:1px solid #1e293b; {{ $i % 2 === 0 ? 'background:#1e293b;' : 'background:#172033;' }}">
                                <td style="padding:12px 16px; color:#94a3b8; font-size:0.8rem;">{{ $i + 1 }}</td>
                                <td style="padding:12px 16px;">
                                    <span style="{{ $typeStyle }} padding:3px 10px; border-radius:999px; font-size:0.75rem; font-weight:600; white-space:nowrap;">{{ $fu->follow_up_type }}</span>
                                </td>
                                <td style="padding:12px 16px; color:#e2e8f0; font-size:0.875rem; font-weight:500;">
                                    {{ $fu->follow_up_date?->format('d M Y') ?? '—' }}
                                </td>
                                <td style="padding:12px 16px; color:#60a5fa; font-size:0.875rem;">
                                    @if($fu->follow_up_time)
                                        {{ \Carbon\Carbon::createFromFormat('H:i:s', $fu->follow_up_time)->format('h:i A') }}
                                    @else
                                        <span style="color:#475569;">—</span>
                                    @endif
                                </td>
                                <td style="padding:12px 16px; color:#94a3b8; font-size:0.875rem;">{{ Str::limit($fu->feedback, 80) ?? '—' }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>

    </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', ['from_lead' => $lead->id]) }}" 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