@extends('layouts.app')
@section('title','Transaction History')
@section('page-title','Transaction History')

@section('content')
<div class="section-header mb-4">
    <div>
        <div class="section-title">My Transactions</div>
        <div class="section-sub">Full history of all your account activity</div>
    </div>
</div>

<div class="card">
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Reference</th>
                    <th>Type</th>
                    <th>Amount</th>
                    <th>Balance After</th>
                    <th>Mode</th>
                    <th>Date</th>
                    <th>Note</th>
                </tr>
            </thead>
            <tbody>
                @forelse($transactions as $txn)
                <tr>
                    <td><code style="font-size:.75rem;">{{ $txn->reference }}</code></td>
                    <td>
                        @php $colors = ['deposit'=>'active','withdrawal'=>'rejected','repayment'=>'paid']; @endphp
                        <span class="badge-status {{ $colors[$txn->type] ?? 'pending' }}">{{ ucfirst($txn->type) }}</span>
                    </td>
                    <td>
                        <span class="amount" style="color:{{ $txn->type==='deposit'?'#2e7d52':'#c0392b' }};font-weight:500;">
                            {{ $txn->type==='deposit'?'+':'-' }}${{ number_format($txn->amount,2) }}
                        </span>
                    </td>
                    <td><span class="amount">${{ number_format($txn->balance_after,2) }}</span></td>
                    <td style="font-size:.8rem;color:#6b7a8d;">{{ ucfirst(str_replace('_',' ',$txn->payment_mode)) }}</td>
                    <td style="font-size:.8rem;color:#6b7a8d;">{{ $txn->created_at->format('M d, Y H:i') }}</td>
                    <td style="font-size:.8rem;color:#6b7a8d;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ $txn->note ?? '—' }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="text-center py-5" style="color:#aaa;">
                        <i class="fa-solid fa-inbox" style="font-size:2rem;display:block;margin-bottom:10px;"></i>
                        No transactions found
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($transactions->hasPages())
    <div class="card-body" style="border-top:1px solid var(--border);padding:16px 24px;">
        {{ $transactions->links() }}
    </div>
    @endif
</div>
@endsection