@extends('layouts.email')

@section('title', 'Payment Approved & Received')
@section('header_subtitle', 'Transaction Approved & Confirmed')
@section('header_bg', 'linear-gradient(135deg, #065f46 0%, #047857 50%, #10b981 100%)')
@section('header_sub_color', '#a7f3d0')
@section('button_bg', '#059669')

@section('content')
    <div class="greeting">Hello {{ $user->name }},</div>
    <p>
        Great news! Your {{ strtolower($payment->type->value) }} of <strong>Tk {{ number_format((float) $payment->amount, 2) }}</strong> has been officially approved and verified by management.
    </p>

    <table class="table-details">
        <tr>
            <td class="label">Transaction Type</td>
            <td class="value">{{ ucfirst($payment->type->value) }}</td>
        </tr>
        <tr>
            <td class="label">Amount</td>
            <td class="value" style="color: #059669; font-size: 16px;">Tk {{ number_format((float) $payment->amount, 2) }}</td>
        </tr>
        <tr>
            <td class="label">Payment Method</td>
            <td class="value">{{ strtoupper($payment->method ?? 'N/A') }}</td>
        </tr>
        <tr>
            <td class="label">Reference ID</td>
            <td class="value">{{ $payment->ref ?? 'N/A' }}</td>
        </tr>
        <tr>
            <td class="label">Payment Date</td>
            <td class="value">{{ $payment->payment_date ? \Carbon\Carbon::parse($payment->payment_date)->format('d M, Y') : now()->format('d M, Y') }}</td>
        </tr>
        <tr>
            <td class="label">Status</td>
            <td class="value">
                <span class="badge badge-received">Approved / Received</span>
            </td>
        </tr>
        <tr>
            <td class="label">Current Available Balance</td>
            <td class="value" style="color: #4f46e5;">Tk {{ number_format($user->getEffectiveBalance(), 2) }}</td>
        </tr>
    </table>

    <div class="cta-container">
        <a href="{{ $loginUrl }}" class="cta-button">
            View Account Ledger
        </a>
    </div>
@endsection