<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body { font-family: 'Segoe UI', Arial, sans-serif; background-color: #f8f9fa; margin: 0; padding: 0; }
        .wrapper { width: 100%; table-layout: fixed; background-color: #f8f9fa; padding-bottom: 40px; }
        .main-table { width: 100%; max-width: 650px; margin: 0 auto; background-color: #ffffff; border-radius: 8px; border-spacing: 0; }
        .header { background-color: #1a2a3a; padding: 30px; text-align: center; border-radius: 8px 8px 0 0; }
        .content { padding: 25px; border-bottom: 1px solid #edf2f7; }
        .dual-column { width: 100%; border-spacing: 0; }
        .col { width: 50%; padding: 10px; vertical-align: top; }
        .ar { direction: rtl; text-align: right; border-left: 1px solid #eee; }
        .en { direction: ltr; text-align: left; }
        .bank-box { background-color: #f1f5f9; border-radius: 6px; padding: 15px; margin: 15px 0; border: 1px solid #e2e8f0; }
        .price { font-size: 22px; color: #2c3e50; font-weight: bold; margin: 10px 0; }
        .btn-container { text-align: center; padding: 30px; }
        .button { background-color: #10b981; color: #ffffff !important; padding: 14px 30px; text-decoration: none; border-radius: 6px; font-weight: bold; display: inline-block; }
        .footer { padding: 20px; text-align: center; font-size: 12px; color: #94a3b8; }
    </style>
</head>
<body>

    <div class="wrapper">
        <table class="main-table">
            <tr>
                <td class="header">
				<img src="{{ url('assets/img/logo-white.png') }}" alt="ElCart Logo" style="max-width: 150px; height: auto; margin-bottom: 10px;">
                    <h1 style="color: #ffffff; margin: 0; font-size: 24px;">ElCart Payment Instructions</h1>
                </td>
            </tr>
            <tr>
                <td class="content">
                    <table class="dual-column">
                        <tr>
                            <td class="col en">
                                <p>Dear <strong>{{ $member_name }}</strong>,</p>
                                <p>To activate your <strong>{{ $card_title }}</strong>, please complete the payment of:</p>
                                <div class="price">{{ $amount }} {{ $currency }}</div>
                            </td>
                            <td class="col ar">
                                <p>عزيزي <strong>{{ $member_name }}</strong>،</p>
                                <p>لتفعيل كارت <strong>{{ $card_title }}</strong> الخاص بك، يرجى إتمام سداد مبلغ:</p>
                                <div class="price">{{ $amount }} {{ $currency }}</div>
                            </td>
                        </tr>
                    </table>

                    <div class="bank-box">
                        <table class="dual-column">
                            <tr>
                                <td class="col en">
                                    <strong>Payment Method:</strong><br>
                                    {{ $bank_details }}
                                    @if($admin_note)<br><em>Note: {{ $admin_note }}</em>@endif
                                </td>
                                <td class="col ar">
                                    <strong>طريقة السداد:</strong><br>
                                    {{ $bank_details }}
                                    @if($admin_note)<br><em>ملاحظة: {{ $admin_note }}</em>@endif
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="btn-container">
                    <p style="margin-bottom: 20px; font-size: 14px; color: #64748b;">
                        After payment, click the button below to upload your receipt:<br>
                        بعد الدفع، اضغط على الزر أدناه لرفع إيصال السداد:
                    </p>
                    <a href="{{ url($confirmation_url) }}" class="button">Confirm Payment | تأكيد السداد</a>
                </td>
            </tr>
            <tr>
                <td class="footer">
                    Order Reference / رقم الطلب: #{{ $request_id }}<br>
                    &copy; {{ date('Y') }} Noble ERP - ElCart System
                </td>
            </tr>
        </table>
    </div>
</body>
</html>