@extends('admin.layouts.app')

@section('title', $lead->name . ' - Lead Details')

@push('styles')
    <style>
        .lead-page {
            background: #f5f8fa;
            min-height: 100vh;
            margin: -1.5rem;
            padding: 0;
        }

        .lead-header {
            background: #fff;
            border-bottom: 1px solid #e1e5eb;
            padding: 16px 24px;
        }

        .lead-content {
            display: grid;
            grid-template-columns: 280px 1fr 320px;
            gap: 0;
            min-height: calc(100vh - 120px);
        }

        .lead-sidebar {
            background: #fff;
            border-right: 1px solid #e1e5eb;
            padding: 20px;
            overflow-y: auto;
        }

        .lead-main {
            padding: 20px;
            overflow-y: auto;
        }

        .lead-right-panel {
            background: #fff;
            border-left: 1px solid #e1e5eb;
            padding: 20px;
            overflow-y: auto;
        }

        /* Avatar */
        .lead-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #5c6bc0 0%, #3949ab 100%);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 18px;
            flex-shrink: 0;
        }

        /* Badges */
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .badge-hot {
            background: #fee2e2;
            color: #dc2626;
        }

        .badge-warm {
            background: #fef3c7;
            color: #d97706;
        }

        .badge-cold {
            background: #dbeafe;
            color: #2563eb;
        }

        .badge-score {
            background: #d1fae5;
            color: #059669;
        }

        .badge-status {
            background: #f3f4f6;
            color: #374151;
        }

        /* Section Headers */
        .section-header {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #6b7280;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid #e5e7eb;
        }

        /* Property Items */
        .prop-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #f3f4f6;
            font-size: 13px;
        }

        .prop-item:last-child {
            border-bottom: none;
        }

        .prop-label {
            color: #6b7280;
        }

        .prop-value {
            color: #111827;
            font-weight: 500;
            text-align: right;
            max-width: 60%;
            word-break: break-word;
        }

        /* Action Buttons */
        .action-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.15s;
            cursor: pointer;
            border: none;
        }

        .action-btn-primary {
            background: #5c6bc0;
            color: #fff;
        }

        .action-btn-primary:hover {
            background: #4a5ab9;
        }

        .action-btn-success {
            background: #10b981;
            color: #fff;
        }

        .action-btn-success:hover {
            background: #059669;
        }

        .action-btn-outline {
            background: #fff;
            color: #374151;
            border: 1px solid #d1d5db;
        }

        .action-btn-outline:hover {
            background: #f9fafb;
            border-color: #9ca3af;
        }

        /* Activity Feed */
        .activity-feed {
            max-height: 500px;
            overflow-y: auto;
        }

        .activity-item {
            display: flex;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid #f3f4f6;
        }

        .activity-item:last-child {
            border-bottom: none;
        }

        .activity-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .activity-content {
            flex: 1;
            min-width: 0;
        }

        .activity-title {
            font-size: 13px;
            color: #111827;
            font-weight: 500;
        }

        .activity-desc {
            font-size: 12px;
            color: #6b7280;
            margin-top: 2px;
        }

        .activity-meta {
            font-size: 11px;
            color: #9ca3af;
            margin-top: 4px;
        }

        /* Form Elements */
        .form-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            font-size: 13px;
            transition: all 0.15s;
        }

        .form-input:focus {
            outline: none;
            border-color: #5c6bc0;
            box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.1);
        }

        .form-select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 8px center;
            background-repeat: no-repeat;
            background-size: 16px;
            padding-right: 32px;
        }

        /* Activity Type Pills */
        .type-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            background: #f3f4f6;
            color: #374151;
            cursor: pointer;
            transition: all 0.15s;
            border: 1px solid transparent;
        }

        .type-pill:hover {
            background: #e5e7eb;
        }

        .type-pill.active {
            background: #5c6bc0;
            color: #fff;
        }

        /* Quick Stats */
        .quick-stat {
            text-align: center;
            padding: 12px;
            background: #f9fafb;
            border-radius: 6px;
        }

        .quick-stat-value {
            font-size: 20px;
            font-weight: 700;
            color: #111827;
        }

        .quick-stat-label {
            font-size: 11px;
            color: #6b7280;
            margin-top: 2px;
        }

        /* Contact Action */
        .contact-action {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background: #f9fafb;
            border-radius: 6px;
            margin-bottom: 8px;
            transition: all 0.15s;
            cursor: pointer;
        }

        .contact-action:hover {
            background: #f3f4f6;
        }

        .contact-action-icon {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .contact-action-text {
            flex: 1;
        }

        .contact-action-label {
            font-size: 10px;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .contact-action-value {
            font-size: 13px;
            color: #111827;
            font-weight: 500;
        }

        @media (max-width: 1200px) {
            .lead-content {
                grid-template-columns: 1fr;
            }

            .lead-sidebar,
            .lead-right-panel {
                display: none;
            }
        }
    </style>
@endpush

@section('content')
    <div class="lead-page">
        <!-- Header -->
        <div class="lead-header">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-3">
                    <a href="{{ route('admin.crm.leads.index') }}" class="text-gray-400 hover:text-gray-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                        </svg>
                    </a>
                    <div class="lead-avatar" style="width:40px;height:40px;font-size:14px;">
                        {{ strtoupper(substr($lead->name, 0, 2)) }}</div>
                    <div>
                        <div class="flex items-center gap-2">
                            <h1 class="text-base font-semibold text-gray-900">{{ $lead->name }}</h1>
                            @if ($lead->priority === 'hot')
                                <span class="badge badge-hot">🔥 Hot</span>
                            @elseif($lead->priority === 'warm')
                                <span class="badge badge-warm">Warm</span>
                            @else
                                <span class="badge badge-cold">Cold</span>
                            @endif
                            <span class="badge badge-score">{{ $lead->score }} pts</span>
                        </div>
                        <div class="flex items-center gap-2 text-xs text-gray-500 mt-0.5">
                            <span>{{ $lead->lead_type_label }}</span>
                            <span>•</span>
                            <span>{{ $lead->source_label }}</span>
                            <span>•</span>
                            <span>{{ $lead->created_at->format('M d, Y') }}</span>
                        </div>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <a href="tel:{{ $lead->phone }}" class="action-btn action-btn-outline"
                        style="background:#3b82f6;color:#fff;border-color:#3b82f6;">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                        </svg>
                        Call
                    </a>
                    <a href="https://wa.me/91{{ preg_replace('/[^0-9]/', '', $lead->phone) }}" target="_blank"
                        class="action-btn" style="background: #25D366; color: #fff;">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                            <path
                                d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" />
                        </svg>
                        WhatsApp
                    </a>
                    @if ($lead->email)
                        <a href="mailto:{{ $lead->email }}" class="action-btn action-btn-outline">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                            Email
                        </a>
                    @endif
                    <a href="{{ route('admin.crm.leads.edit', $lead) }}" class="action-btn action-btn-primary">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                        </svg>
                        Edit
                    </a>
                </div>
            </div>
            <!-- Status, Priority, Assigned Row -->
            <div class="flex items-center gap-0 pt-3 border-t border-gray-100">
                <div class="flex items-center gap-2 px-4 py-2 bg-gray-50 rounded-l border-r border-gray-200">
                    <label class="text-xs font-medium text-gray-500">Status:</label>
                    <select onchange="updateStatus(this.value)"
                        class="text-xs border-gray-300 rounded px-2 py-1 bg-white focus:ring-indigo-500 focus:border-indigo-500">
                        @foreach (App\Models\Lead::getStatuses() as $key => $info)
                            <option value="{{ $key }}" {{ $lead->status === $key ? 'selected' : '' }}>
                                {{ $info['label'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex items-center gap-2 px-4 py-2 bg-gray-50 border-r border-gray-200">
                    <label class="text-xs font-medium text-gray-500">Priority:</label>
                    <select onchange="updatePriority(this.value)"
                        class="text-xs border-gray-300 rounded px-2 py-1 bg-white focus:ring-indigo-500 focus:border-indigo-500">
                        @foreach (App\Models\Lead::getPriorities() as $key => $label)
                            <option value="{{ $key }}" {{ $lead->priority === $key ? 'selected' : '' }}>
                                {{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex items-center gap-2 px-4 py-2 bg-gray-50 rounded-r">
                    <label class="text-xs font-medium text-gray-500">Assigned:</label>
                    <select onchange="assignLead(this.value)"
                        class="text-xs border-gray-300 rounded px-2 py-1 bg-white focus:ring-indigo-500 focus:border-indigo-500">
                        <option value="">Unassigned</option>
                        @foreach ($salesUsers as $user)
                            <option value="{{ $user->id }}" {{ $lead->assigned_to == $user->id ? 'selected' : '' }}>
                                {{ $user->name }}</option>
                        @endforeach
                    </select>
                </div>
                @if ($lead->next_follow_up)
                    <div
                        class="ml-auto flex items-center gap-2 px-3 py-1 rounded {{ $lead->next_follow_up->isPast() ? 'bg-red-50 text-red-700' : 'bg-blue-50 text-blue-700' }}">
                        <span
                            class="text-xs font-medium">{{ $lead->next_follow_up->isPast() ? '⚠️ Overdue:' : '📅 Follow-up:' }}</span>
                        <span class="text-xs font-semibold">{{ $lead->next_follow_up->format('M d, h:i A') }}</span>
                    </div>
                @endif
            </div>
        </div>

        <!-- Content -->
        <div class="lead-content">
            <!-- Left Sidebar - About -->
            <div class="lead-sidebar">
                <!-- Lead Info Card -->
                <div class="bg-gray-50 rounded-lg p-4 mb-4">
                    <div class="flex items-center gap-2 mb-3">
                        <div class="w-6 h-6 rounded bg-indigo-100 flex items-center justify-center">
                            <svg class="w-3.5 h-3.5 text-indigo-600" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <span class="text-xs font-semibold text-gray-700 uppercase tracking-wide">Lead Information</span>
                    </div>
                    <div class="space-y-2">
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-gray-500">Source</span>
                            <span
                                class="font-medium text-gray-900 bg-white px-2 py-0.5 rounded">{{ $lead->source_label }}</span>
                        </div>
                        @if ($lead->source_detail)
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-gray-500">Detail</span>
                                <span class="text-gray-900">{{ $lead->source_detail }}</span>
                            </div>
                        @endif
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-gray-500">Created</span>
                            <span class="text-gray-900">{{ $lead->created_at->format('M d, Y') }}</span>
                        </div>
                        @if ($lead->createdBy)
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-gray-500">Created By</span>
                                <span class="text-gray-900">{{ $lead->createdBy->name }}</span>
                            </div>
                        @endif
                        @if ($lead->last_contacted_at)
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-gray-500">Last Contact</span>
                                <span
                                    class="text-green-600 font-medium">{{ $lead->last_contacted_at->diffForHumans() }}</span>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Contact Info Card -->
                <div class="bg-white rounded-lg border border-gray-200 p-4 mb-4">
                    <div class="flex items-center gap-2 mb-3">
                        <div class="w-6 h-6 rounded bg-green-100 flex items-center justify-center">
                            <svg class="w-3.5 h-3.5 text-green-600" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                            </svg>
                        </div>
                        <span class="text-xs font-semibold text-gray-700 uppercase tracking-wide">Contact</span>
                    </div>

                    <!-- Primary Phone -->
                    <a href="tel:{{ $lead->phone }}"
                        class="flex items-center gap-3 p-2 -mx-2 rounded-lg hover:bg-gray-50 transition group">
                        <div
                            class="w-9 h-9 rounded-lg bg-green-50 group-hover:bg-green-100 flex items-center justify-center transition">
                            <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                            </svg>
                        </div>
                        <div>
                            <p class="text-xs text-gray-400 uppercase">Phone</p>
                            <p class="text-sm font-semibold text-gray-900">{{ $lead->phone }}</p>
                        </div>
                    </a>

                    @if ($lead->alternate_phone)
                        <a href="tel:{{ $lead->alternate_phone }}"
                            class="flex items-center gap-3 p-2 -mx-2 rounded-lg hover:bg-gray-50 transition group">
                            <div
                                class="w-9 h-9 rounded-lg bg-gray-50 group-hover:bg-gray-100 flex items-center justify-center transition">
                                <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                </svg>
                            </div>
                            <div>
                                <p class="text-xs text-gray-400 uppercase">Alt. Phone</p>
                                <p class="text-sm text-gray-900">{{ $lead->alternate_phone }}</p>
                            </div>
                        </a>
                    @endif

                    @if ($lead->email)
                        <a href="mailto:{{ $lead->email }}"
                            class="flex items-center gap-3 p-2 -mx-2 rounded-lg hover:bg-gray-50 transition group">
                            <div
                                class="w-9 h-9 rounded-lg bg-blue-50 group-hover:bg-blue-100 flex items-center justify-center transition">
                                <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                </svg>
                            </div>
                            <div class="min-w-0">
                                <p class="text-xs text-gray-400 uppercase">Email</p>
                                <p class="text-sm text-gray-900 truncate">{{ $lead->email }}</p>
                            </div>
                        </a>
                    @endif

                    @if ($lead->address)
                        <div class="flex items-start gap-3 p-2 -mx-2">
                            <div class="w-9 h-9 rounded-lg bg-gray-50 flex items-center justify-center flex-shrink-0">
                                <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                            </div>
                            <div>
                                <p class="text-xs text-gray-400 uppercase">Address</p>
                                <p class="text-sm text-gray-900">{{ $lead->address }}</p>
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Requirements Card -->
                @if ($lead->budget_range || $lead->property_type || $lead->bedrooms || $lead->preferred_locations)
                    <div
                        class="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-lg border border-indigo-100 p-4 mb-4">
                        <div class="flex items-center gap-2 mb-3">
                            <div class="w-6 h-6 rounded bg-indigo-100 flex items-center justify-center">
                                <svg class="w-3.5 h-3.5 text-indigo-600" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                </svg>
                            </div>
                            <span class="text-xs font-semibold text-gray-700 uppercase tracking-wide">Requirements</span>
                        </div>

                        @if ($lead->budget_range)
                            <div class="bg-white rounded-lg p-3 mb-2 border border-green-200">
                                <p class="text-xs text-gray-500 uppercase mb-1">Budget Range</p>
                                <p class="text-lg font-bold text-green-600">{{ $lead->budget_range }}</p>
                            </div>
                        @endif

                        <div class="grid grid-cols-2 gap-2">
                            @if ($lead->property_type)
                                <div class="bg-white rounded-lg p-2.5 border border-indigo-100">
                                    <p class="text-[10px] text-gray-400 uppercase">Type</p>
                                    <p class="text-xs font-semibold text-gray-900">
                                        {{ App\Models\Lead::getPropertyTypes()[$lead->property_type] ?? $lead->property_type }}
                                    </p>
                                </div>
                            @endif
                            @if ($lead->bedrooms)
                                <div class="bg-white rounded-lg p-2.5 border border-indigo-100">
                                    <p class="text-[10px] text-gray-400 uppercase">Bedrooms</p>
                                    <p class="text-xs font-semibold text-gray-900">{{ $lead->bedrooms }} BHK</p>
                                </div>
                            @endif
                        </div>

                        @if ($lead->preferred_locations)
                            <div class="bg-white rounded-lg p-2.5 mt-2 border border-indigo-100">
                                <p class="text-[10px] text-gray-400 uppercase">Preferred Locations</p>
                                <p class="text-xs font-medium text-gray-900">{{ $lead->preferred_locations }}</p>
                            </div>
                        @endif
                    </div>
                @endif

                <!-- Notes Card -->
                @if ($lead->requirements)
                    <div class="bg-amber-50 rounded-lg border border-amber-200 p-4">
                        <div class="flex items-center gap-2 mb-2">
                            <div class="w-6 h-6 rounded bg-amber-100 flex items-center justify-center">
                                <svg class="w-3.5 h-3.5 text-amber-600" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                </svg>
                            </div>
                            <span class="text-xs font-semibold text-gray-700 uppercase tracking-wide">Notes</span>
                        </div>
                        <p class="text-sm text-gray-700 leading-relaxed">{{ $lead->requirements }}</p>
                    </div>
                @endif

            </div>

            <!-- Main Content - Activity -->
            <div class="lead-main">
                <!-- Log Activity -->
                <div class="bg-white rounded-lg border border-gray-200 p-4 mb-4">
                    <form id="activityForm" onsubmit="submitActivity(event)">
                        <div class="flex flex-wrap gap-2 mb-3">
                            @php $types = ['note'=>'📝 Note','call'=>'📞 Call','email'=>'📧 Email','whatsapp'=>'💬 WhatsApp','meeting'=>'🤝 Meeting','site_visit'=>'🏠 Site Visit']; @endphp
                            @foreach ($types as $type => $label)
                                <label>
                                    <input type="radio" name="activity_type" value="{{ $type }}"
                                        {{ $type === 'note' ? 'checked' : '' }} class="sr-only peer">
                                    <span class="type-pill peer-checked:active"
                                        onclick="this.classList.toggle('active'); document.querySelectorAll('.type-pill').forEach(p => p.classList.remove('active')); this.classList.add('active');">{{ $label }}</span>
                                </label>
                            @endforeach
                        </div>
                        <div class="flex gap-2">
                            <input type="text" name="title" placeholder="Log a call, note, or activity..."
                                class="form-input flex-1" required>
                            <button type="submit" class="action-btn action-btn-primary">Log Activity</button>
                        </div>
                    </form>
                </div>

                <!-- Tabs -->
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-sm font-semibold text-gray-700">Activity Timeline</h3>
                    <span class="text-xs text-gray-400">{{ $lead->activities->count() }} entries</span>
                </div>

                <!-- Activity Feed -->
                <div id="tab-activity" class="activity-feed bg-white rounded-lg border border-gray-200">
                    @if ($lead->activities->count() > 0)
                        @foreach ($lead->activities as $activity)
                            <div class="activity-item px-4">
                                @php
                                    $colors = [
                                        'call' => 'bg-green-100 text-green-600',
                                        'email' => 'bg-blue-100 text-blue-600',
                                        'whatsapp' => 'bg-emerald-100 text-emerald-600',
                                        'meeting' => 'bg-purple-100 text-purple-600',
                                        'site_visit' => 'bg-orange-100 text-orange-600',
                                        'status_change' => 'bg-yellow-100 text-yellow-600',
                                        'note' => 'bg-gray-100 text-gray-600',
                                        'system' => 'bg-slate-100 text-slate-600',
                                        'assignment' => 'bg-cyan-100 text-cyan-600',
                                        'follow_up_scheduled' => 'bg-pink-100 text-pink-600',
                                    ];
                                    $icons = [
                                        'call' =>
                                            'M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z',
                                        'email' =>
                                            'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z',
                                        'site_visit' =>
                                            'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
                                    ];
                                @endphp
                                <div class="activity-icon {{ $colors[$activity->type] ?? 'bg-gray-100 text-gray-600' }}">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="{{ $icons[$activity->type] ?? 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' }}" />
                                    </svg>
                                </div>
                                <div class="activity-content">
                                    <div class="activity-title">{{ $activity->title }}</div>
                                    @if ($activity->description)
                                        <div class="activity-desc">{{ $activity->description }}</div>
                                    @endif
                                    <div class="activity-meta">
                                        {{ $activity->created_at->diffForHumans() }}
                                        @if ($activity->user)
                                            • {{ $activity->user->name }}
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="p-8 text-center text-gray-400">
                            <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                            </svg>
                            <p class="text-sm">No activity yet. Start by logging a call or note above.</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Right Panel - Actions -->
            <div class="lead-right-panel">
                <div class="section-header">Quick Actions</div>

                <a href="tel:{{ $lead->phone }}" class="contact-action">
                    <div class="contact-action-icon bg-green-100">
                        <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                        </svg>
                    </div>
                    <div class="contact-action-text">
                        <div class="contact-action-label">Call Now</div>
                        <div class="contact-action-value">{{ $lead->phone }}</div>
                    </div>
                </a>

                <a href="https://wa.me/91{{ preg_replace('/[^0-9]/', '', $lead->phone) }}" target="_blank"
                    class="contact-action">
                    <div class="contact-action-icon bg-green-100">
                        <svg class="w-5 h-5 text-green-600" viewBox="0 0 24 24" fill="currentColor">
                            <path
                                d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" />
                        </svg>
                    </div>
                    <div class="contact-action-text">
                        <div class="contact-action-label">WhatsApp</div>
                        <div class="contact-action-value">Send Message</div>
                    </div>
                </a>

                @if ($lead->email)
                    <a href="mailto:{{ $lead->email }}" class="contact-action">
                        <div class="contact-action-icon bg-blue-100">
                            <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                        </div>
                        <div class="contact-action-text">
                            <div class="contact-action-label">Email</div>
                            <div class="contact-action-value truncate">{{ $lead->email }}</div>
                        </div>
                    </a>
                @endif

                <div class="section-header mt-6">Schedule Follow-up</div>
                <form onsubmit="scheduleFollowUp(event)">
                    <input type="datetime-local" name="next_follow_up" class="form-input mb-2" required>
                    <textarea name="follow_up_note" rows="2" class="form-input mb-2 resize-none" placeholder="What to discuss..."></textarea>
                    <button type="submit" class="action-btn action-btn-primary w-full justify-center">Schedule</button>
                </form>

                @if ($suggestedProperties->count() > 0)
                    <div class="section-header mt-6">Matching Properties</div>
                    @foreach ($suggestedProperties->take(3) as $property)
                        <a href="{{ route('admin.properties.show', $property) }}"
                            class="flex items-center gap-3 p-2 rounded hover:bg-gray-50 mb-2">
                            @if ($property->images->first())
                                <img src="{{ asset('storage/' . $property->images->first()->path) }}"
                                    class="w-12 h-12 rounded object-cover">
                            @else
                                <div class="w-12 h-12 rounded bg-gray-100 flex items-center justify-center"><svg
                                        class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg></div>
                            @endif
                            <div class="flex-1 min-w-0">
                                <div class="text-sm font-medium text-gray-900 truncate">
                                    {{ Str::limit($property->title, 25) }}</div>
                                <div class="text-xs text-indigo-600">{{ $property->formatted_price }}</div>
                            </div>
                        </a>
                    @endforeach
                @endif

                <div class="mt-6 pt-4 border-t">
                    <form action="{{ route('admin.crm.leads.destroy', $lead) }}" method="POST"
                        onsubmit="return confirm('Delete this lead permanently?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="text-sm text-red-600 hover:text-red-700 hover:underline">Delete this
                            lead</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const leadId = {{ $lead->id }};
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;

        // Initialize type pills
        document.querySelectorAll('.type-pill').forEach((pill, i) => {
            if (i === 0) pill.classList.add('active');
            pill.addEventListener('click', function() {
                document.querySelectorAll('.type-pill').forEach(p => p.classList.remove('active'));
                this.classList.add('active');
            });
        });

        function updateStatus(status) {
            fetch(`/admin/crm/leads/${leadId}/update-status`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({
                    status
                })
            }).then(r => r.json()).then(d => d.success && toast('Status updated'));
        }

        function updatePriority(priority) {
            fetch(`/admin/crm/leads/${leadId}/update-priority`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({
                    priority
                })
            }).then(r => r.json()).then(d => d.success && location.reload());
        }

        function assignLead(userId) {
            if (!userId) return;
            fetch(`/admin/crm/leads/${leadId}/assign`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({
                    assigned_to: userId
                })
            }).then(r => r.json()).then(d => d.success && toast('Assigned'));
        }

        function submitActivity(e) {
            e.preventDefault();
            const form = e.target;
            const type = document.querySelector('.type-pill.active')?.previousElementSibling?.value || 'note';
            const title = form.querySelector('input[name="title"]').value.trim();
            if (!title) return toast('Enter activity', 'error');

            fetch(`/admin/crm/leads/${leadId}/add-activity`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({
                    type,
                    title,
                    description: ''
                })
            }).then(r => r.json()).then(d => {
                if (d.success) {
                    toast('Activity logged');
                    setTimeout(() => location.reload(), 500);
                }
            });
        }

        function scheduleFollowUp(e) {
            e.preventDefault();
            const form = e.target;
            const next_follow_up = form.querySelector('input[name="next_follow_up"]').value;
            const follow_up_note = form.querySelector('textarea[name="follow_up_note"]').value;
            if (!next_follow_up) return toast('Select date', 'error');

            fetch(`/admin/crm/leads/${leadId}/schedule-follow-up`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({
                    next_follow_up,
                    follow_up_note
                })
            }).then(r => r.json()).then(d => {
                if (d.success) {
                    toast('Scheduled');
                    setTimeout(() => location.reload(), 500);
                }
            });
        }

        function toast(msg, type = 'success') {
            const t = document.createElement('div');
            t.className =
                `fixed bottom-4 right-4 px-4 py-2 rounded text-sm text-white z-50 ${type === 'error' ? 'bg-red-600' : 'bg-gray-800'}`;
            t.textContent = msg;
            document.body.appendChild(t);
            setTimeout(() => t.remove(), 2500);
        }
    </script>
@endpush