@extends('admin.layouts.app')
@section('title', 'Transactions')

@section('content')
<div class="glass-panel" style="padding: 24px;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <h2 style="font-size: 20px;">All Transactions</h2>
    </div>

    <div style="overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse; text-align: left;">
            <thead>
                <tr style="border-bottom: 1px solid rgba(255,255,255,0.1);">
                    <th style="padding: 12px; color: var(--text-secondary);">ID</th>
                    <th style="padding: 12px; color: var(--text-secondary);">Txn ID</th>
                    <th style="padding: 12px; color: var(--text-secondary);">User ID</th>
                    <th style="padding: 12px; color: var(--text-secondary);">Amount</th>
                    <th style="padding: 12px; color: var(--text-secondary);">Type</th>
                    <th style="padding: 12px; color: var(--text-secondary);">Status</th>
                    <th style="padding: 12px; color: var(--text-secondary);">Date</th>
                </tr>
            </thead>
            <tbody>
                @forelse($transactions as $txn)
                <tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
                    <td style="padding: 12px;">{{ $txn->id }}</td>
                    <td style="padding: 12px;">{{ $txn->transaction_id }}</td>
                    <td style="padding: 12px;">{{ $txn->user_id }}</td>
                    <td style="padding: 12px; font-weight: bold;">₹{{ number_format($txn->amount, 2) }}</td>
                    <td style="padding: 12px;">{{ ucfirst($txn->type) }}</td>
                    <td style="padding: 12px;">
                        @if($txn->status == 'completed')
                            <span style="color: #10b981; background: rgba(16, 185, 129, 0.1); padding: 4px 8px; border-radius: 4px; font-size: 12px;">Completed</span>
                        @elseif($txn->status == 'pending')
                            <span style="color: #f59e0b; background: rgba(245, 158, 11, 0.1); padding: 4px 8px; border-radius: 4px; font-size: 12px;">Pending</span>
                        @else
                            <span style="color: #ef4444; background: rgba(239, 68, 68, 0.1); padding: 4px 8px; border-radius: 4px; font-size: 12px;">{{ ucfirst($txn->status) }}</span>
                        @endif
                    </td>
                    <td style="padding: 12px;">{{ $txn->created_at ? $txn->created_at->format('M d, Y H:i') : 'N/A' }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" style="padding: 24px; text-align: center; color: var(--text-secondary);">No transactions found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div style="margin-top: 24px;">
        {{ $transactions->links('pagination::bootstrap-4') }}
    </div>
</div>
@endsection