@include('Partials.sidebar')
<section class="main_content dashboard_part large_header_bg">
@include('Partials.header')
<div class="main_content_iner default_main_contaner_iner">
<div class="page-body">

    <div class="container-fluid">
        <div class="page-title">
            <div class="row align-items-center">
                <div class="col-sm-6 ps-0">
                    <h3>
                        @php $sc = $lead->statusConfig(); @endphp
                        <span class="badge badge-{{ $sc['badge'] }} mr-2" style="font-size:13px">{{ $sc['label'] }}</span>
                        {{ $lead->name }}
                    </h3>
                </div>
                <div class="col-sm-6 pe-0">
                    <ol class="bc">
                        <li><a href="/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                        <li class="bc-sep">›</li>
                        <li><a href="/admin/leads" class="bc-link">Leads</a></li>
                        <li class="bc-sep">›</li>
                        <li class="bc-active">#{{ $lead->id }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    @foreach(['success','error'] as $t)
        @if(session($t))
        <div class="container-fluid mb-2">
            <div class="alert alert-{{ $t==='error'?'danger':$t }} alert-dismissible fade show">
                {{ session($t) }}<button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        </div>
        @endif
    @endforeach

    <div class="container-fluid">
        <div class="row">

            {{-- LEFT: Lead info + follow-up timeline --}}
            <div class="col-lg-7">

                {{-- Lead Info Card --}}
                <div class="card shadow-sm mb-3" style="border-top:3px solid #c9a96e">
                    <div class="card-header d-flex justify-content-between align-items-center" style="background:linear-gradient(135deg,#1a1a2e,#16213e)">
                        <h6 class="mb-0 text-white"><i class="fas fa-user mr-2" style="color:#c9a96e"></i>Lead Information</h6>
                        <button class="btn btn-sm btn-outline-light" data-toggle="collapse" data-target="#editForm">
                            <i class="fas fa-edit"></i> Edit
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @foreach([
                                ['Phone',    $lead->phone,          'fa-phone'],
                                ['Email',    $lead->email ?: '—',   'fa-envelope'],
                                ['Source',   $lead->sourceConfig()['icon'].' '.$lead->sourceConfig()['label'], 'fa-tag'],
                                ['Interested In', $lead->interested_in ?: '—', 'fa-home'],
                                ['Budget',   $lead->budgetRange($currency), 'fa-coins'],
                                ['Contact Time', $lead->preferred_contact_time ?: '—', 'fa-clock'],
                                ['Assigned To',  $lead->assignedAgent?->name ?? 'Unassigned', 'fa-user-tie'],
                                ['Created',      $lead->created_at->format('d M Y, H:i'), 'fa-calendar'],
                            ] as [$label, $value, $icon])
                            <div class="col-md-6 mb-2">
                                <div style="font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:0.5px">
                                    <i class="fas {{ $icon }} mr-1"></i>{{ $label }}
                                </div>
                                <div style="font-weight:600;color:#1e293b;margin-top:2px">{!! $value !!}</div>
                            </div>
                            @endforeach
                        </div>
                        @if($lead->notes)
                        <div style="margin-top:10px;padding:10px 14px;background:#f8f9fa;border-radius:8px;font-size:13px;color:#475569">
                            <i class="fas fa-sticky-note mr-1" style="color:#c9a96e"></i>{{ $lead->notes }}
                        </div>
                        @endif
                        @if($lead->isWon() && $lead->booking)
                        <div style="margin-top:10px;padding:10px 14px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;font-size:13px">
                            🎉 <strong>Converted!</strong> Booking #{{ $lead->booking->id }} — Unit {{ $lead->booking->plot_number }}
                            <a href="/admin/bookings/{{ $lead->booking->id }}" class="ml-2 btn btn-xs btn-success">View Booking →</a>
                        </div>
                        @endif
                    </div>

                    {{-- Edit Form (collapsed) --}}
                    <div class="collapse" id="editForm">
                        <div class="card-body border-top" style="background:#fafafa">
                            <form method="POST" action="/admin/leads/{{ $lead->id }}">
                                @csrf @method('PATCH')
                                <div class="row">
                                    <div class="col-md-6"><div class="form-group">
                                        <label style="font-size:12px;font-weight:600">Name *</label>
                                        <input type="text" name="name" class="form-control form-control-sm" value="{{ $lead->name }}" required>
                                    </div></div>
                                    <div class="col-md-6"><div class="form-group">
                                        <label style="font-size:12px;font-weight:600">Phone *</label>
                                        <input type="text" name="phone" class="form-control form-control-sm" value="{{ $lead->phone }}" required>
                                    </div></div>
                                    <div class="col-md-6"><div class="form-group">
                                        <label style="font-size:12px;font-weight:600">Email</label>
                                        <input type="email" name="email" class="form-control form-control-sm" value="{{ $lead->email }}">
                                    </div></div>
                                    <div class="col-md-6"><div class="form-group">
                                        <label style="font-size:12px;font-weight:600">Status *</label>
                                        <select name="status" class="form-control form-control-sm" required>
                                            @foreach(\App\Models\Lead::STATUSES as $key => $cfg)
                                            <option value="{{ $key }}" {{ $lead->status===$key?'selected':'' }}>{{ $cfg['label'] }}</option>
                                            @endforeach
                                        </select>
                                    </div></div>
                                    <div class="col-md-6"><div class="form-group">
                                        <label style="font-size:12px;font-weight:600">Source *</label>
                                        <select name="source" class="form-control form-control-sm" required>
                                            @foreach(\App\Models\Lead::SOURCES as $key => $cfg)
                                            <option value="{{ $key }}" {{ $lead->source===$key?'selected':'' }}>{{ $cfg['icon'] }} {{ $cfg['label'] }}</option>
                                            @endforeach
                                        </select>
                                    </div></div>
                                    <div class="col-md-6"><div class="form-group">
                                        <label style="font-size:12px;font-weight:600">Assign To</label>
                                        <select name="assigned_to" class="form-control form-control-sm">
                                            <option value="">— Unassigned —</option>
                                            @foreach($agents as $a)
                                            <option value="{{ $a->id }}" {{ $lead->assigned_to==$a->id?'selected':'' }}>{{ $a->name }}</option>
                                            @endforeach
                                        </select>
                                    </div></div>
                                    <div class="col-md-6"><div class="form-group">
                                        <label style="font-size:12px;font-weight:600">Interested In</label>
                                        <select name="interested_in" class="form-control form-control-sm">
                                            <option value="">— Any —</option>
                                            @foreach($plotTypes as $type)
                                            <option value="{{ $type }}" {{ $lead->interested_in===$type?'selected':'' }}>{{ $type }}</option>
                                            @endforeach
                                        </select>
                                    </div></div>
                                    <div class="col-md-3"><div class="form-group">
                                        <label style="font-size:12px;font-weight:600">Budget Min</label>
                                        <input type="number" name="budget_min" class="form-control form-control-sm" value="{{ $lead->budget_min }}" min="0">
                                    </div></div>
                                    <div class="col-md-3"><div class="form-group">
                                        <label style="font-size:12px;font-weight:600">Budget Max</label>
                                        <input type="number" name="budget_max" class="form-control form-control-sm" value="{{ $lead->budget_max }}" min="0">
                                    </div></div>
                                    <div class="col-md-6"><div class="form-group">
                                        <label style="font-size:12px;font-weight:600">Lost Reason</label>
                                        <input type="text" name="lost_reason" class="form-control form-control-sm" value="{{ $lead->lost_reason }}" placeholder="If status = Lost">
                                    </div></div>
                                    <div class="col-12 d-flex" style="gap:8px">
                                        <button class="btn btn-primary btn-sm"><i class="fas fa-save mr-1"></i>Save Changes</button>
                                        <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="collapse" data-target="#editForm">Cancel</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                {{-- Follow-up Timeline --}}
                <div class="card shadow-sm">
                    <div class="card-header"><h6 class="mb-0">📋 Activity Timeline</h6></div>
                    <div class="card-body" style="max-height:400px;overflow-y:auto">
                        @forelse($lead->followUps as $fu)
                        @php $tc = $fu->typeConfig(); @endphp
                        <div style="display:flex;gap:12px;margin-bottom:16px">
                            <div style="width:34px;height:34px;border-radius:50%;background:{{ $tc['color'] }}22;border:2px solid {{ $tc['color'] }};display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px">
                                {{ $tc['icon'] }}
                            </div>
                            <div style="flex:1">
                                <div style="display:flex;justify-content:space-between;align-items:flex-start">
                                    <div>
                                        <span style="font-weight:700;font-size:12px;color:{{ $tc['color'] }}">{{ $tc['label'] }}</span>
                                        <span style="font-size:11px;color:#94a3b8;margin-left:8px">by {{ $fu->admin?->name ?? 'Admin' }}</span>
                                    </div>
                                    <span style="font-size:11px;color:#94a3b8">{{ $fu->created_at->format('d M, H:i') }}</span>
                                </div>
                                <div style="font-size:13px;color:#475569;margin-top:4px;white-space:pre-line">{{ $fu->note }}</div>
                                @if($fu->next_follow_up_at)
                                <div style="margin-top:4px;font-size:11px;color:#f59e0b">
                                    📅 Next: {{ $fu->next_follow_up_at->format('d M Y, H:i') }}
                                </div>
                                @endif
                            </div>
                        </div>
                        @empty
                        <p class="text-muted text-center py-3" style="font-size:13px">No activity yet. Log your first follow-up →</p>
                        @endforelse
                    </div>
                </div>

            </div>

            {{-- RIGHT: Actions panel --}}
            <div class="col-lg-5">

                {{-- Log Follow-up --}}
                @if(!$lead->isWon())
                <div class="card shadow-sm mb-3" style="border-top:3px solid #3b82f6">
                    <div class="card-header"><h6 class="mb-0">📞 Log Follow-up</h6></div>
                    <div class="card-body">
                        <form method="POST" action="/admin/leads/{{ $lead->id }}/follow-up">
                            @csrf
                            <div class="form-group mb-2">
                                <label style="font-size:12px;font-weight:600">Type *</label>
                                <div class="d-flex flex-wrap" style="gap:6px;margin-top:4px">
                                    @foreach(\App\Models\LeadFollowUp::TYPES as $key => $tc)
                                    <label style="cursor:pointer;margin:0">
                                        <input type="radio" name="type" value="{{ $key }}" {{ $key==='call'?'checked':'' }} style="display:none" class="fu-type-radio">
                                        <span class="fu-type-btn" data-color="{{ $tc['color'] }}"
                                            style="padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid #e2e8f0;cursor:pointer;display:inline-block;transition:all 0.15s;background:{{ $key==='call'?$tc['color'].'22':'' }};color:{{ $key==='call'?$tc['color']:'#64748b' }};border-color:{{ $key==='call'?$tc['color'].'55':'#e2e8f0' }}">
                                            {{ $tc['icon'] }} {{ $tc['label'] }}
                                        </span>
                                    </label>
                                    @endforeach
                                </div>
                            </div>
                            <div class="form-group mb-2">
                                <label style="font-size:12px;font-weight:600">Note *</label>
                                <textarea name="note" class="form-control form-control-sm" rows="3" required placeholder="What happened? What was discussed?"></textarea>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-2">
                                        <label style="font-size:12px;font-weight:600">Update Status</label>
                                        <select name="status" class="form-control form-control-sm">
                                            <option value="">— Keep current —</option>
                                            @foreach(\App\Models\Lead::STATUSES as $key => $cfg)
                                            <option value="{{ $key }}">{{ $cfg['label'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-2">
                                        <label style="font-size:12px;font-weight:600">Next Follow-up</label>
                                        <input type="datetime-local" name="next_follow_up_at" class="form-control form-control-sm">
                                    </div>
                                </div>
                            </div>
                            <button class="btn btn-primary btn-sm btn-block">
                                <i class="fas fa-plus mr-1"></i>Log Follow-up
                            </button>
                        </form>
                    </div>
                </div>
                @endif

                {{-- Quick Contact --}}
                <div class="card shadow-sm mb-3">
                    <div class="card-header"><h6 class="mb-0">⚡ Quick Contact</h6></div>
                    <div class="card-body">
                        {{-- WhatsApp --}}
                        <div class="mb-3">
                            <label style="font-size:12px;font-weight:600;color:#22c55e">💬 Send WhatsApp</label>
                            <textarea id="waMessage" class="form-control form-control-sm mt-1" rows="2"
                                placeholder="Type your message...">Hi {{ $lead->name }}, thank you for your interest in our properties. We would love to assist you further. Please let us know a convenient time to connect!</textarea>
                            <button onclick="sendWhatsApp()" class="btn btn-success btn-sm btn-block mt-2">
                                <i class="fab fa-whatsapp mr-1"></i>Open WhatsApp
                            </button>
                        </div>

                        <hr>

                        {{-- Email --}}
                        @if($lead->email)
                        <form method="POST" action="/admin/leads/{{ $lead->id }}/send-email">
                            @csrf
                            <label style="font-size:12px;font-weight:600;color:#8b5cf6">📧 Send Email</label>
                            <input type="text" name="subject" class="form-control form-control-sm mt-1 mb-1"
                                value="Following up on your property enquiry" placeholder="Subject *" required>
                            <textarea name="body" class="form-control form-control-sm mb-2" rows="3" required
                                placeholder="Email body...">Dear {{ $lead->name }},

Thank you for your interest in our properties. We would love to schedule a site visit at your convenience.

Please feel free to reach out to us anytime.

Best regards,</textarea>
                            <button class="btn btn-sm btn-block" style="background:#8b5cf6;color:#fff;font-weight:600">
                                <i class="fas fa-paper-plane mr-1"></i>Send Email
                            </button>
                        </form>
                        @else
                        <div class="text-muted" style="font-size:12px">📧 No email address on file.</div>
                        @endif
                    </div>
                </div>

                {{-- Convert to Booking --}}
                @if(!$lead->isWon() && !$lead->isLost())
                <div class="card shadow-sm mb-3" style="border-top:3px solid #22c55e">
                    <div class="card-header" style="background:#f0fdf4">
                        <h6 class="mb-0 text-success">🎉 Convert to Booking</h6>
                    </div>
                    <div class="card-body">
                        <p style="font-size:12px;color:#475569">Select a unit, enter amount paid, and this lead will be marked as Won with a confirmed booking.</p>
                        <form method="POST" action="/admin/leads/{{ $lead->id }}/convert">
                            @csrf
                            <div class="form-group mb-2">
                                <label style="font-size:12px;font-weight:600">Unit *</label>
                                <select name="plot_id" class="form-control form-control-sm" required onchange="fillConvertPrice(this)">
                                    <option value="">— Select available unit —</option>
                                    @foreach($availablePlots as $p)
                                    @php $price = $p->offer_price ?: $p->actual_price; @endphp
                                    <option value="{{ $p->id }}" data-price="{{ $price }}">
                                        Unit {{ $p->plot_number }} — {{ $p->plot_type }} — ₹{{ number_format($price,0) }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="row">
                                <div class="col-md-6"><div class="form-group mb-2">
                                    <label style="font-size:12px;font-weight:600">Amount Paid *</label>
                                    <input type="number" name="amount_paid" id="convertAmount" class="form-control form-control-sm" required min="1">
                                </div></div>
                                <div class="col-md-6"><div class="form-group mb-2">
                                    <label style="font-size:12px;font-weight:600">Payment Mode *</label>
                                    <select name="payment_mode" class="form-control form-control-sm" required>
                                        <option value="cash">💵 Cash</option>
                                        <option value="bank_transfer">🏦 Bank Transfer</option>
                                        <option value="cheque">📄 Cheque</option>
                                        <option value="manual">✏️ Manual</option>
                                    </select>
                                </div></div>
                            </div>
                            <div class="alert alert-warning py-1 px-2 mb-2" style="font-size:11px">
                                ⚠️ The lead's phone/email must match a registered frontend user account.
                            </div>
                            <button class="btn btn-success btn-sm btn-block font-weight-bold"
                                onclick="return confirm('Convert this lead to a booking? This cannot be undone.')">
                                🎉 Convert to Booking
                            </button>
                        </form>
                    </div>
                </div>
                @endif

                {{-- Danger zone --}}
                <div class="card shadow-sm border-danger">
                    <div class="card-body py-2">
                        <form method="POST" action="/admin/leads/{{ $lead->id }}"
                              onsubmit="return confirm('Delete this lead permanently?')">
                            @csrf @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger btn-block">
                                <i class="fas fa-trash mr-1"></i>Delete Lead
                            </button>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
</div>
</section>

<script>
// Follow-up type radio styling
document.querySelectorAll('.fu-type-radio').forEach(radio => {
    radio.addEventListener('change', function () {
        document.querySelectorAll('.fu-type-btn').forEach(btn => {
            btn.style.background = '';
            btn.style.color = '#64748b';
            btn.style.borderColor = '#e2e8f0';
        });
        const btn = this.nextElementSibling;
        const color = btn.dataset.color;
        btn.style.background = color + '22';
        btn.style.color = color;
        btn.style.borderColor = color + '55';
    });
});

// Auto-fill price on convert form
function fillConvertPrice(sel) {
    const price = sel.options[sel.selectedIndex].dataset.price;
    if (price) document.getElementById('convertAmount').value = price;
}

// WhatsApp link
function sendWhatsApp() {
    const msg  = document.getElementById('waMessage').value;
    const phone = '{{ preg_replace("/[^0-9]/", "", ($lead->country_code ?? "91") . $lead->phone) }}';
    window.open('https://wa.me/' + phone + '?text=' + encodeURIComponent(msg), '_blank');

    // Log it as follow-up via AJAX
    fetch('/admin/leads/{{ $lead->id }}/follow-up', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({ type: 'whatsapp', note: 'WhatsApp message sent: ' + msg, _token: '{{ csrf_token() }}' })
    }).catch(() => {});
}
</script>

@include('Partials.footer')