@extends('layouts.app')

@section('title', 'Incoming Payments')

@section('content')
    <div class="flex flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">Incoming Payments</h1>
            <p class="text-xs text-muted-foreground">Reconcile mobile money and bank transfers that arrive outside the cashier</p>
        </div>

        <div class="grid grid-cols-3 gap-3">
            <div class="rounded-xl border border-border bg-card p-3">
                <p class="text-xs text-muted-foreground">Total Incoming</p>
                <p class="text-lg font-semibold tabular-nums">KES {{ number_format($summary['total'], 2) }}</p>
            </div>
            <div class="rounded-xl border border-border bg-card p-3">
                <p class="text-xs text-muted-foreground">Reconciled</p>
                <p class="text-lg font-semibold tabular-nums text-primary">KES {{ number_format($summary['reconciled'], 2) }}</p>
            </div>
            <div class="rounded-xl border border-border bg-card p-3">
                <p class="text-xs text-muted-foreground">Needs Reconciliation</p>
                <p class="text-lg font-semibold tabular-nums text-amber-600">KES {{ number_format($summary['pending'], 2) }}</p>
            </div>
        </div>

        <div class="flex flex-wrap items-center gap-3 rounded-xl border border-border bg-card p-3 text-sm">
            <form method="get" class="min-w-52 flex-1">
                <input value="{{ $q }}" name="q" placeholder="Search reference, payer, admission no..." class="h-8 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
            </form>
            <form method="get" class="flex items-center gap-2 text-xs text-muted-foreground">
                <select name="status" onchange="this.form.submit()" class="h-8 rounded-md border border-input bg-transparent px-2 text-sm">
                    <option value="" @selected($status === '')>All statuses</option>
                    @foreach (['Needs reconciliation', 'Reconciled', 'Failed', 'Rejected'] as $s)
                        <option value="{{ $s }}" @selected($status === $s)>{{ $s }}</option>
                    @endforeach
                </select>
                <select name="source" onchange="this.form.submit()" class="h-8 rounded-md border border-input bg-transparent px-2 text-sm">
                    <option value="" @selected($source === '')>All sources</option>
                    @foreach (['M-Pesa', 'Equity', 'Co-op Bank', 'KCB'] as $s)
                        <option value="{{ $s }}" @selected($source === $s)>{{ $s }}</option>
                    @endforeach
                </select>
            </form>
        </div>

        <section class="rounded-xl border border-border bg-card p-4">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b text-xs uppercase text-muted-foreground">
                        <th class="px-3 py-2 text-left font-medium">Reference</th>
                        <th class="px-3 py-2 text-left font-medium">Source</th>
                        <th class="px-3 py-2 text-left font-medium">Payer</th>
                        <th class="px-3 py-2 text-left font-medium">Phone</th>
                        <th class="px-3 py-2 text-right font-medium">Amount</th>
                        <th class="px-3 py-2 text-left font-medium">Date</th>
                        <th class="px-3 py-2 text-left font-medium">Status</th>
                        <th class="px-3 py-2 text-right font-medium">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($payments as $p)
                        <tr class="border-b">
                            <td class="px-3 py-2 font-mono text-xs">{{ $p->reference }}</td>
                            <td class="px-3 py-2">{{ $p->source }}</td>
                            <td class="px-3 py-2">{{ $p->payer }}</td>
                            <td class="px-3 py-2 tabular-nums">{{ $p->phone }}</td>
                            <td class="px-3 py-2 text-right tabular-nums">KES {{ number_format($p->amount, 2) }}</td>
                            <td class="px-3 py-2">{{ $p->date }}</td>
                            <td class="px-3 py-2">
                                @php
                                    $badge = match ($p->status) {
                                        'Reconciled' => 'text-primary',
                                        'Needs reconciliation' => 'text-amber-600',
                                        'Failed', 'Rejected' => 'text-destructive',
                                        default => 'text-muted-foreground',
                                    };
                                @endphp
                                <span class="{{ $badge }} text-xs font-medium">{{ $p->status }}</span>
                                @if ($p->receipt_no)
                                    <span class="text-xs text-muted-foreground">· {{ $p->receipt_no }}</span>
                                @endif
                            </td>
                            <td class="px-3 py-2">
                                @if ($p->status === 'Needs reconciliation' || $p->status === 'Reconciled' || $p->status === 'Failed')
                                    <div class="flex justify-end gap-2 text-xs">
                                        @if ($p->status !== 'Reconciled')
                                            <form method="post" action="{{ route('finance.incoming.reconcile', $p->id) }}">
                                                @csrf
                                                <button class="rounded-lg border border-primary/40 px-2 py-1 text-primary hover:bg-primary/10">Reconcile</button>
                                            </form>
                                        @endif
                                        <form method="post" action="{{ route('finance.incoming.refresh', $p->id) }}">
                                            @csrf
                                            <button class="rounded-lg border border-border px-2 py-1 hover:bg-accent">Refresh</button>
                                        </form>
                                        @if ($p->status !== 'Rejected')
                                            <form method="post" action="{{ route('finance.incoming.reject', $p->id) }}" onsubmit="return confirm('Reject this payment?')">
                                                @csrf
                                                <button class="rounded-lg border border-destructive/40 px-2 py-1 text-destructive hover:bg-destructive/10">Reject</button>
                                            </form>
                                        @endif
                                        <details class="relative">
                                            <summary class="cursor-pointer rounded-lg border border-border px-2 py-1 hover:bg-accent">Payload</summary>
                                            <div class="absolute right-0 top-8 z-10 w-80 rounded-lg border border-border bg-card p-3 text-[11px] shadow-lg">
                                                <pre class="whitespace-pre-wrap">{{ $p->raw_payload }}</pre>
                                            </div>
                                        </details>
                                    </div>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="mt-3">{{ $payments->links() }}</div>
        </section>
    </div>
@endsection