<x-layouts.app :title="'Account Details - ' . config('app.name')" activePage="accounts">
<div class="max-w-4xl mx-auto">
    <div class="flex items-center space-x-2 text-gray-600 mb-6 text-sm">
        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></svg>
        <a href="{{ route('dashboard') }}" class="hover:underline">Account Summary</a>
        <span>/</span>
        <span class="font-semibold underline">Account Details</span>
    </div>

    <h2 class="text-xl sm:text-2xl font-bold text-gray-800 mb-6">Account Details</h2>

    <div class="bg-white border border-gray-300 rounded shadow-sm p-6 mb-6">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
            <div>
                <p class="text-[10px] text-gray-500 uppercase font-semibold tracking-wide">Account Type</p>
                <p class="text-sm font-bold text-gray-800 uppercase mt-1">{{ strtoupper($account->account_type->value) }}</p>
            </div>
            <div>
                <p class="text-[10px] text-gray-500 uppercase font-semibold tracking-wide">Status</p>
                <p class="text-sm font-semibold mt-1 {{ $account->status->value === 'active' ? 'text-green-600' : 'text-red-600' }}">{{ ucfirst($account->status->value) }}</p>
            </div>
            <div>
                <p class="text-[10px] text-gray-500 uppercase font-semibold tracking-wide">Account Number</p>
                <p class="text-sm font-mono text-gray-800 mt-1">{{ $account->account_number }}</p>
            </div>
            <div>
                <p class="text-[10px] text-gray-500 uppercase font-semibold tracking-wide">Currency</p>
                <p class="text-sm text-gray-800 mt-1">{{ $account->currency->value }} ({{ $account->currency->symbol() }})</p>
            </div>
            <div class="sm:col-span-2">
                <p class="text-[10px] text-gray-500 uppercase font-semibold tracking-wide">Available Balance</p>
                <p class="text-2xl font-bold text-gray-800 mt-1">{{ $account->currency->symbol() }}{{ number_format($account->balance, 2) }}</p>
            </div>
        </div>

        @if($account->routingNumbers->count())
        <div class="mt-6 pt-6 border-t border-gray-100">
            <p class="text-[10px] text-gray-500 uppercase font-semibold tracking-wide mb-3">Routing Numbers</p>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                @foreach($account->routingNumbers as $rn)
                <div class="bg-gray-50 rounded px-4 py-3">
                    <p class="text-[10px] text-gray-500 uppercase font-semibold">{{ $rn->type->label() }}</p>
                    <p class="text-sm font-mono text-gray-800 mt-1">{{ $rn->routing_number }}</p>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>

    <div class="flex flex-wrap gap-3 mb-6">
        <a href="{{ route('transactions', ['account_id' => $account->id]) }}" class="text-xs text-blue-700 hover:underline font-medium">View All Transactions</a>
        <a href="{{ route('transfer') }}" class="text-xs text-blue-700 hover:underline font-medium">Send Money</a>
        <a href="{{ route('deposit') }}" class="text-xs text-blue-700 hover:underline font-medium">Deposit</a>
        <a href="{{ route('withdraw') }}" class="text-xs text-blue-700 hover:underline font-medium">Withdraw</a>
    </div>

    @if($transactions->count())
    <div>
        <h3 class="text-lg font-bold text-gray-800 mb-4">Recent Transactions</h3>
        <div class="bg-white border border-gray-300 rounded shadow-sm overflow-x-auto">
            <table class="w-full text-left text-sm min-w-[500px]">
                <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                    <tr>
                        <th class="px-4 py-3">Date</th>
                        <th class="px-4 py-3">Description</th>
                        <th class="px-4 py-3">Status</th>
                        <th class="px-4 py-3 text-right">Amount</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($transactions as $tx)
                    <tr>
                        <td class="px-4 py-3 text-gray-500">{{ $tx->created_at->format('M d, Y') }}</td>
                        <td class="px-4 py-3 text-gray-800">{{ $tx->description }}</td>
                        <td class="px-4 py-3"><span class="text-xs px-2 py-0.5 rounded {{ $tx->status->value === 'completed' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }}">{{ ucfirst($tx->status->value) }}</span></td>
                        <td class="px-4 py-3 text-right {{ $tx->type === \App\Enums\TransactionType::Credit ? 'text-green-600' : 'text-red-600' }}">
                            {{ $tx->type === \App\Enums\TransactionType::Credit ? '+' : '-' }}{{ $account->currency->symbol() }}{{ number_format($tx->amount, 2) }}
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="mt-4">{{ $transactions->links() }}</div>
    </div>
    @else
    <div class="bg-white border border-gray-300 rounded shadow-sm p-8 text-center text-gray-500">
        No transactions found for this account.
    </div>
    @endif
</div>
</x-layouts.app>
