@extends('layouts.index')

@section('content')

<div class="container auth-pages">
    <div class="row">
        <div class="col-md-5 auth-background">
            <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">

            <div class="container h-100">
                <div class="row h-100 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('forgotPasswordMobile') }}" method="post" id="formSubmit">

                            @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="">

                                <div class="p-3">
                                    <div class="login-title text-center text_1 py-5">
                                        <h2 class="fb-700 pb-2 head-title">{{ __('lang.forgetPassword') }} </h2>
                                    </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" id="full_phone" name="customers_phone">
                                                <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="text-center d-grid" id="phoneDiv">
                                                <input type="button" onClick="sendCode();" id="sendCodeBtn"  value="{{ __('lang.sendCode') }}" class="btn main-btn font-16 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">
                                                <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>

                                    <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="position-relative w-100">
                                                    <input type="text" class="form-control custom-input-field" id="code" name="verify_code" value="{{ old('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.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="d-flex mb-3" dir="ltr">
                                                    <div class="mobile-dev flex-grow-1">
                                                        <input type="tel" class="form-control custom-input-field" dir="ltr" id="clientsphone" name="customers_phone_display" value="{{ old('customers_phone') }}" placeholder="{{ __('lang.phone') }}" disabled>
                                                    </div>
                                                    <div class="px-2">
                                                        <button class="btn main-btn h-100" onClick="changeNumber();" type="button" style="white-space: nowrap;">{{__('lang.changeNumber')}}</button>
                                                    </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">
                                                    <div class="position-relative">
                                                        <input type="text" class="form-control custom-input-field" dir="ltr" id="clientsemail" name="customers_email" value="{{ old('customers_email') }}" placeholder="{{ __('lang.email') }}"  disabled>
                                                        <i class="polaris-max-icon-mail-outline font-20 position-absolute custom-input-icon"></i>
                                                    </div>
                                                    <div class="input-group-append mt-2" dir="ltr">
                                                        <button class="btn main-btn 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> --}}
                                            <div class="position-relative">
                                                <input type="password" class="form-control custom-input-field" id="password" name="password" placeholder="{{ __('lang.password') }} *" value="{{ old('password') }}" required autocomplete="new-password">
                                                <i class="polaris-max-icon-lock-outline font-20 position-absolute custom-input-icon"></i>
                                                <i class="polaris-max-icon-eye-off-outline font-16 position-absolute toggle-password"></i>
                                            </div>

                                        </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> --}}
                                            <div class="position-relative">
                                                <input type="password" class="form-control custom-input-field" id="password_confirmation" name="password_confirmation" placeholder="{{ __('lang.passwordConfirmation') }} *" value="{{ old('password_confirmation') }}" required  >
                                                <i class="polaris-max-icon-lock-outline font-20 position-absolute custom-input-icon"></i>
                                                <i class="polaris-max-icon-eye-off-outline font-16 position-absolute toggle-password"></i>
                                            </div>

                                        </div>

                                        <div class="text-center d-grid">
                                            <input type="submit"  value="{{ __('lang.save') }}" class="btn main-btn px-5 border-radius-50 font-16">
                                        </div>

                                    </div>

                                </div>

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

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

@include('includes.intltel-config', ['coutryCodeField' => 'accounts_country_code'])

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