{{-- resources/views/agent/leads/partials/purchased.blade.php --}}
@php
    use Illuminate\Support\Facades\Route;

    // Safe fallback if the controller didn't pass $data
$purchasedData = is_array($data ?? null) ? $data : [];

// Tabs we support
$types = [
    'life' => 'Life',
    'mortgage' => 'Mortgage Protection',
    'health' => 'Health',
];

// ── Archive normalization ────────────────────────────────────────────────
// These are safe defaults; controller can pass $fromArchive and $activeGroup
$fromArchive = isset($fromArchive) ? (bool) $fromArchive : false;

// Normalize any requested group label
$__ag = isset($activeGroup) ? strtolower(trim((string) $activeGroup)) : null;
if ($__ag === 'mortgage protection' || $__ag === 'mortgage_protection' || $__ag === 'mp') {
    $__ag = 'mortgage';
}
$activeGroup = in_array($__ag, ['life', 'mortgage', 'health'], true) ? $__ag : 'life';

// If at least one dataset exists, start there; else default to Life.
// If $activeGroup is provided and valid, force that as the initial tab.
$available = array_values(array_filter(array_keys($types), fn($k) => array_key_exists($k, $purchasedData)));
$firstActive = $activeGroup && isset($types[$activeGroup]) ? $activeGroup : $available[0] ?? 'life';

// Unique IDs so these don't collide with the outer tabs (closures for PHP 7.3+ compat)
    $paneId = function ($key) {
        return "purchased-{$key}";
    };
    $tabId = function ($key) {
        return "purchased-{$key}-tab";
    };

    // Toolbar links
    $purchaseUrl = Route::has('agent.leads.purchase') ? route('agent.leads.purchase') : url('/agent/leads/purchase');

    // Export
    $exportRouteName = Route::has('agent.leads.purchased.export')
        ? 'agent.leads.purchased.export'
        : (Route::has('agent.purchased.export')
            ? 'agent.purchased.export'
            : null);

    $exportHref = $exportRouteName ? route($exportRouteName, ['type' => $firstActive]) : null;
    $exportLabel = 'Export ' . ($types[$firstActive] ?? ucfirst($firstActive)) . ' (CSV)';

    $exportUrls = [];
    if ($exportRouteName) {
        foreach (array_keys($types) as $k) {
            $exportUrls[$k] = route($exportRouteName, ['type' => $k]);
        }
    }

    // Bulk Update (Save) – outer form action
    $bulkUpdateAction = Route::has('agent.purchased.bulkUpdate')
        ? route('agent.purchased.bulkUpdate')
        : url('/agent/leads/purchased/bulk-update');

    // Row-level Convert endpoint (per-row)
    $rowConvertBase = function ($key, $id) {
        return Route::has('agent.leads.purchased.convert')
            ? route('agent.leads.purchased.convert', ['type' => $key, 'lead' => $id])
            : url("/agent/leads/purchased/{$key}/{$id}/convert");
    };

    // Per-group Insurance Types (Mortgage Protection removed as selectable type itself)
    $insuranceTypesByGroup = [
        'life' => ['Term Life', 'Whole Life', 'Final Expense', 'Universal Life', 'Other'],
        'mortgage' => ['Term Life', 'Final Expense', 'Universal Life', 'Other'],
        'health' => ['Dental Insurance', 'Medicare', 'ACA', 'Supplemental', 'Other'],
    ];

    // Generic Statuses (shared across all groups)
    $statusOptions = [
        'new' => 'New',
        'contacted' => 'Contacted',
        'follow_up' => 'Follow Up',
        'interested' => 'Interested',
        'not_interested' => 'Not Interested',
        'converted' => 'Converted',
        'archived' => 'Archived',
    ];

    $norm = fn($v) => strtolower(preg_replace('/\s+/', '_', trim((string) $v)));

    // Optional: when opened from an archive, controller can pass the archive file id
    $archiveFileId = $archiveFileId ?? ($archive_file_id ?? null);
@endphp

<input type="hidden" id="csrf_token" value="{{ csrf_token() }}">

