@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.forgetPassword') ; $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('forgotPasswordMobile') }}" method="post">

                        @csrf
                        <input type="hidden" name="accountId" value="{{env('accountId')}}" >
                        <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">

                                <!--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>

                                <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">
                                            <input type="text" class="form-control  " id="code" name="verify_code" value="{{ old('code') }}" placeholder="{{ __('lang.verifyCode') }}" >
                                        </div>
                                    </div>

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

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

                                    </div>


                                </div>

                                <div class="step-3 {{session()->has('errors') ? '' : 'd-none'}}">


                                    <div class="form-group">
                                        @if($account->accounts_auth_type == 'phone' )
                                            <label for="clientsphone" 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>
                                                            <span id="countryCodeSpan"> {{$account->accounts_country_code}} </span>
                                                        </div>
                                                    </div>
                                                    <input type="text" class="form-control " dir="ltr" id="clientsphone" name="customers_phone" value="{{ old('customers_phone') }}" placeholder="{{ __('lang.phone') }}" onkeypress="return ( event.charCode >= 48 && event.charCode <= 57)" disabled>
                                                    <div class="input-group-append " dir="ltr">
                                                        <button class="btn text_2 background_3 h-100" onClick="changeNumber();" type="button">{{__('lang.changeNumber')}}</button>
                                                    </div>
                                                </div>
                                            </div>
                                        @elseif($account->accounts_auth_type == 'email')
                                            <label for="clientsemail" 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="clientsemail" name="customers_email" value="{{ old('customers_email') }}" placeholder="{{ __('lang.email') }}"  disabled>
                                                <div class="input-group-append " dir="ltr">
                                                    <button class="btn text_2 background_3 h-100" onClick="changeEmail();" type="button">{{__('lang.changeEmail')}}</button>
                                                </div>
                                             </div>
                                        @endif
                                    </div>

                                    <div class="mb-3">
                                        <label for="password" class="form-label text_1 fb-700 font-18">{{ __('lang.password') }}  <span class="star_required color-red" >*</span> </label>
                                        <input type="password" class="form-control" id="password" name="password" placeholder="{{ __('lang.password') }}" value="{{ old('password') }}" required autocomplete="new-password">
                                    </div>

                                    <div class="mb-3">
                                        <label for="password_confirmation" class="form-label text_1 fb-700 font-18">{{ __('lang.passwordConfirmation') }}  <span class="star_required color-red" >*</span> </label>
                                        <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="{{ __('lang.passwordConfirmation') }}" value="{{ old('password_confirmation') }}" required  >
                                    </div>

                                    <div class="text-center d-grid">
                                        <input type="submit"  value="{{ __('lang.save') }}" class="btn text_2 background_3  py-2 font-14">
                                    </div>

                                </div>

                            </div>

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

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

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