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

<div class="px-5">
    <div class="rounded-2xl bg-white/5 p-5 space-y-4 text-sm">
        <div class="text-center pb-4 border-b border-white/10">
            <p class="text-2xl font-extrabold">{{ $transaction->currency === 'NGN' ? '₦' : '' }}{{ number_format($transaction->amount, $transaction->currency === 'NGN' ? 2 : 8) }} {{ $transaction->currency !== 'NGN' ? $transaction->currency : '' }}</p>
            <p class="text-neutral-400 capitalize mt-1">{{ $transaction->type }} · {{ ucfirst($transaction->status) }}</p>
        </div>
        <div class="flex justify-between"><span class="text-neutral-400">Reference</span><span class="font-mono text-xs">{{ $transaction->reference }}</span></div>
        <div class="flex justify-between"><span class="text-neutral-400">Date</span><span>{{ $transaction->created_at->format('d M Y, H:i:s') }}</span></div>
        @if ($transaction->asset_symbol)
            <div class="flex justify-between"><span class="text-neutral-400">Asset</span><span>{{ $transaction->asset_symbol }}</span></div>
            <div class="flex justify-between"><span class="text-neutral-400">Asset Amount</span><span>{{ rtrim(rtrim($transaction->asset_amount, '0'), '.') }}</span></div>
        @endif
        <div class="flex justify-between"><span class="text-neutral-400">Fee</span><span>₦{{ number_format($transaction->fee, 2) }}</span></div>
        @if ($transaction->description)
            <div class="pt-2 border-t border-white/10 text-neutral-300">{{ $transaction->description }}</div>
        @endif
    </div>
</div>
@endsection