@extends('layouts.admin')

@section('title', 'Invoices & Payments Reconciliation – Admin CRM')
@section('page_title', 'Payments & Financial Ledger')

@section('content')
<div class="space-y-6">
    
    <!-- Top Filter Header -->
    <div class="bg-slate-900 border border-white/10 rounded-2xl p-4 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-xl">
        <form method="GET" action="{{ route('admin.payments.index') }}" class="w-full sm:w-auto flex items-center gap-2 flex-1">
            <select name="status" class="bg-slate-950 border border-white/10 rounded-xl px-3 py-1.5 text-white text-xs">
                <option value="">All Payment Statuses</option>
                <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending Verification</option>
                <option value="verified" {{ request('status') === 'verified' ? 'selected' : '' }}>Verified & Credited</option>
            </select>
            <select name="payment_method" class="bg-slate-950 border border-white/10 rounded-xl px-3 py-1.5 text-white text-xs">
                <option value="">All Payment Methods</option>
                <option value="bank_transfer">Bank Transfer (TT)</option>
                <option value="bkash">bKash Merchant</option>
                <option value="nagad">Nagad</option>
                <option value="cash">Cash Showroom</option>
            </select>
            <button type="submit" class="px-3 py-1.5 rounded-xl bg-white/10 hover:bg-white/20 text-white font-bold text-xs transition">
                Filter
            </button>
        </form>
    </div>

    <!-- Payments Ledger Table -->
    <div class="bg-slate-900 border border-white/10 rounded-2xl overflow-hidden shadow-xl">
        <div class="p-4 border-b border-white/10">
            <h3 class="text-sm font-bold text-white font-heading">Payment Transactions</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead class="bg-slate-950 text-slate-400 uppercase tracking-wider text-[10px] border-b border-white/10">
                    <tr>
                        <th class="p-4">Customer & Order</th>
                        <th class="p-4">Amount (BDT)</th>
                        <th class="p-4">Method & Gateway</th>
                        <th class="p-4">Txn Reference</th>
                        <th class="p-4">Date</th>
                        <th class="p-4">Status</th>
                        <th class="p-4 text-right">Verification Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/5 text-slate-300">
                    @forelse($payments as $payment)
                        <tr class="hover:bg-white/5 transition">
                            <td class="p-4">
                                <span class="font-bold text-white block">{{ $payment->order->user->name ?? 'Client' }}</span>
                                <a href="{{ route('admin.orders.show', $payment->order_id) }}" class="text-red-400 font-mono text-[10px] hover:underline">
                                    Order #{{ $payment->order->order_number ?? $payment->order_id }}
                                </a>
                            </td>
                            <td class="p-4 font-extrabold text-emerald-400 text-sm">
                                ৳{{ number_format($payment->amount_bdt) }}
                            </td>
                            <td class="p-4 uppercase font-bold text-slate-300">
                                {{ str_replace('_', ' ', $payment->payment_method) }}
                            </td>
                            <td class="p-4 font-mono text-slate-400">
                                {{ $payment->transaction_reference ?? 'DIRECT-BANK' }}
                            </td>
                            <td class="p-4 text-slate-400">
                                {{ $payment->created_at->format('M d, Y h:i A') }}
                            </td>
                            <td class="p-4">
                                <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase {{ $payment->status === 'verified' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-amber-500/20 text-amber-400' }}">
                                    {{ $payment->status }}
                                </span>
                            </td>
                            <td class="p-4 text-right">
                                @if($payment->status === 'pending')
                                    <form method="POST" action="{{ route('admin.payments.verify', $payment->id) }}" onsubmit="return confirm('Verify and credit ৳{{ number_format($payment->amount_bdt) }} to order balance?')">
                                        @csrf
                                        <button type="submit" class="px-3 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-bold transition">
                                            Verify & Credit
                                        </button>
                                    </form>
                                @else
                                    <span class="text-slate-500 text-[11px]"><i class="fa-solid fa-check mr-1 text-emerald-400"></i> Verified</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="p-8 text-center text-slate-400">
                                No payment records found matching the query.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="p-4 border-t border-white/10">
            {{ $payments->links() }}
        </div>
    </div>

</div>
@endsection