{{-- Reuses .lm-* classes from create.blade.php style block — included via shared layout --}}
<style>
.lm-page { padding: 20px; max-width: 1200px; margin: 0 auto; }
.lm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.lm-header-left { display: flex; align-items: center; gap: 12px; }
.lm-header-icon { width: 48px; height: 48px; background: #5a67d8; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.lm-header-icon svg { width: 24px; height: 24px; color: #fff; }
.lm-header h1 { margin: 0; font-size: 28px; font-weight: 700; color: var(--text-primary, #1f2937); }
.lm-header p { margin: 4px 0 0; font-size: 14px; color: var(--text-muted, #6b7280); }
.lm-back-btn { background: var(--body-bg, #f7fafc); color: var(--text-secondary, #4b5563); padding: 10px 20px; border-radius: var(--radius-md, 8px); text-decoration: none; font-weight: 600; font-size: 14px; border: 1px solid var(--card-border, #e5e7eb); }
.lm-card { background: var(--card-bg, #fff); border-radius: var(--radius-lg, 12px); border: 1px solid var(--card-border, #e5e7eb); box-shadow: 0 1px 3px rgba(0,0,0,0.04); overflow: hidden; }
.lm-section-header { background: #5a67d8; padding: 16px 24px; }
.lm-section-header h2 { margin: 0; color: #fff; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.lm-section-header h2 svg { width: 20px; height: 20px; }
.lm-section-body { padding: 24px; }
.lm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 24px; }
.lm-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
.lm-full { grid-column: 1 / -1; }
.lm-field-mb { margin-bottom: 20px; }
.lm-label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-primary, #1f2937); font-size: var(--font-sm, 14px); }
.lm-label svg { width: 16px; height: 16px; display: inline; vertical-align: middle; margin-right: 4px; }
.lm-required { color: #e53e3e; }
.lm-error { color: #e53e3e; font-size: 12px; margin-top: 4px; display: block; }
.lm-hint { margin: 6px 0 0; font-size: 12px; color: var(--text-muted, #6b7280); }
.lm-input, .lm-select, .lm-textarea { width: 100%; padding: 10px 12px; box-sizing: border-box; border: 1px solid var(--input-border, #d1d5db); border-radius: var(--radius-md, 8px); font-size: var(--font-sm, 14px); background: var(--input-bg, #fff); color: var(--input-text, #1f2937); transition: border-color 0.2s, box-shadow 0.2s; }
.lm-input:focus, .lm-select:focus, .lm-textarea:focus { outline: none; border-color: #5a67d8; box-shadow: 0 0 0 3px rgba(90,103,216,0.15); }
.lm-textarea { resize: vertical; }
.lm-input-group { display: flex; gap: 8px; }
.lm-input-group .lm-select { flex: 1; }
.lm-input-prefix { position: relative; }
.lm-input-prefix span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted, #6b7280); font-weight: 600; }
.lm-input-prefix .lm-input { padding-left: 32px; }
.lm-add-btn { background: #5a67d8; color: #fff; padding: 10px 14px; border: none; border-radius: var(--radius-md, 8px); cursor: pointer; font-weight: 600; flex-shrink: 0; }
.lm-add-btn:hover { background: #4c56c0; }
.lm-checkbox-area { background: var(--body-bg, #f7fafc); border: 1px solid var(--card-border, #e5e7eb); border-radius: var(--radius-md, 8px); padding: 16px; margin-bottom: 24px; }
.lm-checkbox-area label { display: flex; align-items: center; cursor: pointer; }
.lm-checkbox-area input[type="checkbox"] { margin-right: 12px; width: 20px; height: 20px; accent-color: #5a67d8; }
.lm-checkbox-area span { font-weight: 600; color: var(--text-primary, #1f2937); font-size: 14px; }
.lm-checkbox-area p { margin: 4px 0 0; font-size: 12px; color: var(--text-muted, #6b7280); }
.lm-footer { background: var(--body-bg, #f7fafc); padding: 20px 24px; border-top: 1px solid var(--card-border, #e5e7eb); display: flex; gap: 12px; justify-content: flex-end; }
.lm-cancel-btn { background: var(--card-bg, #fff); color: var(--text-secondary, #4b5563); padding: 12px 24px; border-radius: var(--radius-md, 8px); text-decoration: none; font-weight: 600; border: 1px solid var(--card-border, #e5e7eb); display: inline-block; }
.lm-submit-btn { background: #5a67d8; color: #fff; padding: 12px 32px; border: none; border-radius: var(--radius-md, 8px); cursor: pointer; font-weight: 600; font-size: 14px; }
.lm-submit-btn:hover { background: #4c56c0; }
.lm-submit-btn svg { width: 16px; height: 16px; display: inline; vertical-align: middle; margin-right: 6px; }
.lm-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.lm-modal { background: var(--card-bg, #fff); border: 1px solid var(--card-border, #e5e7eb); border-radius: var(--radius-lg, 12px); width: 450px; max-width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.lm-modal-head { background: #5a67d8; padding: 20px 24px; border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0; }
.lm-modal-head h3 { margin: 0; color: #fff; font-size: 20px; font-weight: 700; }
.lm-modal-body { padding: 24px; }
.lm-modal-actions { display: flex; gap: 10px; }
.lm-modal-cancel { flex: 1; background: var(--body-bg, #f7fafc); color: var(--text-secondary, #4b5563); padding: 12px; border: 1px solid var(--card-border, #e5e7eb); border-radius: var(--radius-md, 8px); cursor: pointer; font-weight: 600; }
.lm-modal-save { flex: 1; background: #5a67d8; color: #fff; padding: 12px; border: none; border-radius: var(--radius-md, 8px); cursor: pointer; font-weight: 600; }
.lm-modal-save:hover { background: #4c56c0; }
.lm-cs-wrap { position: relative; }
.lm-cs-wrap > select { display: none; }
.lm-cs-btn { width: 100%; padding: 10px 12px; box-sizing: border-box; border: 1px solid var(--input-border, #d1d5db); border-radius: var(--radius-md, 8px); font-size: var(--font-sm, 14px); background: var(--input-bg, #fff); color: var(--input-text, #1f2937); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.lm-cs-btn:hover { border-color: #5a67d8; }
.lm-cs-btn.open { border-color: #5a67d8; box-shadow: 0 0 0 3px rgba(90,103,216,0.15); border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0; }
.lm-cs-btn .arrow { font-size: 10px; color: var(--text-muted, #6b7280); transition: transform 0.2s; }
.lm-cs-btn.open .arrow { transform: rotate(180deg); }
.lm-cs-ph { color: var(--text-muted, #6b7280); }
.lm-cs-dd { position: absolute; top: 100%; left: 0; right: 0; background: var(--card-bg, #fff); border: 1px solid #5a67d8; border-top: none; border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 999; display: none; }
.lm-cs-dd.show { display: block; }
.lm-cs-search { width: 100%; padding: 10px 12px; border: none; border-bottom: 1px solid var(--card-border, #e5e7eb); font-size: var(--font-sm, 14px); background: var(--body-bg, #f7fafc); color: var(--input-text, #1f2937); outline: none; box-sizing: border-box; }
.lm-cs-list { max-height: 200px; overflow-y: auto; }
.lm-cs-opt { padding: 9px 12px; cursor: pointer; font-size: var(--font-sm, 14px); color: var(--text-primary, #1f2937); }
.lm-cs-opt:hover { background: rgba(90,103,216,0.12); }
.lm-cs-opt.sel { background: #5a67d8; color: #fff; }
.lm-cs-opt.hide { display: none; }
.lm-cs-empty { padding: 12px; text-align: center; color: var(--text-muted, #6b7280); font-size: 13px; display: none; }
@media (max-width: 768px) { .lm-grid-3 { grid-template-columns: 1fr; } .lm-grid-2 { grid-template-columns: 1fr; } }
</style>

<div class="lm-page">
    <div class="lm-header">
        <div class="lm-header-left">
            <div class="lm-header-icon">
                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
            </div>
            <div>
                <h1>Edit Lead</h1>
                <p>Update lead information</p>
            </div>
        </div>
        <a href="{{ route('admin.leadmanagement.index') }}" class="lm-back-btn">← Back to Leads</a>
    </div>

    <form id="leadEditForm" method="POST" action="{{ route('admin.leadmanagement.update', $lead->id) }}">
        @csrf @method('PUT')
        <div class="lm-card">

            {{-- Section 1: Lead Information --}}
            <div class="lm-section-header"><h2><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg> Lead Information</h2></div>
            <div class="lm-section-body">
                <div class="lm-grid-3">
                    <div><label class="lm-label"><span class="lm-required">*</span> Status</label><div class="lm-input-group"><select name="status" class="lm-select" {{ !($canEditStatus ?? true) ? 'disabled' : '' }}><option value="">Select Status</option>@foreach($statuses as $status)<option value="{{ $status->id }}" {{ old('status', $lead->status) == $status->id ? 'selected' : '' }}>{{ $status->name }}</option>@endforeach</select>@if(!($canEditStatus ?? true))<input type="hidden" name="status" value="{{ old('status', $lead->status) }}">@endif @if($canEditStatus ?? true)<button type="button" onclick="openStatusModal()" class="lm-add-btn">+</button>@endif</div>@error('status')<span class="lm-error">{{ $message }}</span>@enderror</div>
                    <div><label class="lm-label"><span class="lm-required">*</span> Source</label><div class="lm-input-group"><select name="source" class="lm-select"><option value="">Select Source</option>@foreach($sources as $source)<option value="{{ $source->id }}" {{ old('source', $lead->source) == $source->id ? 'selected' : '' }}>{{ $source->name }}</option>@endforeach</select><button type="button" onclick="openSourceModal()" class="lm-add-btn">+</button></div>@error('source')<span class="lm-error">{{ $message }}</span>@enderror</div>
                    <div><label class="lm-label">Assigned To</label><select name="assigned" class="lm-select">@foreach($admins as $admin)<option value="{{ $admin->id }}" {{ old('assigned', $lead->assigned) == $admin->id ? 'selected' : '' }}>{{ $admin->name }}</option>@endforeach</select></div>
                </div>
            </div>

            {{-- Section 2: Contact --}}
            <div class="lm-section-header"><h2><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg> Contact Information</h2></div>
            <div class="lm-section-body">
                <div class="lm-grid-2">
                    <div><label class="lm-label"><span class="lm-required">*</span> Full Name</label><input type="text" name="name" value="{{ old('name', $lead->name) }}" required placeholder="Enter full name" class="lm-input">@error('name')<span class="lm-error">{{ $message }}</span>@enderror</div>
                    <div><label class="lm-label">Position/Title</label><input type="text" name="title" value="{{ old('title', $lead->title) }}" placeholder="e.g., CEO, Manager" class="lm-input"></div>
                    <div><label class="lm-label">Email Address</label><input type="email" name="email" value="{{ old('email', $lead->email) }}" placeholder="name@company.com" class="lm-input">@error('email')<span class="lm-error">{{ $message }}</span>@enderror</div>
                    <div><label class="lm-label">Phone Number</label><input type="text" name="phonenumber" value="{{ old('phonenumber', $lead->phonenumber) }}" placeholder="+91 1234567890" class="lm-input"></div>
                    <div><label class="lm-label">Company Name</label><input type="text" name="company" value="{{ old('company', $lead->company) }}" placeholder="Company name" class="lm-input"></div>
                    <div><label class="lm-label">Website</label><input type="url" name="website" value="{{ old('website', $lead->website) }}" placeholder="https://company.com" class="lm-input"></div>
                </div>
            </div>

            {{-- Section 3: Address --}}
            <div class="lm-section-header"><h2><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Address & Location</h2></div>
            <div class="lm-section-body">
                <div class="lm-grid-2">
                    <div class="lm-full"><label class="lm-label">Street Address</label><textarea name="address" rows="3" placeholder="Enter full address" class="lm-textarea">{{ old('address', $lead->address) }}</textarea></div>
                    <div><label class="lm-label">City</label><input type="text" name="city" value="{{ old('city', $lead->city) }}" placeholder="City" class="lm-input"></div>
                    <div><label class="lm-label">State</label><input type="text" name="state" value="{{ old('state', $lead->state) }}" placeholder="State" class="lm-input"></div>
                    <div><label class="lm-label">Country</label><select name="country" class="lm-select lm-country-select"><option value="">Select Country</option>@foreach($countries as $country)<option value="{{ $country->short_name }}" {{ old('country', $lead->country) == $country->short_name ? 'selected' : '' }}>{{ $country->short_name }}</option>@endforeach</select></div>
                    <div><label class="lm-label">Zip/Postal Code</label><input type="text" name="zip" value="{{ old('zip', $lead->zip) }}" placeholder="560001" class="lm-input"></div>
                </div>
            </div>

            {{-- Section 4: Additional --}}
            <div class="lm-section-header"><h2><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg> Additional Details</h2></div>
            <div class="lm-section-body">
                <div class="lm-field-mb"><label class="lm-label">Lead Value (₹)</label><div class="lm-input-prefix"><span>₹</span><input type="number" step="0.01" min="0" name="lead_value" value="{{ old('lead_value', $lead->lead_value > 0 ? $lead->lead_value : '') }}" placeholder="0.00" class="lm-input" onfocus="if(this.value==='0'||this.value==='0.00')this.value=''" onblur="if(this.value==='')this.value=''"></div></div>
                <div class="lm-field-mb"><label class="lm-label">Description / Notes</label><textarea name="description" rows="4" placeholder="Add any additional notes..." class="lm-textarea">{{ old('description', $lead->description) }}</textarea></div>

                {{-- Location --}}
                <div class="lm-grid-3" style="margin-bottom:20px;">
                    <div><label class="lm-label">Location Name</label><input type="text" name="location_name" value="{{ old('location_name', $lead->location_name) }}" placeholder="e.g., Head Office" class="lm-input"></div>
                    <div><label class="lm-label">Location Title</label><input type="text" name="location_title" value="{{ old('location_title', $lead->location_title) }}" placeholder="e.g., Main Branch" class="lm-input"></div>
                    <div><label class="lm-label">Location URL</label><input type="url" name="location_url" value="{{ old('location_url', $lead->location_url) }}" placeholder="https://maps.google.com/..." class="lm-input"></div>
                </div>

                <div class="lm-checkbox-area"><label><input type="checkbox" name="is_public" value="1" {{ old('is_public', $lead->is_public) ? 'checked' : '' }}><div><span>Visible to All Staff</span><p>When enabled, all team members can view and edit this lead</p></div></label></div>
            </div>

            <div class="lm-footer">
                <a href="{{ route('admin.leadmanagement.index') }}" class="lm-cancel-btn">Cancel</a>
                <button type="submit" class="lm-submit-btn"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg> Update Lead</button>
            </div>
        </div>
    </form>
</div>

{{-- Status Modal --}}
<div id="statusModal" class="lm-modal-overlay"><div class="lm-modal"><div class="lm-modal-head"><h3>Add New Status</h3></div><form id="statusForm" class="lm-modal-body"><div class="lm-field-mb"><label class="lm-label">Status Name <span class="lm-required">*</span></label><input type="text" id="statusName" required placeholder="e.g., Hot Lead" class="lm-input"></div><div class="lm-field-mb"><label class="lm-label">Color</label><input type="color" id="statusColor" value="#3498db" class="lm-input" style="height:48px;padding:4px;cursor:pointer;"></div><div class="lm-modal-actions"><button type="button" onclick="closeStatusModal()" class="lm-modal-cancel">Cancel</button><button type="submit" class="lm-modal-save">Save Status</button></div></form></div></div>

{{-- Source Modal --}}
<div id="sourceModal" class="lm-modal-overlay"><div class="lm-modal"><div class="lm-modal-head" style="background:#38a169;"><h3>Add New Source</h3></div><form id="sourceForm" class="lm-modal-body"><div class="lm-field-mb"><label class="lm-label">Source Name <span class="lm-required">*</span></label><input type="text" id="sourceName" required placeholder="e.g., Website, Referral" class="lm-input"></div><div class="lm-modal-actions"><button type="button" onclick="closeSourceModal()" class="lm-modal-cancel">Cancel</button><button type="submit" class="lm-modal-save" style="background:#38a169;">Save Source</button></div></form></div></div>

<script>
function openStatusModal() { document.getElementById('statusModal').style.display = 'flex'; }
function closeStatusModal() { document.getElementById('statusModal').style.display = 'none'; document.getElementById('statusForm').reset(); }
function openSourceModal() { document.getElementById('sourceModal').style.display = 'flex'; }
function closeSourceModal() { document.getElementById('sourceModal').style.display = 'none'; document.getElementById('sourceForm').reset(); }

document.getElementById('statusForm').addEventListener('submit', function(e) {
    e.preventDefault();
    fetch('{{ route('admin.leadmanagement.status.quick-create') }}', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content }, body: JSON.stringify({ name: document.getElementById('statusName').value, color: document.getElementById('statusColor').value }) })
    .then(r => r.json()).then(d => { if (d.success) { const s = document.querySelector('select[name="status"]'); s.add(new Option(d.data.name, d.data.id, true, true)); alert(d.message || 'Status created!'); closeStatusModal(); } else { alert(d.message); } }).catch(() => alert('Failed'));
});

document.getElementById('sourceForm').addEventListener('submit', function(e) {
    e.preventDefault();
    fetch('{{ route('admin.leadmanagement.source.quick-create') }}', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content }, body: JSON.stringify({ name: document.getElementById('sourceName').value }) })
    .then(r => r.json()).then(d => { if (d.success) { const s = document.querySelector('select[name="source"]'); s.add(new Option(d.data.name, d.data.id, true, true)); alert(d.message || 'Source created!'); closeSourceModal(); } else { alert(d.message); } }).catch(() => alert('Failed'));
});

['statusModal','sourceModal'].forEach(id => { document.getElementById(id).addEventListener('click', function(e) { if (e.target === this) { id === 'statusModal' ? closeStatusModal() : closeSourceModal(); } }); });

// Country Select Enhancer
document.querySelectorAll('.lm-country-select').forEach(function(sel) {
    var wrap = document.createElement('div'); wrap.className = 'lm-cs-wrap';
    sel.parentNode.insertBefore(wrap, sel); wrap.appendChild(sel);
    var btn = document.createElement('div'); btn.className = 'lm-cs-btn';
    var lbl = document.createElement('span');
    var selOpt = sel.options[sel.selectedIndex];
    if (sel.value) { lbl.textContent = selOpt ? selOpt.text : sel.value; } else { lbl.textContent = 'Select Country'; lbl.className = 'lm-cs-ph'; }
    var arrow = document.createElement('span'); arrow.className = 'arrow'; arrow.textContent = '▼';
    btn.appendChild(lbl); btn.appendChild(arrow); wrap.appendChild(btn);
    var dd = document.createElement('div'); dd.className = 'lm-cs-dd';
    var si = document.createElement('input'); si.type = 'text'; si.className = 'lm-cs-search'; si.placeholder = '🔍 Type to search...';
    var list = document.createElement('div'); list.className = 'lm-cs-list';
    var emp = document.createElement('div'); emp.className = 'lm-cs-empty'; emp.textContent = 'No results';
    dd.appendChild(si); dd.appendChild(list); dd.appendChild(emp); wrap.appendChild(dd);
    Array.from(sel.options).forEach(function(o) { if (!o.value) return; var d = document.createElement('div'); d.className = 'lm-cs-opt'; d.textContent = o.text; d.dataset.v = o.value; if (o.selected) d.classList.add('sel'); d.addEventListener('click', function() { sel.value = o.value; lbl.textContent = o.text; lbl.className = ''; list.querySelectorAll('.lm-cs-opt').forEach(function(x) { x.classList.remove('sel'); }); d.classList.add('sel'); dd.classList.remove('show'); btn.classList.remove('open'); }); list.appendChild(d); });
    function open() { dd.classList.add('show'); btn.classList.add('open'); si.value = ''; filter(''); si.focus(); }
    function close() { dd.classList.remove('show'); btn.classList.remove('open'); }
    function filter(q) { var n = 0; list.querySelectorAll('.lm-cs-opt').forEach(function(o) { var m = o.textContent.toLowerCase().indexOf(q.toLowerCase()) !== -1; o.classList.toggle('hide', !m); if (m) n++; }); emp.style.display = n === 0 ? 'block' : 'none'; }
    btn.addEventListener('click', function() { dd.classList.contains('show') ? close() : open(); });
    si.addEventListener('input', function() { filter(si.value); });
    si.addEventListener('keydown', function(e) { if (e.key === 'Escape') close(); });
    document.addEventListener('click', function(e) { if (!wrap.contains(e.target)) close(); });
});

/* ── Main form — intercept submit and send as JSON (PUT) ── */
document.getElementById('leadEditForm').addEventListener('submit', async function(e) {
    e.preventDefault();

    const form   = e.target;
    const btn    = form.querySelector('button[type="submit"]');
    const csrf   = document.querySelector('meta[name="csrf-token"]').content;
    const url    = '{{ route('admin.leadmanagement.update', $lead->id) }}';

    const fd      = new FormData(form);
    const payload = {};
    fd.forEach((val, key) => {
        if (key !== '_token' && key !== '_method') payload[key] = val;
    });
    payload.is_public = form.querySelector('input[name="is_public"]')?.checked ? 1 : 0;

    btn.disabled = true;
    const origHtml = btn.innerHTML;
    btn.innerHTML  = 'Updating...';

    form.querySelectorAll('.lm-error.js-error').forEach(el => el.remove());

    try {
        const res  = await fetch(url, {
            method:  'PUT',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
            body:    JSON.stringify(payload),
        });
        const data = await res.json();

        if (data.success) {
            window.location.href = data.data?.redirect || '{{ route('admin.leadmanagement.index') }}';
            return;
        }

        if (data.errors) {
            Object.entries(data.errors).forEach(([field, messages]) => {
                const input = form.querySelector(`[name="${field}"]`);
                if (input) {
                    const err = document.createElement('span');
                    err.className = 'lm-error js-error';
                    err.textContent = messages[0];
                    input.closest('.lm-field, .lm-field-mb, .lm-input-group, .lm-input-prefix')
                        ?.appendChild(err)
                        ?? input.insertAdjacentElement('afterend', err);
                }
            });
        } else {
            alert(data.message || 'Failed to update lead. Please try again.');
        }
    } catch (err) {
        alert('Network error. Please try again.');
    }

    btn.disabled  = false;
    btn.innerHTML = origHtml;
});
</script>

@include('admin.audit.components.timeline', [
    'model' => $lead,
    'title' => 'Leads Activity'
])