<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" dir="{{ session('is_rtl', false) ? 'rtl' : 'ltr' }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ __('New Message Notification') }}</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f3f4f6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; color: #1f2937;">

    <!-- Wrapper Table -->
    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f3f4f6; padding: 40px 15px;">
        <tr>
            <td align="center">
                
                <!-- Main Content Container -->
                <table width="100%" max-width="600" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px; background-color: #ffffff; border-radius: 12px; border: 1px solid #e5e7eb; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);">
                    
                    <!-- Header -->
                    <tr>
                        <td align="center" style="padding: 30px 20px; background-color: #f8fafc; border-bottom: 1px solid #f3f4f6;">
                            <h1 style="margin: 0; color: #2563eb; font-size: 26px; font-weight: 900; letter-spacing: -0.5px;">
                                {{ config('app.name') }}
                            </h1>
                        </td>
                    </tr>

                    <!-- Body Content -->
                    <tr>
                        <td style="padding: 40px 30px;">
                            
                            <div style="text-align: center; margin-bottom: 20px;">
                                <span style="display: inline-block; background-color: #dbeafe; color: #1e40af; padding: 8px 16px; border-radius: 50px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px;">
                                    {{ __('New Message') }} 💬
                                </span>
                            </div>

                            <h2 style="margin: 0 0 15px; color: #111827; font-size: 22px; text-align: center; font-weight: 800;">
                                {{ __('You have a new message!') }}
                            </h2>

                            <p style="margin: 0 0 25px; font-size: 16px; color: #4b5563; line-height: 1.6; text-align: center;">
                                {{ __('Hi') }} <strong>{{ $receiver->name }}</strong>,<br>
                                <strong>{{ $messageObj->sender->name }}</strong> {{ __('sent you a new message regarding your conversation.') }}
                            </p>

                            <!-- Message Preview Snippet Box -->
                            <table width="100%" cellpadding="20" cellspacing="0" border="0" style="background-color: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 30px; border-left: 4px solid #2563eb;">
                                <tr>
                                    <td style="font-style: italic; color: #374151; font-size: 15px; line-height: 1.6;">
                                        "{!! nl2br(e(\Illuminate\Support\Str::limit($messageObj->body, 250))) !!}"
                                    </td>
                                </tr>
                            </table>

                            <!-- Call to Action Button -->
                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td align="center">
                                        <a href="{{ route('chat.index', ['c' => $messageObj->conversation_id]) }}" style="display: inline-block; background-color: #2563eb; color: #ffffff; padding: 14px 32px; text-decoration: none; border-radius: 8px; font-size: 16px; font-weight: bold; box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);">
                                            {{ __('Reply to Message') }}
                                        </a>
                                    </td>
                                </tr>
                            </table>

                            <p style="margin: 30px 0 0; font-size: 13px; color: #9ca3af; text-align: center; line-height: 1.5;">
                                {{ __('Log in to your account to view the full conversation and respond.') }}
                            </p>

                        </td>
                    </tr>

                    <!-- Footer / Settings -->
                    <tr>
                        <td align="center" style="padding: 20px 30px; background-color: #f8fafc; border-top: 1px solid #e5e7eb;">
                            <p style="margin: 0; font-size: 12px; color: #6b7280;">
                                {{ __('You are receiving this because you enabled chat notifications in your settings.') }}
                            </p>
                        </td>
                    </tr>
                </table>

                <!-- Bottom Copyright -->
                <table width="100%" max-width="600" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px; margin-top: 20px;">
                    <tr>
                        <td align="center" style="padding: 0 20px;">
                            <p style="margin: 0; font-size: 12px; color: #9ca3af; line-height: 1.5;">
                                &copy; {{ date('Y') }} {{ config('app.name') }}. {{ __('All rights reserved.') }}<br>
                                {{ __('This is an automated message, please do not reply directly to this email.') }}
                            </p>
                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>

</body>
</html>