@extends('layouts.app')
@section('title', 'Wallet')
@section('content')
<x-page-header title="Wallet" />

<div class="px-5">
    <div class="glow-card rounded-3xl p-6 text-[#0B0B0F]">
        <p class="text-xs font-semibold tracking-widest text-neutral-500">NGN AVAILABLE</p>
        <p class="text-3xl font-extrabold mt-1">₦{{ number_format($ngn->available_balance, 2) }}</p>
        @if ((float) $ngn->locked_balance > 0)
            <p class="text-xs text-neutral-500 mt-1">₦{{ number_format($ngn->locked_balance, 2) }} locked in open orders</p>
        @endif
        <div class="mt-5 flex gap-3">
            <a href="{{ route('wallet.deposit') }}" class="btn-deposit flex-1 text-center text-white font-bold py-3.5 rounded-full">Deposit</a>
            <a href="{{ route('wallet.withdraw') }}" class="flex-1 text-center bg-[#0B0B0F]/85 text-white font-bold py-3.5 rounded-full">Withdraw</a>
        </div>
    </div>
</div>

<div class="px-5 mt-8">
    <h2 class="text-sm font-semibold text-neutral-400 mb-3">Crypto Assets</h2>
    <div class="space-y-3">
        @foreach ($cryptoBalances as $b)
            <a href="{{ route('trade.show', $b['asset']->symbol) }}" class="flex items-center justify-between bg-white/5 rounded-2xl px-4 py-4">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-orange-500/15 flex items-center justify-center font-bold text-orange-400 text-sm">
                        {{ substr($b['asset']->symbol, 0, 1) }}
                    </div>
                    <div>
                        <p class="font-semibold">{{ $b['asset']->name }}</p>
                        <p class="text-xs text-neutral-400">{{ rtrim(rtrim($b['available'], '0'), '.') ?: '0' }} {{ $b['asset']->symbol }}</p>
                    </div>
                </div>
                <p class="font-semibold">₦{{ number_format($b['ngn_value'], 2) }}</p>
            </a>
        @endforeach
    </div>
</div>

<div class="px-5 mt-6">
    <a href="{{ route('bank-accounts.index') }}" class="flex items-center justify-between bg-white/5 rounded-2xl px-4 py-4">
        <span class="font-medium">Manage bank accounts</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neutral-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
    </a>
</div>
@endsection