<div class="bg-gray-50 rounded-xl p-5 space-y-4">
    <h3 class="text-lg font-bold text-gray-800 flex items-center gap-2 mb-4">
        <i class="fas fa-receipt text-indigo-600"></i> <span>{{ __('Transaction Details') }}</span>
    </h3>
    <div class="flex justify-between">
        <span class="text-gray-600">{{ __('Invoice To:') }}</span>
        <span class="font-semibold text-gray-800">{{ $brandName }}</span>
    </div>
    <div class="flex justify-between">
        <span class="text-gray-600">{{ __('Trx Id:') }}</span>
        <span class="font-semibold text-gray-800">{{ $transactionId }}</span>
    </div>
    <div class="flex justify-between">
        <span class="text-gray-600">{{ __('Amount:') }}</span>
        <span class="font-semibold text-gray-800">৳{{ number_format($amount, 2) }}</span>
    </div>
    <div class="flex justify-between font-bold text-indigo-600 text-lg border-t border-gray-200 pt-3 mt-3">
        <span>{{ __('Total Payable Amount:') }}</span>
        <span>৳{{ number_format($totalPayable, 2) }}</span>
    </div>
</div>
