@extends('home.layouts.login_content')
@section('content')

<style>
    .reg-newui {
    font-family: DINPro;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;

}

.reg-newui-head {
    padding: 0 32px;
    margin-top: 8px;
    margin-bottom: 16px;
}

.reg-newui-head-title {
    color: #17181e;
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
    padding-bottom: 6px;
}

.reg-newui-head-desc {
    color: #333;
}

.reg-newui-verify {
    padding: 24px 32px;
}

.by-verification-input {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
}

.by-verification-input-wrapper {
    position: relative;
    width: 100%;
}

.by-verification-input-wrapper-box {
    position: absolute;
    width: 60px;
    height: 60px;
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    color: #333;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    padding: 8px;
    caret-color: transparent;
    -moz-appearance: textfield;
}

.reg-newui-verify-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    color: #666;
}

.reg-newui-verify-bottom-info {
    display: inline-block;
}

.reg-newui-verify-bottom-action {
    display: inline-block;
}

.reg-newui-verify-bottom-action-count {
    display: inline-block;
    padding-right: 4px;
}

.reg-newui-verify-bottom-action-resend {
    display: inline-block;
    font-weight: 600;
    cursor: pointer;
    color: #f7a600;
    transition: color 1s ease;
}
</style>

<div class="body d-flex p-0">
    <div class="container-xxl">
        <div class="row g-3">
            <div class="col-lg-6 d-flex justify-content-center align-items-center auth-h100">
                <div class="d-flex flex-column" style="width: 450px;">

                    @if(session('responses'))
                    <div class="col-md-12 mb-4">
                        <div class="alert alert-danger alert-bg alert-button alert-block">
                            <h4 class="alert-title">{{session('responses')}}</h4>

                        </div>
                    </div>
                    @endif

                    <form  action="{{route('reg.verify.email.store')}}" method="post" class="login">
                        {{ csrf_field() }}

                    <div class="reg-newui">
                        <div class="reg-newui-head padding-y">
                            <div class="reg-newui-head-title">Submit your email for verification code</div>
                           </div>
                      <div class="reg-newui-verify">
                        <label class="form-label fs-6">Email address</label>
                          <div class="by-verification-input">
                            <input type="email"  name="email" class="form-control" required="required">
                            <input type="hidden"  name="ref" value="{{ $ref }}">


                          </div>
                          <button type="submit" class="btn btn-primary text-uppercase py-2 fs-5 w-50 mt-2">Next</button>
                        </form>

                      </div>

                    </div>



                    <a href="{{ url('/login') }}" title="#">Already registered? <span class="text-secondary text-decoration-underline">Log In</span></a>
                </div>
            </div>

           <div class="col-lg-6 d-none d-lg-flex justify-content-center align-items-center auth-h100">
                            <div class="qr-block text-center">
                                <img src="{{ asset('Phone.png') }}" alt="#" class="img-fluid my-4">
                                <h4>Refer, Earn, Repeat</h4>
                                <p>A $20 bonus in USDT and unlimited number of reward cards await when you refer friends.</p>
                            </div>
                        </div>
        </div> <!-- End Row -->

    </div>
</div>
@endsection