@extends('layouts.admin')
@section('title','Payments')
@section('page-title','Payment Management')
@section('content')
<div class="flex gap-3 mb-5">
    @foreach(['','pending','sent','confirmed'] as $s)
    <a href="{{ route('admin.payments', ['status' => $s]) }}"
       class="px-3 py-1.5 rounded-lg text-xs font-bold uppercase transition-all {{ request('status')===$s ? 'bg-primary text-white' : 'bg-white/5 text-slate-400 hover:text-white border border-white/10' }}">
        {{ $s ?: 'All' }}
    </a>
    @endforeach
</div>
<div class="glass-card rounded-2xl overflow-hidden">
    <table class="w-full text-left">
        <thead><tr class="border-b border-white/5 bg-white/5">
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Order</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">User / Bank</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Amount</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Status</th>
            <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Action</th>
        </tr></thead>
        <tbody class="divide-y divide-white/5">
            @forelse($payments as $payment)
            <tr class="hover:bg-white/3 transition-colors">
                <td class="px-4 py-3 font-mono text-xs text-primary">{{ optional($payment->order)->order_id }}</td>
                <td class="px-4 py-3">
                    <div><p class="text-sm font-medium">{{ optional($payment->user)->name }}</p>
                    <p class="text-xs text-slate-500">{{ $payment->bank_name }} • {{ $payment->account_number }}</p>
                    <p class="text-[10px] text-slate-600">{{ $payment->account_name }}</p></div>
                </td>
                <td class="px-4 py-3"><span class="font-bold text-primary text-base">₦{{ number_format($payment->amount_sent, 2) }}</span></td>
                <td class="px-4 py-3">
                    @php $clr=['pending'=>'orange','sent'=>'blue','confirmed'=>'green'][$payment->payment_status]??'slate'; @endphp
                    <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-[10px] font-bold uppercase bg-{{ $clr }}-500/10 text-{{ $clr }}-500">
                        <span class="w-1.5 h-1.5 rounded-full bg-current {{ $payment->payment_status==='pending'?'animate-pulse':'' }}"></span> {{ $payment->payment_status }}
                    </span>
                </td>
                <td class="px-4 py-3">
                    @if($payment->payment_status === 'pending')
                    <button onclick="togglePaymentForm({{ $payment->id }})" class="px-3 py-1.5 bg-primary/10 text-primary rounded-lg text-xs font-bold hover:bg-primary hover:text-white transition-all border border-primary/20">Mark Sent</button>
                    <div id="pForm-{{ $payment->id }}" class="hidden mt-2 p-3 bg-background-dark rounded-xl border border-white/10 space-y-2">
                        <form method="POST" action="{{ route('admin.payments.sent', $payment) }}" class="space-y-2">
                            @csrf
                            <input type="text" name="payment_reference" placeholder="Reference (optional)" class="w-full bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-xs text-white focus:ring-0 focus:outline-none placeholder:text-slate-600"/>
                            <button class="w-full py-1.5 bg-primary text-white rounded-lg text-xs font-bold">Confirm</button>
                        </form>
                    </div>
                    @elseif($payment->payment_status === 'sent')
                    <span class="text-[10px] text-slate-500">Sent {{ optional($payment->sent_at)->format('M d, H:i') }}</span>
                    @else
                    <span class="text-[10px] text-green-500 font-bold">Confirmed ✓</span>
                    @endif
                </td>
            </tr>
            @empty
            <tr><td colspan="5" class="py-16 text-center text-slate-500 text-sm">No payment records found.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
<div class="mt-5">{{ $payments->links() }}</div>
@endsection
@push('scripts')
<script>function togglePaymentForm(id){document.getElementById('pForm-'+id).classList.toggle('hidden');}</script>
@endpush