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



@section('content')
    @php
        $country_code = country()->code();

    @endphp
    <form class="twa-form"  method="POST" id="otp-form">
        @csrf
        <input type="hidden" name="user_id" value="{{$user->id}}">
        @isset($challenge) <input type="hidden" name="challenge" value="{{$challenge}}"> @endisset

        @if($user->{$type})
        <div class="entered-email">
            @include('EcomAuthViews::icons.envelope')
            <span>{{$user->{$type} }}. Not you? <a href="{{route('account-auth' , ['type' => $type]) }}"
                                                                class="auth-link">Use another account</a> </span>
        </div>
        @else
            <div class="entered-email">
            @component('EcomAuthViews::components.phone' , ['phone_value' => ""] ) @endcomponent
            </div>
        @endif

        @if($login_type == "otp")

                            @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "full", "type" => "text", "label" => ___('authentication.pin') ])
                                <div id="timerDiv"></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

            <script>




            </script>

        @else

            @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "full", "type" => "text", "label" => ___('authentication.password') ])
            <div class="password-group">
                <input type="password" name="password" required placeholder="{{ ___('authentication.password') }}"></input>
                <button type="button" onclick="togglePassword($(this))"> <i class="fa-solid fa-eye" ></i> </button>
            </div>
            <span class="invalid-field"> @error('password') {{$message}}  @enderror </span>


            <input type="submit" style="margin-top:10px" value="{{ ___('authentication.continue') }}"/>
            @endcomponent
      @endif

        @if($login_type == "otp")
        <div> Didn't revieve OTP?  <a class="auth-link" href="{{str_replace("/login/otp/", "/redirect/otp/" ,url()->current())}}?resend=true"> Resend </a></div>
        @endif

        @if( session('guest') != 1)
            <br>
            @if(count($other_auth_methods) > 0)
            <div class="seperator-line"> OR</div>
            @endif
            <br>

            <div class="other-auth-methods">

                @foreach($other_auth_methods as $method)
                    @if(!$loop->first)
                        <div class="bullet"></div>
                    @endif
                        <a class="auth-link" href="{{$method['link']}}">{{$method['label']}} </a>
                @endforeach

            </div>
        @endif
    </form>



@endsection
@section('scripts')




    <script>

        function togglePassword(elem){
            let input = elem.parent().find('input');
            let type = input.attr('type');
            input.attr('type' , input.attr('type') == "password" ? 'text' : 'password');

            elem.find('i').toggleClass('fa-eye-slash');

        }


        $(document).ready(function () {
            AUTHENTICATION_InitCodeGroup('code-input-group');
            AUTHENTICATION_start_timer();

            // var input = document.getElementsByClassName("autofocus");
            // input.focus ();

        });

    </script>

@endsection