@extends('V2.layouts.B2C')

@section('content')
<div class="main_content removebootsrtap_padding">
    <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">
        <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/back-icon-white.png') }}">
                            </button>
                        </div>
                        <h2>Aufhören und ich </h2>
                    </div>
                    <div class="progressbar_wrap">
                        <ul id="progress-bar" class="progressbar">
                            <li class="active"></li>
                            <li class="active"></li>
                            <li class="current page9"></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>

        <div class="content_wrapper content_wrapper_interim">
            <div class="inner_title">
                <h3>Bestätige deine E-Mail-Adresse</h3>

                <p>Gib den Bestätigungscode ein, den wir an deine E-Mail-Adresse  <b>{{$vEmail}}</b>  gesendet haben (Vergiss nicht, deinen Spam-Ordner zu überprüfen)</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">Code erneut senden</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">Indem du auf „Loslegen“ klickst, stimmst du unserer <a href="https://www.quitsure.app/privacy">Datenschutzrichtlinie </a> und <a href="https://www.quitsure.app/terms"> unseren Nutzungsbedingungen </a> zu.</p>
                    <button type="button" class="button" id="btnVerify">LOSLEGEN</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"> Dein Bestätigungscode ist abgelaufen. </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"> Zu viele falsche Versuche. Du musst von vorne beginnen.
                </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('V2.B2C.partials.js.interimVerifyJs')