@extends('layouts.admin')

@section('content')
<div class="header">
    <div>
        <h1 style="margin:0; font-weight:800; font-size:28px">Financial Ledger</h1>
        <p style="color:#555; margin:5px 0 0">Oversight of all movements and commissions</p>
    </div>
</div>

<style>
    .financial-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
    .stat-card { background: var(--card); padding: 25px; border-radius: 20px; border: 1px solid #222; }
    .stat-value { font-size: 28px; font-weight: 800; color: #fff; margin: 5px 0; }
    .stat-label { color: #555; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }

    .ledger-container { background: var(--card); border-radius: 25px; border: 1px solid #222; padding: 30px; }
    table { width: 100%; border-collapse: collapse; text-align: left; }
    th { color: #555; font-size: 10px; text-transform: uppercase; padding-bottom: 20px; }
    td { padding: 18px 0; font-size: 14px; border-top: 1px solid #222; }
    
    .type-deposit { color: #00ff00; }
    .type-withdrawal { color: #ff4d4d; }
    .type-commission { color: var(--primary); font-weight: bold; }
</style>

<div class="financial-stats">
    <div class="stat-card">
        <div class="stat-label">Total Volume Traded</div>
        <div class="stat-value">₦{{ number_format($totalVolume, 2) }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Estimated Commission (10%)</div>
        <div class="stat-value" style="color: var(--primary)">₦{{ number_format($commissionEarned, 2) }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">System Liquidity</div>
        <div class="stat-value">₦{{ number_format($totalVolume, 2) }}</div>
    </div>
</div>

<div class="ledger-container">
    <h3 style="margin-top:0; font-size:18px; margin-bottom:25px;">Recent Transactions</h3>
    <table>
        <thead>
            <tr>
                <th>Reference</th>
                <th>User / Wallet</th>
                <th>Amount</th>
                <th>Type</th>
                <th>Status</th>
                <th>Timestamp</th>
            </tr>
        </thead>
        <tbody>
            @foreach($transactions as $tx)
            <tr>
                <td style="font-family: monospace; color:#555">#{{ substr($tx->id, 0, 12) }}</td>
                <td>{{ $tx->wallet->user->name ?? 'System' }}</td>
                <td style="font-weight: bold">₦{{ number_format($tx->amount, 2) }}</td>
                <td><span class="type-{{ $tx->type }}">{{ strtoupper($tx->type) }}</span></td>
                <td>
                    <span style="font-size: 10px; font-weight: 800; color: #2ecc71">SUCCESS</span>
                </td>
                <td style="color: #444; font-size: 12px">
                    {{ $tx->created_at->format('M d, H:i') }}
                </td>
            </tr>
            @endforeach
            
            @if($transactions->isEmpty())
            <tr>
                <td colspan="6" style="text-align: center; color: #444; padding: 40px;">No transaction history recorded.</td>
            </tr>
            @endif
        </tbody>
    </table>

    <div style="margin-top: 30px">
        {{ $transactions->links() }}
    </div>
</div>
@endsection
