@extends('layouts.app')
@section('title', 'M-Pesa Deposits')

@section('content')
<style>
@media print {
    .no-print { display: none !important; }
    body { background: #fff; font-size: 12px; }
    .stat-card { border: 1px solid #ddd; padding: 8px; }
}
.stat-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
}
.stat-card .stat-label { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.stat-card .stat-value { font-size: 18px; font-weight: 700; margin: 4px 0 0; }

/* ── Channel tabs ────────────────────────────────────────────────── */
.mpesa-tabs { display: flex; gap: 0; border-bottom: 2px solid #e5e7eb; margin-bottom: 18px; }
.mpesa-tab {
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    text-decoration: none;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mpesa-tab:hover { color: #5c1269; }
.mpesa-tab.active { color: #5c1269; border-bottom-color: #c026d3; }
.mpesa-tab .count { font-size: 11px; background: #f3f4f6; color: #6b7280; padding: 1px 8px; border-radius: 999px; font-weight: 700; }
.mpesa-tab.active .count { background: #fae8ff; color: #86198f; }
</style>

{{-- ═══ HEADER ═══ --}}
<div class="no-print flex flex-wrap items-center justify-between gap-3 mb-4">
    {{-- Compact title block — matches the Daily Cash Collections style:
         bold heading on top, single-line date below. No breadcrumb, no
         long descriptive subtitle. Shows a single date when from==to,
         otherwise the range. --}}
    <div>
        <h1 class="text-xl font-bold text-gray-900" style="margin:0">M-Pesa Deposits</h1>
        <p class="text-sm text-gray-400" style="margin:2px 0 0">
            @if($from->format('Y-m-d') === $to->format('Y-m-d'))
                {{ $from->format('d M Y') }}
            @else
                {{ $from->format('d M Y') }} — {{ $to->format('d M Y') }}
            @endif
        </p>
    </div>
    <div class="flex gap-2 items-center flex-wrap">
        <form method="GET" class="flex gap-2 items-center">
            <input type="date" name="from" value="{{ $from->format('Y-m-d') }}" class="form-input text-xs w-32 no-flatpickr">
            <span class="text-xs text-gray-400">to</span>
            <input type="date" name="to" value="{{ $to->format('Y-m-d') }}" class="form-input text-xs w-32 no-flatpickr">
            {{-- Carry the current verify filter through the GET form
                 so applying a date range doesn't reset the workload view. --}}
            @if($verifyFilter !== 'all')
                <input type="hidden" name="verified" value="{{ $verifyFilter }}">
            @endif
            <button class="btn-primary text-xs">Filter</button>
            @if(request('from') || request('to'))
                {{-- "Today" reset keeps the verify filter intact — only date is reset. --}}
                <a href="{{ route('reports.mpesa-channel',
                       $verifyFilter !== 'all'
                       ? ['channel' => $channel, 'verified' => $verifyFilter]
                       : ['channel' => $channel]) }}"
                   class="btn-secondary text-xs">Today</a>
            @endif
        </form>
        @if($isAdmin)
            <a href="{{ route('reports.mpesa-channel.duplicates') }}"
               class="btn-secondary text-xs"
               style="background:#fef3c7;color:#92400e;border:1px solid #fbbf24"
               title="Find and clean up duplicate M-Pesa payments (same code, amount, patient)">
                ⚠ Find Duplicates
            </a>
        @endif
        @include('reports._export-buttons', ['exportType' => 'mpesa-channel'])
    </div>
</div>

{{-- ═══ CHANNEL TABS ═══ --}}
{{-- Date filters survive when switching tabs so staff can compare the
     same window across both rails without re-picking dates. --}}
@php
    // Shared param bag: date window AND verify-filter state. Used by
    // every link on this page so switching tabs or date-range presets
    // preserves the user's current filter selection.
    $linkParams = array_filter([
        'from'     => request('from'),
        'to'       => request('to'),
        'verified' => $verifyFilter !== 'all' ? $verifyFilter : null,
    ]);
    // Older code references $dateParams for the channel-tab links.
    // Keep that variable name so the pattern is consistent.
    $dateParams = $linkParams;
@endphp
<div class="mpesa-tabs no-print">
    <a href="{{ route('reports.mpesa-channel', array_merge(['channel' => 'all'], $linkParams)) }}"
       class="mpesa-tab {{ $channel === 'all' ? 'active' : '' }}">
        All Channels
        @if($channel === 'all')<span class="count">{{ number_format($summary['count']) }}</span>@endif
    </a>
    <a href="{{ route('reports.mpesa-channel', array_merge(['channel' => 'kcb'], $linkParams)) }}"
       class="mpesa-tab {{ $channel === 'kcb' ? 'active' : '' }}">
        KCB Paybill
        @if($channel === 'kcb')<span class="count">{{ number_format($summary['count']) }}</span>@endif
    </a>
    <a href="{{ route('reports.mpesa-channel', array_merge(['channel' => 'bingwa_sacco'], $linkParams)) }}"
       class="mpesa-tab {{ $channel === 'bingwa_sacco' ? 'active' : '' }}">
        Bingwa Sacco
        @if($channel === 'bingwa_sacco')<span class="count">{{ number_format($summary['count']) }}</span>@endif
    </a>
    {{-- OTC tab — separate cleanup view for OTC M-Pesa rows.
         Shows the active count when on tab; otherwise shows the
         UNASSIGNED count from $byChannel so admin can see how many
         rows still need a rail picked even when on a different tab.
         The unassigned badge is amber so it stands out as work-to-do. --}}
    <a href="{{ route('reports.mpesa-channel', array_merge(['channel' => 'otc'], $linkParams)) }}"
       class="mpesa-tab {{ $channel === 'otc' ? 'active' : '' }}">
        OTC M-Pesa
        @if($channel === 'otc')
            <span class="count">{{ number_format($summary['count']) }}</span>
        @elseif(($byChannel['otc_unassigned']['count'] ?? 0) > 0)
            <span class="count"
                  style="background:#fef3c7;color:#b45309"
                  title="OTC rows still needing a channel assigned">
                {{ number_format($byChannel['otc_unassigned']['count']) }} ⚠
            </span>
        @endif
    </a>
</div>

{{-- ═══ QUICK PRESETS (shortcut date ranges) + VERIFY FILTER ═══
     The verify-state pills (All / Unverified / Verified) live on the
     same row to save vertical space — they're a natural extension of
     "narrow the view" actions. Every date-range link below carries
     the current $verifyFilter via $vp so toggling a date preset
     doesn't reset the workload view. --}}
@php
    // verify-filter param survives the date-range links. Empty when
    // 'all' so we don't pollute URLs with redundant query string.
    $vp = $verifyFilter !== 'all' ? ['verified' => $verifyFilter] : [];
@endphp
<div class="no-print flex gap-2 flex-wrap mb-4 text-xs items-center">
    <span class="text-gray-400 self-center">Quick range:</span>
    <a href="{{ route('reports.mpesa-channel', array_merge(['channel' => $channel], $vp)) }}"
       class="px-2.5 py-1 rounded bg-gray-100 text-gray-700 hover:bg-gray-200" style="text-decoration:none">Today</a>
    <a href="{{ route('reports.mpesa-channel', array_merge(['channel' => $channel, 'from' => now()->subDay()->toDateString(), 'to' => now()->subDay()->toDateString()], $vp)) }}"
       class="px-2.5 py-1 rounded bg-gray-100 text-gray-700 hover:bg-gray-200" style="text-decoration:none">Yesterday</a>
    <a href="{{ route('reports.mpesa-channel', array_merge(['channel' => $channel, 'from' => now()->subDays(6)->toDateString(), 'to' => now()->toDateString()], $vp)) }}"
       class="px-2.5 py-1 rounded bg-gray-100 text-gray-700 hover:bg-gray-200" style="text-decoration:none">Last 7 days</a>
    <a href="{{ route('reports.mpesa-channel', array_merge(['channel' => $channel, 'from' => now()->startOfMonth()->toDateString(), 'to' => now()->toDateString()], $vp)) }}"
       class="px-2.5 py-1 rounded bg-gray-100 text-gray-700 hover:bg-gray-200" style="text-decoration:none">This month</a>
    <a href="{{ route('reports.mpesa-channel', array_merge(['channel' => $channel, 'from' => now()->subMonth()->startOfMonth()->toDateString(), 'to' => now()->subMonth()->endOfMonth()->toDateString()], $vp)) }}"
       class="px-2.5 py-1 rounded bg-gray-100 text-gray-700 hover:bg-gray-200" style="text-decoration:none">Last month</a>
    <a href="{{ route('reports.mpesa-channel', array_merge(['channel' => $channel, 'from' => '2024-01-01', 'to' => now()->toDateString()], $vp)) }}"
       class="px-2.5 py-1 rounded bg-gray-100 text-gray-700 hover:bg-gray-200" style="text-decoration:none">All time (since HMIS)</a>

    {{-- Visual separator before the verify-state pills --}}
    <span class="text-gray-300 self-center mx-1">|</span>
    <span class="text-gray-400 self-center">Show:</span>

    {{-- ═══ VERIFY-STATE FILTER PILLS ═══
         Three mutually-exclusive pills. The active one wears the
         CRH purple-pink palette; the others are quiet grey. Each
         link carries the current date window via $dateParams so
         switching the filter doesn't reset your date range.
         The pending count and verified count from $summary live on
         the pills as small badges so you see your workload size at
         a glance without having to click. --}}
    @php
        $filterLinks = [
            'all'      => ['label' => 'All',        'count' => $summary['count']],
            'pending'  => ['label' => 'Unverified', 'count' => $summary['pending_count']],
            'verified' => ['label' => 'Verified',   'count' => $summary['verified_count']],
        ];
    @endphp
    @foreach($filterLinks as $key => $info)
        @php
            $isActive = $verifyFilter === $key;
            // 'all' is the default state — omit the verified param
            // entirely when picking 'all' so the URL stays clean.
            $params = array_merge(['channel' => $channel], $dateParams);
            unset($params['verified']);
            if ($key !== 'all') {
                $params['verified'] = $key;
            }
            // Active-state palette per filter so the pill colour
            // hints at what state you're looking at.
            if ($isActive) {
                if ($key === 'pending') {
                    $pillStyle = 'background:#fef3c7;color:#b45309;border:1px solid #f59e0b';
                } elseif ($key === 'verified') {
                    $pillStyle = 'background:#dcfce7;color:#15803d;border:1px solid #16a34a';
                } else {
                    $pillStyle = 'background:#fae8ff;color:#86198f;border:1px solid #c026d3';
                }
            } else {
                $pillStyle = 'background:#f3f4f6;color:#6b7280;border:1px solid transparent';
            }
        @endphp
        <a href="{{ route('reports.mpesa-channel', $params) }}"
           class="px-2.5 py-1 rounded font-semibold"
           style="{{ $pillStyle }}; text-decoration:none">
            {{ $info['label'] }}
            <span class="ml-1 px-1.5 rounded-full text-[10px]"
                  style="background:rgba(0,0,0,0.06)">{{ number_format($info['count']) }}</span>
        </a>
    @endforeach
</div>

{{-- ═══ SUMMARY CARDS ═══
     Stats bar restored on the All Channels tab only (May 19 2026).
     Four cards in a single row:
       (1) Total Bank Deposits — sum of KCB + Bingwa allocated rows.
           OTC is treated as transient: it's a cleanup bucket, and
           once admin assigns each OTC row to its real rail it lands
           in KCB or Bingwa, so unassigned OTC is excluded here on
           purpose (it's not yet 'bank' money in any meaningful sense).
       (2) KCB Deposits — KCB-only total.
       (3) Bingwa Deposits — Bingwa-only total.
       (4) Unverified Deposits — sum of all rows where bank_verified_at
           IS NULL across both rails. The admin workload at a glance.

     Cards reflect PERIOD totals from $allPayments — they don't shift
     when the verify-filter pill changes (admin asked for a stable
     snapshot of the date window). Cards only show on the All tab;
     KCB / Bingwa / OTC stay table-only as previously agreed. --}}
@if($channel === 'all')
@php
    $totalBankDeposits = $byChannel['kcb']['amount'] + $byChannel['bingwa_sacco']['amount'];
@endphp
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
    <div class="stat-card" style="border-left:3px solid #16a34a">
        <p class="stat-label">Total Bank Deposits</p>
        <p class="stat-value text-green-600">KES {{ number_format($totalBankDeposits) }}</p>
    </div>
    <div class="stat-card" style="border-left:3px solid #2563eb">
        <p class="stat-label" style="color:#1d4ed8">KCB Deposits</p>
        <p class="stat-value" style="color:#1e3a8a">KES {{ number_format($byChannel['kcb']['amount']) }}</p>
    </div>
    <div class="stat-card" style="border-left:3px solid #c026d3">
        <p class="stat-label" style="color:#a21caf">Bingwa Deposits</p>
        <p class="stat-value" style="color:#701a75">KES {{ number_format($byChannel['bingwa_sacco']['amount']) }}</p>
    </div>
    <div class="stat-card" style="border-left:3px solid #f59e0b">
        <p class="stat-label" style="color:#b45309">Unverified Deposits</p>
        <p class="stat-value" style="color:#92400e">KES {{ number_format($summary['pending_amount']) }}</p>
    </div>
</div>
@else
{{-- KCB / Bingwa / OTC tabs stay table-only — small spacer keeps
     the filter row off the table. --}}
<div class="mb-3"></div>
@endif

{{-- ═══ TRANSACTION DETAIL ═══ --}}
<div class="bg-white rounded-xl border shadow-sm" id="reportTable">
    <div class="px-5 py-3 border-b flex items-center justify-between">
        <h3 class="text-sm font-bold text-gray-800">
            {{ $channelLabel }} — Transaction Detail
            @if($verifyFilter === 'pending')
                <span class="text-xs font-normal text-amber-700 ml-1">(unverified only)</span>
            @elseif($verifyFilter === 'verified')
                <span class="text-xs font-normal text-green-700 ml-1">(verified only)</span>
            @endif
        </h3>
        @if($payments->count())
            <span class="text-xs text-gray-500">
                {{ $payments->count() }} payment(s)
                @if($verifyFilter !== 'all') of {{ $summary['count'] }} @endif
            </span>
        @endif
    </div>
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="bg-gray-50">
                    <th class="table-header">Date / Time</th>
                    @if($channel === 'all' || $channel === 'otc')
                        <th class="table-header text-center" style="width:120px">Channel</th>
                    @endif
                    <th class="table-header">Patient</th>
                    {{-- MRN + Visit hidden on OTC tab since most OTC sales
                         are walk-ins with no MRN and never link to a visit.
                         Kept on All / KCB / Bingwa for cross-context. --}}
                    @if($channel !== 'otc')
                        <th class="table-header">MRN</th>
                        <th class="table-header">Visit</th>
                    @endif
                    <th class="table-header">M-Pesa Code</th>
                    {{-- Reference column removed everywhere May 19 2026 —
                         the field was almost always empty so it just
                         added horizontal width. The mpesa_code column
                         is the M-Pesa identifier admins actually use. --}}
                    <th class="table-header text-right">Amount</th>
                    <th class="table-header">Received By</th>
                    <th class="table-header text-center" style="width:120px">
                        {{-- Icon-only column to save horizontal space. Hover the
                             icon for the full "Pending" / "Verified by …" tooltip.
                             Admin pending rows also get a move-arrow on the left.
                             Unassigned OTC rows get [KCB|Bingwa] assign buttons. --}}
                        Bank
                    </th>
                </tr>
            </thead>
            <tbody>
            @forelse($payments as $p)
                {{-- Per-row channel detection — same string match the
                     controller's query uses, so what's shown here is
                     always consistent with what counts in the summary.
                     OTC lineage is read from the underlying invoice's
                     notes so it survives a description rewrite. --}}
                @php
                    $rowIsKcb    = stripos((string) $p->description, 'KCB')    !== false;
                    $rowIsBingwa = stripos((string) $p->description, 'Bingwa') !== false;
                    $rowIsOtc    = $p->invoice && stripos((string) $p->invoice->notes, 'OTC sale') !== false;
                    // Unassigned OTC: an OTC row that still carries the
                    // placeholder description. These need an admin to
                    // pick a rail before the verify pipeline applies.
                    $rowIsUnassignedOtc = $rowIsOtc && $p->description === 'OTC sale';
                @endphp
                <tr class="border-b border-gray-50 hover:bg-gray-50/50 {{ $rowIsUnassignedOtc ? 'unassigned-row' : '' }}" data-payment-id="{{ $p->id }}">
                    <td class="table-cell text-xs whitespace-nowrap">
                        {{ $p->created_at->format('d M Y') }}
                        <span class="text-gray-400">{{ $p->created_at->format('H:i') }}</span>
                    </td>
                    @if($channel === 'all' || $channel === 'otc')
                        {{-- Channel pill — blue for KCB, purple for Bingwa,
                             amber for unassigned OTC. Inline styles for
                             portability. The OTC pill always shows on the
                             OTC tab so admin can see at a glance which
                             rows still need work (amber) versus already
                             assigned (blue/purple with small OTC marker). --}}
                        <td class="table-cell text-center" style="white-space:nowrap">
                            @if($rowIsKcb)
                                <span class="channel-pill"
                                      style="display:inline-block;padding:2px 10px;border-radius:999px;font-size:10.5px;font-weight:700;background:#dbeafe;color:#1e40af;border:1px solid #93c5fd">
                                    KCB
                                </span>
                                @if($rowIsOtc)
                                    <span style="display:inline-block;margin-left:3px;font-size:9px;color:#6b7280" title="Originally OTC">OTC</span>
                                @endif
                            @elseif($rowIsBingwa)
                                <span class="channel-pill"
                                      style="display:inline-block;padding:2px 10px;border-radius:999px;font-size:10.5px;font-weight:700;background:#fae8ff;color:#86198f;border:1px solid #d8b4fe">
                                    Bingwa
                                </span>
                                @if($rowIsOtc)
                                    <span style="display:inline-block;margin-left:3px;font-size:9px;color:#6b7280" title="Originally OTC">OTC</span>
                                @endif
                            @elseif($rowIsUnassignedOtc)
                                <span class="channel-pill"
                                      style="display:inline-block;padding:2px 10px;border-radius:999px;font-size:10.5px;font-weight:700;background:#fef3c7;color:#b45309;border:1px solid #f59e0b"
                                      title="OTC M-Pesa row not yet assigned to KCB or Bingwa">
                                    OTC ⚠
                                </span>
                            @else
                                <span class="text-xs text-gray-400">—</span>
                            @endif
                        </td>
                    @endif
                    <td class="table-cell text-xs font-medium">{{ $p->invoice?->patient?->full_name ?? $p->patient?->full_name ?? '—' }}</td>
                    @if($channel !== 'otc')
                        <td class="table-cell font-mono text-xs text-gray-500">{{ $p->invoice?->patient?->mrn ?? $p->patient?->mrn ?? '—' }}</td>
                        <td class="table-cell font-mono text-xs">{{ $p->invoice?->visit?->visit_number ?? '—' }}</td>
                    @endif
                    <td class="table-cell font-mono text-xs font-semibold">{{ $p->mpesa_code ?? '—' }}</td>
                    {{-- Reference column removed (May 19 2026). --}}
                    <td class="table-cell text-xs text-right font-semibold text-green-600">KES {{ number_format($p->amount) }}</td>
                    <td class="table-cell text-xs">{{ $p->receiver->name ?? '—' }}</td>
                    {{-- ═══ BANK VERIFY ICON + ACTIONS ═══
                         Four mutually exclusive states share one column:
                         (1) Verified — solid green tick alone, tooltip shows who/when. No buttons (locked).
                         (2) Pending + admin + UNASSIGNED OTC — two assign buttons [KCB|Bingwa].
                             No verify until row is assigned, since you can't bank-verify a
                             row that hasn't been allocated to a statement.
                         (3) Pending + admin + assigned — channel-move arrow (left) + clickable amber clock.
                         (4) Pending + non-admin — amber clock alone, not clickable.
                         The cell content swaps in-place after a successful verify so the page
                         keeps its date filter and channel tab. A successful channel move or
                         assign reloads the page (the row may no longer belong on this tab). --}}
                    <td class="table-cell text-center verify-cell" style="white-space:nowrap">
                        @if($p->isBankVerified())
                            <span class="verify-icon verified"
                                  title="Verified by {{ $p->bankVerifier?->name ?? '—' }} on {{ $p->bank_verified_at?->format('d M Y H:i') }}">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10" fill="#dcfce7" stroke="#16a34a"/>
                                    <path d="M8 12l3 3 5-6" stroke="#16a34a"/>
                                </svg>
                            </span>
                        @elseif($isAdmin && $rowIsUnassignedOtc)
                            {{-- Unassigned OTC: two-button assign UI.
                                 Reload after success since the row will
                                 disappear from the OTC unassigned set. --}}
                            <button type="button"
                                    class="assign-btn assign-kcb"
                                    onclick="assignOtcChannel({{ $p->id }}, 'kcb', 'KCB Paybill', {{ (int) $p->amount }}, this)"
                                    title="Assign this OTC payment to KCB Paybill"
                                    style="background:#dbeafe;color:#1e40af;border:1px solid #93c5fd;border-radius:4px;padding:1px 8px;font-size:10.5px;font-weight:700;cursor:pointer;margin-right:3px;vertical-align:middle">
                                KCB
                            </button>
                            <button type="button"
                                    class="assign-btn assign-bingwa"
                                    onclick="assignOtcChannel({{ $p->id }}, 'bingwa_sacco', 'Bingwa Sacco', {{ (int) $p->amount }}, this)"
                                    title="Assign this OTC payment to Bingwa Sacco"
                                    style="background:#fae8ff;color:#86198f;border:1px solid #d8b4fe;border-radius:4px;padding:1px 8px;font-size:10.5px;font-weight:700;cursor:pointer;vertical-align:middle">
                                Bingwa
                            </button>
                        @elseif($isAdmin)
                            @php
                                // Move-arrow target depends on the ROW's own channel,
                                // not the tab. On KCB/Bingwa tabs every row is the
                                // same channel so this collapses to the simple flip.
                                // On the 'all' / 'otc' tabs each row could be either
                                // rail, so we read the row's own description.
                                if (in_array($channel, ['all', 'otc'])) {
                                    $otherChannel = $rowIsKcb ? 'bingwa_sacco' : 'kcb';
                                    $otherLabel   = $rowIsKcb ? 'Bingwa Sacco' : 'KCB Paybill';
                                } else {
                                    $otherChannel = $channel === 'kcb' ? 'bingwa_sacco' : 'kcb';
                                    $otherLabel   = $channel === 'kcb' ? 'Bingwa Sacco' : 'KCB Paybill';
                                }
                            @endphp
                            {{-- Move arrow — pending + admin only --}}
                            <button type="button"
                                    class="move-arrow"
                                    onclick="moveChannel({{ $p->id }}, '{{ $otherChannel }}', '{{ $otherLabel }}', {{ (int) $p->amount }}, this)"
                                    title="Move this transaction to {{ $otherLabel }}"
                                    style="background:none;border:0;padding:2px;cursor:pointer;margin-right:4px;vertical-align:middle">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    {{-- Horizontal double-arrow icon: ↔ --}}
                                    <path d="M7 9 3 12l4 3"/>
                                    <path d="M17 9l4 3-4 3"/>
                                    <line x1="3" y1="12" x2="21" y2="12"/>
                                </svg>
                            </button>
                            {{-- Verify clock --}}
                            <button type="button"
                                    class="verify-icon pending clickable"
                                    onclick="verifyPayment({{ $p->id }}, this)"
                                    title="Pending — click to mark as verified against the {{ $channelLabel }} statement"
                                    style="background:none;border:0;padding:0;cursor:pointer;vertical-align:middle">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10" fill="#fef3c7" stroke="#f59e0b"/>
                                    <path d="M12 7v5l3 2" stroke="#b45309"/>
                                </svg>
                            </button>
                        @else
                            {{-- Non-admin pending — different tooltip for
                                 unassigned OTC so receptionists understand
                                 the row is waiting on admin cleanup, not
                                 on a bank-verify decision. --}}
                            @if($rowIsUnassignedOtc)
                                <span class="verify-icon pending"
                                      title="OTC M-Pesa — awaiting admin to assign to KCB or Bingwa">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.6">
                                        <circle cx="12" cy="12" r="10" fill="#fef3c7" stroke="#f59e0b"/>
                                        <path d="M12 9v3M12 15h.01" stroke="#b45309"/>
                                    </svg>
                                </span>
                            @else
                                <span class="verify-icon pending"
                                      title="Pending — awaiting admin verification against the {{ $channelLabel }} statement">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.6">
                                        <circle cx="12" cy="12" r="10" fill="#fef3c7" stroke="#f59e0b"/>
                                        <path d="M12 7v5l3 2" stroke="#b45309"/>
                                    </svg>
                                </span>
                            @endif
                        @endif
                    </td>
                </tr>
            @empty
                <tr>
                    {{-- Colspans per tab — keep in sync with the head row above:
                         OTC: Date + Channel + Patient + Code + Amount + Receiver + Bank = 7
                         All: Date + Channel + Patient + MRN + Visit + Code + Amount + Receiver + Bank = 9
                         KCB/Bingwa: Date + Patient + MRN + Visit + Code + Amount + Receiver + Bank = 8 --}}
                    <td colspan="{{ $channel === 'otc' ? 7 : ($channel === 'all' ? 9 : 8) }}" class="table-cell text-center text-gray-400 py-10">
                        @if($verifyFilter === 'pending')
                            All {{ $channelLabel }} transactions in this date range are already verified. 🎉
                        @elseif($verifyFilter === 'verified')
                            No verified {{ $channelLabel }} transactions in this date range yet.
                        @elseif($channel === 'otc')
                            No OTC M-Pesa transactions recorded for this period.
                        @else
                            No {{ $channelLabel }} payments recorded for this period.
                        @endif
                    </td>
                </tr>
            @endforelse
            </tbody>
            @if($payments->count())
            <tfoot>
                <tr class="bg-gray-50 border-t-2 border-gray-200">
                    {{-- Footer label colspan — the count of columns BEFORE Amount.
                         OTC: Date + Channel + Patient + Code = 4
                         All: Date + Channel + Patient + MRN + Visit + Code = 6
                         KCB/Bingwa: Date + Patient + MRN + Visit + Code = 5 --}}
                    <td colspan="{{ $channel === 'otc' ? 4 : ($channel === 'all' ? 6 : 5) }}" class="table-cell text-xs font-bold text-right">
                        @if($verifyFilter === 'pending')
                            Unverified Total
                        @elseif($verifyFilter === 'verified')
                            Verified Total
                        @else
                            Total
                        @endif
                    </td>
                    <td class="table-cell text-xs text-right font-bold text-green-600">
                        KES {{ number_format($payments->sum('amount')) }}
                        @if($verifyFilter !== 'all')
                            <div class="text-[10px] text-gray-400 font-normal mt-0.5">
                                of {{ number_format($summary['total_amount']) }} total
                            </div>
                        @endif
                    </td>
                    <td class="table-cell" colspan="2"></td>
                </tr>
            </tfoot>
            @endif
        </table>
    </div>
</div>

<p class="text-xs text-gray-400 mt-3 text-center">
    Cross-check this list against your {{ $channelLabel }} statement.
    Any deposit on the statement that's missing here was either captured under the wrong channel or not yet recorded in HMIS.
</p>

@if($isAdmin)
{{-- ═══ ADMIN VERIFY + CHANNEL-MOVE + OTC-ASSIGN HANDLERS ═══
     Plain fetch() — no jQuery dep. The verify handler swaps the
     clicked pending icon for the verified icon in-place. The move
     handler triggers a full page reload after success because the
     moved row no longer belongs on the current channel tab. The
     assign handler (for unassigned OTC) also reloads since the
     newly-routed row joins KCB or Bingwa and may leave the current
     view.

     All three routes are CSRF-protected via the meta token and
     re-check the admin gate server-side, so inspect-element bypass
     can't slip through. --}}
<style>
.move-arrow { transition: opacity .15s, transform .15s; }
.move-arrow:hover { opacity: 0.75; transform: scale(1.1); }
.move-arrow:hover svg { stroke: #c026d3; }
.assign-btn { transition: filter .15s, transform .12s; }
.assign-btn:hover { filter: brightness(0.92); transform: translateY(-1px); }
.assign-kcb:hover { background: #bfdbfe !important; }
.assign-bingwa:hover { background: #f5d0fe !important; }
/* Subtle amber tint on the whole row so unassigned OTC stands out */
.unassigned-row { background: linear-gradient(to right, #fffbeb 0%, transparent 8%); }
</style>
<script>
function verifyPayment(paymentId, btn) {
    if (btn.dataset.busy === '1') return; // re-click guard
    btn.dataset.busy = '1';
    btn.style.opacity = '0.5';

    const url = "{{ url('reports/mpesa-channel/payment') }}/" + paymentId + "/verify";
    const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';

    fetch(url, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': csrf,
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
        },
        credentials: 'same-origin',
    })
    .then(r => r.json().then(j => ({ ok: r.ok, body: j })))
    .then(({ ok, body }) => {
        if (!ok || !body.ok) {
            alert(body.message || 'Verification failed. Please try again.');
            btn.style.opacity = '1';
            btn.dataset.busy = '0';
            return;
        }
        // Replace the entire cell content so both the move-arrow
        // AND the pending clock are swapped for the verified icon.
        const cell = btn.closest('.verify-cell');
        const tooltip = 'Verified by ' + body.verified_by + ' on ' + body.verified_at;
        cell.innerHTML =
            '<span class="verify-icon verified" title="' + tooltip + '">' +
            '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">' +
            '<circle cx="12" cy="12" r="10" fill="#dcfce7" stroke="#16a34a"/>' +
            '<path d="M8 12l3 3 5-6" stroke="#16a34a"/>' +
            '</svg></span>';
    })
    .catch(err => {
        console.error('verifyPayment failed', err);
        alert('Network error. Please try again.');
        btn.style.opacity = '1';
        btn.dataset.busy = '0';
    });
}

function moveChannel(paymentId, targetChannel, targetLabel, amount, btn) {
    if (btn.dataset.busy === '1') return;

    // Browser confirm dialog — admins clicking by accident get
    // a chance to back out before the move commits.
    const amountFmt = 'KES ' + amount.toLocaleString();
    if (! confirm('Move this ' + amountFmt + ' transaction to ' + targetLabel + '?')) {
        return;
    }

    btn.dataset.busy = '1';
    btn.style.opacity = '0.5';

    const url = "{{ url('reports/mpesa-channel/payment') }}/" + paymentId + "/move";
    const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';

    fetch(url, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': csrf,
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
        },
        credentials: 'same-origin',
        body: JSON.stringify({ target: targetChannel }),
    })
    .then(r => r.json().then(j => ({ ok: r.ok, body: j })))
    .then(({ ok, body }) => {
        if (!ok || !body.ok) {
            alert(body.message || 'Move failed. Please try again.');
            btn.style.opacity = '1';
            btn.dataset.busy = '0';
            return;
        }
        // Reload to refresh counts/totals — the moved row no longer
        // belongs on this tab so the simplest UX is a clean reload
        // that keeps the date filter (it's in the URL).
        window.location.reload();
    })
    .catch(err => {
        console.error('moveChannel failed', err);
        alert('Network error. Please try again.');
        btn.style.opacity = '1';
        btn.dataset.busy = '0';
    });
}

function assignOtcChannel(paymentId, targetChannel, targetLabel, amount, btn) {
    if (btn.dataset.busy === '1') return;

    // Browser confirm — clear about what's happening so admin
    // doesn't accidentally pick the wrong rail.
    const amountFmt = 'KES ' + amount.toLocaleString();
    if (! confirm('Assign this ' + amountFmt + ' OTC payment to ' + targetLabel + '?')) {
        return;
    }

    // Disable both assign buttons in the same cell while in flight
    // so admin can't double-click the other one mid-request.
    const cell = btn.closest('.verify-cell');
    const sibBtns = cell ? cell.querySelectorAll('.assign-btn') : [];
    sibBtns.forEach(b => { b.dataset.busy = '1'; b.style.opacity = '0.5'; });

    const url = "{{ url('reports/mpesa-channel/payment') }}/" + paymentId + "/assign";
    const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';

    fetch(url, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': csrf,
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
        },
        credentials: 'same-origin',
        body: JSON.stringify({ target: targetChannel }),
    })
    .then(r => r.json().then(j => ({ ok: r.ok, body: j })))
    .then(({ ok, body }) => {
        if (!ok || !body.ok) {
            alert(body.message || 'Assign failed. Please try again.');
            sibBtns.forEach(b => { b.style.opacity = '1'; b.dataset.busy = '0'; });
            return;
        }
        // Reload — the assigned row will now appear on KCB or Bingwa
        // tabs (or stay on OTC with a new channel pill), and counts
        // need to refresh.
        window.location.reload();
    })
    .catch(err => {
        console.error('assignOtcChannel failed', err);
        alert('Network error. Please try again.');
        sibBtns.forEach(b => { b.style.opacity = '1'; b.dataset.busy = '0'; });
    });
}
</script>
@endif

@endsection