@extends('V3.layouts.B2C')
@push('styles')
    <style>
        .container{
            max-width: 100%;
            margin: 0 !important;
            padding: 0 !important;
        }
        .cstm_margin_add{
            max-width: 85%;
        }
    </style>
@endpush
@section('content')
    <div class="main_content new_onboarding_main_content">
        {{--<div class="header_logo">
            <a class="disable_redirecting" href="javascript:void(0);">
                <img src="{{ config('services.bucket_url') . 'web/logo.png' }}" alt="image" />
            </a>
        </div>--}}
        <div class="container">
            <div class="header_wrap">
                <header class="header">
                    <div class="header_inner">
                        <div class="header_content">
                            <div class="head_title">
                                <div class="back_button">
                                    <button type="button" id="btnBack">
                                        <img src="{{ Vite::asset('resources/images/Chevron-left.svg') }}" alt="image" />
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="progressbar_wrap">
                            <ul id="progress-bar" class="progressbar">
                            </ul>
                        </div>
                    </div>
                </header>
            </div>

            <div class="content_wrapper content_wrapper_interim">
                <div class="inner_title">
                    <h3>Verify your email address</h3>
                    <p>Enter the verification code we sent to your email address <b>{{ $vEmail }}</b> (don’t forget to
                        check your spam folder)
                    </p>
                    <span class="error_msg"></span>
                </div>

                <form id="frmBasic">
                    <div class="verification-code_interim">
                        <div class="verification-code--inputs">
                            <input type="tel" maxlength="1" class="otp" name="otp1"
                                oninput='digitValidate(this)' />
                            <input type="tel" maxlength="1" class="otp" name="otp2"
                                oninput='digitValidate(this)' />
                            <input type="tel" maxlength="1" class="otp" name="otp3"
                                oninput='digitValidate(this)' />
                            <input type="tel" maxlength="1" class="otp" name="otp4"
                                oninput='digitValidate(this)' />
                            <input type="tel" maxlength="1" class="otp" name="otp5"
                                oninput='digitValidate(this)' />
                            <input type="tel" maxlength="1" class="otp" name="otp6"
                                oninput='digitValidate(this)' />
                        </div>
                    </div>

                    <button class="resend_code resend_code_interim" id="btnResend" type="button">Resend Code</button>
                    <div class="clearfix"></div>
                    <div class="verify_btn_cls">
                        <input type="hidden" name="vEmail" value="{{ $vEmail }}">
                        <input type="hidden" name="IncorrectOTP" value="0">
                    </div>
                    <div class="form_field button_wrap">
                        <p class="cstm_margin_add">By clicking "Get Started", you agree to our <a
                                href="https://www.quitsure.app/privacy"> Privacy Policy </a> and <a
                                href="https://www.quitsure.app/terms"> Terms of Service </a></p>
                        <button type="button" class="button onboardingv3-btn" id="btnVerify">GET STARTED</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Expired OTP Error Modal -->
    <div id="ExpiredOTP" class="modal cstm_interim_modal fade" tabindex="-1" role="dialog" aria-labelledby="myErrorLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal-content-cstm">
                <div class="modal-header">
                    <h3 id="myErrorLabel" class="modal-title">Oops!</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="my_error_boday" id="myErrorBody"> Your verification code has expired. </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" style="background: #317685;" id="btnOkay">OKAY</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Incorrect OTP Error Modal -->
    <div id="IncorrectOTP" class="modal cstm_interim_modal fade" tabindex="-1" role="dialog"
        aria-labelledby="myErrorLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal-content-cstm">
                <div class="modal-header">
                    <h3 id="myErrorLabel" class="modal-title">Oops!</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="my_error_boday" id="myErrorBody">Too many incorrect attempts. You will have to start over.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" style="background: #317685;"
                        id="btnIncorrectOTP">OKAY</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@include('V3.B2C.partials.js.interimVerifyJs')