<style>
    .table-responsive {
        position: relative;
        z-index: 1;
        overflow-x: auto;
        scrollbar-gutter: stable both-edges;
    }

    table.purchased-table {
        width: max-content;
        min-width: 100%;
        table-layout: auto;
    }

    thead th.sticky-col,
    tbody td.sticky-col {
        position: sticky;
        background: #fff;
        z-index: 2;
    }

    thead th.sticky-col {
        background: #f8f9fa;
        z-index: 3;
    }

    .sticky-col-1 {
        left: 0;
        min-width: 160px;
        box-shadow: 2px 0 0 rgba(0, 0, 0, .05);
    }

    .sticky-col-2 {
        left: 160px;
        min-width: 160px;
        box-shadow: 2px 0 0 rgba(0, 0, 0, .05);
    }

    .pinned-row {
        background: #f6fff6;
    }

    .purchased-nav {
        position: relative;
        z-index: 50;
    }

    .tab-content.no-transition .tab-pane {
        transition: none !important;
    }

    .purchased-nav .nav-link {
        pointer-events: auto;
    }

    .btn-row {
        white-space: nowrap;
    }

    .x-sync-top {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 20;
        height: 18px;
        overflow-x: scroll;
        overflow-y: hidden;
        border-bottom: 1px solid rgba(0, 0, 0, .06);
        margin-bottom: .25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable both-edges;
    }

    .x-sync-top::-webkit-scrollbar {
        height: 16px;
    }

    .x-range {
        position: sticky;
        top: 0;
        z-index: 21;
        background: #fff;
        padding: .1rem 0 .35rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, .06);
        margin-bottom: .25rem;
    }

    .x-range .form-range {
        width: 100%;
        margin: 0;
    }

    #save-flash {
        position: fixed;
        right: 1rem;
        top: 1rem;
        z-index: 1080;
    }
</style>

{{-- Toolbar --}}
<div class="d-flex justify-content-between align-items-center mb-3">
    <div class="d-flex align-items-center">
        {{-- Lead Archive dropdown (only when viewing from an archive and we know the file id) --}}
        @if ($fromArchive && $archiveFileId)
            <div class="btn-group me-2">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    Lead Archive
                </button>
                <ul class="dropdown-menu">
                    @if (Route::has('agent.files.archive.view'))
                        <li>
                            <a class="dropdown-item" href="{{ route('agent.files.archive.view', $archiveFileId) }}">
                                View archived file
                            </a>
                        </li>
                    @endif
                    @if (Route::has('agent.files.archive.delete'))
                        <li>
                            <a class="dropdown-item text-danger" href="#" id="action-archive-file-delete">
                                Delete archive file
                            </a>
                        </li>
                    @endif
                </ul>
            </div>
        @endif

        {{-- Generic actions for leads currently on screen --}}
        <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown"
                aria-expanded="false">
                Actions
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#" id="action-archive">Archive current list</a></li>
                <li><a class="dropdown-item text-danger" href="#" id="action-delete">Delete selected</a></li>
            </ul>
        </div>
    </div>

    <div class="d-flex align-items-center">
        @if ($fromArchive && Route::has('agent.files.archive'))
            <a href="{{ route('agent.files.archive') }}" class="btn btn-outline-secondary me-2">Back to Lead
                Archives</a>
        @endif

        <a href="{{ $purchaseUrl }}" class="btn btn-success me-2">Purchase Lead</a>
        <button form="purchased-bulk-update" type="submit" class="btn btn-primary me-2">Save Changes</button>
        @if ($exportRouteName)
            <a id="purchased-export-btn" class="btn btn-outline-primary" href="{{ $exportHref }}">
                {{ $exportLabel }}
            </a>
        @endif
    </div>
</div>

<div id="save-flash" class="alert alert-success d-none shadow">Changes saved.</div>

{{-- Hidden ARCHIVE form (create a new archive snapshot of current tab) --}}
<form id="archive-form" action="{{ route('agent.leads.purchased.archive') }}" method="POST" class="d-none">
    @csrf
    <input type="hidden" name="tab" id="archive-tab" value="{{ $firstActive }}">
    <div id="archive-ids"></div>
</form>

