@extends('layout.authenticate')

@section('content')
    <div class="d-flex flex-column flex-root" xmlns="http://www.w3.org/1999/html">
        <div class="login login-5 login-signup-on d-flex flex-row-fluid" id="kt_login">
            <div class="d-flex flex-center bgi-size-cover bgi-no-repeat flex-row-fluid"
                 style="background-image: url({{ asset('media/bg/bg-2.jpg') }});">
                <div class="login-form text-center text-white p-7 position-relative overflow-hidden">
                    <div class="d-flex flex-center mb-15">
                        <a href="#">
                            <img src="{{ asset('media/logos/ekyc-logo.png') }}" class="max-h-75px" alt=""/>
                        </a>
                    </div>
                    <div class="email-section">
                        <div class="mb-20">
                            <h3 class="opacity-40 font-weight-normal">Email Verification</h3>
                        </div>
                        <form data-url="{{ route('email.store',$customerTempData) }}"
                              class="form fv-plugins-bootstrap fv-plugins-framework" novalidate="novalidate"
                              id="kt_email_create_form">
                            {{ csrf_field() }}
                            <label class="float-left">Email Address *</label>
                            <div class="form-group">
                                <input
                                    class="form-control h-auto text-white bg-white-o-5 rounded-pill border-0 py-4 px-8"
                                    type="email" placeholder="example@gmail.com" name="email"
                                    id="email" autocomplete="off"/>
                                <p class="pt-2">You will receive an OTP on your Email Address</p>
                            </div>
                            <div class="form-group text-center mt-10">
                                <button id="kt_email_submit" type="submit"
                                        class="btn btn-pill btn-primary opacity-90 px-15 py-3">Continue
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="email-otp-section d-none">
                        <div class="mb-20">
                            <h3 class="opacity-40 font-weight-normal">Confirm OTP</h3>
                            <p>Sent to +91 <span class="opacity-40" id="sent_email_text"></span> <a
                                    href="javascript:void(0);" id="change_email">(change)</a></p>
                        </div>
                        <form data-url="{{ route('email-otp.verification',$customerTempData) }}"
                              class="form fv-plugins-bootstrap fv-plugins-framework" novalidate="novalidate"
                              id="kt_email_otp_form">
                            {{ csrf_field() }}
                            <input type="hidden" id="email_hidden" name="email_hidden">
                            <label class="float-left">OTP *</label>
                            <div class="form-group">
                                <input
                                    class="form-control h-auto text-white bg-white-o-5 rounded-pill border-0 py-4 px-8"
                                    type="text" placeholder="" name="email_otp_code"
                                    id="email_otp_code" autocomplete="off" maxlength="5"/>
                                <p id="resend_span" class="">Resend OTP in <span id="countdown_timer">60</span> seconds
                                </p>
                                <p class="pt-2 resend d-none" id="">Didn't receive OTP? Resend via Email</p>
                            </div>
                            <div class="form-group text-center mt-10">
                                <button id="kt_email_otp_verification_submit" type="submit"
                                        class="btn btn-pill btn-primary opacity-90 px-15 py-3">Continue
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script type="text/javascript" src="{{ url('js/modules/auth/register-email-verification-step.js?t='.time()) }}"></script>
@endsection