@extends('theme-views.layouts.app')
@section('title', translate('customer_Verify').' | '.$web_config['name']->value.' '.translate('ecommerce'))
@section('content')
<main class="main-content d-flex flex-column gap-3 py-3 mb-30">
<div class="container {{($user_verify == 1 ? 'd-none': '')}}" id="otp_form_section">
@php($email_verify_status = getWebConfig(name: 'email_verification'))
@php($phone_verify_status = getWebConfig(name: 'phone_verification'))
@if($phone_verify_status == 1)
<div class="card mb-5">
<div class="card-body py-5 px-lg-5">
<div class="row align-items-center pb-5">
<div class="col-lg-6 mb-5 mb-lg-0">
<h2 class="text-center mb-2 text-capitalize">{{ translate('OTP_verification') }}</h2>
<p class="text-center mb-5 text-muted">{{ translate('please_Verify_that_it’s_you').'.' }}</p>
<div class="d-flex justify-content-center">
<img width="283" class="dark-support"
src="{{theme_asset('assets/img/media/otp.png')}}"
alt="{{translate('image')}}">
</div>
</div>
<div class="col-lg-6 text-center">
<div class="d-flex justify-content-center mb-3">
<img width="50" class="dark-support"
src="{{theme_asset('assets/img/media/otp-lock.png')}}"
alt="{{translate('image')}}">
</div>
<p class="text-muted mx-w mx-auto width--27-5rem">
{{ translate('an_OTP_(One_Time_Password)_has_been_sent_to').' '.$user->phone.' '.translate('Please_enter_the_OTP_in_the_field_below_to_verify_your_phone').'.' }}
</p>
<div class="resend-otp-custom">
<p class="text-primary mb-2">{{ translate('resend_code_within') }}</p>
<h6 class="text-primary mb-5 verifyTimer">
<span class="verifyCounter" data-second="{{$get_time}}"></span>{{translate('s')}}
</h6>
</div>
<form action="{{ route('customer.auth.ajax_verify') }}" class="otp-form" method="POST"
id="customer-verify">
@csrf
<div class="d-flex gap-2 gap-sm-3 align-items-end justify-content-center">
<input class="otp-field" type="text" name="opt-field[]" maxlength="1"
autocomplete="off">
<input class="otp-field" type="text" name="opt-field[]" maxlength="1"
autocomplete="off">
<input class="otp-field" type="text" name="opt-field[]" maxlength="1"
autocomplete="off">
<input class="otp-field" type="text" name="opt-field[]" maxlength="1"
autocomplete="off">
</div>
<input class="otp-value" type="hidden" name="token">
<input type="hidden" value="{{$user->id}}" name="id">
<div class="d-flex justify-content-center gap-3 mt-5">
<button class="btn btn-outline-primary resend-otp-button" type="button"
data-field = 'user_id'
data-route="{{ route('customer.auth.resend_otp') }}"
id="resend-otp">{{ translate('resend_OTP') }}
</button>
<button class="btn btn-primary px-sm-5" type="submit"
disabled>{{ translate('verify') }}</button>
</div>
</form>
</div>
</div>
</div>
</div>
@elseif($email_verify_status == 1)
<div class="card">
<div class="card-body py-5 px-lg-5">
<div class="row justify-content-center pb-5">
<div class="col-lg-6 text-center">
<div class="d-flex justify-content-center mb-3">
<img width="220" class="dark-support"
src="{{theme_asset('assets/img/media/otp-2.png')}}"
alt="">
</div>
<h2 class="text-center mb-3">{{ translate('OTP_Verification') }}</h2>
<p class="text-muted mx-w mx-auto width--27-5rem">
{{ translate('an_OTP_(One_Time_Password)_has_been_sent_to_your_email').'.'.translate('Please_enter_the_OTP_in_the_field_below_to_verify_your_email').'.' }}</p>
<div class="resend-otp-custom">
<p class="text-primary mb-2 ">{{ translate('Resend_code_within') }}</p>
<h6 class="text-primary mb-5 verifyTimer">
<span class="verifyCounter" data-second="{{$get_time}}"></span>s
</h6>
</div>
<form action="{{ route('customer.auth.ajax_verify') }}" class="otp-form" method="POST"
id="customer-verify">
@csrf
<div class="d-flex gap-2 gap-sm-3 align-items-end justify-content-center">
<input class="otp-field style--two" type="text" name="opt-field[]" maxlength="1"
autocomplete="off">
<input class="otp-field style--two" type="text" name="opt-field[]" maxlength="1"
autocomplete="off">
<input class="otp-field style--two" type="text" name="opt-field[]" maxlength="1"
autocomplete="off">
<input class="otp-field style--two" type="text" name="opt-field[]" maxlength="1"
autocomplete="off">
</div>
<input class="otp-value" type="hidden" name="token">
<input type="hidden" value="{{$user->id}}" name="id">
<div class="d-flex justify-content-center gap-3 mt-5">
<button class="btn btn-outline-primary resend-otp-button" type="button"
data-field = 'user_id'
data-route="{{ route('customer.auth.resend_otp') }}"
id="resend-otp">{{ translate('resend_OTP') }}
</button>
<button class="btn btn-primary px-sm-5"
type="submit">{{ translate('verify') }}
</button>
</div>
</form>
</div>
</div>
</div>
</div>
@endif
</div>
<div class="container {{($user_verify != 1?'d-none':'')}}" id="success_message">
<div class="card">
<div class="card-body p-md-5">
<div class="row justify-content-center">
<div class="col-xl-6 col-md-10">
<div class="text-center d-flex flex-column align-items-center gap-3">
<img width="46" src="{{theme_asset('assets/img/icons/check.png')}}" class="dark-support"
alt="{{translate('image')}}">
<h3 class="text-capitalize">{{translate('verification_successfully_completed')}}</h3>
<p class="text-muted">
{{ translate('thank_you_for_your_verification').'!'.translate('now_you_can_login_your_account_is_ready_to_use')}}</p>
<div class="d-flex flex-wrap justify-content-center gap-3">
<button class="btn btn-outline-primary bg-primary-light border-transparent"
data-bs-toggle="modal"
data-bs-target="#loginModal">{{ translate('login') }}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
@endsection
@push('script')
<script src="{{ theme_asset('assets/js/auth.js') }}"></script>
@endpush