@extends('layouts.index')

@section('content')

    <div class="container auth-pages">
        <div class="row">
            <div class="col-md-5 auth-background order-2 order-md-1">
                <div class="container h-100">
                    <div class="row h-100 justify-content-center align-items-center">
                        <div class="col-md-8 text-center">
                            <div class="welcome-title">{{ __('lang.authWelcomeTitle') }}</div>
                            <div class="welcome-desc">{{ __('lang.authWelcomeDesc') }}</div>
                            <div class="mt-5">
                                <a aria-label="go to login page" href="{{ route('login') }}" class="page-btn">{{ __('lang.login') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-7 order-1 order-md-2">
                <div class="container h-100">
                    <div class="row h-10 justify-content-center align-items-center login-form">
                        <div class="col-lg-10 col-md-10">
                            @include('includes.errors')
                            <!--Form with header-->
                            <form action="{{ route('postRegister') }}" method="post" autocomplete="off" id="formSubmit">

                                @csrf
                                <input type="hidden" name="accountId" value="{{env('accountId')}}">
                                <input type="hidden" name="phone_verified" value="1">
                                <input type="hidden" name="device_token" id="device_token" value="test">
                                <input type="hidden" name="auth_type"  id="auth_type" value="{{$account->accounts_auth_type}}">

                                <div class="">

                                    <div class="px-md-3 py-3">

                                        <div class="login-title text-center text_1 py-5">
                                            <h2 class="fb-700 pb-2 head-title">{{ __('lang.CreateYourAccount') }}</h2>
                                            {{-- <h4 class="fb-700">{{ __('lang.ItsFreeAndeasy') }}</h4> --}}
                                        </div>

                                        <!--Body-->
                                        <div class="step-1 {{session()->has('errors') ? 'd-none' : ''}}">
                                            @if($account->accounts_auth_type == 'phone')
                                                {{-- <label for="phone" class="form-label text_1 fb-700 font-18">{{ __('lang.phone') }}</label> --}}
                                                <div dir="ltr" class="mobile-dev mb-3" id="mobile-dev">
                                                    {{-- <input type="hidden" name="accounts_country_code" id="accounts_country_code" value="{{ old('accounts_country_code',$account->accounts_country_code) }}" >
                                                    <input type="hidden" id="customers_phone" name="customers_phone"> --}}
                                                     <input type="hidden" name="countryCode" id="countryCode" value="{{old('countryCode', $account->accounts_multiple_countries ? '' : $account->accounts_country_code)}}">
                                                    <input type="tel" dir="ltr" class="form-control custom-input-field " name="tel_customers_phone"  value="{{old('customers_phone')}}" id="phone" placeholder="{{ __('lang.phone') }} *">
                                                    <span id="valid-msg" class="hidden text-success">✓ {{ __('lang.Valid') }}</span>
                                                    <span id="error-msg" class="hidden text-danger"></span>
                                                </div>

                                                {{-- <div class="form-group mb-3 with-input-group ">
                                                    <div class="input-group mb-2 mobile-dev  position-relative" dir="ltr" id="mobile-dev">
                                                        <div class="input-group-prepend ">
                                                            <div class="input-group-text  px-4" dir="ltr">

                                                                @if(!$account->accounts_multiple_countries) {{$account->accounts_country_code}} @endif
                                                            </div>
                                                            @if($account->accounts_multiple_countries)
                                                                @include('auth.countryCode')
                                                            @endif
                                                        </div>

                                                        <input type="text" class="form-control custom-input-field" dir="ltr" id="customers_phone" name="customers_phone" value="{{ old('customers_phone') }}" placeholder="{{ __('lang.phone') }}" onkeypress="return ( event.charCode >= 48 && event.charCode <= 57)" required>

                                                    </div>
                                                </div> --}}
                                                <div class="text-center " id="phoneDiv">
                                                    <input type="button" onClick="sendCode();" id="sendCodeBtn"  value="{{ __('lang.sendCode') }}" class="btn main-btn font-16 px-5 border-radius-50">
                                                </div>
                                            @elseif($account->accounts_auth_type == 'email')
                                                {{-- <label foremailphone" class="form-label text_1 fb-700 font-18">{{ __('lang.email') }}</label> --}}
                                                <div class="form-group mb-3 email-dev" id="email-dev">
                                                    <div class="position-relative">
                                                        <input type="text" class="form-control custom-input-field" dir="ltr" id="customers_email" name="customers_email" value="{{ old('customers_email') }}" placeholder="{{ __('lang.email') }}" required>
                                                        <i class="polaris-max-icon-mail-outline font-20 position-absolute custom-input-icon"></i>
                                                    </div>
                                                 </div>

                                                 <div class="text-center " id="emailDiv">
                                                    <input type="button" onClick="sendCodeToEmail();" id="sendCodeToEmailBtn"  value="{{ __('lang.sendCode') }}" class="btn main-btn px-5 border-radius-50 font-16">
                                                </div>
                                            @endif
                                            {{-- <div class="  container text-center " >
                                                <div id="recaptcha-container"  ></div>
                                            </div> --}}
                                        </div>

                                        <div class="step-2 d-none">
                                            <span class="m-0 p-2">{{ __('lang.willrecieveCode') }}</span>
                                            <span id="countDown"> </span>
                                            <span class="m-0 p-2">{{ __('lang.second') }}</span>

                                            <div class="form-group">
                                                <div class="input-group mb-2 mobile-dev" id="code-dev">

                                                    {{-- <div class="input-group-prepend">
                                                        <div class="input-group-text">{{__('lang.verifyCode')}}</div>
                                                    </div> --}}
                                                    <div class="position-relative w-100">
                                                        <input type="text" class="form-control  custom-input-field" id="code" name="verify_code" value="{{ old('verify_code') }}" placeholder="{{ __('lang.verifyCode') }}" >
                                                        <i class="polaris-max-icon-lock-outline font-20 position-absolute custom-input-icon"></i>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="text-center" id="resendphoneDiv">
                                                <input type="button" onClick="verifyCode();" value="{{ __('lang.completeRegister') }}" class="btn text_1 background_3 font-14 py-2">

                                                <input type="button" onClick="resendCodeFunction();" id="resendCode" value="{{ __('lang.resendCode') }}" class="btn text_1 background_3 resendCode py-2">
                                            </div>

                                            {{-- <div class="  container text-center  " >
                                                <div id="recaptcha-container-1"  ></div>
                                            </div> --}}
                                        </div>

                                        <div class="step-3 {{session()->has('errors') ? '' : 'd-none'}}">
                                            {{-- @if(session()->has('errors') ) --}}
                                                @include('auth.step3')
                                            {{-- @endif --}}
                                        </div>

                                        @if(isset($account->accounts_social_login_btns) && $account->accounts_social_login_btns == '1')
                                            {{-- <hr class="text_4"/> --}}
                                            {{-- @include('auth.social-login') --}}
                                        @endif
                                    </div>

                                </div>

                                {{-- <div class="my-3 d-md-none d-block">
                                    <p class="m-0 text-center">
                                        <span class="text_4 font-16"> {{ __('lang.hasUser') }}</span>
                                        <a aria-label="go to login page" href="{{ route('login') }}"  class="font-18 text_1">{{ __('lang.login') }}</a>
                                    </p>
                                </div> --}}

                            </form>
                            <!--Form with header-->

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@include('auth.scripts',['page'=>'register','coutryCodeField'=>'countryCode'])