@php
    $clientName    = $client->client_name ?? '—';
    $clientUserid  = $client->userid ?? '—';
    $clientPhone   = $client->clientsinfo->contact_no ?? '—';
@endphp

<style>
    .pl-badge { display:inline-block; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:20px; letter-spacing:.3px; text-transform:uppercase; }
    .pl-badge-blue  { background:#EFF6FF; color:#2563EB; }
    .pl-badge-green { background:#F0FDF4; color:#16A34A; }
    .pl-badge-gray  { background:#F1F5F9; color:#64748B; }
    .pl-amount  { font-weight:700; color:#059669; font-size:14px; }
    .pl-sub     { font-size:11.5px; color:#94A3B8; margin-top:2px; }
    .pl-mrno    { font-family:monospace; font-size:12px; color:#475569; }
    .pl-who     { display:flex; flex-direction:column; gap:2px; }
    .pl-who-row { display:flex; align-items:center; gap:5px; font-size:12px; }
    .pl-who-lbl { font-size:10px; font-weight:700; color:#94A3B8; text-transform:uppercase; width:14px; }
    .pl-icon    { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#F0FDF4; color:#16A34A; font-size:14px; flex-shrink:0; }
    .pl-tfoot   { background:#F8FAFC; border-top:2px solid #E2E8F0; }
    .pl-tfoot td { padding:10px 14px; font-weight:700; font-size:13px; color:#1E293B; }
    .pl-total-amt { color:#059669; font-size:15px; }
    .pl-actions { display:flex; gap:6px; align-items:center; justify-content:center; }
    .pl-act-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; font-size:13px; text-decoration:none; border:none; cursor:pointer; transition:opacity .15s; }
    .pl-act-btn:hover { opacity:.7; }
    .pl-act-print { background:#EFF6FF; color:#2563EB; }
    .pl-act-pdf   { background:#FEF2F2; color:#DC2626; }
</style>

<table class="cx-mtbl">
    <thead>
        <tr>
            <th style="width:36px">#</th>
            <th>Date &amp; Reference</th>
            <th>Description</th>
            <th>Handled By</th>
            <th>Type</th>
            <th class="text-right" style="padding-right:16px">Amount</th>
            <th class="text-center" style="width:80px">Actions</th>
        </tr>
    </thead>
    <tbody>
        @forelse ($payments as $p)
            @php
                $payData = [
                    'id'        => $p->id,
                    'mr'        => $p->money_receipt_number,
                    'date'      => \Carbon\Carbon::parse($p->created_at)->format('d M Y'),
                    'time'      => \Carbon\Carbon::parse($p->created_at)->format('h:i A'),
                    'desc'      => $p->description,
                    'amount'    => number_format($p->paid_amount, 2),
                    'discount'  => number_format($p->discount_amount, 2),
                    'type'      => $p->income->name ?? 'Payment',
                    'enteredBy' => $p->user->name ?? 'Online',
                    'collectedBy' => $p->employee->name ?? '',
                    'clientName'  => $clientName,
                    'clientId'    => $clientUserid,
                    'clientPhone' => $clientPhone,
                ];
            @endphp
            <tr>
                <td><div class="pl-icon"><i class="fa fa-money-bill-wave"></i></div></td>

                <td>
                    <div style="font-size:13px;font-weight:600;color:#1E293B">{{ \Carbon\Carbon::parse($p->created_at)->format('d M Y') }}</div>
                    <div class="pl-sub">{{ \Carbon\Carbon::parse($p->created_at)->format('h:i A') }}</div>
                    <div class="pl-mrno mt-1">{{ $p->money_receipt_number }}</div>
                    @if ($p->extend_to_date)
                        <div class="pl-sub">
                            {{ $p->extend_from_date ? \Carbon\Carbon::parse($p->extend_from_date)->format('d M Y') : 'N/A' }}
                            &rarr; {{ \Carbon\Carbon::parse($p->extend_to_date)->format('d M Y') }}
                        </div>
                    @endif
                </td>

                <td style="max-width:220px">
                    <div style="font-size:13px;color:#334155;line-height:1.4">{{ $p->description }}</div>
                    @if(isset($p->user) && $p->user->name === 'Bkash-Webhook')
                        <div class="pl-sub">{{ $p->customerMsisdn ?? '' }}</div>
                    @endif
                </td>

                <td>
                    <div class="pl-who">
                        <div class="pl-who-row">
                            <span class="pl-who-lbl">E</span>
                            <span class="pl-badge pl-badge-blue">{{ $p->user->name ?? 'Online' }}</span>
                        </div>
                        @if($p->employee)
                            <div class="pl-who-row">
                                <span class="pl-who-lbl">C</span>
                                <span class="pl-badge pl-badge-gray">{{ $p->employee->name }}</span>
                            </div>
                        @endif
                    </div>
                </td>

                <td><span class="pl-badge pl-badge-green">{{ $p->income->name ?? 'Payment' }}</span></td>

                <td class="text-right" style="padding-right:16px">
                    <div class="pl-amount">{{ number_format($p->paid_amount, 2) }}</div>
                    @if($p->discount_amount > 0)
                        <div class="pl-sub">Disc: {{ number_format($p->discount_amount, 2) }}</div>
                    @endif
                </td>

                <td>
                    <div class="pl-actions">
                        @if(checkSettings('print-invoice') == 'enable')
                            <a href="{{ route('invoice-print', $p->id) }}" target="_blank"
                               class="pl-act-btn pl-act-print" title="Print Invoice">
                                <i class="fa fa-print"></i>
                            </a>
                        @endif
                        <button class="pl-act-btn pl-act-pdf pl-pdf-btn"
                                title="Download PDF"
                                data-payment='@json($payData)'>
                            <i class="fa fa-file-pdf"></i>
                        </button>
                    </div>
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="7" class="text-center" style="padding:32px;color:#94A3B8">
                    <i class="fa fa-inbox" style="font-size:28px;display:block;margin-bottom:8px"></i>
                    No payment records found.
                </td>
            </tr>
        @endforelse
    </tbody>
    @if($payments->isNotEmpty())
        <tfoot>
            <tr class="pl-tfoot">
                <td colspan="5"></td>
                <td class="text-right pl-total-amt" style="padding-right:16px">
                    {{ number_format($payments->sum('paid_amount'), 2) }} TK
                </td>
                <td></td>
            </tr>
        </tfoot>
    @endif
</table>

{{-- Load jsPDF once --}}
@once
<script>
(function loadJsPDF() {
    if (window._jspdfLoaded) return;
    window._jspdfLoaded = true;
    var s = document.createElement('script');
    s.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';
    document.head.appendChild(s);
})();

$(document).off('click.plpdf').on('click.plpdf', '.pl-pdf-btn', function () {
    var p = $(this).data('payment');

    function doGenerate() {
        var jsPDF = window.jspdf.jsPDF;
        var doc   = new jsPDF({ unit: 'mm', format: [148, 210], orientation: 'portrait' });
        var W     = 148, M = 14;

        /* ── Header band ── */
        doc.setFillColor(37, 99, 235);
        doc.rect(0, 0, W, 42, 'F');

        /* Accent stripe */
        doc.setFillColor(5, 150, 105);
        doc.rect(0, 42, W, 3, 'F');

        /* Company name */
        doc.setTextColor(255, 255, 255);
        doc.setFontSize(17);
        doc.setFont('helvetica', 'bold');
        doc.text('{{ $companyName }}', M, 15);

        doc.setFontSize(9);
        doc.setFont('helvetica', 'normal');
        doc.setTextColor(186, 230, 253);
        doc.text('Payment Receipt', M, 22);

        /* Right — receipt meta */
        doc.setFontSize(8);
        doc.setTextColor(255, 255, 255);
        doc.text('Receipt No.', W - M, 12, { align: 'right' });
        doc.setFont('helvetica', 'bold');
        doc.setFontSize(9);
        doc.text(p.mr, W - M, 18, { align: 'right' });
        doc.setFont('helvetica', 'normal');
        doc.setFontSize(8);
        doc.setTextColor(186, 230, 253);
        doc.text(p.date + '  ' + p.time, W - M, 25, { align: 'right' });

        /* ── Client info card ── */
        var cardY = 52;
        doc.setFillColor(248, 250, 252);
        doc.roundedRect(M, cardY, W - M * 2, 28, 2, 2, 'F');
        doc.setDrawColor(226, 232, 240);
        doc.roundedRect(M, cardY, W - M * 2, 28, 2, 2, 'S');

        /* Left — client */
        doc.setTextColor(148, 163, 184);
        doc.setFontSize(7.5);
        doc.setFont('helvetica', 'bold');
        doc.text('BILLED TO', M + 5, cardY + 7);

        doc.setTextColor(30, 41, 59);
        doc.setFontSize(11);
        doc.setFont('helvetica', 'bold');
        doc.text(p.clientName, M + 5, cardY + 14);

        doc.setFontSize(8.5);
        doc.setFont('helvetica', 'normal');
        doc.setTextColor(71, 85, 105);
        doc.text('User: ' + p.clientId + '   Phone: ' + p.clientPhone, M + 5, cardY + 21);

        /* Right — payment ID badge */
        doc.setFillColor(239, 246, 255);
        doc.roundedRect(W - M - 36, cardY + 5, 36 - 5, 16, 2, 2, 'F');
        doc.setTextColor(148, 163, 184);
        doc.setFontSize(7);
        doc.setFont('helvetica', 'bold');
        doc.text('PAYMENT ID', W - M - 3, cardY + 11, { align: 'right' });
        doc.setTextColor(37, 99, 235);
        doc.setFontSize(11);
        doc.setFont('helvetica', 'bold');
        doc.text('#' + p.id, W - M - 3, cardY + 18, { align: 'right' });

        /* ── Table ── */
        var tY = 90;
        /* Header row */
        doc.setFillColor(241, 245, 249);
        doc.rect(M, tY, W - M * 2, 8, 'F');
        doc.setDrawColor(226, 232, 240);
        doc.rect(M, tY, W - M * 2, 8, 'S');

        doc.setTextColor(100, 116, 139);
        doc.setFontSize(7.5);
        doc.setFont('helvetica', 'bold');
        doc.text('DESCRIPTION', M + 3, tY + 5.5);
        doc.text('TYPE', M + 78, tY + 5.5);
        doc.text('AMOUNT', W - M - 3, tY + 5.5, { align: 'right' });

        /* Data row */
        var rY = tY + 11;
        var descLines = doc.splitTextToSize(p.desc, 70);
        doc.setTextColor(51, 65, 85);
        doc.setFontSize(9.5);
        doc.setFont('helvetica', 'normal');
        doc.text(descLines, M + 3, rY);
        doc.text(p.type, M + 78, rY);

        doc.setFillColor(240, 253, 244);
        doc.roundedRect(W - M - 28, rY - 4, 28, 9, 1, 1, 'F');
        doc.setTextColor(5, 150, 105);
        doc.setFont('helvetica', 'bold');
        doc.setFontSize(10);
        doc.text(p.amount, W - M - 3, rY + 2, { align: 'right' });

        /* Row border */
        var afterRow = rY + descLines.length * 5 + 4;
        doc.setDrawColor(226, 232, 240);
        doc.rect(M, tY, W - M * 2, afterRow - tY, 'S');

        /* ── Total box ── */
        var totY = afterRow + 8;
        doc.setFillColor(240, 253, 244);
        doc.roundedRect(W - M - 50, totY, 50, 22, 3, 3, 'F');
        doc.setDrawColor(167, 243, 208);
        doc.roundedRect(W - M - 50, totY, 50, 22, 3, 3, 'S');

        doc.setTextColor(100, 116, 139);
        doc.setFontSize(8);
        doc.setFont('helvetica', 'normal');
        doc.text('Total Paid', W - M - 3, totY + 7, { align: 'right' });

        doc.setTextColor(5, 150, 105);
        doc.setFontSize(14);
        doc.setFont('helvetica', 'bold');
        doc.text(p.amount + ' TK', W - M - 3, totY + 16, { align: 'right' });

        /* Discount */
        if (parseFloat(p.discount) > 0) {
            doc.setTextColor(100, 116, 139);
            doc.setFontSize(8.5);
            doc.setFont('helvetica', 'normal');
            doc.text('Discount: ' + p.discount + ' TK', M, totY + 10);
        }

        /* ── Handled by ── */
        var hY = totY + 32;
        doc.setDrawColor(226, 232, 240);
        doc.line(M, hY, W - M, hY);

        doc.setTextColor(100, 116, 139);
        doc.setFontSize(8);
        doc.setFont('helvetica', 'normal');
        doc.text('Entered by: ' + p.enteredBy, M, hY + 7);
        if (p.collectedBy) {
            doc.text('Collected by: ' + p.collectedBy, W - M, hY + 7, { align: 'right' });
        }

        /* ── Footer band ── */
        doc.setFillColor(37, 99, 235);
        doc.rect(0, 188, W, 22, 'F');

        doc.setTextColor(255, 255, 255);
        doc.setFontSize(10);
        doc.setFont('helvetica', 'bold');
        doc.text('Thank you for your payment!', W / 2, 199, { align: 'center' });
        doc.setFontSize(7.5);
        doc.setFont('helvetica', 'normal');
        doc.setTextColor(186, 230, 253);
        doc.text('This is a computer-generated receipt. No signature required.', W / 2, 205, { align: 'center' });

        doc.save('receipt-' + p.mr + '.pdf');
    }

    /* Wait for jsPDF to finish loading if needed */
    if (window.jspdf && window.jspdf.jsPDF) {
        doGenerate();
    } else {
        var tries = 0;
        var wait = setInterval(function () {
            if (window.jspdf && window.jspdf.jsPDF) {
                clearInterval(wait);
                doGenerate();
            } else if (++tries > 40) {
                clearInterval(wait);
                alert('PDF library failed to load. Check your internet connection.');
            }
        }, 100);
    }
});
</script>
@endonce