@extends('web.layouts.container')
@section('css')
    <style>
        .show_password{
            position: absolute;
            right: -3%;
            top: 31%;
            font-size: 16px;
        }
    </style>
@endsection
@section('content')
    <!--Contents-->
    <main>
        <!-- -------------- forget password ----------------- -->
        <section class="register">
            <div class="container">
                <form action="{{route('user.resetPassword')}}" method="post">
                    @csrf()
                    <div class="row">
                        <div class="col-lg-6 offset-3">
                            <h2>{{__('users.reset_password')}}</h2>
                            <div class="form-group">
                                <label for="password">{{__('users.password')}}</label>
                                <input type="password" name="password" id="password" class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}" placeholder="*****">
                                @error('password') <span class="text-danger text-center">{{$message}}</span>@enderror
                                <a class="show_password" href="#"><i class="fa fa-eye-slash"></i></a>
                            </div>
                            <div class="form-group">
                                <label for="password_confirmation">{{__('users.password_confirmation')}}</label>
                                <input type="password" name="password_confirmation" id="password_confirmation" class="form-control {{ $errors->has('password_confirmation') ? 'is-invalid' : '' }}" placeholder="*****">
                            </div>
                            <div class="text-center mt-4">
                                <button class="btn btn-primary"><span>{{__('users.reset_password')}}</span></button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </main>
    <!--End-Contents-->

@endsection

@section('inner_js')
    <script>
        $(document).ready(function () {
            $('a.show_password').click(function (e) {
                e.preventDefault();
                let password = $('input#password'),
                    password_confirmation = $('input#password_confirmation');
                $(this).toggleClass('text_type');
                $(this).children('i').toggleClass('fa-eye fa-eye-slash text-success');
                if ($(this).hasClass('text_type')){
                    password.attr('type', 'text');
                    password_confirmation.attr('type', 'text');
                    return false;
                }
                password.attr('type', 'password');
                password_confirmation.attr('type', 'password');

            });
        });
    </script>
@endsection