@extends('layouts.app')

@section('title', 'Lead — ' . ($lead->requirement ? $lead->requirement->title : 'Detail'))
@section('page-title', 'Lead Detail')

@push('styles')
<style>
.stage-bar { display: flex; gap: 0; overflow-x: auto; }
.stage-bar-item {
    flex: 1; min-width: 80px;
    padding: 6px 10px 6px 20px;
    font-size: 0.72rem; font-weight: 600;
    color: #fff; position: relative;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
    background: #dee2e6; color: #6c757d;
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stage-bar-item:first-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.stage-bar-item.active { color: #fff !important; }
.stage-bar-item.done   { opacity: 0.7; }
.property-search-result { cursor: pointer; transition: background .15s; }
.property-search-result:hover { background: #f8f9fa; }
</style>
@endpush

@section('content')
@php
    $req              = $lead->requirement;
    $client           = $req ? $req->client : null;
    $shortlisted      = $lead->shortlistedProperties;
    $removalReasons   = \App\Models\PropertyShortlist::REMOVAL_REASONS;
    $siteVisits       = $lead->siteVisits;
    $pendingReminders = $lead->reminders->where('is_done', false);
    $quotes           = $lead->quotes;
    $agreement        = $lead->agreement;
    $defaultDealType  = ($req && $req->interest_type === 'rent') ? 'rental' : 'sale';
@endphp

<div class="d-flex justify-content-between align-items-center mb-4">
    <a href="{{ route('admin.leads.index') }}" class="btn btn-sm btn-light">
        <i class="bi bi-arrow-left me-1"></i> Back to Leads
    </a>
    <div class="d-flex gap-2 flex-wrap">
        <button class="btn btn-outline-warning btn-sm" data-bs-toggle="modal" data-bs-target="#createReminderModal">
            <i class="bi bi-bell-plus me-1"></i> Set Reminder
        </button>
        <button class="btn btn-outline-success btn-sm" data-bs-toggle="modal" data-bs-target="#logQuoteModal">
            <i class="bi bi-cash-stack me-1"></i> Log Quote
        </button>
        @if(! $agreement)
        <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#recordDealModal">
            <i class="bi bi-file-earmark-check me-1"></i> Record Deal
        </button>
        @endif
        @if($lead->isOpen())
        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#changeStageModal">
            <i class="bi bi-arrow-right-circle me-1"></i> Change Stage
        </button>
        @endif
    </div>
</div>

{{-- Client & Requirement Header --}}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body">
        <div class="row g-4">
            <div class="col-md-6">
                <div class="text-muted small fw-medium text-uppercase mb-1" style="letter-spacing:.05em">Client</div>
                @if($client)
                <div class="fw-semibold fs-6">
                    <a href="{{ route('admin.client.show', $client) }}" class="text-decoration-none">
                        {{ $client->full_name }}
                    </a>
                </div>
                <div class="text-muted small">{{ $client->mobile }}{{ $client->email ? ' · ' . $client->email : '' }}</div>
                @else
                <span class="text-muted">—</span>
                @endif
            </div>
            <div class="col-md-6">
                <div class="text-muted small fw-medium text-uppercase mb-1" style="letter-spacing:.05em">Requirement</div>
                @if($req)
                <div class="fw-semibold">{{ $req->title }}</div>
                <div class="text-muted small">
                    {{ \App\Services\ClientRequirementService::formatBudget($req->min_budget, $req->max_budget) }}
                    @if($req->preferred_location) · {{ $req->preferred_location }} @endif
                </div>
                <div class="mt-1">
                    <span class="badge bg-{{ $req->status === 'active' ? 'success' : 'secondary' }} bg-opacity-10
                                        text-{{ $req->status === 'active' ? 'success' : 'secondary' }}">
                        {{ ucfirst($req->status) }}
                    </span>
                </div>
                @else
                <span class="text-muted">—</span>
                @endif
            </div>
        </div>
        <hr class="my-3">
        <div class="row g-3 small text-muted">
            <div class="col-auto">
                <i class="bi bi-person me-1"></i>
                Assigned: <span class="text-dark fw-medium">{{ $lead->assignedTo ? $lead->assignedTo->name : 'Unassigned' }}</span>
            </div>
            <div class="col-auto">
                <i class="bi bi-calendar me-1"></i>
                Created: <span class="text-dark">{{ $lead->created_at->format('d M Y') }}</span>
            </div>
            <div class="col-auto">
                <i class="bi bi-clock me-1"></i>
                Last Activity: <span class="text-dark">{{ $lead->last_activity_at ? $lead->last_activity_at->diffForHumans() : '—' }}</span>
            </div>
        </div>
    </div>
</div>

{{-- Stage Progress Bar --}}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body">
        <div class="fw-semibold mb-3 small text-muted text-uppercase" style="letter-spacing:.05em">Pipeline Progress</div>
        <div class="stage-bar">
            @foreach($stages as $stage)
            @php
                $isCurrent = $lead->current_stage_id === $stage->id;
                $currentOrder = $lead->currentStage ? $lead->currentStage->order : 0;
                $isDone = $stage->order < $currentOrder;
                $activeColor = $isCurrent ? $stage->color : ($isDone ? $stage->color : null);
            @endphp
            <div class="stage-bar-item {{ $isCurrent ? 'active' : ($isDone ? 'done' : '') }}"
                 @if($activeColor) style="background-color: {{ $activeColor }}; {{ $isCurrent || $isDone ? 'color:#fff' : '' }}" @endif
                 title="{{ $stage->name }}">
                {{ $stage->name }}
            </div>
            @endforeach
        </div>
        <div class="mt-3 d-flex align-items-center gap-2">
            @if($lead->currentStage)
                <span class="badge" style="background-color: {{ $lead->currentStage->color }}; font-size:0.8rem">
                    {{ $lead->currentStage->name }}
                </span>
                <span class="text-muted small">{{ $lead->days_in_stage }} day{{ $lead->days_in_stage == 1 ? '' : 's' }} in this stage</span>
            @else
                <span class="text-muted small">No stage assigned</span>
            @endif
        </div>
    </div>
</div>

{{-- Stage Transition History --}}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white border-0 pt-3 pb-0">
        <h6 class="fw-semibold mb-0">Stage History</h6>
    </div>
    <div class="table-responsive">
        <table class="table table-sm align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>From</th>
                    <th>To</th>
                    <th>Changed By</th>
                    <th>Note</th>
                    <th>Date / Time</th>
                </tr>
            </thead>
            <tbody>
                @forelse($lead->transitions as $transition)
                <tr>
                    <td>
                        @if($transition->fromStage)
                            <span class="badge" style="background-color: {{ $transition->fromStage->color }}">
                                {{ $transition->fromStage->name }}
                            </span>
                        @else
                            <span class="text-muted small">— (Created)</span>
                        @endif
                    </td>
                    <td>
                        <span class="badge" style="background-color: {{ $transition->toStage->color }}">
                            {{ $transition->toStage->name }}
                        </span>
                    </td>
                    <td class="small">{{ $transition->changedBy ? $transition->changedBy->name : '—' }}</td>
                    <td class="small text-muted" style="max-width:300px">{{ $transition->note }}</td>
                    <td class="small text-muted text-nowrap">{{ $transition->created_at->format('d M Y, h:i A') }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center py-3 text-muted small">No stage transitions recorded.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Shortlisted Properties --}}
<div class="card border-0 shadow-sm mb-4" id="shortlisted">
    <div class="card-header bg-white border-0 pt-3 pb-0 d-flex align-items-center justify-content-between">
        <h6 class="fw-semibold mb-0">
            <i class="bi bi-bookmark-star me-2 text-primary"></i>Shortlisted Properties
            <span class="badge bg-secondary bg-opacity-10 text-secondary ms-1">{{ $shortlisted->count() }}</span>
        </h6>
        @if($lead->isOpen())
        <button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#searchPanel">
            <i class="bi bi-search me-1"></i>Search &amp; Add
        </button>
        @endif
    </div>

    @if($lead->isOpen())
    {{-- AJAX search panel --}}
    <div class="collapse" id="searchPanel">
        <div class="card-body border-top py-3">
            <div class="row g-2 mb-3">
                <div class="col-md-4">
                    <input type="text" id="sl-search-q" class="form-control form-control-sm"
                           placeholder="Title / location / city…">
                </div>
                <div class="col-md-2">
                    <select id="sl-search-type" class="form-select form-select-sm">
                        <option value="">All Types</option>
                        @foreach(\App\Models\Property::typeLabels() as $val => $label)
                        <option value="{{ $val }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <select id="sl-search-purpose" class="form-select form-select-sm">
                        <option value="">Any Purpose</option>
                        @foreach(\App\Models\Property::LISTING_PURPOSES as $val => $label)
                        <option value="{{ $val }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <input type="number" id="sl-search-min" class="form-control form-control-sm" placeholder="Min price">
                </div>
                <div class="col-md-2">
                    <input type="number" id="sl-search-max" class="form-control form-control-sm" placeholder="Max price">
                </div>
            </div>
            <div id="sl-results" class="list-group list-group-flush small" style="max-height:320px;overflow-y:auto"></div>
            <div id="sl-empty" class="text-muted text-center py-3 small d-none">No properties found.</div>
            <div id="sl-loading" class="text-muted text-center py-3 small d-none">
                <div class="spinner-border spinner-border-sm me-1"></div> Searching…
            </div>
        </div>
    </div>
    @endif

    <div class="card-body p-0">
        @if($shortlisted->isEmpty())
        <div class="text-center text-muted py-4 small">
            <i class="bi bi-bookmark d-block fs-3 mb-2 text-secondary"></i>
            No properties shortlisted yet.
        </div>
        @else
        <div class="table-responsive">
            <table class="table table-sm align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Property</th>
                        <th>Type</th>
                        <th>Location</th>
                        <th>Price</th>
                        <th>Added By</th>
                        <th>Added On</th>
                        @if($lead->isOpen()) <th></th> @endif
                    </tr>
                </thead>
                <tbody>
                    @foreach($shortlisted as $sl)
                    <tr>
                        <td>
                            <a href="{{ route('admin.property.show', $sl->property) }}" class="text-decoration-none fw-medium text-dark">
                                {{ $sl->property->title }}
                            </a>
                        </td>
                        <td class="small text-muted">{{ (\App\Models\Property::typeLabels())[$sl->property->type] ?? $sl->property->type }}</td>
                        <td class="small text-muted">{{ $sl->property->city ?: $sl->property->location }}</td>
                        <td class="small">{{ $sl->property->formattedPrice() }}</td>
                        <td class="small text-muted">{{ optional($sl->shortlistedBy)->name ?? '—' }}</td>
                        <td class="small text-muted text-nowrap">{{ $sl->created_at->format('d M Y') }}</td>
                        @if($lead->isOpen())
                        <td>
                            <button class="btn btn-sm btn-outline-danger py-0 px-2"
                                    data-bs-toggle="modal"
                                    data-bs-target="#removeShortlistModal"
                                    data-property-id="{{ $sl->property->id }}"
                                    data-property-title="{{ addslashes($sl->property->title) }}">
                                <i class="bi bi-x"></i>
                            </button>
                        </td>
                        @endif
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>
</div>

{{-- Site Visits --}}
<div class="card border-0 shadow-sm mb-4" id="site-visits">
    <div class="card-header bg-white border-0 pt-3 pb-0 d-flex align-items-center justify-content-between">
        <h6 class="fw-semibold mb-0">
            <i class="bi bi-map me-2 text-primary"></i>Site Visits
            <span class="badge bg-secondary bg-opacity-10 text-secondary ms-1">{{ $siteVisits->count() }}</span>
        </h6>
        @if($lead->isOpen())
        <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#logVisitModal">
            <i class="bi bi-plus-lg me-1"></i>Log Visit
        </button>
        @endif
    </div>
    <div class="card-body p-0">
        @if($siteVisits->isEmpty())
        <div class="text-center text-muted py-4 small">
            <i class="bi bi-signpost-2 d-block fs-3 mb-2 text-secondary"></i>
            No site visits logged yet.
        </div>
        @else
        <div class="table-responsive">
            <table class="table table-sm align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Property</th>
                        <th>Date &amp; Time</th>
                        <th>Stage at Visit</th>
                        <th>Accompanying Staff</th>
                        <th>Notes</th>
                        <th>Logged By</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($siteVisits as $visit)
                    <tr>
                        <td>
                            <a href="{{ route('admin.property.show', $visit->property) }}"
                               class="text-decoration-none fw-medium text-dark">
                                {{ $visit->property->title }}
                            </a>
                        </td>
                        <td class="small text-nowrap">{{ $visit->formattedVisitDateTime() }}</td>
                        <td>
                            @if($visit->stageSnapshot)
                            <span class="badge" style="background-color:{{ $visit->stageSnapshot->color }}">
                                {{ $visit->stageSnapshot->name }}
                            </span>
                            @else
                            <span class="text-muted small">—</span>
                            @endif
                        </td>
                        <td class="small">{{ $visit->accompanying_staff }}</td>
                        <td class="small text-muted" style="max-width:220px">
                            {{ $visit->notes ?: '—' }}
                        </td>
                        <td class="small text-muted">{{ optional($visit->loggedBy)->name ?? '—' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>
</div>

{{-- Active Reminders for this Lead --}}
@if($pendingReminders->isNotEmpty())
<div class="card border-0 shadow-sm mb-4 border-warning border-opacity-50">
    <div class="card-header bg-warning bg-opacity-10 border-0 pt-3 pb-0 d-flex align-items-center justify-content-between">
        <h6 class="fw-semibold mb-0">
            <i class="bi bi-bell me-2 text-warning"></i>Active Reminders
            <span class="badge bg-warning text-dark ms-1">{{ $pendingReminders->count() }}</span>
        </h6>
    </div>
    <div class="card-body p-0">
        <ul class="list-group list-group-flush">
            @foreach($pendingReminders as $reminder)
            @php $isOverdue = $reminder->remind_at->isPast(); @endphp
            <li class="list-group-item px-4 py-3 {{ $isOverdue ? 'bg-danger bg-opacity-5' : '' }}">
                <div class="d-flex align-items-start gap-3">
                    <i class="bi bi-bell{{ $isOverdue ? '-fill text-danger' : ' text-warning' }} mt-1 flex-shrink-0"></i>
                    <div class="flex-grow-1">
                        <div class="small fw-medium">{{ $reminder->message }}</div>
                        <div class="text-muted" style="font-size:0.72rem">
                            <i class="bi bi-clock me-1"></i>{{ $reminder->remind_at->format('d M Y, h:i A') }}
                            @if($isOverdue) <span class="text-danger fw-medium ms-1">Overdue</span> @endif
                            · Assigned to: {{ optional($reminder->assignedTo)->name ?? '—' }}
                        </div>
                    </div>
                    <form method="POST" action="{{ route('reminders.done', $reminder) }}" class="flex-shrink-0">
                        @csrf @method('PATCH')
                        <button type="submit" class="btn btn-sm btn-outline-success py-0 px-2">
                            <i class="bi bi-check-lg me-1"></i>Done
                        </button>
                    </form>
                </div>
            </li>
            @endforeach
        </ul>
    </div>
</div>
@endif

{{-- Quotes --}}
<div class="card border-0 shadow-sm mb-4" id="quotes">
    <div class="card-header bg-white border-0 pt-3 pb-0 d-flex align-items-center justify-content-between">
        <h6 class="fw-semibold mb-0">
            <i class="bi bi-cash-stack me-2 text-success"></i>Quotes
            <span class="badge bg-secondary bg-opacity-10 text-secondary ms-1">{{ $quotes->count() }}</span>
        </h6>
        <button class="btn btn-outline-success btn-sm" data-bs-toggle="modal" data-bs-target="#logQuoteModal">
            <i class="bi bi-plus-lg me-1"></i>Log Quote
        </button>
    </div>
    <div class="card-body p-0">
        @if($quotes->isEmpty())
        <div class="text-center text-muted py-4 small">
            <i class="bi bi-cash-stack d-block fs-3 mb-2 text-secondary"></i>
            No quotes logged yet.
        </div>
        @else
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0 align-middle">
                <thead class="table-light">
                    <tr>
                        <th class="ps-3">Property</th>
                        <th>Quoted Price</th>
                        <th>Date</th>
                        <th>Shared By</th>
                        <th>Notes</th>
                        <th class="text-muted small">Logged By</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($quotes as $quote)
                    <tr>
                        <td class="ps-3 small">{{ optional($quote->property)->title ?? '—' }}</td>
                        <td class="small fw-medium">₹ {{ number_format((float)$quote->quoted_price, 0) }}</td>
                        <td class="small">{{ $quote->quote_date ? $quote->quote_date->format('d M Y') : '—' }}</td>
                        <td class="small">{{ $quote->shared_by }}</td>
                        <td class="small text-muted">{{ $quote->notes ?: '—' }}</td>
                        <td class="small text-muted">{{ optional($quote->createdBy)->name ?? '—' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>
</div>

{{-- Final Deal --}}
<div class="card border-0 shadow-sm mb-4" id="final-deal">
    <div class="card-header bg-white border-0 pt-3 pb-0 d-flex align-items-center justify-content-between">
        <h6 class="fw-semibold mb-0">
            <i class="bi bi-file-earmark-check me-2 text-success"></i>Final Deal
        </h6>
        @if(! $agreement)
        <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#recordDealModal">
            <i class="bi bi-plus-lg me-1"></i>Record Deal
        </button>
        @endif
    </div>
    <div class="card-body">
        @if(! $agreement)
        <div class="text-center text-muted py-3 small">
            <i class="bi bi-file-earmark d-block fs-3 mb-2 text-secondary"></i>
            No deal recorded yet.
        </div>
        @else
        <div class="row g-3">
            <div class="col-md-4">
                <div class="small text-muted mb-1">Deal Type</div>
                <span class="badge {{ $agreement->isRental() ? 'bg-info' : 'bg-success' }} bg-opacity-75">
                    {{ $agreement->isRental() ? 'Rental' : 'Sale' }}
                </span>
            </div>
            <div class="col-md-4">
                <div class="small text-muted mb-1">Property</div>
                <div class="small fw-medium">{{ optional($agreement->property)->title ?? '—' }}</div>
            </div>
            <div class="col-md-4">
                <div class="small text-muted mb-1">Deal Date</div>
                <div class="small">{{ $agreement->deal_date ? $agreement->deal_date->format('d M Y') : '—' }}</div>
            </div>
            <div class="col-md-4">
                <div class="small text-muted mb-1">Client Name</div>
                <div class="small">{{ $agreement->client_name }}</div>
            </div>
            <div class="col-md-4">
                <div class="small text-muted mb-1">Owner Name</div>
                <div class="small">{{ $agreement->owner_name }}</div>
            </div>
            <div class="col-md-4">
                <div class="small text-muted mb-1">Agreed Price</div>
                <div class="small fw-medium text-success">₹ {{ number_format((float)$agreement->agreed_price, 0) }}</div>
            </div>
            @if($agreement->isRental())
            <div class="col-md-4">
                <div class="small text-muted mb-1">Agreement Period</div>
                <div class="small">
                    {{ $agreement->agreement_start_date ? $agreement->agreement_start_date->format('d M Y') : '—' }}
                    → {{ $agreement->agreement_end_date ? $agreement->agreement_end_date->format('d M Y') : '—' }}
                </div>
            </div>
            <div class="col-md-4">
                <div class="small text-muted mb-1">Monthly Rent</div>
                <div class="small fw-medium">₹ {{ number_format((float)$agreement->monthly_rent, 0) }}</div>
            </div>
            <div class="col-md-4">
                <div class="small text-muted mb-1">Escalation Clause</div>
                <div class="small">{{ $agreement->rent_escalation_clause ?: '—' }}</div>
            </div>
            @if($agreement->document_path)
            <div class="col-md-4">
                <div class="small text-muted mb-1">Agreement Document</div>
                <a href="{{ route('admin.leads.agreement.document', $lead) }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-file-pdf me-1"></i>Download PDF
                </a>
            </div>
            @endif
            @endif
            @if($agreement->notes)
            <div class="col-12">
                <div class="small text-muted mb-1">Notes</div>
                <div class="small">{{ $agreement->notes }}</div>
            </div>
            @endif
            @if($agreement->correction_note)
            <div class="col-12">
                <div class="alert alert-warning py-2 mb-0 small">
                    <i class="bi bi-exclamation-triangle me-1"></i>
                    <strong>Correction Note:</strong> {{ $agreement->correction_note }}
                </div>
            </div>
            @endif
        </div>

        @if(auth()->user()->isAdmin())
        <hr class="my-3">
        <form method="POST" action="{{ route('admin.leads.agreement.correction', $lead) }}">
            @csrf
            @method('PATCH')
            <label class="form-label small fw-medium mb-1">
                <i class="bi bi-pencil-square me-1"></i>Add / Update Correction Note
            </label>
            <textarea name="correction_note" rows="2"
                      class="form-control form-control-sm @error('correction_note') is-invalid @enderror"
                      placeholder="Describe any corrections or amendments to this deal…"
                      maxlength="2000">{{ old('correction_note', $agreement->correction_note) }}</textarea>
            @error('correction_note') <div class="invalid-feedback">{{ $message }}</div> @enderror
            <div class="d-flex justify-content-end mt-2">
                <button type="submit" class="btn btn-sm btn-warning">
                    <i class="bi bi-save me-1"></i>Save Correction
                </button>
            </div>
        </form>
        @endif
        @endif
    </div>
</div>

{{-- Activity Log --}}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white border-0 pt-3 pb-0">
        <h6 class="fw-semibold mb-0">
            <i class="bi bi-journal-text me-2 text-primary"></i>Activity Log
        </h6>
    </div>
    <div class="card-body p-0">
        @if($lead->activityLogs->isEmpty())
        <div class="text-center text-muted py-4 small">
            <i class="bi bi-clock-history d-block fs-3 mb-2 text-secondary"></i>
            No activity recorded yet.
        </div>
        @else
        <ul class="list-group list-group-flush">
            @foreach($lead->activityLogs as $log)
            @php
                $iconMap = [
                    'shortlist_added'    => 'bi-bookmark-plus text-success',
                    'shortlist_removed'  => 'bi-bookmark-x text-danger',
                    'stage_changed'      => 'bi-arrow-right-circle text-primary',
                    'lead_created'       => 'bi-plus-circle text-info',
                    'site_visit_logged'  => 'bi-map text-info',
                    'note_added'         => 'bi-chat-left-text text-secondary',
                    'reminder_created'   => 'bi-bell text-warning',
                    'quote_logged'       => 'bi-cash-stack text-success',
                    'agreement_created'  => 'bi-file-earmark-check text-success',
                ];
                $icon = $iconMap[$log->action] ?? 'bi-circle text-secondary';
            @endphp
            <li class="list-group-item px-3 py-2">
                <div class="d-flex align-items-start gap-2">
                    <i class="bi {{ $icon }} mt-1" style="font-size:0.9rem;flex-shrink:0"></i>
                    <div class="flex-grow-1">
                        <div class="small">{{ $log->description }}</div>
                        <div class="text-muted" style="font-size:0.7rem">
                            {{ optional($log->performedBy)->name ?? 'System' }}
                            · {{ $log->created_at->format('d M Y, h:i A') }}
                        </div>
                    </div>
                </div>
            </li>
            @endforeach
        </ul>
        @endif
    </div>

    {{-- Add Note form --}}
    <div class="card-footer bg-light border-top py-3">
        <form method="POST" action="{{ route('admin.leads.notes.store', $lead) }}">
            @csrf
            <label class="form-label small fw-medium mb-1">
                <i class="bi bi-chat-left-text me-1"></i>Add Note
            </label>
            <textarea name="note" rows="2"
                      class="form-control form-control-sm @error('note') is-invalid @enderror"
                      placeholder="Type a note about this lead… (max 2000 characters)"
                      maxlength="2000">{{ old('note') }}</textarea>
            @error('note') <div class="invalid-feedback">{{ $message }}</div> @enderror
            <div class="d-flex justify-content-end mt-2">
                <button type="submit" class="btn btn-sm btn-primary">
                    <i class="bi bi-plus-lg me-1"></i>Add Note
                </button>
            </div>
        </form>
    </div>
</div>

@if($lead->isOpen())
{{-- Log Visit Modal --}}
<div class="modal fade" id="logVisitModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form method="POST" action="{{ route('admin.leads.visits.store', $lead) }}">
            @csrf
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-0">
                    <h6 class="modal-title fw-semibold"><i class="bi bi-map me-2"></i>Log Site Visit</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                    {{-- Property selector --}}
                    <div class="mb-3">
                        <label class="form-label fw-medium">Property <span class="text-danger">*</span></label>
                        <select name="property_id" id="visit-property-select"
                                class="form-select @error('property_id') is-invalid @enderror" required>
                            <option value="">— Select a property —</option>
                            @if($shortlisted->isNotEmpty())
                            <optgroup label="Shortlisted Properties">
                                @foreach($shortlisted as $sl)
                                <option value="{{ $sl->property->id }}"
                                        {{ old('property_id') == $sl->property->id ? 'selected' : '' }}>
                                    {{ $sl->property->title }}
                                    {{ $sl->property->city ? '(' . $sl->property->city . ')' : '' }}
                                </option>
                                @endforeach
                            </optgroup>
                            @endif
                            <optgroup label="Search any property" id="visit-search-group" style="display:none">
                            </optgroup>
                        </select>
                        @error('property_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        <div class="mt-2">
                            <input type="text" id="visit-property-search" class="form-control form-control-sm"
                                   placeholder="Or type to search any published property…">
                            <div id="visit-search-results" class="list-group mt-1 small" style="max-height:180px;overflow-y:auto"></div>
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Visit Date <span class="text-danger">*</span></label>
                            <input type="date" name="visit_date"
                                   class="form-control @error('visit_date') is-invalid @enderror"
                                   value="{{ old('visit_date', date('Y-m-d')) }}"
                                   max="{{ date('Y-m-d') }}" required>
                            @error('visit_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Visit Time <span class="text-danger">*</span></label>
                            <input type="time" name="visit_time"
                                   class="form-control @error('visit_time') is-invalid @enderror"
                                   value="{{ old('visit_time', date('H:i')) }}" required>
                            @error('visit_time') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="mb-3 mt-3">
                        <label class="form-label fw-medium">Accompanying Staff <span class="text-danger">*</span></label>
                        <input type="text" name="accompanying_staff"
                               class="form-control @error('accompanying_staff') is-invalid @enderror"
                               value="{{ old('accompanying_staff') }}"
                               placeholder="e.g. Ramesh Kumar, Sita Patel"
                               required maxlength="500">
                        <div class="form-text">Names of all staff who accompanied the client, comma-separated.</div>
                        @error('accompanying_staff') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-1">
                        <label class="form-label fw-medium">Notes / Outcome <span class="text-muted fw-normal">(optional)</span></label>
                        <textarea name="notes" rows="3"
                                  class="form-control @error('notes') is-invalid @enderror"
                                  placeholder="Client feedback, objections raised, agreed next steps…"
                                  maxlength="2000">{{ old('notes') }}</textarea>
                        @error('notes') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-1"></i>Log Visit
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endif

{{-- Create Reminder Modal --}}
<div class="modal fade" id="createReminderModal" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('admin.leads.reminders.store', $lead) }}">
            @csrf
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-0">
                    <h6 class="modal-title fw-semibold"><i class="bi bi-bell-plus me-2"></i>Set Reminder</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                    <div class="mb-3">
                        <label class="form-label fw-medium">Reminder Message <span class="text-danger">*</span></label>
                        <textarea name="message" rows="3"
                                  class="form-control @error('message') is-invalid @enderror"
                                  placeholder="e.g. Call back after meeting, Follow up on site visit…"
                                  maxlength="500" required>{{ old('message') }}</textarea>
                        @error('message') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        <div class="form-text">Max 500 characters.</div>
                    </div>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Reminder Date <span class="text-danger">*</span></label>
                            <input type="date" name="remind_date"
                                   class="form-control @error('remind_date') is-invalid @enderror"
                                   value="{{ old('remind_date', date('Y-m-d')) }}"
                                   min="{{ date('Y-m-d') }}" required>
                            @error('remind_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Reminder Time <span class="text-danger">*</span></label>
                            <input type="time" name="remind_time"
                                   class="form-control @error('remind_time') is-invalid @enderror"
                                   value="{{ old('remind_time', date('H:i')) }}" required>
                            @error('remind_time') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    @if(auth()->user()->isAdmin())
                    <div class="mt-3">
                        <label class="form-label fw-medium">Assign To <span class="text-danger">*</span></label>
                        <select name="assigned_to"
                                class="form-select @error('assigned_to') is-invalid @enderror" required>
                            <option value="">— Select staff —</option>
                            @foreach($staffList as $staff)
                            <option value="{{ $staff->id }}"
                                    {{ old('assigned_to', $lead->assigned_to) == $staff->id ? 'selected' : '' }}>
                                {{ $staff->name }} ({{ ucfirst($staff->role) }})
                            </option>
                            @endforeach
                        </select>
                        @error('assigned_to') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    @else
                    <input type="hidden" name="assigned_to" value="{{ $lead->assigned_to }}">
                    @endif

                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning text-dark">
                        <i class="bi bi-bell-plus me-1"></i>Set Reminder
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Change Stage Modal --}}
<div class="modal fade" id="changeStageModal" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('admin.leads.updateStage', $lead) }}">
            @csrf @method('PATCH')
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-0">
                    <h6 class="modal-title fw-semibold">Change Lead Stage</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <div class="text-muted small mb-1">Current Stage</div>
                        @if($lead->currentStage)
                            <span class="badge" style="background-color: {{ $lead->currentStage->color }}; font-size:0.85rem">
                                {{ $lead->currentStage->name }}
                            </span>
                        @else
                            <span class="text-muted">—</span>
                        @endif
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-medium">New Stage <span class="text-danger">*</span></label>
                        <select name="stage_id"
                                class="form-select @error('stage_id') is-invalid @enderror" required>
                            <option value="">— Select a stage —</option>
                            @foreach($stages as $stage)
                                @if($stage->id !== $lead->current_stage_id)
                                <option value="{{ $stage->id }}"
                                        {{ old('stage_id') == $stage->id ? 'selected' : '' }}>
                                    {{ $stage->name }}
                                    @if($stage->isClosedStage()) (Closes Lead) @endif
                                </option>
                                @endif
                            @endforeach
                        </select>
                        @error('stage_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-1">
                        <label class="form-label fw-medium">Note / Reason <span class="text-danger">*</span></label>
                        <textarea name="note" rows="3"
                                  class="form-control @error('note') is-invalid @enderror"
                                  placeholder="Describe what happened or why the stage is changing…"
                                  required maxlength="1000">{{ old('note') }}</textarea>
                        @error('note') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        <div class="text-muted mt-1" style="font-size:0.72rem">Required — recorded in stage history.</div>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update Stage</button>
                </div>
            </div>
        </form>
    </div>
</div>

@if($lead->isOpen())
{{-- Remove from Shortlist Modal --}}
<div class="modal fade" id="removeShortlistModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title fw-semibold">Remove from Shortlist</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="removeShortlistForm" method="POST" action="">
                @csrf @method('DELETE')
                <div class="modal-body pt-2">
                    <p class="text-muted small mb-3">Removing: <strong id="removePropertyTitle"></strong></p>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Reason <span class="text-danger">*</span></label>
                        <select name="reason" class="form-select" required>
                            <option value="">— Select reason —</option>
                            @foreach($removalReasons as $val => $label)
                            <option value="{{ $val }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label fw-medium">Notes (optional)</label>
                        <textarea name="notes" rows="2" class="form-control"
                                  placeholder="Any additional context…"></textarea>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Remove</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

{{-- Log Quote Modal --}}
<div class="modal fade" id="logQuoteModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form method="POST" action="{{ route('admin.leads.quotes.store', $lead) }}">
            @csrf
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-0">
                    <h6 class="modal-title fw-semibold"><i class="bi bi-cash-stack me-2"></i>Log Quote</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                    <div class="mb-3">
                        <label class="form-label fw-medium">Property <span class="text-danger">*</span></label>
                        <select name="property_id"
                                class="form-select @error('property_id') is-invalid @enderror" required>
                            <option value="">— Select a property —</option>
                            @if($shortlisted->isNotEmpty())
                            <optgroup label="Shortlisted Properties">
                                @foreach($shortlisted as $sl)
                                <option value="{{ $sl->property->id }}"
                                        {{ old('property_id') == $sl->property->id ? 'selected' : '' }}>
                                    {{ $sl->property->title }}
                                </option>
                                @endforeach
                            </optgroup>
                            @endif
                        </select>
                        @error('property_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Quoted Price (₹) <span class="text-danger">*</span></label>
                            <input type="number" name="quoted_price" min="1" step="1"
                                   class="form-control @error('quoted_price') is-invalid @enderror"
                                   value="{{ old('quoted_price') }}" required>
                            @error('quoted_price') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Quote Date <span class="text-danger">*</span></label>
                            <input type="date" name="quote_date"
                                   class="form-control @error('quote_date') is-invalid @enderror"
                                   value="{{ old('quote_date', date('Y-m-d')) }}" required>
                            @error('quote_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-medium">Shared By <span class="text-danger">*</span></label>
                            <input type="text" name="shared_by" maxlength="255"
                                   class="form-control @error('shared_by') is-invalid @enderror"
                                   value="{{ old('shared_by') }}"
                                   placeholder="Agent name or channel" required>
                            @error('shared_by') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-medium">Notes (optional)</label>
                            <textarea name="notes" rows="2" maxlength="2000"
                                      class="form-control @error('notes') is-invalid @enderror"
                                      placeholder="Any additional context…">{{ old('notes') }}</textarea>
                            @error('notes') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-check-lg me-1"></i>Log Quote
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

@if(! $agreement)
{{-- Record Deal Modal --}}
<div class="modal fade" id="recordDealModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form method="POST" action="{{ route('admin.leads.agreement.store', $lead) }}"
              enctype="multipart/form-data" id="recordDealForm">
            @csrf
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-0">
                    <h6 class="modal-title fw-semibold"><i class="bi bi-file-earmark-check me-2"></i>Record Final Deal</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Property <span class="text-danger">*</span></label>
                            <select name="property_id"
                                    class="form-select @error('property_id') is-invalid @enderror" required>
                                <option value="">— Select a property —</option>
                                @if($shortlisted->isNotEmpty())
                                <optgroup label="Shortlisted Properties">
                                    @foreach($shortlisted as $sl)
                                    <option value="{{ $sl->property->id }}"
                                            {{ old('property_id') == $sl->property->id ? 'selected' : '' }}>
                                        {{ $sl->property->title }}
                                    </option>
                                    @endforeach
                                </optgroup>
                                @endif
                            </select>
                            @error('property_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Deal Type <span class="text-danger">*</span></label>
                            <select name="deal_type" id="dealTypeSelect"
                                    class="form-select @error('deal_type') is-invalid @enderror" required>
                                <option value="sale" {{ (old('deal_type', $defaultDealType) === 'sale') ? 'selected' : '' }}>Sale</option>
                                <option value="rental" {{ (old('deal_type', $defaultDealType) === 'rental') ? 'selected' : '' }}>Rental</option>
                            </select>
                            @error('deal_type') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Client Name <span class="text-danger">*</span></label>
                            <input type="text" name="client_name" maxlength="255"
                                   class="form-control @error('client_name') is-invalid @enderror"
                                   value="{{ old('client_name', optional($client)->name) }}" required>
                            @error('client_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Owner Name <span class="text-danger">*</span></label>
                            <input type="text" name="owner_name" maxlength="255"
                                   class="form-control @error('owner_name') is-invalid @enderror"
                                   value="{{ old('owner_name') }}" required>
                            @error('owner_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Agreed Price (₹) <span class="text-danger">*</span></label>
                            <input type="number" name="agreed_price" min="1" step="1"
                                   class="form-control @error('agreed_price') is-invalid @enderror"
                                   value="{{ old('agreed_price') }}" required>
                            @error('agreed_price') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Deal Date <span class="text-danger">*</span></label>
                            <input type="date" name="deal_date"
                                   class="form-control @error('deal_date') is-invalid @enderror"
                                   value="{{ old('deal_date', date('Y-m-d')) }}" required>
                            @error('deal_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-medium">Notes (optional)</label>
                            <textarea name="notes" rows="2" maxlength="2000"
                                      class="form-control @error('notes') is-invalid @enderror"
                                      placeholder="Any additional context…">{{ old('notes') }}</textarea>
                            @error('notes') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    {{-- Rental-only fields --}}
                    <div id="rentalFields" class="{{ old('deal_type', $defaultDealType) === 'rental' ? '' : 'd-none' }} mt-3 pt-3 border-top">
                        <h6 class="fw-semibold text-info mb-3"><i class="bi bi-house-door me-2"></i>Rental Details</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Agreement Start Date <span class="text-danger">*</span></label>
                                <input type="date" name="agreement_start_date"
                                       class="form-control @error('agreement_start_date') is-invalid @enderror"
                                       value="{{ old('agreement_start_date') }}">
                                @error('agreement_start_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Agreement End Date <span class="text-danger">*</span></label>
                                <input type="date" name="agreement_end_date"
                                       class="form-control @error('agreement_end_date') is-invalid @enderror"
                                       value="{{ old('agreement_end_date') }}">
                                @error('agreement_end_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Monthly Rent (₹) <span class="text-danger">*</span></label>
                                <input type="number" name="monthly_rent" min="1" step="1"
                                       class="form-control @error('monthly_rent') is-invalid @enderror"
                                       value="{{ old('monthly_rent') }}">
                                @error('monthly_rent') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Expiry Reminder (days before) <span class="text-danger">*</span></label>
                                <input type="number" name="expiry_reminder_days" min="1" max="365"
                                       class="form-control @error('expiry_reminder_days') is-invalid @enderror"
                                       value="{{ old('expiry_reminder_days', $defaultReminderDays) }}">
                                @error('expiry_reminder_days') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-medium">Rent Escalation Clause (optional)</label>
                                <textarea name="rent_escalation_clause" rows="2" maxlength="500"
                                          class="form-control @error('rent_escalation_clause') is-invalid @enderror"
                                          placeholder="e.g. 5% annual increase…">{{ old('rent_escalation_clause') }}</textarea>
                                @error('rent_escalation_clause') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-medium">Agreement Document (PDF, max 20 MB) <span class="text-danger">*</span></label>
                                <input type="file" name="agreement_document" accept=".pdf"
                                       class="form-control @error('agreement_document') is-invalid @enderror">
                                @error('agreement_document') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-check-lg me-1"></i>Record Deal
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endif

@endsection

@push('scripts')
<script>
(function () {
    @if($errors->any())
        var modal = new bootstrap.Modal(document.getElementById('changeStageModal'));
        modal.show();
    @endif

    // Re-open Log Visit modal on validation error
    @if($errors->any() && old('visit_date'))
        var logVisitModal = new bootstrap.Modal(document.getElementById('logVisitModal'));
        logVisitModal.show();
    @endif

    // Re-open Reminder modal on validation error
    @if($errors->any() && old('message') && !old('visit_date') && !old('note'))
        var reminderModal = new bootstrap.Modal(document.getElementById('createReminderModal'));
        reminderModal.show();
    @endif

    // Re-open Log Quote modal on validation error
    @if($errors->any() && old('quoted_price'))
        var logQuoteModal = new bootstrap.Modal(document.getElementById('logQuoteModal'));
        logQuoteModal.show();
    @endif

    // Re-open Record Deal modal on validation error
    @if($errors->any() && old('agreed_price'))
        var recordDealModalEl = document.getElementById('recordDealModal');
        if (recordDealModalEl) {
            var recordDealModal = new bootstrap.Modal(recordDealModalEl);
            recordDealModal.show();
        }
    @endif

    // Deal type toggle — show/hide rental fields
    var dealTypeSelect = document.getElementById('dealTypeSelect');
    var rentalFields   = document.getElementById('rentalFields');

    if (dealTypeSelect && rentalFields) {
        dealTypeSelect.addEventListener('change', function () {
            if (this.value === 'rental') {
                rentalFields.classList.remove('d-none');
            } else {
                rentalFields.classList.add('d-none');
            }
        });
    }

    // Log Visit — property search
    var visitSearchUrl = '{{ route("admin.leads.shortlist.search", $lead) }}';
    var visitSearchTimer = null;
    var visitSearchInput = document.getElementById('visit-property-search');

    if (visitSearchInput) {
        visitSearchInput.addEventListener('input', function () {
            clearTimeout(visitSearchTimer);
            var q = this.value.trim();
            var resultsEl = document.getElementById('visit-search-results');

            if (q.length < 2) {
                resultsEl.innerHTML = '';
                return;
            }

            visitSearchTimer = setTimeout(function () {
                fetch('{{ route("admin.ajax.properties.search") }}?q=' + encodeURIComponent(q), {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var results = data.results || [];
                    var html = '';
                    results.forEach(function(p) {
                        html += '<button type="button" class="list-group-item list-group-item-action py-1 small"'
                            + ' onclick="selectVisitProperty(' + p.id + ', \'' + p.title.replace(/'/g, "\\'") + '\')">'
                            + p.title + (p.city ? ' <span class=\'text-muted\'>· ' + p.city + '</span>' : '')
                            + '</button>';
                    });
                    resultsEl.innerHTML = html || '<div class="list-group-item text-muted py-1">No results found.</div>';
                })
                .catch(function() { resultsEl.innerHTML = ''; });
            }, 300);
        });
    }

    window.selectVisitProperty = function(id, title) {
        var select = document.getElementById('visit-property-select');
        // Check if option already exists
        var existing = select.querySelector('option[value="' + id + '"]');
        if (!existing) {
            var opt = document.createElement('option');
            opt.value = id;
            opt.textContent = title;
            select.appendChild(opt);
        }
        select.value = id;
        document.getElementById('visit-property-search').value = '';
        document.getElementById('visit-search-results').innerHTML = '';
    };

    // Remove shortlist modal: wire property_id into form action
    var removeModal = document.getElementById('removeShortlistModal');
    if (removeModal) {
        removeModal.addEventListener('show.bs.modal', function (e) {
            var btn = e.relatedTarget;
            var propertyId = btn.dataset.propertyId;
            var title = btn.dataset.propertyTitle;
            document.getElementById('removePropertyTitle').textContent = title;
            document.getElementById('removeShortlistForm').action =
                '{{ route("admin.leads.shortlist.destroy", [$lead, "__PROP__"]) }}'.replace('__PROP__', propertyId);
        });
    }

    // Property search
    var searchUrl = '{{ route("admin.leads.shortlist.search", $lead) }}';
    var addUrl    = '{{ route("admin.leads.shortlist.store", $lead) }}';
    var csrfToken = '{{ csrf_token() }}';

    var searchTimer = null;
    var fields = ['sl-search-q','sl-search-type','sl-search-purpose','sl-search-min','sl-search-max'];

    function doSearch() {
        var params = new URLSearchParams();
        params.set('q',               document.getElementById('sl-search-q').value);
        params.set('type',            document.getElementById('sl-search-type').value);
        params.set('listing_purpose', document.getElementById('sl-search-purpose').value);
        params.set('min_price',       document.getElementById('sl-search-min').value);
        params.set('max_price',       document.getElementById('sl-search-max').value);

        var q = document.getElementById('sl-search-q').value;
        if (q.length < 2 && !params.get('type') && !params.get('listing_purpose')) {
            document.getElementById('sl-results').innerHTML = '';
            document.getElementById('sl-empty').classList.add('d-none');
            return;
        }

        document.getElementById('sl-loading').classList.remove('d-none');
        document.getElementById('sl-empty').classList.add('d-none');
        document.getElementById('sl-results').innerHTML = '';

        fetch(searchUrl + '?' + params.toString(), {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            document.getElementById('sl-loading').classList.add('d-none');
            var results = data.results || [];
            if (results.length === 0) {
                document.getElementById('sl-empty').classList.remove('d-none');
                return;
            }
            var html = '';
            results.forEach(function(p) {
                html += '<div class="list-group-item list-group-item-action property-search-result d-flex align-items-center gap-3 py-2">';
                if (p.cover_image) {
                    html += '<img src="' + p.cover_image + '" style="width:48px;height:36px;object-fit:cover;border-radius:4px" alt="">';
                } else {
                    html += '<div style="width:48px;height:36px;background:#f0f0f0;border-radius:4px;display:flex;align-items:center;justify-content:center"><i class="bi bi-building text-secondary"></i></div>';
                }
                html += '<div class="flex-grow-1 min-width-0">';
                html += '<div class="fw-medium text-truncate small">' + p.title + '</div>';
                html += '<div class="text-muted" style="font-size:0.7rem">' + (p.type || '') + (p.listing_purpose ? ' · ' + p.listing_purpose : '') + (p.city ? ' · ' + p.city : '') + '</div>';
                html += '</div>';
                html += '<div class="text-end flex-shrink-0">';
                html += '<div class="small fw-medium">' + (p.price || '') + '</div>';
                html += '<button type="button" class="btn btn-sm btn-primary py-0 px-2 mt-1" onclick="addToShortlist(' + p.id + ', this)">';
                html += '<i class="bi bi-bookmark-plus me-1"></i>Shortlist</button>';
                html += '</div></div>';
            });
            document.getElementById('sl-results').innerHTML = html;
        })
        .catch(function() {
            document.getElementById('sl-loading').classList.add('d-none');
        });
    }

    fields.forEach(function(id) {
        var el = document.getElementById(id);
        if (!el) return;
        el.addEventListener('input', function() {
            clearTimeout(searchTimer);
            searchTimer = setTimeout(doSearch, 300);
        });
        el.addEventListener('change', function() {
            clearTimeout(searchTimer);
            doSearch();
        });
    });

    window.addToShortlist = function(propertyId, btn) {
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';

        fetch(addUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({ property_id: propertyId })
        })
        .then(function(r) {
            return r.json().then(function(data) {
                if (data.status) {
                    window.location.reload();
                } else {
                    btn.disabled = false;
                    btn.innerHTML = '<i class="bi bi-bookmark-plus me-1"></i>Shortlist';
                    Swal.fire({ icon: 'error', title: 'Error', text: data.message || 'Could not shortlist property.' });
                }
            });
        })
        .catch(function() {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-bookmark-plus me-1"></i>Shortlist';
        });
    };
}());
</script>
@endpush