<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to {{ config('app.name') }}</title>
    <style>
        body { font-family: Arial, sans-serif; background: #f4f4f4; margin: 0; padding: 0; }
        .container { max-width: 600px; margin: 30px auto; background: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .header { background: linear-gradient(135deg, #16a34a, #15803d); padding: 32px 24px; text-align: center; }
        .header h1 { color: #ffffff; margin: 0; font-size: 24px; }
        .header p { color: #dcfce7; margin: 8px 0 0; font-size: 14px; }
        .body { padding: 32px 24px; }
        .body p { color: #374151; font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
        .credentials { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 20px; margin: 24px 0; }
        .credentials h3 { color: #15803d; margin: 0 0 12px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; }
        .credential-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #dcfce7; font-size: 14px; }
        .credential-row:last-child { border-bottom: none; }
        .credential-label { color: #6b7280; }
        .credential-value { color: #111827; font-weight: 600; font-family: monospace; }
        .btn { display: inline-block; background: #16a34a; color: #ffffff; text-decoration: none; padding: 12px 28px; border-radius: 6px; font-weight: 600; font-size: 15px; margin: 8px 4px; }
        .btn-outline { background: transparent; border: 2px solid #16a34a; color: #16a34a; }
        .actions { text-align: center; margin: 24px 0; }
        .warning { background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 12px 16px; margin: 16px 0; font-size: 13px; color: #92400e; }
        .footer { background: #f9fafb; padding: 20px 24px; text-align: center; border-top: 1px solid #e5e7eb; }
        .footer p { color: #9ca3af; font-size: 12px; margin: 0; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Welcome to {{ config('app.name') }}</h1>
            <p>Your account has been created successfully</p>
        </div>

        <div class="body">
            <p>Dear <strong>{{ $user->name }}</strong>,</p>

            <p>
                Your training application has been received and an account has been automatically
                created for you on <strong>{{ config('app.name') }}</strong>. You can use this
                account to track your registration status, access training materials, and download
                your certificate upon completion.
            </p>

            <div class="credentials">
                <h3>Your Login Credentials</h3>
                <div class="credential-row">
                    <span class="credential-label">Email Address</span>
                    <span class="credential-value">{{ $user->email }}</span>
                </div>
                <div class="credential-row">
                    <span class="credential-label">Temporary Password</span>
                    <span class="credential-value">{{ $temporaryPassword }}</span>
                </div>
            </div>

            <div class="warning">
                <strong>⚠ Important:</strong> This is a temporary password. Please log in and
                change it immediately to secure your account.
            </div>

            <div class="actions">
                <a href="{{ $loginUrl }}" class="btn">Log In to Your Account</a>
                <a href="{{ $resetUrl }}" class="btn btn-outline">Reset Password</a>
            </div>

            <p>
                If you did not apply for any training program on our platform, please ignore
                this email or contact us at
                <a href="mailto:{{ config('mail.from.address') }}">{{ config('mail.from.address') }}</a>.
            </p>

            <p>We look forward to seeing you in the training!</p>

            <p>
                Best regards,<br>
                <strong>{{ config('app.name') }} Training Team</strong>
            </p>
        </div>

        <div class="footer">
            <p>
                &copy; {{ date('Y') }} {{ config('app.name') }}. All rights reserved.<br>
                This email was sent to {{ $user->email }} because you applied for a training program.
            </p>
        </div>
    </div>
</body>
</html>
