{{-- 
    Payment Confirmation Email
    HTML Email Template
--}}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Confirmation</title>
</head>
<body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px;">
    
    {{-- Header --}}
    <div style="background: linear-gradient(to right, #16a34a, #15803d); padding: 30px; text-align: center; border-radius: 8px 8px 0 0;">
        <h1 style="color: white; margin: 0; font-size: 28px;">
            ✓ Payment Confirmed
        </h1>
    </div>
    
    {{-- Body --}}
    <div style="background: #ffffff; padding: 30px; border: 1px solid #e5e7eb; border-top: none;">
        
        <p style="font-size: 18px; color: #374151;">
            Hello {{ $userName }},
        </p>
        
        <p style="color: #4b5563;">
            Thank you for your payment. Your transaction has been successfully processed.
        </p>
        
        {{-- Payment Details Card --}}
        <div style="background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 20px; margin: 20px 0;">
            <h3 style="margin-top: 0; color: #166534;">Payment Details</h3>
            <table style="width: 100%; color: #166534;">
                <tr>
                    <td style="padding: 8px 0;"><strong>Amount:</strong></td>
                    <td style="padding: 8px 0; text-align: right;">{{ $amount }}</td>
                </tr>
                <tr>
                    <td style="padding: 8px 0;"><strong>Listing:</strong></td>
                    <td style="padding: 8px 0; text-align: right;">{{ $entityName }}</td>
                </tr>
                <tr>
                    <td style="padding: 8px 0;"><strong>Reference:</strong></td>
                    <td style="padding: 8px 0; text-align: right;">{{ $reference }}</td>
                </tr>
                <tr>
                    <td style="padding: 8px 0;"><strong>Coverage End:</strong></td>
                    <td style="padding: 8px 0; text-align: right;">{{ $coverageEnd }}</td>
                </tr>
            </table>
        </div>
        
        <p style="color: #4b5563;">
            Your listing is now active and visible to the public. You can manage your listing from your dashboard.
        </p>
        
        <div style="text-align: center; margin: 30px 0;">
            <a href="{{ route('dashboard.institutions.index') }}" 
               style="display: inline-block; padding: 12px 30px; background: linear-gradient(to right, #16a34a, #15803d); color: white; text-decoration: none; border-radius: 6px; font-weight: bold;">
                View My Listings
            </a>
        </div>
        
        <hr style="border: none; border-top: 1px solid #e5e7eb; margin: 30px 0;">
        
        <p style="color: #6b7280; font-size: 14px;">
            Thank you for using Health Directory.<br>
            <strong>The Health Directory Team</strong>
        </p>
    </div>
    
    {{-- Footer --}}
    <div style="background: #f9fafb; padding: 20px; text-align: center; border-radius: 0 0 8px 8px; border: 1px solid #e5e7eb; border-top: none;">
        <p style="margin: 0; color: #6b7280; font-size: 12px;">
            © {{ date('Y') }} Health Directory Marketing Platform. All rights reserved.
        </p>
    </div>
    
</body>
</html>
