<div style="font-family: Arial, sans-serif; direction: rtl; max-width: 600px; margin: 0 auto;">
    <div style="background: #f5f5f5; padding: 20px; text-align: center;">
        <h2 style="color: #333; margin: 0;">تفاصيل الفاتورة</h2>
    </div>

    <div style="padding: 20px; background: white; border: 1px solid #ddd;">
        <p style="margin-top: 0;">مرحباً،</p>

        <p>يسرنا إرسال تفاصيل الفاتورة التالية:</p>

        <div style="background: #f9f9f9; padding: 15px; margin: 20px 0; border-right: 4px solid #007bff;">
            <table style="width: 100%; border-collapse: collapse;">
                <tr>
                    <td style="padding: 8px; border-bottom: 1px solid #eee;"><strong>رقم الفاتورة:</strong></td>
                    <td style="padding: 8px; border-bottom: 1px solid #eee;">{{ $invoice['invoice_number'] ?? '-' }}</td>
                </tr>
                <tr>
                    <td style="padding: 8px; border-bottom: 1px solid #eee;"><strong>التاريخ:</strong></td>
                    <td style="padding: 8px; border-bottom: 1px solid #eee;">{{ isset($invoice['invoice_date']) ? \Carbon\Carbon::parse($invoice['invoice_date'])->format('d-m-Y') : '-' }}</td>
                </tr>
                <tr>
                    <td style="padding: 8px; border-bottom: 1px solid #eee;"><strong>العميل:</strong></td>
                    <td style="padding: 8px; border-bottom: 1px solid #eee;">{{ $invoice['customer_name'] ?? '-' }}</td>
                </tr>
                <tr>
                    <td style="padding: 8px; border-bottom: 1px solid #eee;"><strong>الإجمالي:</strong></td>
                    <td style="padding: 8px; border-bottom: 1px solid #eee; color: #28a745; font-weight: bold;">{{ number_format($invoice['total_amount'] ?? 0, 2) }} ريال</td>
                </tr>
                <tr>
                    <td style="padding: 8px;"><strong>المدفوع:</strong></td>
                    <td style="padding: 8px; color: #17a2b8; font-weight: bold;">{{ number_format($invoice['paid_amount'] ?? 0, 2) }} ريال</td>
                </tr>
            </table>
        </div>

        <p style="margin-top: 20px; color: #666; font-size: 14px;">
            إذا كان لديك أي استفسار حول هذه الفاتورة، يرجى التواصل معنا.
        </p>

        <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee;">
            <p style="color: #999; font-size: 12px; margin: 0;">
                هذا البريد تم إرساله بواسطة نظام إدارة المشاريع<br>
                يرجى عدم الرد على هذا البريد
            </p>
        </div>
    </div>
</div>
