@extends('layouts.app')
@section('title','Transaction History')
@section('header-left')
<div>
    <h3 class="text-lg font-bold">Transaction History</h3>
    <p class="text-xs text-slate-500">{{ $transactions->total() }} total transactions</p>
</div>
@endsection
@section('content')
<div class="flex items-center justify-between mb-6">
    <div class="flex items-center gap-2">
        <div class="px-3 py-1.5 glass-card rounded-lg text-xs font-bold text-slate-400 uppercase tracking-wider">All Types</div>
        <div class="px-3 py-1.5 glass-card rounded-lg text-xs font-bold text-slate-400 uppercase tracking-wider">All Status</div>
    </div>
    <a href="{{ route('transactions.export') }}" class="flex items-center gap-2 px-4 py-2 bg-primary/10 text-primary rounded-xl text-sm font-bold hover:bg-primary/20 transition-all border border-primary/20">
        <span class="material-symbols-outlined text-sm">download</span> Export CSV
    </a>
</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-5 py-3.5 text-xs font-bold uppercase tracking-wider text-slate-500">Reference</th>
                <th class="px-5 py-3.5 text-xs font-bold uppercase tracking-wider text-slate-500">Order</th>
                <th class="px-5 py-3.5 text-xs font-bold uppercase tracking-wider text-slate-500">Type</th>
                <th class="px-5 py-3.5 text-xs font-bold uppercase tracking-wider text-slate-500">Amount</th>
                <th class="px-5 py-3.5 text-xs font-bold uppercase tracking-wider text-slate-500">Status</th>
                <th class="px-5 py-3.5 text-xs font-bold uppercase tracking-wider text-slate-500">Date</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-white/5">
            @forelse($transactions as $tx)
            <tr class="glass-table-row group">
                <td class="px-5 py-4">
                    <span class="font-mono text-xs text-slate-400 group-hover:text-primary transition-colors">{{ $tx->reference }}</span>
                </td>
                <td class="px-5 py-4">
                    <span class="text-sm font-bold font-mono">{{ optional($tx->order)->order_id ?? '—' }}</span>
                </td>
                <td class="px-5 py-4">
                    <div class="flex items-center gap-2">
                        <div class="w-8 h-8 rounded-lg flex items-center justify-center {{ $tx->type === 'credit' ? 'bg-green-500/10' : 'bg-red-500/10' }}">
                            <span class="material-symbols-outlined text-sm {{ $tx->type === 'credit' ? 'text-green-500' : 'text-red-500' }}">{{ $tx->type === 'credit' ? 'arrow_circle_down' : 'arrow_circle_up' }}</span>
                        </div>
                        <span class="text-sm font-medium capitalize">{{ $tx->type }}</span>
                    </div>
                </td>
                <td class="px-5 py-4">
                    <p class="font-bold {{ $tx->type === 'credit' ? 'text-green-500' : 'text-red-400' }}">
                        {{ $tx->type === 'credit' ? '+' : '-' }}₦{{ number_format($tx->amount, 2) }}
                    </p>
                    <p class="text-[10px] text-slate-500">{{ $tx->currency }}</p>
                </td>
                <td class="px-5 py-4">
                    @php $colors = ['completed'=>'green','pending'=>'orange','failed'=>'red','reversed'=>'slate']; $c = $colors[$tx->status] ?? 'slate'; @endphp
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-{{ $c }}-500/10 text-{{ $c }}-500">
                        <span class="w-1.5 h-1.5 rounded-full bg-current {{ $tx->status==='pending'?'animate-pulse':'' }}"></span>{{ $tx->status }}
                    </span>
                </td>
                <td class="px-5 py-4">
                    <p class="text-sm">{{ $tx->created_at->format('M d, Y') }}</p>
                    <p class="text-[10px] text-slate-500">{{ $tx->created_at->format('h:i A') }}</p>
                </td>
            </tr>
            @empty
            <tr><td colspan="6" class="px-5 py-16 text-center">
                <div class="flex flex-col items-center gap-3">
                    <div class="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center">
                        <span class="material-symbols-outlined text-slate-500 text-3xl">receipt_long</span>
                    </div>
                    <p class="text-slate-500 text-sm">No transactions yet</p>
                    <a href="{{ route('new_exchange_modal') }}" class="px-5 py-2.5 bg-primary/10 text-primary rounded-xl text-sm font-bold hover:bg-primary hover:text-white transition-all border border-primary/20">Start an Exchange</a>
                </div>
            </td></tr>
            @endforelse
        </tbody>
    </table>
</div>
<div class="mt-6">{{ $transactions->links() }}</div>
@endsection