<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Training Reminder</title>
</head>
<body style="margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f3f4f6;">
    <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width: 600px; margin: 0 auto; background-color: #ffffff;">
        <!-- Header -->
        <tr>
            <td style="background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); padding: 40px 30px; text-align: center;">
                <div style="width: 60px; height: 60px; background-color: rgba(255,255,255,0.2); border-radius: 50%; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
                    <span style="font-size: 30px;">⏰</span>
                </div>
                <h1 style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 600;">
                    Training Reminder
                </h1>
            </td>
        </tr>
        
        <!-- Body -->
        <tr>
            <td style="padding: 40px 30px;">
                <p style="margin: 0 0 20px; font-size: 16px; color: #374151; line-height: 1.6;">
                    Dear {{ $userName }},
                </p>
                
                <p style="margin: 0 0 20px; font-size: 16px; color: #374151; line-height: 1.6;">
                    This is a friendly reminder that your training session is coming up soon!
                </p>
                
                <!-- Reminder Alert -->
                <table role="presentation" width="100%" style="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); border-radius: 8px; margin: 30px 0;">
                    <tr>
                        <td style="padding: 25px; text-align: center;">
                            <h2 style="margin: 0 0 10px; color: #1e40af; font-size: 20px;">
                                📅 {{ $sessionName }}
                            </h2>
                            <p style="margin: 0; color: #1e3a8a; font-size: 14px;">
                                {{ $trainingName }}
                            </p>
                        </td>
                    </tr>
                </table>
                
                <!-- Session Details Card -->
                <table role="presentation" width="100%" style="background-color: #f9fafb; border: 2px solid #3b82f6; border-radius: 8px; margin: 30px 0;">
                    <tr>
                        <td style="padding: 25px;">
                            <h3 style="margin: 0 0 20px; color: #111827; font-size: 18px; border-bottom: 2px solid #3b82f6; padding-bottom: 10px;">
                                Session Details
                            </h3>
                            <table role="presentation" width="100%" cellspacing="0" cellpadding="12">
                                <tr>
                                    <td style="color: #6b7280; font-size: 14px; width: 30%;">
                                        <span style="font-size: 16px;">📅</span> Date:
                                    </td>
                                    <td style="color: #111827; font-size: 15px; font-weight: 500;">{{ $date }}</td>
                                </tr>
                                <tr>
                                    <td style="color: #6b7280; font-size: 14px;">
                                        <span style="font-size: 16px;">⏰</span> Time:
                                    </td>
                                    <td style="color: #111827; font-size: 15px; font-weight: 500;">{{ $time }}</td>
                                </tr>
                                <tr>
                                    <td style="color: #6b7280; font-size: 14px;">
                                        <span style="font-size: 16px;">📍</span> Venue:
                                    </td>
                                    <td style="color: #111827; font-size: 15px; font-weight: 500;">{{ $venue }}</td>
                                </tr>
                                @if($meetingLink)
                                <tr>
                                    <td style="color: #6b7280; font-size: 14px;">
                                        <span style="font-size: 16px;">🔗</span> Meeting Link:
                                    </td>
                                    <td style="color: #111827; font-size: 14px;">
                                        <a href="{{ $meetingLink }}" style="color: #2563eb; text-decoration: underline;">Join Online Session</a>
                                    </td>
                                </tr>
                                @endif
                            </table>
                        </td>
                    </tr>
                </table>
                
                <!-- Checklist -->
                <table role="presentation" width="100%" style="background-color: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; margin: 30px 0;">
                    <tr>
                        <td style="padding: 20px;">
                            <h4 style="margin: 0 0 15px; color: #166534; font-size: 15px;">
                                ✓ Pre-Session Checklist
                            </h4>
                            <ul style="margin: 0; padding-left: 20px; color: #15803d; font-size: 13px; line-height: 2;">
                                <li>Test your internet connection (for online sessions)</li>
                                <li>Ensure your device is charged or plugged in</li>
                                <li>Have a notebook and pen ready for notes</li>
                                <li>Join 5-10 minutes early to settle in</li>
                                <li>Check your email for any last-minute updates</li>
                            </ul>
                        </td>
                    </tr>
                </table>
                
                @if($meetingLink)
                <!-- Join Button -->
                <table role="presentation" width="100%" style="margin: 30px 0;">
                    <tr>
                        <td align="center">
                            <a href="{{ $meetingLink }}" style="display: inline-block; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: #ffffff; padding: 16px 40px; text-decoration: none; border-radius: 6px; font-size: 16px; font-weight: 500;">
                                Join Training Session
                            </a>
                        </td>
                    </tr>
                </table>
                @endif
                
                <!-- Contact Info -->
                <table role="presentation" width="100%" style="background-color: #f9fafb; border-radius: 8px; margin: 30px 0;">
                    <tr>
                        <td style="padding: 20px;">
                            <p style="margin: 0; color: #374151; font-size: 14px; line-height: 1.6;">
                                <strong>Need Help?</strong><br>
                                If you have any questions or need assistance, please contact our support team before the session begins.
                            </p>
                        </td>
                    </tr>
                </table>
                
                <p style="margin: 0; font-size: 14px; color: #6b7280; line-height: 1.6;">
                    We look forward to seeing you at the training!<br><br>
                    Best regards,<br>
                    <strong>{{ config('app.name') }}</strong> Training Team
                </p>
            </td>
        </tr>
        
        <!-- Footer -->
        <tr>
            <td style="background-color: #f3f4f6; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
                <p style="margin: 0 0 10px; font-size: 13px; color: #6b7280;">
                    &copy; {{ date('Y') }} {{ config('app.name') }}. All rights reserved.
                </p>
                <p style="margin: 0; font-size: 12px; color: #9ca3af;">
                    Please arrive on time for your training session.
                </p>
            </td>
        </tr>
    </table>
</body>
</html>
