<!DOCTYPE html>
<html lang="{{ $locale }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ trans('mail.payment_invoice.subject', [], $locale) }}</title>
</head>
<body style="margin: 0; padding: 0; background: #f5efe6; color: #232323; font-family: Arial, sans-serif;">
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background: #f5efe6; padding: 32px 16px;">
        <tr>
            <td align="center">
                <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width: 560px; background: #ffffff; border-radius: 8px; overflow: hidden;">
                    <tr>
                        <td style="padding: 32px;">
                            <p style="margin: 0 0 8px; color: #426fb3; font-size: 14px; font-weight: 700; text-transform: uppercase;">
                                Bowli
                            </p>

                            <h1 style="margin: 0 0 16px; color: #000000; font-size: 28px; line-height: 34px;">
                                {{ trans('mail.payment_invoice.title', [], $locale) }}
                            </h1>

                            <p style="margin: 0 0 16px; color: #232323; font-size: 16px; line-height: 24px;">
                                {{ trans('mail.payment_invoice.greeting', ['name' => $userName ?: trans('mail.payment_invoice.default_name', [], $locale)], $locale) }}
                            </p>

                            <p style="margin: 0 0 20px; color: #232323; font-size: 16px; line-height: 24px;">
                                {{ trans('mail.payment_invoice.intro', [], $locale) }}
                            </p>

                            <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin: 0 0 24px; border-collapse: collapse;">
                                <tr>
                                    <td style="padding: 10px 0; color: #666666; font-size: 14px;">
                                        {{ trans('mail.payment_invoice.product', [], $locale) }}
                                    </td>
                                    <td align="right" style="padding: 10px 0; color: #232323; font-size: 14px; font-weight: 700;">
                                        {{ $productName ?: trans('mail.payment_invoice.default_product', [], $locale) }}
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 10px 0; color: #666666; font-size: 14px; border-top: 1px solid #eeeeee;">
                                        {{ trans('mail.payment_invoice.credits', [], $locale) }}
                                    </td>
                                    <td align="right" style="padding: 10px 0; color: #232323; font-size: 14px; font-weight: 700; border-top: 1px solid #eeeeee;">
                                        {{ $credits }}
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 10px 0; color: #666666; font-size: 14px; border-top: 1px solid #eeeeee;">
                                        {{ trans('mail.payment_invoice.amount', [], $locale) }}
                                    </td>
                                    <td align="right" style="padding: 10px 0; color: #232323; font-size: 14px; font-weight: 700; border-top: 1px solid #eeeeee;">
                                        {{ $amount }}
                                    </td>
                                </tr>
                            </table>

                            @if ($invoiceUrl)
                                <table role="presentation" cellpadding="0" cellspacing="0" style="margin: 0 0 24px;">
                                    <tr>
                                        <td style="background: #000000; border-radius: 999px;">
                                            <a href="{{ $invoiceUrl }}" style="display: inline-block; padding: 14px 24px; color: #ffffff; font-size: 16px; font-weight: 700; text-decoration: none;">
                                                {{ trans('mail.payment_invoice.action', [], $locale) }}
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                            @endif

                            @if ($invoicePdfUrl)
                                <p style="margin: 0 0 16px; color: #666666; font-size: 14px; line-height: 22px;">
                                    {{ trans('mail.payment_invoice.pdf_link', [], $locale) }}
                                    <a href="{{ $invoicePdfUrl }}" style="color: #426fb3;">{{ $invoicePdfUrl }}</a>
                                </p>
                            @endif

                            <p style="margin: 0; color: #666666; font-size: 14px; line-height: 22px;">
                                {{ trans('mail.payment_invoice.footer', [], $locale) }}
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