{{-- Hidden delete form for leads (unchanged server contract) --}}
<form id="bulk-delete-form" action="{{ route('agent.purchased-leads.bulk') }}" method="POST" class="d-none">
    @csrf
    <input type="hidden" name="tab" id="bulk-tab" value="{{ $firstActive }}">
    <input type="hidden" name="action" value="delete">
    <div id="bulk-ids"></div> {{-- JS appends <input name="ids[]"> --}}
</form>

{{-- Hidden delete form for the archive FILE (only rendered when we know file id) --}}
@if ($fromArchive && $archiveFileId && Route::has('agent.files.archive.delete'))
    <form id="archive-file-delete-form" action="{{ route('agent.files.archive.delete', $archiveFileId) }}"
        method="POST" class="d-none">
        @csrf
        @method('DELETE')
    </form>
@endif

{{-- silent target to keep page in place on delete --}}
<iframe name="purchasedSilentFrame" id="purchasedSilentFrame" style="display:none;width:0;height:0;border:0;"></iframe>

<form id="purchased-bulk-update" method="POST" action="{{ $bulkUpdateAction }}">
    @csrf
    <input type="hidden" name="tab" id="save-tab" value="{{ $firstActive }}">
    <div id="save-ids-wrap" class="d-none"></div>

    {{-- INNER TABS (always show all tabs) --}}
    <ul class="nav nav-pills mb-3 purchased-nav" id="purchased-types" role="tablist">
        @foreach ($types as $key => $label)
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ $key === $firstActive ? 'active' : '' }}" id="{{ $tabId($key) }}"
                    href="#{{ $paneId($key) }}" data-bs-toggle="pill" data-toggle="pill" role="tab"
                    aria-controls="{{ $paneId($key) }}" aria-selected="{{ $key === $firstActive ? 'true' : 'false' }}"
                    style="pointer-events:auto">
                    {{ $label }}
                </a>
            </li>
        @endforeach
    </ul>

    <div class="tab-content" id="purchased-typesContent">
        @foreach ($types as $key => $label)
            @php $rows = $purchasedData[$key]['rows'] ?? collect(); @endphp

            <div class="tab-pane fade {{ $key === $firstActive ? 'show active' : '' }}" id="{{ $paneId($key) }}"
                role="tabpanel" aria-labelledby="{{ $tabId($key) }}" tabindex="0" data-tab="{{ $key }}"
                data-label="{{ strtolower($label) }}">

                @if (
                    ($rows instanceof \Illuminate\Support\Collection && $rows->isEmpty()) ||
                        ($rows instanceof \Illuminate\Pagination\AbstractPaginator && $rows->count() === 0))
                    <div class="alert alert-light mt-1">No {{ strtolower($label) }} leads yet.</div>
                @else
                    <div class="x-sync-top" aria-hidden="true">
                        <div class="x-sync-sizer"></div>
                    </div>
                    <div class="x-range"><input type="range" class="form-range x-sync-range" min="0"
                            value="0" step="1" /></div>

                    <div class="table-responsive">
                        <table class="table table-bordered table-hover align-middle mb-0 purchased-table">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:36px;">
                                        <input type="checkbox" class="form-check-input select-all"
                                            data-tab="{{ $key }}">
                                    </th>
                                    <th class="sticky-col sticky-col-1">First Name</th>
                                    <th class="sticky-col sticky-col-2">Last Name</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>Age</th>
                                    <th>Date of Birth</th>
                                    <th>Street Address</th>
                                    <th>City</th>
                                    <th>State</th>
                                    <th>Zipcode</th>
                                    <th>County</th>
                                    <th>Insurance Type</th>
                                    <th>Lead Type</th>
                                    <th>Status</th>
                                    <th>Convert To Client</th>
                                    <th>Purchase Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($rows as $idx => $lead)
                                    @php
                                        $insNorm = $norm($lead->insurance_type ?? '');
                                        $statusNorm = $norm($lead->status ?? 'new');
                                        $purchaseDate = $lead->purchase_date ?? null;
                                        $purchaseDateShort = $purchaseDate
                                            ? \Illuminate\Support\Str::of($purchaseDate)->substr(0, 10)
                                            : '';
                                        $rowId = "row-{$key}-{$lead->id}";
                                        $rowConvertUrl = $rowConvertBase($key, $lead->id);
                                    @endphp
                                    <tr id="{{ $rowId }}" data-original-index="{{ $idx }}">
                                        <td>
                                            <input type="checkbox" class="form-check-input row-check"
                                                value="{{ $lead->id }}" data-tab="{{ $key }}">
                                        </td>

                                        {{-- Placeholders for missing names --}}
                                        <td class="sticky-col sticky-col-1">{{ $lead->first_name ?: '—' }}</td>
                                        <td class="sticky-col sticky-col-2">{{ $lead->last_name ?: '—' }}</td>

                                        {{-- More safe placeholders to keep grid tidy --}}
                                        <td>{{ $lead->phone_number ?: '—' }}</td>
                                        <td>{{ $lead->email ?: '—' }}</td>
                                        <td>{{ isset($lead->age) ? $lead->age : '—' }}</td>
                                        <td>{{ $lead->date_of_birth ?: '—' }}</td>
                                        <td>{{ $lead->street_address ?? $lead->address ?: '—' }}</td>
                                        <td>{{ $lead->city ?: '—' }}</td>
                                        <td>{{ $lead->state ?: '—' }}</td>
                                        <td>{{ $lead->zipcode ?: '—' }}</td>
                                        <td>{{ $lead->county ?: '—' }}</td>

                                        <td class="text-center">
                                            @php $options = $insuranceTypesByGroup[$key] ?? []; @endphp
                                            <select
                                                name="leads[{{ $key }}][{{ $lead->id }}][insurance_type]"
                                                class="form-select form-select-sm w-auto mx-auto insurance-select">
                                                <option value="">Select</option>
                                                @foreach ($options as $opt)
                                                    @php
                                                        $optNorm = $norm($opt);
                                                        // Preselect ONLY for life/mortgage; for health keep default "Select"
                                                        $shouldSelect = $key !== 'health' && $insNorm === $optNorm;
                                                    @endphp
                                                    <option value="{{ $opt }}"
                                                        {{ $shouldSelect ? 'selected' : '' }}>
                                                        {{ $opt }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>

                                        {{-- Lead Type cell (Purchased) --}}
                                        <td><span class="badge bg-primary">Purchased</span></td>

                                        <td>
                                            <select name="leads[{{ $key }}][{{ $lead->id }}][status]"
                                                class="form-select form-select-sm status-select">
                                                @foreach ($statusOptions as $sv => $sl)
                                                    <option value="{{ $sv }}"
                                                        {{ $statusNorm === $sv ? 'selected' : '' }}>
                                                        {{ $sl }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>

                                        <td class="text-center">
                                            <button type="button" class="btn btn-success btn-sm convert-now btn-row"
                                                data-convert-url="{{ $rowConvertUrl }}"
                                                data-row="#{{ $rowId }}">
                                                Convert to Client
                                            </button>
                                        </td>

                                        <td>{{ $purchaseDateShort ?: '—' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        @endforeach
    </div>
</form>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const exportBtn = document.getElementById('purchased-export-btn');
        const types = @json($types);
        const exportUrls = @json($exportUrls);

        const archiveForm = document.getElementById('archive-form');
        const archiveTab = document.getElementById('archive-tab');
        const bulkForm = document.getElementById('bulk-delete-form');
        const bulkTab = document.getElementById('bulk-tab');
        const bulkIdsWrap = document.getElementById('bulk-ids');

        const saveForm = document.getElementById('purchased-bulk-update');
        const saveTab = document.getElementById('save-tab');

        const tabContainer = document.getElementById('purchased-types');
        const tabContentEl = document.getElementById('purchased-typesContent');

        function updateExportFor(key) {
            if (!exportBtn || !types[key] || !exportUrls[key]) return;
            exportBtn.href = exportUrls[key];
            exportBtn.textContent = 'Export ' + types[key] + ' (CSV)';
        }

        function updateFormsFor(key) {
            if (archiveTab) archiveTab.value = key;
            if (bulkTab) bulkTab.value = key;
            if (saveTab) saveTab.value = key;
        }

        function getPaneParts(pane) {
            const wrapper = pane?.querySelector('.table-responsive');
            const table = wrapper?.querySelector('table');
            const top = pane?.querySelector('.x-sync-top');
            const sizer = top?.querySelector('.x-sync-sizer');
            const range = pane?.querySelector('.x-sync-range');
            const rangeWrap = pane?.querySelector('.x-range');
            return {
                wrapper,
                table,
                top,
                sizer,
                range,
                rangeWrap
            };
        }

        function sizerWidth(table, wrapper) {
            const tableW = (table?.scrollWidth || 0);
            const wrapperW = (wrapper?.clientWidth || 0);
            return Math.max(tableW, wrapperW + 2);
        }

        function setupTopScrollbar(pane) {
            if (!pane || pane.dataset.topScrollerInit === '1') return;
            const {
                wrapper,
                table,
                top,
                sizer
            } = getPaneParts(pane);
            if (!wrapper || !table || !top || !sizer) return;

            const refresh = () => {
                sizer.style.width = sizerWidth(table, wrapper) + 'px';
                top.scrollLeft = wrapper.scrollLeft;
            };
            refresh();
            requestAnimationFrame(refresh);
            setTimeout(refresh, 80);

            let syncing = false;
            top.addEventListener('scroll', () => {
                if (syncing) return;
                syncing = true;
                wrapper.scrollLeft = top.scrollLeft;
                syncing = false;
            }, {
                passive: true
            });

            wrapper.addEventListener('scroll', () => {
                if (syncing) return;
                syncing = true;
                top.scrollLeft = wrapper.scrollLeft;
                syncing = false;
            }, {
                passive: true
            });

            if (window.ResizeObserver) {
                const ro = new ResizeObserver(refresh);
                ro.observe(wrapper);
                ro.observe(table);
            } else {
                window.addEventListener('resize', refresh);
            }
            pane.dataset.topScrollerInit = '1';
        }

        function setupRangeSlider(pane) {
            if (!pane || pane.dataset.rangeInit === '1') return;
            const {
                wrapper,
                range
            } = getPaneParts(pane);
            if (!wrapper || !range) return;

            const calcMax = () => Math.max(0, (wrapper.scrollWidth - wrapper.clientWidth));
            const setMax = () => {
                range.max = String(calcMax());
            };

            const syncFromWrapper = () => {
                if (syncFromWrapper._rAF) return;
                syncFromWrapper._rAF = requestAnimationFrame(() => {
                    range.value = String(wrapper.scrollLeft);
                    syncFromWrapper._rAF = null;
                });
            };
            const syncFromRange = () => {
                wrapper.scrollLeft = Number(range.value || 0);
            };

            setMax();
            range.value = String(wrapper.scrollLeft);
            range.addEventListener('input', syncFromRange, {
                passive: true
            });
            wrapper.addEventListener('scroll', syncFromWrapper, {
                passive: true
            });

            const refresh = () => {
                setMax();
                const max = Number(range.max || 0);
                if (Number(range.value) > max) range.value = String(Math.min(max, wrapper.scrollLeft));
            };
            if (window.ResizeObserver) {
                const ro = new ResizeObserver(refresh);
                ro.observe(wrapper);
            } else {
                window.addEventListener('resize', refresh);
            }
            requestAnimationFrame(refresh);
            setTimeout(refresh, 120);
            pane.dataset.rangeInit = '1';
        }

        function onTabActivated(targetSelector) {
            const key = targetSelector?.replace('#purchased-', '');
            if (!key) return;
            updateExportFor(key);
            updateFormsFor(key);

            const pane = document.querySelector(targetSelector);
            if (!pane) return;
            setupTopScrollbar(pane);
            setupRangeSlider(pane);

            const savedLeft = parseInt(sessionStorage.getItem('purchased_scroll_left') || '0', 10);
            if (savedLeft) {
                const {
                    wrapper,
                    top,
                    range
                } = getPaneParts(pane);
                if (wrapper) wrapper.scrollLeft = savedLeft;
                if (top) top.scrollLeft = savedLeft;
                if (range) range.value = String(savedLeft);
                sessionStorage.removeItem('purchased_scroll_left');
            }
        }

        function manualShowInner(selector) {
            const link = tabContainer?.querySelector(`a.nav-link[href="${selector}"]`);
            const pane = tabContentEl?.querySelector(selector);
            if (!link || !pane) return;

            tabContainer.querySelectorAll('a.nav-link').forEach(a => {
                a.classList.remove('active');
                a.setAttribute('aria-selected', 'false');
            });
            tabContentEl.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('show', 'active'));

            link.classList.add('active');
            link.setAttribute('aria-selected', 'true');
            pane.classList.add('show', 'active');
            onTabActivated(selector);
        }

        (function initInnerTabsOnce() {
            const links = tabContainer?.querySelectorAll(
                'a.nav-link[data-bs-toggle="pill"],a.nav-link[data-toggle="pill"]') || [];
            links.forEach(link => {
                link.addEventListener('shown.bs.tab', (e) => onTabActivated(e.target.getAttribute(
                    'href')));
                link.addEventListener('click', (e) => {
                    if (!(window.bootstrap && window.bootstrap.Tab)) {
                        e.preventDefault();
                        manualShowInner(link.getAttribute('href'));
                    }
                });
            });

            const savedTab = sessionStorage.getItem('purchased_active_tab');
            const targetKey = (savedTab && types[savedTab]) ? savedTab : @json($firstActive);
            const targetSel = '#purchased-' + targetKey;

            if (window.bootstrap && window.bootstrap.Tab) {
                const firstLink = tabContainer?.querySelector(`a.nav-link[href="${targetSel}"]`);
                if (firstLink) {
                    window.bootstrap.Tab.getOrCreateInstance(firstLink).show();
                    onTabActivated(targetSel);
                }
            } else {
                manualShowInner(targetSel);
            }
            if (savedTab) sessionStorage.removeItem('purchased_active_tab');

            document.querySelectorAll('#purchased-typesContent .tab-pane').forEach(p => {
                setupTopScrollbar(p);
                setupRangeSlider(p);
            });
        })();

        // 🔁 Archive current list (checked rows, or all rows if none checked)
        document.getElementById('action-archive')?.addEventListener('click', function(e) {
            e.preventDefault();
            if (!archiveForm) return;

            const pane = document.querySelector('.tab-pane.show.active[data-tab]');
            if (!pane) return;
            const activeKey = (pane.getAttribute('data-tab') || '').trim();
            if (archiveTab) archiveTab.value = activeKey;

            // Prefer checked rows; if none checked, archive all rows in the tab
            const checked = Array.from(pane.querySelectorAll('.row-check:checked'));
            const rows = checked.length ? checked : Array.from(pane.querySelectorAll(
                'tbody .row-check'));
            if (!rows.length) {
                alert('No leads found in this tab to archive.');
                return;
            }

            const wrap = document.getElementById('archive-ids');
            if (wrap) wrap.innerHTML = '';
            rows.forEach(cb => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'ids[]';
                input.value = cb.value;
                wrap.appendChild(input);
            });

            try {
                sessionStorage.setItem('purchased_active_tab', activeKey);
            } catch (_) {}

            archiveForm.submit();
        });

        // Delete selected leads (to hidden iframe so page doesn't navigate)
        document.getElementById('action-delete')?.addEventListener('click', function(e) {
            e.preventDefault();
            if (!bulkForm || !bulkIdsWrap) return;

            const pane = document.querySelector('.tab-pane.show.active[data-tab]');
            if (!pane) return;

            const checked = Array.from(pane.querySelectorAll('.row-check:checked'));
            if (!checked.length) {
                alert('Please select at least one row to delete.');
                return;
            }

            const activeKey = (pane.getAttribute('data-tab') || '').trim();
            if (bulkTab) bulkTab.value = activeKey;

            bulkIdsWrap.innerHTML = '';
            checked.forEach(cb => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'ids[]';
                input.value = cb.value;
                bulkIdsWrap.appendChild(input);
            });

            try {
                sessionStorage.setItem('purchased_active_tab', activeKey);
                const {
                    wrapper
                } = getPaneParts(pane);
                sessionStorage.setItem('purchased_scroll_left', wrapper ? String(wrapper.scrollLeft) :
                    '0');
            } catch (_) {}

            const iframe = document.getElementById('purchasedSilentFrame');
            const rowsToRemove = checked.map(cb => cb.closest('tr')).filter(Boolean);
            const onDone = () => {
                rowsToRemove.forEach(tr => tr?.remove());
                const selAll = pane.querySelector('.select-all');
                if (selAll) selAll.checked = false;
                showNoLeadsIfEmpty(pane);
                if (typeof showFlash === 'function') showFlash(
                    `Deleted ${rowsToRemove.length} lead(s).`);
                iframe.removeEventListener('load', onDone);
            };
            iframe.addEventListener('load', onDone, {
                once: true
            });

            const prevTarget = bulkForm.getAttribute('target');
            bulkForm.setAttribute('target', 'purchasedSilentFrame');
            bulkForm.submit();
            if (prevTarget == null) bulkForm.removeAttribute('target');
            else bulkForm.setAttribute('target', prevTarget);
        });

        // Delete the ARCHIVE FILE itself (only rendered when fromArchive + id)
        document.getElementById('action-archive-file-delete')?.addEventListener('click', function(e) {
            e.preventDefault();
            const form = document.getElementById('archive-file-delete-form');
            if (!form) return;
            if (confirm(
                    'Delete this archived file? This does not delete purchased leads themselves.')) {
                form.submit();
            }
        });

        // Helper: if a pane has no <tbody> rows, tear down table UI and show "No {label} leads yet."
        function showNoLeadsIfEmpty(pane) {
            const tbody = pane?.querySelector('tbody');
            const hasRows = !!tbody && !!tbody.querySelector('tr');
            if (hasRows) return;

            pane.querySelector('.x-sync-top')?.remove();
            pane.querySelector('.x-range')?.remove();
            pane.querySelector('.table-responsive')?.remove();

            if (!pane.querySelector('.no-leads-alert')) {
                const label = (pane.getAttribute('data-label') || '').trim();
                const div = document.createElement('div');
                div.className = 'alert alert-light mt-1 no-leads-alert';
                div.textContent = `No ${label ? label + ' ' : ''}leads yet.`;
                pane.appendChild(div);
            }
        }

        const saveFormEl = document.getElementById('purchased-bulk-update');
        saveFormEl?.addEventListener('submit', async function(e) {
            e.preventDefault();
            const pane = document.querySelector('.tab-pane.show.active[data-tab]');
            if (!pane) return;

            const checked = Array.from(pane.querySelectorAll('.row-check:checked'));
            if (!checked.length) {
                alert('Please select at least one row to save.');
                return;
            }

            try {
                sessionStorage.setItem('purchased_active_tab', (pane.getAttribute('data-tab') || '')
                    .trim());
                const {
                    wrapper
                } = getPaneParts(pane);
                sessionStorage.setItem('purchased_scroll_left', wrapper ? String(wrapper
                    .scrollLeft) : '0');
            } catch (_) {}

            const fd = new FormData();
            fd.append('_token', document.getElementById('csrf_token')?.value || '');
            fd.append('tab', (pane.getAttribute('data-tab') || '').trim());

            const ids = new Set(checked.map(cb => cb.value));
            checked.forEach(cb => fd.append('ids[]', cb.value));
            pane.querySelectorAll('tbody tr').forEach(tr => {
                const cb = tr.querySelector('.row-check');
                if (!cb || !ids.has(cb.value)) return;
                tr.querySelectorAll('select[name^="leads["]').forEach(sel => {
                    fd.append(sel.getAttribute('name'), sel.value ?? '');
                });
            });

            const btn = saveFormEl.querySelector('button[type="submit"]');
            const original = btn ? btn.innerHTML : '';
            if (btn) {
                btn.disabled = true;
                btn.innerHTML = 'Saving…';
            }

            try {
                const res = await fetch(saveFormEl.action, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: fd,
                    redirect: 'follow'
                });
                if (!res.ok) throw new Error('Save failed');
                showFlash('Changes saved.');
            } catch (err) {
                console.error(err);
                showFlash('Save failed. Please try again.', true);
            } finally {
                if (btn) {
                    const restore = () => {
                        btn.disabled = false;
                        btn.innerHTML = original;
                    };
                    setTimeout(restore, 3000);
                }
            }
        });

        function showFlash(msg, isError = false) {
            const el = document.getElementById('save-flash');
            if (!el) return;
            el.classList.remove('d-none', 'alert-success', 'alert-danger');
            el.classList.add(isError ? 'alert-danger' : 'alert-success');
            el.textContent = msg;
            clearTimeout(el._hideTimer);
            el._hideTimer = setTimeout(() => el.classList.add('d-none'), 3000);
        }

        let reorderTimer = null;
        const REORDER_DELAY_MS = 160;

        function scheduleResort(pane) {
            if (reorderTimer) clearTimeout(reorderTimer);
            reorderTimer = setTimeout(() => {
                resortRows(pane);
                reorderTimer = null;
            }, REORDER_DELAY_MS);
        }
        document.addEventListener('click', function(e) {
            const cb = e.target.closest('.row-check');
            if (!cb) return;
            const pane = document.getElementById('purchased-' + cb.getAttribute('data-tab'));
            scheduleResort(pane);
        });
        document.addEventListener('change', function(e) {
            const cb = e.target.closest('.row-check');
            if (!cb) return;
            const pane = document.getElementById('purchased-' + cb.getAttribute('data-tab'));
            scheduleResort(pane);
        });
        document.querySelectorAll('.select-all').forEach(sel => {
            sel.addEventListener('change', function() {
                const pane = document.getElementById('purchased-' + this.getAttribute(
                    'data-tab'));
                if (!pane) return;
                pane.querySelectorAll('.row-check').forEach(cb => cb.checked = this.checked);
                scheduleResort(pane);
            });
        });

        function resortRows(pane) {
            const tbody = pane?.querySelector('tbody');
            if (!tbody) return;
            const allRows = Array.from(tbody.querySelectorAll('tr'));
            allRows.forEach(r => r.classList.toggle('pinned-row', !!r.querySelector('.row-check')?.checked));
            const byOrig = (a, b) =>
                (parseInt(a.getAttribute('data-original-index') || '0', 10) -
                    parseInt(b.getAttribute('data-original-index') || '0', 10));
            const checkedRows = allRows.filter(r => r.querySelector('.row-check')?.checked).sort(byOrig);
            const uncheckedRows = allRows.filter(r => !r.querySelector('.row-check')?.checked).sort(byOrig);
            checkedRows.forEach(r => tbody.appendChild(r));
            uncheckedRows.forEach(r => tbody.appendChild(r));
        }

        const csrf = document.getElementById('csrf_token')?.value ||
            document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

        document.addEventListener('click', async function(e) {
            const btn = e.target.closest('.convert-now');
            if (!btn) return;
            const rowSel = btn.getAttribute('data-row');
            const row = document.querySelector(rowSel);
            if (!row) return;
            const url = btn.getAttribute('data-convert-url');
            const select = row.querySelector('select.insurance-select');
            const insType = select?.value || '';
            if (!insType) {
                alert('Select an Insurance Type before converting.');
                return;
            }

            const originalText = btn.textContent;
            btn.disabled = true;
            btn.textContent = 'Converting...';
            try {
                const res = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrf,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        insurance_type: insType
                    })
                });

                if (!res.ok) {
                    let serverMsg = 'Conversion failed.';
                    try {
                        const data = await res.json();
                        if (data?.message) serverMsg = data.message;
                        if (data?.error) serverMsg = data.error;
                        if (data?.errors) {
                            const first = Object.values(data.errors)[0];
                            if (Array.isArray(first) && first.length) serverMsg = first[0];
                        }
                    } catch (_) {
                        try {
                            serverMsg = (await res.text()) || serverMsg;
                        } catch (_) {}
                    }
                    throw new Error(serverMsg);
                }

                const statusSelect = row.querySelector('select.status-select');
                if (statusSelect) statusSelect.value = 'converted';
                btn.textContent = 'Converted';
                btn.classList.add('active');
            } catch (err) {
                alert(err?.message || 'Conversion failed.');
                btn.textContent = originalText;
                btn.disabled = false;
            }
        });
    });
</script>