@extends('email.mail')

@section('body')
    <table role="presentation" class="mb-100" cellspacing="0" cellpadding="30" width="800" align="center" border="0"
        style="background-color: #fafafa;">

        <tr>
            <td style="padding: 60px" class="p-50 leave-pad">
                <table role="presentation" cellspacing="0" cellpadding="16" width="600" align="center"
                    class="mb-100 leave-mar"
                    style="background-color: #fff; border-radius: 20px 20px; padding: 20px 0px; margin: 0px auto; padding-bottom: 40px;">

                    <tr>
                        <td class="lock-img" align="center">
                            <a href=""><img src="{{ config('app.aws_url') }}/mail_layout/hand_shake.png" alt="lock"
                                width="80" height="80"
                                    class="lock-non"></a>
                        </td>
                    </tr>
                    <tr>

                    <tr>
                        <td class="dear">
                            <h1 style="font-size: 22px; color: #000000; font-weight: 600; line-height: 33px; letter-spacing: 2.64px; text-transform: uppercase;"
                                class="dear-sec">Hello {{ $name }},</h1>
                        </td>
                    </tr>

                    <tr>
                        <td
                            style="font-size: 14px; font-weight: 400; color: #000000; line-height: 22px; letter-spacing: 1.2px; text-align: center;">
                            Welcome to the WAC Charge Map! Your account has been successfully
                            created.
                        </td>
                    </tr>

                    <tr>
                        <td
                            style="font-size: 12px; font-weight: 300; color: #000000; line-height: 18px; letter-spacing: 1.44px; text-align: center; text-transform: uppercase; margin-top: 30px;">
                            Please find your login credentials below:
                        </td>
                    </tr>

                    <tr>
                        <td style="padding: 30px 0;">
                            <table role="presentation" cellspacing="0" cellpadding="0" width="100%"
                                style="background-color: #f8f9fa; border-radius: 10px; padding: 20px;">
                                <tr>
                                    <td style="font-size: 14px; font-weight: 600; color: #16a34a; padding-bottom: 10px;">
                                        Email Address:
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-size: 14px; font-weight: 400; color: #000000; padding-bottom: 20px;">
                                        {{ $email }}
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-size: 14px; font-weight: 600; color: #16a34a; padding-bottom: 10px;">
                                        Password:
                                    </td>
                                </tr>
                                <tr>
                                    <td
                                        style="font-size: 16px; font-weight: 600; color: #000000; background-color: #e9ecef; padding: 10px; border-radius: 5px; text-align: center; letter-spacing: 2px;">
                                        {{ $password }}
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <tr>
                        <td
                            style="font-size: 12px; font-weight: 300; color: #dc3545; line-height: 18px; letter-spacing: 1.44px; text-align: center; margin-top: 20px;">
                            <strong>Important:</strong> Please change your password after your first login for security
                            purposes.
                        </td>
                    </tr>

                    <tr>
                        <td align="center" style="padding-top: 30px;">
                            <a href="{{ route('landing') }}"
                                style="background-color: #10823a; color: #ffffff; padding: 12px 30px; text-decoration: none; border-radius: 5px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;">
                                Login to Your Account
                            </a>
                        </td>
                    </tr>
        </tr>
    </table>
    </td>
    </tr>
    </table>
@endsection