@extends('EcomAuthViews::layouts.authentication.layout')


@section('content')
    @php
        if($slug){
            $route = route('account-auth' , ['type' => $slug]);
        }else{
            $route = route('account-auth');
        }
    @endphp

    <form id="authentication-form" class="twa-form twa-login disable-on-submit" method="POST" action="{{$route}}">
        @csrf

        @if(request()->input('title') && request()->input('notification'))
            <div class="invalid-field">{{ request()->input('notification') }}</div>
            <sep></sep>
        @endif

        @foreach($types as $type)
            @switch($type)
                @case('phone')
                    @component('EcomAuthViews::components.phone' , [ 'parent_class' => app()->getLocale() ,'phone_value' => isset($phone_value) ? $phone_value : '','country_code' => isset($country_code) ? $country_code : null ]) @endcomponent
                @break
                @case('email')
                    @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "full", "type" => "text", "label" => ___('authentication.email') ])
                        <input name="email" required value="{{old('email')}}"
                            placeholder="{{ ___('authentication.email') }}"></input>
                        <span class="invalid-field"> @error('email') {{$message}}  @enderror </span>
                    @endcomponent
                @break

                @default

                @break
        @endswitch

        @endforeach



        <div class="remember-me">
            <input type="checkbox" id="remember_me" name="remember_me" value="1" />
            <label for="remember_me"> Remember me </label>
        </div>
        <sep></sep>
        @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "full", "type" => "submit", "label" => "" ])
            <button @if(!str_contains(request()->getHost(),'.test') && $enabled_recaptcha) class="g-recaptcha submit-v2 submit" data-sitekey="{{env('NOCAPTCHA_SITEKEY')}}"  data-callback="onSubmit" @else class="submit submit-v2" @endif >
                   {{ ___('authentication.continue') }} </button>

        @endcomponent

        @if (isset($errors) && $errors->has('g-recaptcha-response'))
            <span class="invalid-field">
                <strong> @lang('authentication.recaptcha_invalid') </strong>
        </span>
        @endif

        <sep></sep>
        @if($otp_primary)
            <div>
            @lang('authentication.verification_note')
            </div>

        @endif
    </form>

    @if(count($available_login_methods) > 0)
        <sep></sep>
    <div class="text-seperator">
        {{ ___('authentication.or_signin_with') }}
    </div>
        <sep></sep>
    @endif

    <div class="other-methods">
    @foreach($available_login_methods as $method)
        <a href="{{$method['href']}}" class="icon-button @if(isset($method['class'])) {{$method['class']}} @endif" @if(isset($method['target']) && $method['target']) target="{{$method['target']}}" @endif>
            <div class="icon">
                @php try { @endphp
                @include("EcomAuthViews::icons.".$method['icon'])
                @php }catch(\Throwable $th){} @endphp
            </div>
            <div class="text">{{ $method['label'] }}</div>

        </a>
    @endforeach
    </div>
@endsection
@section('scripts')

    <style>
        .remember-me {
            margin-top: 0px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;

        }
        .remember-me label{
            cursor: pointer;
        }
        .remember-me input{
            cursor: pointer;
                accent-color: #000000;
        }
    </style>

    <script>





        function onSubmit(token){
        $(".g-recaptcha.submit").attr('disabled' , true);
           document.getElementById("authentication-form").submit();
            // console.log(token);
        }

        function str_replace(find, replace , str) {
            return str.replace(new RegExp(find.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), replace);
        }

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

            $('input[name=phone]').on('input',function() {
                this.value = this.value.replace(/[^0-9\+]/g, '');
                if (this.value.lastIndexOf("+") > 0) {
                    this.value = (this.value.charAt(0) == "+" ? "+" : "") + str_replace("+" , "" , this.value);
                }
                $(this).parents('.twa-ecom-field-control').find('.invalid-field').text('');
            });
        });

    </script>

    <style>
        .grecaptcha-badge{
            visibility: hidden;
        }
    </style>
@endsection