@extends('emails.index')

@section('content')

    <table style='
            padding:30px;
            width: 100%;
            color: #1E1E1E;
            font-weight: normal;
            border-spacing: 0;
            border-left: 1px solid #d1edba;
            border-right: 1px solid #d1edba;
            '
        >
        <tbody>
            <tr>
                <td align='center'>
                    <p style='font-size: 1.5rem; font-weight: bold;'>Verification Code</p>

                    <p style='font-size: 1.2rem;'>
                        <span
                            style='
                            color: #0F0F1F;
                            margin: 19px 0px;
                            font-size: 0.8rem;
                            '>
                            Hi, {{ $mail_data['name'] }},
                        </span>
                    </p>

                    <p style='font-size: 1.2rem;'>
                        <span
                            style='
                            color: #0F0F1F;
                            margin: 19px 0px;
                            font-size: 0.8rem;
                            '
                        >
                            Your Verification code is:
                        </span>
                    </p>
                </td>
            </tr>
            <tr>
                <td align='center'>
                    <table
                        style='
                        width: 35rem;
                        color: #1E1E1E;
                        font-weight: normal;
                        border-spacing: 0;'
                    >
                        <tr >
                            @for ($i = 0; $i < 6; $i++)
                                <td>
                                    <div
                                        style='
                                        width: 48px;
                                        height: 48px;
                                        padding:12px;
                                        border-radius: 4px;
                                        border: 2px solid #3b7f04;
                                        background: #fff;
                                        '>
                                        <p
                                            style='
                                                margin: 16px;
                                                text-align: center;
                                                font-size: 2rem;
                                                font-weight: bold;
                                            '>
                                            {{ substr($mail_data['code'], $i, 1) }}
                                        </p>
                                    </div>
                                </td>
                            @endfor
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td align='center'>
                    <p style='font-size: 1.2rem;'>
                        <span
                            style='
                            color: #0F0F1F;
                            margin: 19px 0px;
                            font-size: 0.8rem;
                            '
                        >
                            The verification code is valid for 30 minutes.
                        </span>
                    </p>

                    <p style='font-size: 1.2rem;'>
                        <span
                            style='
                            color: #0F0F1F;
                            margin: 19px 0px;
                            font-size: 0.8rem;
                            '
                        >
                            For the security of your account, please do not disclose the following verification code to anyone.
                        </span>
                    </p>

                    <p style='font-size: 1.2rem;'>
                        <span
                            style='
                            color: #0F0F1F;
                            margin: 19px 0px;
                            font-size: 0.8rem;
                            '
                        >
                            If you need further assistance, please contact our live customer support on our website or app.
                        </span>
                    </p>

                    <p style='font-size: 1.2rem;'>
                        <span
                            style='
                            color: #0F0F1F;
                            margin: 19px 0px;
                            font-size: 0.8rem;
                            '
                        >
                            Regards,
                        </span>
                    </p>

                    <p style='font-size: 1.2rem;'>
                        <span
                            style='
                            color: #0F0F1F;
                            margin: 19px 0px;
                            font-size: 0.8rem;
                            '
                        >
                            The ShopNig Team
                        </span>
                    </p>
                </td>
            </tr>
        </tbody>
    </table>

@endsection