@extends('EcomAuthViews::layouts.authentication.layout' , ['title' => ___('authentication.reset_password')])

@section('content')
    @php


    @endphp
    <form class="twa-form" style="gap:0" method="POST"  id="otp-form" >
        @csrf

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

        <div class="sep-15"></div>


        @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "full", "type" => "text", "label" => ___('authentication.password'). " *" ])
                        <div class="password-group">
                            <input name="password" type="password" value="{{old('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>
                    @endcomponent

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


        @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "full", "type" => "submit", "label" => "" ])
            <input type="submit" value="{{ ___('authentication.reset_password') }}" />
        @endcomponent


{{--        <div class="sep-30"></div>--}}
{{--        <div class="seperator-line"> OR</div>--}}
{{--        <div class="sep-30"></div>--}}
{{--        <div class="other-auth-methods">--}}
{{--            <div>--}}
{{--                <span>Already have an account?</span> <a class="auth-link" href="{{route('account-auth')}}">Login</a>--}}
{{--            </div>--}}
{{--        </div>--}}

    </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');

        }
    </script>
@endsection