{{-- Party details (compact multi-line) --}}
<div id="partyDetailsCard" style="display:none;margin-top:6px;padding:6px 10px;background:#eef2f7;border-radius:5px;font-size:1rem;line-height:1.6;color:#475569;">
    <div class="d-flex flex-wrap gap-x-4 gap-y-0" style="column-gap:16px;row-gap:0">
        <span id="pdGst"></span>
        <span id="pdMobile"></span>
        <span id="pdContact"></span>
        <span id="pdMsme"></span>
        <span id="pdOutstanding"></span>
        <span id="pdLedgerLink"></span>
    </div>
    <div id="pdAddress" style="color:#64748b"></div>
</div>

@push('scripts')
<script>
function loadPartyDetails(partyId) {
    const card = document.getElementById('partyDetailsCard');
    if (!partyId) { card.style.display = 'none'; return; }

    fetch(`{{ url('api/customers') }}/${partyId}/details`)
        .then(r => r.json())
        .then(d => {
            let hasData = false;

            const show = (elId, icon, value, cls) => {
                const el = document.getElementById(elId);
                if (value) {
                    el.innerHTML = `<i class="${icon} me-1" style="font-size:.7rem"></i><span class="${cls || ''}">${escapeHtmlPd(value)}</span>`;
                    el.style.display = 'inline';
                    hasData = true;
                } else { el.style.display = 'none'; }
            };

            show('pdGst',     'ti ti-file-text',   d.gst_number ? 'GST: ' + d.gst_number : '', 'fw-semibold');
            show('pdMobile',  'ti ti-phone',       d.mobile);
            show('pdContact', 'ti ti-user',        d.contact_person);
            show('pdMsme',    'ti ti-certificate',  d.msme_number ? 'MSME: ' + d.msme_number : '');

            // Address
            const addrEl = document.getElementById('pdAddress');
            const addr = [d.billing_address, d.state, d.pincode].filter(Boolean).join(', ');
            if (addr) { addrEl.innerHTML = `<i class="ti ti-map-pin me-1" style="font-size:.7rem"></i>${escapeHtmlPd(addr)}`; addrEl.style.display = ''; hasData = true; }
            else { addrEl.style.display = 'none'; }

            // Outstanding — unified net (positive = party owes you, negative = you owe party)
            const outEl = document.getElementById('pdOutstanding');
            const net = d.outstanding ?? 0;
            if (Math.abs(net) >= 0.5) {
                const amt = Math.abs(net).toLocaleString('en-IN', {minimumFractionDigits: 2});
                const owesYou = net > 0;
                const cls = owesYou ? 'text-danger' : 'text-success';
                const label = owesYou ? 'Owes you' : 'You owe';
                outEl.innerHTML = `<i class="ti ti-currency-rupee me-1" style="font-size:.7rem"></i><span class="fw-bold ${cls}">₹${amt} · ${label}</span>`;
                outEl.style.display = 'inline';
                hasData = true;
            } else { outEl.style.display = 'none'; }

            // Ledger link
            const ledgerEl = document.getElementById('pdLedgerLink');
            const ledgerBaseUrl = @json(route('ledger.show', ['party_id' => '__ID__']));
            ledgerEl.innerHTML = `<a href="${ledgerBaseUrl.replace('__ID__', partyId)}" target="_blank" class="text-primary" style="text-decoration:none"><i class="ti ti-book me-1"></i>Ledger</a>`;
            ledgerEl.style.display = 'inline';
            hasData = true;

            card.style.display = hasData ? '' : 'none';
        })
        .catch(() => { card.style.display = 'none'; });
}

function escapeHtmlPd(s) {
    const d = document.createElement('div');
    d.textContent = s;
    return d.innerHTML;
}
</script>
@endpush