@extends('layouts.index')

@section('content')

    <div class="  mt-3">

        {{-- Breadcrumb Section --}}
        @php
             $pages = [] ; $page = [] ;
             $page['title'] = __('lang.home') ; $page['route'] = route('home') ; $page['color'] = 'text_3' ;
             $pages[] = $page ;
             $page['title'] = __('lang.register') ; $page['route'] = 'javascript:void(0)' ; $page['color'] = 'text_1' ;
             $pages[] = $page ;
         @endphp
         @include('components.breadcrumb',$pages)

    </div>

        <div class="container my-5">
            <div class="row justify-content-center align-items-center login-form">
                <div class="col-md-6">
                    @include('includes.errors')
                    <!--Form with header-->
                    <form action="{{ route('postRegister') }}" method="post" autocomplete="off">

                        @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="accounts_country_code" id="accounts_country_code" value="{{$account->accounts_country_code}}" >
                        <input type="hidden" name="auth_type"  id="auth_type" value="{{$account->accounts_auth_type}}" >

                        <div class="card client-auth-card ">

                            <div class="card-body p-3">

                                <div class="login-title text-center text_1 py-5">
                                    <h2 class="fb-700 pb-2">{{ __('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 class="form-group mb-3">
                                            <div class="input-group mb-2 mobile-dev" dir="ltr" id="mobile-dev">
                                                <div class="input-group-prepend ">
                                                    <div class="input-group-text  px-4" dir="ltr">
                                                        <i class="fas fa-phone-alt"></i>
                                                        @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 " 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 d-grid" id="phoneDiv">
                                            <input type="button" onClick="sendCode();" id="sendCodeBtn"  value="{{ __('lang.sendCode') }}" class="btn text_2 background_3 font-14   py-2">
                                        </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">
                                            <input type="text" class="form-control " dir="ltr" id="customers_email" name="customers_email" value="{{ old('customers_email') }}" placeholder="{{ __('lang.email') }}" required>
                                         </div>

                                         <div class="text-center d-grid" id="emailDiv">
                                            <input type="button" onClick="sendCodeToEmail();" id="sendCodeToEmailBtn"  value="{{ __('lang.sendCode') }}" class="btn text_2 background_3 font-14   py-2">
                                        </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> --}}
                                            <input type="text" class="form-control  " id="code" name="verify_code" value="{{ old('verify_code') }}" placeholder="{{ __('lang.verifyCode') }}" >

                                        </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 text-center">
                            <span class="text_3 font-18"> {{ __('lang.hasUser') }}</span>
                            <a aria-label="" href="{{ route('login') }}"  class="font-18">{{ __('lang.login') }}</a>
                        </div>
                    </form>
                    <!--Form with header-->

                </div>
            </div>
        </div>
@endsection

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