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

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

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

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

        <div class="otp-sent-wrapper">
        @if($challenge->email_sent == 1 && $user->email)
            <div class="entered-email">
                @include('EcomAuthViews::icons.envelope')
                <span>{{$user->email }}</span>
            </div>
        @endif

        @if($challenge->sms_sent == 1 && $user->phone)
            <div class="entered-email">
                @include('EcomAuthViews::icons.phone')
                <span>{{$user->phone }} </span>
            </div>
        @endif

        @if($challenge->whatsapp_sent == 1 && $user->phone)
            <div class="entered-email">
                 @include('EcomAuthViews::icons.whatsapp')
                 <span>{{$user->phone }} </span>
            </div>
        @endif

        </div>

        @else

            @switch(request()->type)

                @case("email")
                    <div class="entered-email">
                        @include('EcomAuthViews::icons.envelope')
                        <span>{{$user->email }}. <a style="text-decoration: underline" href="{{route('account-auth', ['type' => request()->input("type")])}}"> Choose another </a></span>
                    </div>
                @break
                @case("phone")
                    <div class="entered-email">
                        @include('EcomAuthViews::icons.phone')
                        <span>{{$user->phone }} <a style="text-decoration: underline" href="{{route('account-auth', ['type' => request()->input("type")])}}"> Choose another </a></span>
                    </div>
                @break
                    @case("email-phone")
                @case("phone-email")
                    <div class="entered-email">
                        @include('EcomAuthViews::icons.envelope')
                        <span>{{$user->email }}</span>
                    </div>

                    <div class="entered-email">
                        @include('EcomAuthViews::icons.phone')
                        <span>{{$user->phone }} </span>
                    </div>

                    <div class="entered-email">
                        <span> <a style="text-decoration: underline" href="{{route('account-auth', ['type' => request()->input("type")])}}"> Choose another </a> </span>
                    </div>

                @default

                    @break
            @endswitch
        @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.enter_password') ])
                <div class="password-group">
                    <input type="password" name="password" required placeholder="{{ ___('authentication.enter_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>

                <div style="margin-bottom:15px"> Forgot Password?  <a style="text-decoration: underline ; " href="{{route('request-reset-password' , ['type' => request()->input('type') ])}}"> Reset </a>  </div>


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



        @endif

        @if($login_type == "otp")

            @php
                $resend_url = str_replace("/login/otp/", "/redirect/otp/" ,url()->current());

                if(request()->type && in_array(request()->type , ["email" , "phone"])){ $resend_url.= "?type=".request()->type; }
            @endphp

            <div> Didn't revieve OTP?  <a class="auth-link" href="{{$resend_url}}"> 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')

    <style>
        .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();



        });

    </script>

@endsection