@extends('emails.layout')

@section('content')
<tr>
    <td style="padding: 0 40px;">
        @if($language === 'fr')
        <h1 style="color: #1a202c; font-size: 24px; font-weight: 600; margin: 0 0 16px 0;">
            Échec du paiement de votre abonnement
        </h1>
        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0 0 24px 0;">
            Bonjour {{ $userName }},
        </p>
        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0 0 24px 0;">
            Malheureusement, nous n'avons pas pu traiter votre paiement pour votre abonnement <strong>{{ $planName }}</strong>.
            Cela peut être dû à un mode de paiement invalide, expiré ou à des fonds insuffisants.
        </p>
        @else
        <h1 style="color: #1a202c; font-size: 24px; font-weight: 600; margin: 0 0 16px 0;">
            Your Subscription Payment Failed
        </h1>
        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0 0 24px 0;">
            Hi {{ $userName }},
        </p>
        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0 0 24px 0;">
            Unfortunately, we were unable to process your payment for your <strong>{{ $planName }}</strong> subscription.
            This may be due to an invalid or expired payment method, or insufficient funds.
        </p>
        @endif

        <!-- Alert Banner -->
        <table style="width: 100%; border-collapse: collapse; margin: 0 0 28px 0; background-color: #fff5f5; border-left: 4px solid #e53e3e; border-radius: 4px;">
            <tr>
                <td style="padding: 16px 20px;">
                    <p style="color: #c53030; font-size: 14px; font-weight: 600; margin: 0 0 4px 0;">
                        @if($language === 'fr')
                        ⚠️ Tentative {{ $attemptCount }} échouée
                        @else
                        ⚠️ Attempt {{ $attemptCount }} failed
                        @endif
                    </p>
                    <p style="color: #742a2a; font-size: 14px; margin: 0;">
                        @if($language === 'fr')
                            @if($nextAttemptDate)
                            Nous réessaierons automatiquement le <strong>{{ $nextAttemptDate }}</strong>. Si cela échoue, votre abonnement sera annulé.
                            @else
                            Il n'y a plus de tentatives automatiques. Veuillez mettre à jour votre mode de paiement immédiatement pour éviter l'annulation.
                            @endif
                        @else
                            @if($nextAttemptDate)
                            We will automatically retry on <strong>{{ $nextAttemptDate }}</strong>. If this fails, your subscription will be canceled.
                            @else
                            There are no more automatic retries. Please update your payment method immediately to avoid cancellation.
                            @endif
                        @endif
                    </p>
                </td>
            </tr>
        </table>

        <!-- Payment Details -->
        <table style="width: 100%; border-collapse: collapse; margin: 0 0 32px 0; background-color: #f7fafc; border-radius: 8px;">
            <tr>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0;">
                    <strong style="color: #2d3748; font-size: 14px;">
                        {{ $language === 'fr' ? 'Abonnement' : 'Subscription' }}
                    </strong>
                </td>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0; text-align: right;">
                    <span style="color: #4a5568; font-size: 14px;">{{ $planName }}</span>
                </td>
            </tr>
            <tr>
                <td style="padding: 16px 20px;">
                    <strong style="color: #2d3748; font-size: 14px;">
                        {{ $language === 'fr' ? 'Montant dû' : 'Amount Due' }}
                    </strong>
                </td>
                <td style="padding: 16px 20px; text-align: right;">
                    <span style="color: #e53e3e; font-size: 16px; font-weight: 600;">
                        {{ number_format($amountDue, 2) }} {{ $currency }}
                    </span>
                </td>
            </tr>
        </table>

        <!-- CTA Button -->
        <table style="width: 100%; border-collapse: collapse; margin: 0 0 32px 0;">
            <tr>
                <td style="text-align: center;">
                    <a href="{{ $updateCardUrl }}"
                       style="display: inline-block; background-color: #416270; color: #ffffff; font-size: 16px; font-weight: 600;
                              padding: 14px 36px; border-radius: 8px; text-decoration: none; letter-spacing: 0.5px;">
                        @if($language === 'fr')
                        Mettre à jour mon mode de paiement
                        @else
                        Update Payment Method
                        @endif
                    </a>
                </td>
            </tr>
        </table>

        <p style="color: #718096; font-size: 14px; line-height: 22px; margin: 0 0 24px 0;">
            @if($language === 'fr')
            Si vous pensez qu'il s'agit d'une erreur ou si vous avez besoin d'aide, veuillez contacter notre équipe d'assistance.
            @else
            If you believe this is an error or need assistance, please contact our support team.
            @endif
        </p>
    </td>
</tr>
@endsection