@extends('layouts.auth.layouts')

@section('title','Recover Password')
@push('css')

@endpush
@section('content')
    <div class="d-flex col-lg-4 align-items-center auth-bg px-2 p-lg-5">
        <div class="col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto">
            <h2 class="card-title fw-bold mb-1">Reset Password</h2>
            <form class="password-reset-form mt-2" method="POST" action="{{ route('password.reset.custom') }}">
                @csrf
                <input type="hidden" name="token"  value="{{ $token }}">
                <div class="mb-1">
                    <label class="form-label" for="email">Email</label>
                    <input id="email" type="email" class="form-control @error('email')  @enderror" name="email"  placeholder="Email" value="{{ $email ?? old('email') }}" required  autocomplete="email" autofocus>
                    @error('email')
                         <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="mb-1">
                    <label class="form-label" for="password">Password</label>
                    <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password"  placeholder="Password"  required  autocomplete="password" autofocus>
                    @error('password')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="mb-1">
                    <label class="form-label" for="confirm_password">Confirm Password</label>
                    <input id="confirm_password" type="password" class="form-control @error('password') is-invalid  @enderror" name="password_confirmation"  placeholder="Confirm Password"  required  autocomplete="confirm_password" autofocus>
                    @error('password')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <button type="submit" class="btn btn-primary w-100" id="submit_btn" tabindex="4">Recover Password</button>
            </form>
            <p class="text-center mt-2">
                <span>New on our platform?</span>
                <a href="{{ route('register') }}"><span>&nbsp;Register</span></a>
            </p>
        </div>
    </div>
@endsection

@push('js')
    <script>
        let email = $('#email');
        let password = $('#password');
        let token = $('input[name="token"]');
        let confirm_password = $('#confirm_password');
        let submit_btn = $('#submit_btn');
        let form = $('.password-reset-form');
        submit_btn.on('click',function (e) {
            e.preventDefault();
            let data = {
                password:password.val(),
                token:token.val(),
                password_confirmation:confirm_password.val(),
                email:email.val(),
                _token: "{{ csrf_token() }}"
            }
            $.ajax({
                url: "{{ route('password.update.custom') }}",
                type: "POST",
                data: data,
                beforeSend: function () {
                    submit_btn.attr('disabled',true);
                    submit_btn.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...');
                },
                success: function (response) {
                    if (response.status){
                        submit_btn.html('Recover Password');
                        submit_btn.attr('disabled',false);
                        form.trigger('reset');
                        toastr.success(response.message, 'Success Alert', {
                            timeOut: 2000
                        });
                        setTimeout(function () {
                            window.location.href = '{{ route('login') }}';
                        },2000)
                    }else{
                        submit_btn.html('Recover Password');
                        submit_btn.attr('disabled',false);
                        toastr.error(response.message);
                    }
                },
                error: function (err) {
                    if(err.status === 400)
                    {
                        toastr.error(err.responseJSON.message, 'Error Alert', {
                            timeOut: 2000
                        });
                    }
                    submit_btn.html('Recover Password');
                    submit_btn.attr('disabled',false);
                    let errors = err.responseJSON.errors;
                    if (errors){
                        $.each(errors,function (key,value) {
                            toastr.error(value, 'Error Alert', {
                                timeOut: 2000
                            });
                        })
                    }
                }
            })
        })
    </script>
@endpush