@extends('garage.layouts.app')

@section('title', 'Merge & Transfer')

@push('styles')
@include('garage.ledger-merges.partials.merge-page-styles')
<style>
.grg-merge-preview-modal .modal-body { font-size: 0.875rem; }
.grg-merge-preview-modal .grg-mp-balance-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.85rem;
    height: 100%;
    background: #fafbfc;
}
.grg-merge-preview-modal .grg-mp-balance-card.is-source { border-color: #fecaca; background: #fff5f5; }
.grg-merge-preview-modal .grg-mp-balance-card.is-target { border-color: #bbf7d0; background: #f0fdf4; }
.grg-merge-preview-modal .grg-mp-balance-card.is-projected { border-color: #bfdbfe; background: #eff6ff; }
.grg-merge-preview-modal .grg-mp-amount { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.grg-merge-preview-modal .grg-mp-table-wrap { max-height: min(50vh, 360px); overflow: auto; border: 1px solid #e2e8f0; border-radius: 10px; }
.grg-merge-preview-modal .table th { font-size: 0.75rem; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
</style>
@endpush

@push('scripts')
@php
    $grgMpLedgerStmtTpl = preg_replace('/\/\d+$/', '/__ID__', route('garage.ledger-reports.ledger', ['ledgerId' => 0]));
    $grgMpVoucherTpl = preg_replace('/\/\d+$/', '/__ID__', route('garage.vouchers.show', ['id' => 0]));
@endphp
<script>
document.addEventListener('DOMContentLoaded', function() {
    const MERGE_PREVIEW_ROUTES = {
        ledgerStatement: @json($grgMpLedgerStmtTpl),
        voucherShow: @json($grgMpVoucherTpl),
    };
    const ledgerTypeSelect = document.getElementById('ledgerType');
    const tabMerge = document.getElementById('tab-merge');
    const tabTransfer = document.getElementById('tab-transfer');
    const mergeLedgerTypeInput = document.getElementById('mergeLedgerType');

    const sourceSelect = document.getElementById('sourceLedgerId');
    const targetSelect = document.getElementById('targetLedgerId');
    const transferFromSelect = document.getElementById('transferFromCustomerId');
    const transferTargetSelect = document.getElementById('transferTargetCustomerId');
    const vehicleSelect = document.getElementById('transferVehicleId');

    const typeLabels = {
        customer: { entity: 'customer', mergeFrom: 'From customer (source — merge from)', mergeTo: 'To customer (target — keep)', transferFrom: 'From customer', transferTo: 'To customer' },
        vendor: { entity: 'vendor', mergeFrom: 'From vendor (source — merge from)', mergeTo: 'To vendor (target — keep)' },
        employee: { entity: 'employee', mergeFrom: 'From employee (source — merge from)', mergeTo: 'To employee (target — keep)' },
        simple: { entity: 'ledger', mergeFrom: 'From ledger (source — merge from)', mergeTo: 'To ledger (target — keep)' },
    };

    function ledgerOptionsUrl(type, forTransfer) {
        let url = `{{ route('garage.ledger-merges.ledger-options') }}?type=${encodeURIComponent(type)}`;
        if (forTransfer) url += '&for_transfer=1';
        return url;
    }

    function refreshChosen(el) {
        if (!window.jQuery || !jQuery.fn.chosen) return;
        const $el = jQuery(el);
        if ($el.data('chosen')) $el.trigger('chosen:updated');
    }

    function destroyChosen(el) {
        if (!window.jQuery || !jQuery.fn.chosen) return;
        const $el = jQuery(el);
        if ($el.data('chosen')) $el.chosen('destroy');
    }

    function initChosen(el) {
        if (!window.jQuery || !jQuery.fn.chosen) return;
        const $el = jQuery(el);
        if (!$el.data('chosen')) {
            $el.chosen({ width: '100%', search_contains: true, allow_single_deselect: true });
        } else {
            $el.trigger('chosen:updated');
        }
    }

    function readSelectValue(el) {
        if (!el) return '';
        if (window.jQuery && jQuery(el).data('chosen')) {
            return String(jQuery(el).val() || '').trim();
        }
        return String(el.value || '').trim();
    }

    function updateMergeButtonState() {
        const btn = document.getElementById('btnMerge');
        if (!btn) return;
        const ready = readSelectValue(sourceSelect) && readSelectValue(targetSelect);
        btn.disabled = !ready || btn.dataset.blocked === '1';
    }

    function fillSelect(el, rows, placeholder, excludeId) {
        destroyChosen(el);
        el.innerHTML = '';
        const ph = document.createElement('option');
        ph.value = '';
        ph.textContent = placeholder;
        el.appendChild(ph);
        rows.forEach(r => {
            if (excludeId && Number(r.id) === Number(excludeId)) return;
            const opt = document.createElement('option');
            opt.value = r.id;
            opt.textContent = r.label;
            el.appendChild(opt);
        });
        initChosen(el);
    }

    function updateLabels(type) {
        const L = typeLabels[type] || typeLabels.simple;
        document.getElementById('mergeSourceLabel').textContent = L.mergeFrom;
        document.getElementById('mergeTargetLabel').textContent = L.mergeTo;
        if (document.getElementById('transferFromLabel')) {
            document.getElementById('transferFromLabel').textContent = L.transferFrom || 'From customer';
            document.getElementById('transferToLabel').textContent = L.transferTo || 'To customer';
        }
        const hint = document.getElementById('mergeTypeHint');
        if (hint) hint.textContent = 'Select two ' + (L.entity === 'ledger' ? 'ledgers' : L.entity + 's') + ' to merge';
    }

    let ledgerRows = [];
    let transferLedgerRows = [];

    function loadLedgerOptions(type) {
        const mergeFetch = fetch(ledgerOptionsUrl(type, false)).then(r => r.json());
        const transferFetch = (type === 'customer' && transferFromSelect)
            ? fetch(ledgerOptionsUrl(type, true)).then(r => r.json())
            : Promise.resolve([]);

        return Promise.all([mergeFetch, transferFetch]).then(([mergeRows, transferRows]) => {
                ledgerRows = mergeRows || [];
                transferLedgerRows = (transferRows && transferRows.length) ? transferRows : ledgerRows;
                const ph = '— Select —';
                fillSelect(sourceSelect, ledgerRows, ph);
                fillSelect(targetSelect, ledgerRows, ph);
                if (transferFromSelect) {
                    fillSelect(transferFromSelect, transferLedgerRows, ph);
                    fillSelect(transferTargetSelect, transferLedgerRows, ph);
                    resetVehicleSelect('Select FROM customer first to load vehicles');
                }
                const pb = document.getElementById('previewBox');
        if (pb) { pb.classList.add('d-none'); pb.classList.remove('grg-lm-preview-ok'); }
                document.getElementById('transferPreviewBox')?.classList.add('d-none');
                document.getElementById('btnMerge').disabled = true;
                document.getElementById('btnMerge').dataset.blocked = '0';
                document.getElementById('btnTransferExec').disabled = true;
                updateLabels(type);
                updateMergeButtonState();
            });
    }

    function onMergeSourceChange() {
        const ex = readSelectValue(sourceSelect);
        const keepTarget = readSelectValue(targetSelect);
        fillSelect(targetSelect, ledgerRows, '— Select —', ex);
        if (keepTarget && keepTarget !== ex) {
            targetSelect.value = keepTarget;
            refreshChosen(targetSelect);
        }
        const pb = document.getElementById('previewBox');
        if (pb) { pb.classList.add('d-none'); pb.classList.remove('grg-lm-preview-ok'); }
        document.getElementById('btnMerge').dataset.blocked = '0';
        updateMergeButtonState();
    }

    function onMergeTargetChange() {
        const ex = readSelectValue(targetSelect);
        const keepSource = readSelectValue(sourceSelect);
        fillSelect(sourceSelect, ledgerRows, '— Select —', ex);
        if (keepSource && keepSource !== ex) {
            sourceSelect.value = keepSource;
            refreshChosen(sourceSelect);
        }
        const pb = document.getElementById('previewBox');
        if (pb) { pb.classList.add('d-none'); pb.classList.remove('grg-lm-preview-ok'); }
        document.getElementById('btnMerge').dataset.blocked = '0';
        updateMergeButtonState();
    }

    sourceSelect.addEventListener('change', onMergeSourceChange);
    targetSelect.addEventListener('change', onMergeTargetChange);
    if (window.jQuery) {
        jQuery(sourceSelect).on('change', onMergeSourceChange);
        jQuery(targetSelect).on('change', onMergeTargetChange);
    }

    function resetVehicleSelect(placeholderHtml) {
        destroyChosen(vehicleSelect);
        vehicleSelect.innerHTML = '<option value="">' + (placeholderHtml || '— Select from customer first —') + '</option>';
        initChosen(vehicleSelect);
        const hint = document.getElementById('transferVehicleHint');
        if (hint) hint.textContent = 'Vehicles load from the from customer only (not the to customer).';
    }

    function onTransferFromChange() {
        const ex = readSelectValue(transferFromSelect);
        const keepTarget = readSelectValue(transferTargetSelect);
        fillSelect(transferTargetSelect, transferLedgerRows, '— Select —', ex);
        if (keepTarget && keepTarget !== ex) {
            transferTargetSelect.value = keepTarget;
            refreshChosen(transferTargetSelect);
        }
        loadVehiclesForTransfer();
    }

    function onTransferTargetChange() {
        const ex = readSelectValue(transferTargetSelect);
        const keepFrom = readSelectValue(transferFromSelect);
        fillSelect(transferFromSelect, transferLedgerRows, '— Select —', ex);
        if (keepFrom && keepFrom !== ex) {
            transferFromSelect.value = keepFrom;
            refreshChosen(transferFromSelect);
        }
    }

    if (transferFromSelect) {
        transferFromSelect.addEventListener('change', onTransferFromChange);
        transferTargetSelect.addEventListener('change', onTransferTargetChange);
        if (window.jQuery) {
            jQuery(transferFromSelect).on('change', onTransferFromChange);
            jQuery(transferTargetSelect).on('change', onTransferTargetChange);
        }
    }

    function loadVehiclesForTransfer() {
        const cid = readSelectValue(transferFromSelect);
        document.getElementById('transferPreviewBox')?.classList.add('d-none');
        document.getElementById('btnTransferExec').disabled = true;
        const hint = document.getElementById('transferVehicleHint');
        if (!cid) {
            resetVehicleSelect('Select FROM customer first');
            return;
        }
        destroyChosen(vehicleSelect);
        vehicleSelect.innerHTML = '<option value="">Loading vehicles…</option>';
        initChosen(vehicleSelect);
        if (hint) hint.textContent = 'Loading vehicles for selected from customer…';

        fetch(`{{ route('garage.ledger-merges.customer-vehicles') }}?customer_id=${encodeURIComponent(cid)}`)
            .then(r => r.json())
            .then(data => {
                destroyChosen(vehicleSelect);
                vehicleSelect.innerHTML = '';
                const ph = document.createElement('option');
                ph.value = '';
                const list = data.vehicles || [];
                if (!list.length) {
                    ph.textContent = '— No vehicles on this customer —';
                    vehicleSelect.appendChild(ph);
                    if (hint) hint.textContent = 'This customer has no vehicles. Pick another from customer or add a vehicle first.';
                } else {
                    ph.textContent = '— Select vehicle —';
                    vehicleSelect.appendChild(ph);
                    list.forEach(v => {
                        const label = [v.registration_number, v.make, v.model, v.sub_ledger_code ? `(${v.sub_ledger_code})` : ''].filter(Boolean).join(' ');
                        const opt = document.createElement('option');
                        opt.value = v.id;
                        opt.textContent = label;
                        vehicleSelect.appendChild(opt);
                    });
                    if (hint) hint.textContent = list.length + ' vehicle(s) available to transfer.';
                }
                initChosen(vehicleSelect);
            })
            .catch(() => {
                resetVehicleSelect('Could not load vehicles — try again');
                if (hint) hint.textContent = 'Failed to load vehicles. Check connection and try changing from customer again.';
            });
    }

    ledgerTypeSelect.addEventListener('change', () => {
        const t = ledgerTypeSelect.value;
        mergeLedgerTypeInput.value = t;
        if (t !== 'customer') {
            tabTransfer.classList.add('d-none');
            if (tabTransfer.classList.contains('active')) tabMerge.click();
        } else {
            tabTransfer.classList.remove('d-none');
        }
        loadLedgerOptions(t);
        const url = new URL(window.location.href);
        url.searchParams.set('ledger_type', t);
        window.history.replaceState({}, '', url);
    });

    if (ledgerTypeSelect.value !== 'customer') tabTransfer?.classList.add('d-none');

    loadLedgerOptions(ledgerTypeSelect.value);

    let mergePreviewModal = null;

    function escapeHtml(s) {
        if (s == null) return '';
        return String(s).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
    }

    function money(n) {
        return (Number(n) || 0).toLocaleString('en-PK', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    function renderBalanceCard(title, ledger, detail, cardClass) {
        const d = detail || {};
        return `<div class="grg-mp-balance-card ${cardClass}">
            <div class="fw-semibold mb-2">${escapeHtml(title)}</div>
            <div class="small text-muted mb-1"><code>${escapeHtml(ledger.code || '')}</code> ${escapeHtml(ledger.name || '')}</div>
            <table class="table table-sm table-borderless mb-0 small">
                <tr><td class="text-muted">Opening</td><td class="text-end fw-semibold">${money(d.opening_balance)} ${d.opening_balance_type === 'credit' ? 'Cr' : 'Dr'}</td></tr>
                <tr><td class="text-muted">Voucher debit</td><td class="text-end">${money(d.voucher_debit_total)}</td></tr>
                <tr><td class="text-muted">Voucher credit</td><td class="text-end">${money(d.voucher_credit_total)}</td></tr>
                <tr><td class="text-muted">Voucher net</td><td class="text-end fw-semibold">${money(Math.abs(d.voucher_net || 0))} ${(d.voucher_net || 0) >= 0 ? 'Dr' : 'Cr'}</td></tr>
                <tr class="border-top"><td class="text-muted">Net balance</td><td class="text-end grg-mp-amount">${money(ledger.balance_abs)} ${ledger.balance_side === 'credit' ? 'Cr' : 'Dr'}</td></tr>
                <tr><td class="text-muted">Voucher lines</td><td class="text-end">${d.voucher_line_count || 0}</td></tr>
            </table>
        </div>`;
    }

    function showMergePreviewModal(p) {
        const modalEl = document.getElementById('grgMergePreviewModal');
        if (!modalEl || !window.bootstrap) return;
        if (!mergePreviewModal) mergePreviewModal = bootstrap.Modal.getOrCreateInstance(modalEl);

        const src = p.source || {};
        const tgt = p.target || {};
        document.getElementById('grgMergePreviewSubtitle').textContent =
            (src.code || '') + ' → ' + (tgt.code || '') + ' · All source data will move to target';

        const warnings = (p.warnings || []).length
            ? `<div class="alert alert-warning py-2 small mb-3"><ul class="mb-0 ps-3">${p.warnings.map(w => '<li>' + escapeHtml(w) + '</li>').join('')}</ul></div>`
            : '';

        const overview = `<div class="p-3">
            ${warnings}
            <div class="row g-3 mb-3">
                <div class="col-md-4">${renderBalanceCard('Source (merge from)', src, src.balance_detail, 'is-source')}</div>
                <div class="col-md-4">${renderBalanceCard('Target (keep)', tgt, tgt.balance_detail, 'is-target')}</div>
                <div class="col-md-4"><div class="grg-mp-balance-card is-projected">
                    <div class="fw-semibold mb-2">After merge (target)</div>
                    <div class="grg-mp-amount text-primary">${money(p.projected_target_abs)} ${p.projected_target_side === 'credit' ? 'Cr' : 'Dr'}</div>
                    <div class="small text-muted mt-2">Combined opening: ${money(p.projected_opening?.amount)} ${p.projected_opening?.type === 'credit' ? 'Cr' : 'Dr'}</div>
                    <div class="small mt-2">Source + target balances are combined on the target ledger.</div>
                </div></div>
            </div>
            <div class="d-flex flex-wrap gap-2">
                <a class="btn btn-sm btn-outline-primary" href="${MERGE_PREVIEW_ROUTES.ledgerStatement.replace('__ID__', src.id)}" target="_blank" rel="noopener">Source statement</a>
                <a class="btn btn-sm btn-outline-primary" href="${MERGE_PREVIEW_ROUTES.ledgerStatement.replace('__ID__', tgt.id)}" target="_blank" rel="noopener">Target statement</a>
            </div>
        </div>`;

        const refRows = (p.reference_breakdown || []).map(r =>
            `<tr><td>${escapeHtml(r.label)}</td><td class="text-end fw-semibold">${r.count}</td></tr>`
        ).join('') || '<tr><td colspan="2" class="text-muted text-center">Nothing to re-point</td></tr>';

        const docRows = (p.source_documents || []).map(d => {
            const samples = (d.sample_numbers || []).length
                ? '<div class="small text-muted mt-1">' + escapeHtml(d.sample_numbers.join(', ')) + '</div>' : '';
            const amt = d.total_amount != null ? money(d.total_amount) : '—';
            return `<tr><td>${escapeHtml(d.label)}${samples}</td><td class="text-end fw-semibold">${d.count}</td><td class="text-end">${amt}</td></tr>`;
        }).join('') || '<tr><td colspan="3" class="text-muted text-center">No linked documents</td></tr>';

        const records = `<div class="p-3">
            <p class="small text-muted">Rows on the <strong>source</strong> ledger that will be re-linked to the target.</p>
            <div class="row g-3">
                <div class="col-lg-6">
                    <h6 class="fw-semibold small">Accounting &amp; links</h6>
                    <div class="grg-mp-table-wrap"><table class="table table-sm mb-0"><thead class="table-light"><tr><th>Record type</th><th class="text-end">Count</th></tr></thead><tbody>${refRows}</tbody></table></div>
                </div>
                <div class="col-lg-6">
                    <h6 class="fw-semibold small">Business documents (source)</h6>
                    <div class="grg-mp-table-wrap"><table class="table table-sm mb-0"><thead class="table-light"><tr><th>Document</th><th class="text-end">Count</th><th class="text-end">Total</th></tr></thead><tbody>${docRows}</tbody></table></div>
                </div>
            </div>
        </div>`;

        const voucherRows = (p.source_vouchers || []).map(v => {
            const doc = v.document
                ? `<a href="${escapeHtml(v.document.url)}" target="_blank" rel="noopener">${escapeHtml(v.document.label)}</a>`
                : (v.reference_no ? escapeHtml(v.reference_no) : '—');
            const net = Math.abs(v.net_on_ledger || 0);
            const side = v.net_side === 'credit' ? 'Cr' : 'Dr';
            const vUrl = MERGE_PREVIEW_ROUTES.voucherShow.replace('__ID__', v.voucher_id);
            return `<tr>
                <td class="text-nowrap">${escapeHtml(v.voucher_date || '')}</td>
                <td><a href="${vUrl}" target="_blank" rel="noopener"><code>${escapeHtml(v.voucher_no || '')}</code></a></td>
                <td>${escapeHtml(v.voucher_type || '')}</td>
                <td>${doc}</td>
                <td class="small">${escapeHtml(v.sub_ledgers || '—')}</td>
                <td class="text-end">${money(v.debit_amount)}</td>
                <td class="text-end">${money(v.credit_amount)}</td>
                <td class="text-end fw-semibold">${money(net)} ${side}</td>
                <td><span class="badge bg-light text-dark border">${escapeHtml(v.voucher_status || '')}</span></td>
            </tr>`;
        }).join('') || '<tr><td colspan="9" class="text-muted text-center py-3">No vouchers on source ledger</td></tr>';

        const vouchers = `<div class="p-3">
            <p class="small text-muted mb-2">Vouchers with lines on <strong>source</strong> ledger (${(p.source_vouchers || []).length} shown). These lines will post against the <strong>target</strong> ledger after merge.</p>
            <div class="grg-mp-table-wrap"><table class="table table-sm table-hover mb-0">
                <thead class="table-light sticky-top"><tr>
                    <th>Date</th><th>Voucher</th><th>Type</th><th>Document / Ref</th><th>Sub-ledger</th>
                    <th class="text-end">Debit</th><th class="text-end">Credit</th><th class="text-end">Net</th><th>Status</th>
                </tr></thead>
                <tbody>${voucherRows}</tbody>
            </table></div>
        </div>`;

        let vehiclesTab = '';
        if ((p.vehicles || []).length || (p.sub_ledgers || []).length) {
            const vehRows = (p.vehicles || []).map(v =>
                `<tr><td><code>${escapeHtml(v.registration_number || '')}</code></td><td>${escapeHtml(v.label || '')}</td><td>${v.is_active ? '<span class="badge bg-success">Active</span>' : '<span class="badge bg-secondary">Inactive</span>'}</td></tr>`
            ).join('') || '<tr><td colspan="3" class="text-muted text-center">No vehicles</td></tr>';
            const slRows = (p.sub_ledgers || []).map(s =>
                `<tr><td><code>${escapeHtml(s.sub_code || '')}</code></td><td>${escapeHtml(s.title || '')}</td><td>${escapeHtml(s.vehicle || '—')}</td></tr>`
            ).join('') || '<tr><td colspan="3" class="text-muted text-center">No sub-ledgers</td></tr>';
            vehiclesTab = `<div class="p-3"><div class="row g-3">
                <div class="col-md-6"><h6 class="fw-semibold small">Vehicles</h6>
                    <div class="grg-mp-table-wrap"><table class="table table-sm mb-0"><thead class="table-light"><tr><th>Plate</th><th>Vehicle</th><th></th></tr></thead><tbody>${vehRows}</tbody></table></div>
                </div>
                <div class="col-md-6"><h6 class="fw-semibold small">Sub-ledgers (SL)</h6>
                    <div class="grg-mp-table-wrap"><table class="table table-sm mb-0"><thead class="table-light"><tr><th>Code</th><th>Title</th><th>Vehicle</th></tr></thead><tbody>${slRows}</tbody></table></div>
                </div>
            </div></div>`;
        }

        const hasVehicles = vehiclesTab !== '';
        document.getElementById('grgMergePreviewBody').innerHTML = `
            <ul class="nav nav-tabs px-3 pt-2" role="tablist">
                <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#grgMpOverview" type="button">Overview</button></li>
                <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#grgMpVouchers" type="button">Vouchers (${(p.source_vouchers || []).length})</button></li>
                <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#grgMpRecords" type="button">Documents &amp; records</button></li>
                ${hasVehicles ? '<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#grgMpVehicles" type="button">Vehicles</button></li>' : ''}
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade show active" id="grgMpOverview">${overview}</div>
                <div class="tab-pane fade" id="grgMpVouchers">${vouchers}</div>
                <div class="tab-pane fade" id="grgMpRecords">${records}</div>
                ${hasVehicles ? '<div class="tab-pane fade" id="grgMpVehicles">' + vehiclesTab + '</div>' : ''}
            </div>`;

        mergePreviewModal.show();
    }

    document.getElementById('btnPreview').addEventListener('click', () => {
        const src = readSelectValue(sourceSelect);
        const tgt = readSelectValue(targetSelect);
        if (!src || !tgt) { alert('Select source and target from the dropdowns.'); return; }
        const btn = document.getElementById('btnPreview');
        btn.disabled = true;
        btn.textContent = 'Loading…';
        fetch(`{{ route('garage.ledger-merges.preview') }}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
            body: JSON.stringify({ source_ledger_id: src, target_ledger_id: tgt }),
        }).then(r => r.json()).then(data => {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-eye me-1"></i> Preview &amp; verify';
            if (!data.ok) { alert(data.message); return; }
            const p = data.preview;
            const box = document.getElementById('previewBox');
            box.innerHTML = `<div class="small text-success mb-0"><i class="bi bi-check-circle me-1"></i>Preview ready. <button type="button" class="btn btn-link btn-sm p-0 align-baseline fw-semibold" id="btnReopenPreview">Open full verification report</button></div>`;
            box.classList.remove('d-none');
            box.classList.add('grg-lm-preview-ok');
            document.getElementById('btnMerge').dataset.blocked = p.is_system_source ? '1' : '0';
            updateMergeButtonState();
            if (p.is_system_source) alert('This source ledger cannot be merged (system ledger).');
            showMergePreviewModal(p);
            document.getElementById('btnReopenPreview')?.addEventListener('click', () => showMergePreviewModal(p));
        }).catch(() => {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-eye me-1"></i> Preview &amp; verify';
            alert('Could not load merge preview.');
        });
    });

    document.getElementById('btnPreviewTransfer').addEventListener('click', () => {
        if (!vehicleSelect.value || !transferTargetSelect.value) { alert('Select vehicle and target customer.'); return; }
        fetch(`{{ route('garage.ledger-merges.preview-vehicle-transfer') }}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
            body: JSON.stringify({ vehicle_id: vehicleSelect.value, target_ledger_id: transferTargetSelect.value }),
        }).then(r => r.json()).then(data => {
            const box = document.getElementById('transferPreviewBox');
            if (!data.ok) { alert(data.message); return; }
            const p = data.preview;
            box.innerHTML = buildTransferPreviewHtml(p);
            box.classList.remove('d-none');
            document.getElementById('btnTransferExec').disabled = false;
        });
    });

    document.getElementById('mergeForm').addEventListener('submit', function (e) {
        const src = readSelectValue(sourceSelect);
        const tgt = readSelectValue(targetSelect);
        sourceSelect.value = src;
        targetSelect.value = tgt;
        refreshChosen(sourceSelect);
        refreshChosen(targetSelect);

        if (!src || !tgt) {
            e.preventDefault();
            alert('Select both source and target ledgers.');
            return;
        }
        if (src === tgt) {
            e.preventDefault();
            alert('Source and target must be different ledgers.');
            return;
        }
        const confirmEl = document.getElementById('confirmMerge');
        const typed = (confirmEl.value || '').trim().toUpperCase();
        if (typed !== 'MERGE') {
            e.preventDefault();
            alert('Type MERGE in the confirmation box to proceed.');
            confirmEl.focus();
            return;
        }
        confirmEl.value = 'MERGE';
        if (!confirm('Merge source into target? This cannot be undone.')) {
            e.preventDefault();
        }
    });
    document.getElementById('transferForm').addEventListener('submit', e => {
        if (document.getElementById('confirmTransfer').value !== 'TRANSFER' || !confirm('Transfer this vehicle sub-ledger to the target customer?')) e.preventDefault();
    });

    function buildTransferPreviewHtml(p) {
        const sl = p.sub_ledger ? `<code>${p.sub_ledger.sub_code}</code> ${p.sub_ledger.title}` : '—';
        return `<div class="small">
            <div><strong>Vehicle:</strong> ${p.vehicle.registration_number}</div>
            <div><strong>Sub-ledger:</strong> ${sl}</div>
            <div><strong>From:</strong> ${p.from_customer.code} — ${p.from_customer.name}</div>
            <div><strong>To:</strong> ${p.to_customer.code} — ${p.to_customer.name}</div>
            <div class="mt-1 text-muted">${p.voucher_lines_on_sub_ledger} voucher line(s) on this sub-ledger will move to the target customer.</div>
        </div>`;
    }

    @if($tab === 'transfer')
    if (tabTransfer) new bootstrap.Tab(tabTransfer).show();
    @endif
});
</script>
@endpush

@section('content')
<div class="container-fluid px-2 px-lg-3 py-3 grg-lm-page">
    <div class="grg-lm-hero">
        <div class="d-flex flex-column flex-md-row gap-3 align-items-start">
            <div class="grg-lm-hero-icon" aria-hidden="true">
                <i class="bi bi-diagram-3"></i>
            </div>
            <div class="flex-grow-1 min-w-0">
                <h1 class="mb-0">Merge &amp; transfer ledgers</h1>
                <p class="grg-lm-hero-lead">
                    Combine duplicate ledgers into one account, or move a single vehicle sub-ledger to another customer.
                    Preview balances and vouchers before you confirm.
                </p>
                <div class="grg-lm-pills">
                    <span class="grg-lm-pill"><i class="bi bi-people"></i> Merge duplicates</span>
                    <span class="grg-lm-pill"><i class="bi bi-truck"></i> Transfer vehicle (customers)</span>
                    <span class="grg-lm-pill"><i class="bi bi-shield-check"></i> Source kept for audit</span>
                </div>
            </div>
        </div>
    </div>

    @if(session('success'))
    <div class="alert alert-success d-flex align-items-start gap-2 mb-3">
        <i class="bi bi-check-circle-fill mt-1"></i>
        <div>{{ session('success') }}</div>
    </div>
    @endif
    @if(session('error'))
    <div class="alert alert-danger d-flex align-items-start gap-2 mb-3">
        <i class="bi bi-exclamation-triangle-fill mt-1"></i>
        <div>{{ session('error') }}</div>
    </div>
    @endif

    <div class="row g-3 g-lg-4">
        <div class="col-lg-8 col-xl-8">
            <div class="grg-lm-workspace">
                <div class="grg-lm-workspace-hd">
                    <ul class="nav nav-pills grg-lm-ops-tabs mb-0" id="opsTabs" role="tablist">
                        <li class="nav-item">
                            <button class="nav-link {{ $tab === 'merge' ? 'active' : '' }}" id="tab-merge" data-bs-toggle="tab" data-bs-target="#pane-merge" data-tab="merge" type="button">
                                <i class="bi bi-arrow-left-right me-1"></i> Merge ledgers
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link {{ $tab === 'transfer' ? 'active' : '' }} {{ $ledgerType !== 'customer' ? 'd-none' : '' }}" id="tab-transfer" data-bs-toggle="tab" data-bs-target="#pane-transfer" data-tab="transfer" type="button">
                                <i class="bi bi-truck me-1"></i> Transfer vehicle
                            </button>
                        </li>
                    </ul>
                    <div class="grg-lm-type-wrap">
                        <label for="ledgerType">Ledger type</label>
                        <select class="form-select form-select-sm" id="ledgerType">
                            @foreach($ledgerTypes as $t)
                            <option value="{{ $t }}" @selected($ledgerType === $t)>{{ ucfirst($t) }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="grg-lm-workspace-bd tab-content">
                    {{-- Merge pane --}}
                    <div class="tab-pane fade {{ $tab === 'merge' ? 'show active' : '' }}" id="pane-merge">
                        <form method="POST" action="{{ route('garage.ledger-merges.store') }}" id="mergeForm" novalidate>
                            @csrf
                            <input type="hidden" name="ledger_type" id="mergeLedgerType" value="{{ $ledgerType }}">

                            <div class="grg-lm-info-banner">
                                <i class="bi bi-info-circle"></i>
                                <div>
                                    <strong id="mergeTypeHint">Select two customers</strong> to merge.
                                    All vouchers, balances, and linked documents move to the target.
                                    The source ledger stays on file (inactive) for audit.
                                </div>
                            </div>

                            <div class="grg-lm-flow">
                                <div class="grg-lm-flow-card is-source">
                                    <div class="grg-lm-flow-card-hd">
                                        <span class="grg-lm-flow-badge">Source</span>
                                        <span class="small text-muted">Merge from</span>
                                    </div>
                                    <label class="form-label" id="mergeSourceLabel" for="sourceLedgerId">From ledger</label>
                                    <select name="source_ledger_id" id="sourceLedgerId" class="form-select no-chosen" required>
                                        <option value="">Loading…</option>
                                    </select>
                                </div>
                                <div class="grg-lm-flow-arrow" aria-hidden="true">
                                    <i class="bi bi-arrow-right"></i>
                                </div>
                                <div class="grg-lm-flow-card is-target">
                                    <div class="grg-lm-flow-card-hd">
                                        <span class="grg-lm-flow-badge">Target</span>
                                        <span class="small text-muted">Keep &amp; receive all</span>
                                    </div>
                                    <label class="form-label" id="mergeTargetLabel" for="targetLedgerId">To ledger</label>
                                    <select name="target_ledger_id" id="targetLedgerId" class="form-select no-chosen" required>
                                        <option value="">Loading…</option>
                                    </select>
                                </div>
                            </div>

                            <div class="mb-3">
                                <div class="grg-lm-section-title">Notes (optional)</div>
                                <textarea name="notes" class="form-control" rows="2" placeholder="Reason for merge, reference ticket, etc."></textarea>
                            </div>

                            <div id="previewBox" class="d-none"></div>

                            <div class="grg-lm-action-bar">
                                <div class="grg-lm-confirm-block">
                                    <label class="form-label" for="confirmMerge">Type <code class="text-danger">MERGE</code> to confirm</label>
                                    <input type="text" name="confirm_text" id="confirmMerge" class="form-control" placeholder="MERGE" autocomplete="off">
                                </div>
                                <div class="grg-lm-btn-group">
                                    <button type="button" class="btn btn-outline-primary" id="btnPreview">
                                        <i class="bi bi-eye me-1"></i> Preview &amp; verify
                                    </button>
                                    <button type="submit" class="btn btn-danger" id="btnMerge" disabled title="Select ledgers, preview, type MERGE">
                                        <i class="bi bi-check2-circle me-1"></i> Execute merge
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>

                    {{-- Transfer vehicle pane --}}
                    <div class="tab-pane fade {{ $tab === 'transfer' ? 'show active' : '' }}" id="pane-transfer">
                        <form method="POST" action="{{ route('garage.ledger-merges.transfer-vehicle') }}" id="transferForm" novalidate>
                            @csrf
                            <div class="grg-lm-info-banner" style="background:#fffbeb;border-color:#fde68a;color:#92400e;">
                                <i class="bi bi-truck"></i>
                                <div>Move one vehicle (<code>SL-xxxx</code> sub-ledger) to another customer. Related voucher lines follow the vehicle.</div>
                            </div>

                            <div class="grg-lm-transfer-grid">
                                <div>
                                    <label class="form-label" id="transferFromLabel" for="transferFromCustomerId">From customer</label>
                                    <select id="transferFromCustomerId" class="form-select no-chosen" required>
                                        <option value="">Loading…</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="form-label" id="transferToLabel" for="transferTargetCustomerId">To customer</label>
                                    <select name="target_ledger_id" id="transferTargetCustomerId" class="form-select no-chosen" required>
                                        <option value="">Loading…</option>
                                    </select>
                                </div>
                                <div class="grg-lm-field-full">
                                    <label class="form-label" for="transferVehicleId">Vehicle (sub-ledger)</label>
                                    <select class="form-select no-chosen" id="transferVehicleId" name="vehicle_id" required>
                                        <option value="">— Select from customer first —</option>
                                    </select>
                                    <div id="transferVehicleHint" class="form-text">Vehicles load from the <strong>from</strong> customer only (not the to customer).</div>
                                </div>
                                <div class="grg-lm-field-full">
                                    <label class="form-label">Notes (optional)</label>
                                    <textarea name="notes" class="form-control" rows="2" placeholder="Optional note for transfer log"></textarea>
                                </div>
                            </div>

                            <div id="transferPreviewBox" class="mt-3 p-3 border rounded d-none bg-light small"></div>

                            <div class="grg-lm-action-bar">
                                <div class="grg-lm-confirm-block">
                                    <label class="form-label" for="confirmTransfer">Type <code class="text-warning-emphasis">TRANSFER</code> to confirm</label>
                                    <input type="text" name="confirm_text" id="confirmTransfer" class="form-control" placeholder="TRANSFER" autocomplete="off">
                                </div>
                                <div class="grg-lm-btn-group">
                                    <button type="button" class="btn btn-outline-primary" id="btnPreviewTransfer">
                                        <i class="bi bi-eye me-1"></i> Preview
                                    </button>
                                    <button type="submit" class="btn btn-warning" id="btnTransferExec" disabled>
                                        <i class="bi bi-arrow-right-circle me-1"></i> Transfer vehicle
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-xl-4">
            <div class="grg-lm-sidebar">
                @if($ledgerType === 'customer' && $vehicleTransferHistory)
                <div class="grg-lm-side-card">
                    <div class="grg-lm-side-card-hd">
                        <i class="bi bi-clock-history"></i> Recent vehicle transfers
                    </div>
                    <div class="table-responsive">
                        <table class="table grg-lm-history-table table-hover mb-0">
                            <thead><tr><th>When</th><th>Vehicle</th><th>To</th></tr></thead>
                            <tbody>
                                @forelse($vehicleTransferHistory as $vt)
                                <tr>
                                    <td class="text-nowrap text-muted">{{ \Carbon\Carbon::parse($vt->transferred_at)->format('M d, H:i') }}</td>
                                    <td class="fw-semibold">{{ $vt->registration_number }}</td>
                                    <td><code class="small">{{ $vt->to_customer_code }}</code></td>
                                </tr>
                                @empty
                                <tr><td colspan="3" class="text-muted text-center py-3">No transfers yet</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                @endif

                <div class="grg-lm-side-card">
                    <div class="grg-lm-side-card-hd">
                        <i class="bi bi-journal-text"></i> Merge history
                        <span class="badge bg-light text-dark border ms-auto">{{ ucfirst($ledgerType) }}</span>
                    </div>
                    <div class="table-responsive">
                        <table class="table grg-lm-history-table table-hover mb-0">
                            <thead><tr><th>When</th><th>Merge</th><th></th></tr></thead>
                            <tbody>
                                @forelse($history as $row)
                                <tr>
                                    <td class="text-nowrap text-muted">{{ \Carbon\Carbon::parse($row->merged_at)->format('M d, H:i') }}</td>
                                    <td>
                                        <span class="grg-lm-merge-arrow">{{ $row->source_code }} → <strong>{{ $row->target_code }}</strong></span>
                                    </td>
                                    <td class="text-end">
                                        <a href="{{ route('garage.ledger-merges.show', $row->id) }}" class="btn btn-sm btn-outline-secondary">
                                            <i class="bi bi-file-text"></i>
                                        </a>
                                    </td>
                                </tr>
                                @empty
                                <tr><td colspan="3" class="text-muted text-center py-4">
                                    <i class="bi bi-inbox d-block fs-4 mb-2 opacity-50"></i>
                                    No merges yet for {{ $ledgerType }}s
                                </td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('garage.ledger-merges.partials.merge-preview-modal')
@endsection