<div class="one-time-passcode">
    <div class="card">
        <div class="card-header">
            <h4 class="box-title m-0 p-0">{{__('One Time Passcode') }}</h4>
        </div>
        <div class="card-body">
            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                        <p>
                            {{ __('Improve your account security by enabling additional security measures.') }}
                        </p>
                        <form action="{{ route('one-time-passcode.enable') }}" method="post" id="formOneTimePasscode" onsubmit="return false;">
                            <div class="row">
                                <div class="col-12" id="inputDiv">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-check form-switch mb-3">
                                                <input class="form-check-input me-3" type="checkbox" value="login" id="OTPLogin" name="fa3_setting[]" onclick="showOtpSaveBtn()" {{is_array(Auth::user()->setting->fa3_setting) && in_array('login',Auth::user()->setting->fa3_setting) ? 'checked' : ''}}>
                                                <label class="form-check-label" for="OTPLogin">{{__('Login') }}</label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-check form-switch mb-3">
                                                <input class="form-check-input me-3" type="checkbox" name="fa3_setting[]" value="withdrawal" id="OTPWithdrawal" onclick="showOtpSaveBtn()" {{is_array(Auth::user()->setting->fa3_setting) && in_array('withdrawal',Auth::user()->setting->fa3_setting) ? 'checked' : ''}}>
                                                <label class="form-check-label" for="OTPWithdrawal">{{__('Withdrawal') }}</label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-check form-switch mb-3">
                                                <input class="form-check-input me-3" type="checkbox" name="fa3_setting[]" value="deposit" id="OTPDeposit" onclick="showOtpSaveBtn()" {{is_array(Auth::user()->setting->fa3_setting) && in_array('deposit',Auth::user()->setting->fa3_setting) ? 'checked' : ''}}>
                                                <label class="form-check-label" for="OTPDeposit">{{__('Deposit') }}</label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-check form-switch mb-3">
                                                <input class="form-check-input me-3" type="checkbox" name="fa3_setting[]" value="order" id="OTPOrder" onclick="showOtpSaveBtn()" {{is_array(Auth::user()->setting->fa3_setting) && in_array('order',Auth::user()->setting->fa3_setting) ? 'checked' : ''}}>
                                                <label class="form-check-label" for="OTPOrder">{{__('Purchase') }}</label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-check form-switch mb-3">
                                                <input class="form-check-input me-3" type="checkbox" name="fa3_setting[]" value="transfer" id="OTPTransfer" onclick="showOtpSaveBtn()" {{is_array(Auth::user()->setting->fa3_setting) && in_array('transfer',Auth::user()->setting->fa3_setting) ? 'checked' : ''}}>
                                                <label class="form-check-label" for="OTPTransfer">{{__('Transfer') }}</label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-check form-switch mb-3">
                                                <input class="form-check-input me-3" type="checkbox" name="fa3_setting[]" value="bonus_purchase_pool" id="OTPBonusPurchasePool" onclick="showOtpSaveBtn()" {{is_array(Auth::user()->setting->fa3_setting) && in_array('bonus_purchase_pool',Auth::user()->setting->fa3_setting) ? 'checked' : ''}}>
                                                <label class="form-check-label" for="OTPBonusPurchasePool">{{__('Bonus Purchase Pool') }}</label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-check form-switch mb-3">
                                                <input class="form-check-input me-3" type="checkbox" name="fa3_setting[]" value="redeem_gift_code" id="OTPRedeemGiftCode" onclick="showOtpSaveBtn()" {{is_array(Auth::user()->setting->fa3_setting) && in_array('redeem_gift_code',Auth::user()->setting->fa3_setting) ? 'checked' : ''}}>
                                                <label class="form-check-label" for="OTPRedeemGiftCode">{{__('Redeem Gift Code') }}</label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-check form-switch mb-3">
                                                <input class="form-check-input me-3" type="checkbox" name="fa3_setting[]" value="cancel_gift_code" id="OTPCancelGiftCode" onclick="showOtpSaveBtn()" {{is_array(Auth::user()->setting->fa3_setting) && in_array('cancel_gift_code',Auth::user()->setting->fa3_setting) ? 'checked' : ''}}>
                                                <label class="form-check-label" for="OTPCancelGiftCode">{{__('Cancel Gift Code') }}</label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-check form-switch mb-3">
                                                <input class="form-check-input me-3" type="checkbox" name="fa3_setting[]" value="send_gift_code" id="OTPSendGiftCode" onclick="showOtpSaveBtn()" {{is_array(Auth::user()->setting->fa3_setting) && in_array('send_gift_code',Auth::user()->setting->fa3_setting) ? 'checked' : ''}}>
                                                <label class="form-check-label" for="OTPSendGiftCode">{{__('Send Gift Code') }}</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12" id="otpDiv" style="display: none">
                                    <div class="auth-input-div-max-width">
                                        <p class="mb-1">{{ __('OTP') }} <span class="text-danger">*</span></p>
                                        <div class="flex mb-2 rtl:space-x-reverse justify-content-between otp-input-group">
                                            <div>
                                                <input type="text" inputmode="numeric" name="otp[]" maxlength="1" data-focus-input-init data-focus-input-next="setting-threefa-2" id="setting-threefa-1" placeholder="0" class="threeFaOtpInput otp-inputs hide-placeholder-on-focus block w-10 h-10 py-3 text-sm text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"/>
                                            </div>
                                            <div>
                                                <input type="text" inputmode="numeric" name="otp[]" maxlength="1" data-focus-input-init data-focus-input-prev="setting-threefa-1" data-focus-input-next="setting-threefa-3" id="setting-threefa-2" placeholder="0" class="threeFaOtpInput otp-inputs hide-placeholder-on-focus block w-10 h-10 py-3 text-sm text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"/>
                                            </div>
                                            <div>
                                                <input type="text" inputmode="numeric" name="otp[]" maxlength="1" data-focus-input-init data-focus-input-prev="setting-threefa-2" data-focus-input-next="setting-threefa-4" id="setting-threefa-3" placeholder="0" class="threeFaOtpInput otp-inputs hide-placeholder-on-focus block w-10 h-10 py-3 text-sm text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"/>
                                            </div>
                                            <div>
                                                <input type="text" inputmode="numeric" name="otp[]" maxlength="1" data-focus-input-init data-focus-input-prev="setting-threefa-3" data-focus-input-next="setting-threefa-5" id="setting-threefa-4" placeholder="0" class="threeFaOtpInput otp-inputs hide-placeholder-on-focus block w-10 h-10 py-3 text-sm text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"/>
                                            </div>
                                            <div>
                                                <input type="text" inputmode="numeric" name="otp[]" maxlength="1" data-focus-input-init data-focus-input-prev="setting-threefa-4" data-focus-input-next="setting-threefa-6" id="setting-threefa-5" placeholder="0" class="threeFaOtpInput otp-inputs hide-placeholder-on-focus block w-10 h-10 py-3 text-sm text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"/>
                                            </div>
                                            <div>
                                                <input type="text" inputmode="numeric" name="otp[]" maxlength="1" data-focus-input-init data-focus-input-prev="setting-threefa-5" id="setting-threefa-6" placeholder="0" class="threeFaOtpInput otp-inputs hide-placeholder-on-focus block w-10 h-10 py-3 text-sm text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"/>
                                            </div>
                                        </div>
                                        <p class="float-end authLoader p-0 m-0" style="display: none"><i class="fa fa-spinner fa-spin"></i>&nbsp;&nbsp;{{ __('loading') }}...</p>
                                        <p class="text-danger error otp_error"></p>
                                        <div id="2fa3faValidateForm">
                                            <a href="javascript:void(0)" class="float-end text-end mb-2 mt-1 fs-6 text-primary w-100 fw-bold" id="ResendOtpBtn">{{ __('Resend OTP') }}</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 ps-1 pt-2">
                                    <div class="d-flex">
                                        <button id="submitBtn" class="btn btn-primary" @if(!empty(Auth::user()->setting->fa3_setting)) style="display: none" @endif>
                                            @if(!empty(Auth::user()->setting->fa3_setting)) {!! renderIconHtml('save') !!}{{ __('Save')}} @else {!! renderIconHtml('save') !!}{{ __('Enable')}} @endif
                                        </button>
                                        @if(!empty(Auth::user()->setting->fa3_setting))
                                            <button class="btn btn-danger ms-1" id="disabledOneTimePasscodeBtn" onclick="showOtpSaveBtn()">{!! renderIconHtml('disable') !!}{{ __('Disabled') }}</button>
                                        @endif
                                        <button type="button" class="btn btn-danger text-white ms-1" id="cancelOneTimePasscodeBtn" style="display: none">{!! renderIconHtml('cancel') !!}{{ __('Cancel') }}</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
