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

@section('content')
<style>
.dup-group {
    background: #fff;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
}
.dup-group-header {
    background: #fef3c7;
    padding: 10px 16px;
    border-bottom: 1px solid #fde68a;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.dup-row.is-deleted { opacity: 0.4; }
.dup-row.is-deleted td { text-decoration: line-through; }
.kept-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}
.del-btn {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.del-btn:hover { background: #fecaca; }
.del-btn:disabled { opacity: 0.4; cursor: not-allowed; }
</style>

{{-- ═══ HEADER ═══ --}}
<div class="no-print flex flex-wrap items-center justify-between gap-3 mb-4">
    <div>
        <div class="flex items-center gap-2 mb-1">
            <a href="{{ route('reports.mpesa-channel', 'all') }}" class="text-xs text-cr-600 hover:underline" style="text-decoration:none">← Back to M-Pesa Deposits</a>
        </div>
        <h1 class="text-lg font-bold text-gray-900">M-Pesa Duplicate Cleanup</h1>
        <p class="text-xs text-gray-400">
            Same M-Pesa code + amount + patient appearing more than once.
            Review each group and delete the extra copies.
        </p>
    </div>
    <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">
        <button class="btn-primary text-xs">Filter</button>
    </form>
</div>

@if(empty($groups))
    <div class="bg-white rounded-xl border shadow-sm p-8 text-center">
        <div style="font-size:48px;margin-bottom:8px">🎉</div>
        <h3 class="text-sm font-semibold text-gray-700 mb-1">No duplicate M-Pesa payments found</h3>
        <p class="text-xs text-gray-400">
            No payments share the same M-Pesa code + amount + patient in this date range.
        </p>
    </div>
@else
    <div class="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-4 text-xs text-amber-900">
        <strong>⚠ Important:</strong> Each group below contains payments that look identical (same M-Pesa code, same amount, same patient).
        These are almost always duplicate saves from a double-clicked submit button. Pick ONE copy to keep
        (usually the earliest) and click <span class="del-btn" style="display:inline-block">Delete</span> on the others.
        Deletion is permanent — the row plus its invoice (if no other payments share it) will be removed.
        Bank-verified rows can't be deleted from this screen.
    </div>

    @foreach($groups as $group)
        @php $first = $group['rows']->first(); @endphp
        <div class="dup-group">
            <div class="dup-group-header">
                <strong style="font-family:monospace;color:#92400e">{{ $group['mpesa_code'] }}</strong>
                <span style="color:#374151">KES {{ number_format($group['amount']) }}</span>
                <span style="color:#6b7280">
                    {{ $first->invoice?->patient?->full_name ?? $first->patient?->full_name ?? '—' }}
                    @if($first->invoice?->patient?->mrn ?? $first->patient?->mrn)
                        ({{ $first->invoice?->patient?->mrn ?? $first->patient?->mrn }})
                    @endif
                </span>
                <span style="margin-left:auto;color:#b45309;font-weight:600">
                    {{ $group['copies'] }} copies
                </span>
            </div>
            <table class="w-full">
                <thead>
                    <tr class="bg-gray-50 text-left">
                        <th class="table-header">Created</th>
                        <th class="table-header">Visit</th>
                        <th class="table-header">Description</th>
                        <th class="table-header">Received By</th>
                        <th class="table-header">Status</th>
                        <th class="table-header text-center" style="width:140px">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($group['rows'] as $idx => $p)
                        <tr class="dup-row border-b border-gray-50" data-payment-id="{{ $p->id }}">
                            <td class="table-cell text-xs whitespace-nowrap">
                                {{ $p->created_at->format('d M Y H:i:s') }}
                            </td>
                            <td class="table-cell font-mono text-xs">
                                {{ $p->invoice?->visit?->visit_number ?? $p->invoice?->invoice_number ?? '—' }}
                            </td>
                            <td class="table-cell text-xs">{{ $p->description ?? '—' }}</td>
                            <td class="table-cell text-xs">{{ $p->receiver->name ?? '—' }}</td>
                            <td class="table-cell text-xs">
                                @if($p->isBankVerified())
                                    <span class="kept-pill" title="Bank-verified — cannot delete">✓ Verified</span>
                                @elseif($idx === 0)
                                    <span class="kept-pill">Earliest (suggested keep)</span>
                                @else
                                    <span style="color:#6b7280">Duplicate copy</span>
                                @endif
                            </td>
                            <td class="table-cell text-center">
                                @if($p->isBankVerified())
                                    <span style="color:#9ca3af;font-size:10px">Locked</span>
                                @else
                                    <button type="button"
                                            class="del-btn"
                                            onclick="deleteDuplicate({{ $p->id }}, this)"
                                            data-amount="{{ (int) $p->amount }}">
                                        Delete
                                    </button>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endforeach
@endif

<script>
function deleteDuplicate(paymentId, btn) {
    if (btn.dataset.busy === '1') return;

    const amount = parseInt(btn.dataset.amount || '0', 10);
    const amountFmt = 'KES ' + amount.toLocaleString();
    if (! confirm('Delete this ' + amountFmt + ' duplicate payment? This cannot be undone.')) {
        return;
    }

    btn.dataset.busy = '1';
    btn.disabled = true;
    btn.textContent = 'Deleting…';

    const url = "{{ url('reports/mpesa-channel/payment') }}/" + paymentId + "/delete-duplicate";
    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 || 'Delete failed. Please try again.');
            btn.disabled = false;
            btn.textContent = 'Delete';
            btn.dataset.busy = '0';
            return;
        }
        // Visually mark the row as deleted without reloading.
        // Reload only if the user clicks Filter again or refreshes —
        // keeps context while admin scans the rest of the list.
        const row = btn.closest('.dup-row');
        if (row) {
            row.classList.add('is-deleted');
            btn.style.display = 'none';
        }
    })
    .catch(err => {
        console.error('deleteDuplicate failed', err);
        alert('Network error. Please try again.');
        btn.disabled = false;
        btn.textContent = 'Delete';
        btn.dataset.busy = '0';
    });
}
</script>
@endsection