@extends('emails.layout')

@section('content')
<tr>
    <td style="padding: 0 40px;">
        <h1 style="color: #1a202c; font-size: 24px; font-weight: 600; margin: 0 0 16px 0;">
            Confirmation de paiement
        </h1>
        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0 0 24px 0;">
            Cher(e) {{ $userName }},
        </p>
        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0 0 24px 0;">
            Nous vous remercions pour votre paiement. Nous avons bien reçu votre paiement. Vous trouverez ci-dessous les détails de votre transaction :
        </p>

        <!-- Payment Details Table -->
        <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;">Numéro de facture :</strong>
                </td>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0; text-align: right;">
                    <span style="color: #4a5568; font-size: 14px;">{{ $invoiceNumber }}</span>
                </td>
            </tr>
            <tr>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0;">
                    <strong style="color: #2d3748; font-size: 14px;">Date de paiement :</strong>
                </td>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0; text-align: right;">
                    <span style="color: #4a5568; font-size: 14px;">{{ $paymentDate }}</span>
                </td>
            </tr>
            <tr>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0;">
                    <strong style="color: #2d3748; font-size: 14px;">Montant payé :</strong>
                </td>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0; text-align: right;">
                    <span style="color: #2d3748; font-size: 16px; font-weight: 600;">{{ $amount }} {{ strtoupper($currency) }}</span>
                </td>
            </tr>
            @if(isset($paymentMethod))
            <tr>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0;">
                    <strong style="color: #2d3748; font-size: 14px;">Mode de paiement :</strong>
                </td>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0; text-align: right;">
                    <span style="color: #4a5568; font-size: 14px; text-transform: capitalize;">{{ $paymentMethod }}</span>
                </td>
            </tr>
            @endif
            @if(isset($transactionId))
            <tr>
                <td style="padding: 16px 20px;">
                    <strong style="color: #2d3748; font-size: 14px;">ID de transaction :</strong>
                </td>
                <td style="padding: 16px 20px; text-align: right;">
                    <span style="color: #718096; font-size: 12px; font-family: monospace;">{{ $transactionId }}</span>
                </td>
            </tr>
            @endif
        </table>

        @if(isset($items) && count($items) > 0)
        <!-- Items Purchased -->
        <h2 style="color: #2d3748; font-size: 18px; font-weight: 600; margin: 0 0 16px 0;">
            Articles achetés
        </h2>
        <table style="width: 100%; border-collapse: collapse; margin: 0 0 32px 0;">
            @foreach($items as $item)
            <tr>
                <td style="padding: 12px 0; border-bottom: 1px solid #e2e8f0;">
                    <div style="color: #2d3748; font-size: 14px; font-weight: 500;">{{ $item['name'] }}</div>
                    @if(isset($item['description']))
                    <div style="color: #718096; font-size: 13px; margin-top: 4px;">{{ $item['description'] }}</div>
                    @endif
                </td>
                <td style="padding: 12px 0; border-bottom: 1px solid #e2e8f0; text-align: right;">
                    <span style="color: #4a5568; font-size: 14px;">{{ $item['amount'] }} {{ strtoupper($currency) }}</span>
                </td>
            </tr>
            @endforeach
        </table>
        @endif

        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0 0 24px 0;">
            Un reçu pour cette transaction a été enregistré dans votre compte. Vous pouvez le consulter à tout moment en vous connectant à votre tableau de bord.
        </p>

        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0;">
            Si vous avez des questions concernant ce paiement, n'hésitez pas à contacter notre équipe de support.
        </p>
    </td>
</tr>
@endsection

@section('footer-greeting', 'Nous vous souhaitons succès dans votre parcours d\'immigration')