@extends('emails.layout')

@section('content')
<div class="email-greeting">Hello {{ $userName }},</div>

<div class="email-content">
    <p>Your wallet has been topped up successfully!</p>
</div>

<div class="alert-success">
    <strong>✓ Top-Up Successful</strong><br>
    Your CNY has been added to your wallet balance.
</div>

<div class="info-box">
    <div class="info-box-title">Transaction Details</div>
    <div class="info-box-content">
        <div class="info-row">
            <span class="info-label">Reference:</span>
            <span class="info-value">{{ $reference }}</span>
        </div>
        <div class="info-row">
            <span class="info-label">Amount Paid:</span>
            <span class="info-value">GHS {{ number_format($ghsAmount, 2) }}</span>
        </div>
        <div class="info-row">
            <span class="info-label">Exchange Rate:</span>
            <span class="info-value">1 GHS = ¥{{ number_format($exchangeRate, 4) }}</span>
        </div>
        <div class="info-row">
            <span class="info-label">CNY Credited:</span>
            <span class="info-value" style="color: #28a745; font-weight: 700;">¥{{ number_format($cnyAmount, 2) }}</span>
        </div>
        <div class="info-row">
            <span class="info-label">New Balance:</span>
            <span class="info-value" style="font-weight: 700;">¥{{ number_format($newBalance, 2) }}</span>
        </div>
    </div>
</div>

<div style="text-align: center;">
    <a href="{{ url('/dashboard') }}" class="btn">View Dashboard</a>
</div>

<div class="email-content">
    <p>Your wallet is now ready for withdrawals to your Alipay account.</p>
    <p>Thank you for using RMBXchange!</p>
</div>

<div class="email-content">
    <p>Best regards,<br>The RMBXchange Team</p>
</div>
@endsection