@extends('EcomAuthViews::layouts.authentication.layout',[ "heightAdjuster" => (session('guest')==1) ? 80 : 400 ])

@section('content')

    <form class="twa-form" action="{{$target}}" method="POST" id="otp-form">
        @csrf

        <div> OTP code has been sent to the below:</div>

        <div class="otp-sent-wrapper">
            @foreach($sent_to as $sent)
                <div class="entered-email">
                    @include('EcomAuthViews::icons.'.$sent['icon'])
                    <span>{{$sent["value"] }}.@if($loop->last)
                            <a style="text-decoration: underline" href="{{route('account-auth')}}"> Choose another </a>
                        @endif

                    </span>
                </div>
            @endforeach
        </div>

        @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "full", "type" => "text", "label" => ___('authentication.pin') ])
            <div id="timerDiv" style="margin-left: 0px !important;"></div>
            <div class="code-input-group" data-fnc="AUTHENTICATION_verifyOTP">
                <input inputmode="numeric" pattern="[0-9]*" type="text" name="code[]" class="code-input autofocus"
                       autofocus required maxlength="1"></input>
                <input inputmode="numeric" pattern="[0-9]*" type="text" name="code[]" class="code-input" required
                       maxlength="1"></input>
                <input inputmode="numeric" pattern="[0-9]*" type="text" name="code[]" class="code-input" required
                       maxlength="1"></input>
                <input inputmode="numeric" pattern="[0-9]*" type="text" name="code[]" class="code-input" required
                       maxlength="1"></input>
            </div>

            <span class="invalid-field"> @error('code') {{$message}}  @enderror </span>
        @endcomponent

        <div id="AUTHENTICATION_otp-send-fail" class="d-none"> Didn't revieve OTP? <a class="auth-link" href="{{$resend_target}}"> Resend </a></div>

    </form>

@endsection
@section('scripts')

    <style>
        .d-none{
            display: none;
        }
        .otp-sent-wrapper {
            width: 100%;
        }

        .entered-email {
            display: flex;
            justify-content: flex-start;
            width: 100%;
        }
    </style>

    <script>
        $(document).ready(function () {
            AUTHENTICATION_InitCodeGroup('code-input-group');
            AUTHENTICATION_start_timer('{{$expires_after}}');

        });
    </script>

@endsection