@extends('layouts.blank')


@push('custom_css')
    <link rel="stylesheet" href="{{ asset('admin-lte/plugins/fontawesome-free/css/all.min.css') }}">
    <link rel="stylesheet" href="{{ asset('admin-lte/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
{{--    <link rel="stylesheet" href="{{ asset('admin-lte/dist/css/adminlte.min.css') }}">--}}
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
@endpush

@section('custom_script')
    <script src="{{ asset('admin-lte/plugins/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('admin-lte/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('admin-lte/dist/js/adminlte.min.js') }}"></script>

    <script>
        $(document).on('keyup', '#password', function(e){
            var postData = new FormData();
            const x = this.value;
            postData.append('password', x);

            if(x.length > 0)
            {
                $('#minValidation').attr('style', 'text-decoration: line-through;');
                $('#upperValidation').attr('style', 'text-decoration: line-through;');
                $('#lowerValidation').attr('style', 'text-decoration: line-through;');
                $('#numericValidation').attr('style', 'text-decoration: line-through;');
                $('#specialValidation').attr('style', 'text-decoration: line-through;');
            }else{
                $('#minValidation').removeAttr('style');
                $('#upperValidation').removeAttr('style');
                $('#lowerValidation').removeAttr('style');
                $('#numericValidation').removeAttr('style');
                $('#specialValidation').removeAttr('style');
            }

            $('#minValidation').removeClass('text-danger');
            $('#upperValidation').removeClass('text-danger');
            $('#lowerValidation').removeClass('text-danger');
            $('#numericValidation').removeClass('text-danger');
            $('#specialValidation').removeClass('text-danger');

            var isInvalid = 0;

            if((x.match(/[A-Z]/g) || []).length <= 0) {
                isInvalid++
                $('#upperValidation').addClass('text-danger');
                $('#upperValidation').removeAttr('style');
            }

            if((x.match(/[a-z]/g) || []).length <= 0) {
                isInvalid++
                $('#lowerValidation').addClass('text-danger');
                $('#lowerValidation').removeAttr('style');
            }

            if((x.match(/[0-9]/g) || []).length <= 0) {
                isInvalid++
                $('#numericValidation').addClass('text-danger');
                $('#numericValidation').removeAttr('style');
            }

            if((x.match(/[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/g) || []).length <= 0) {
                isInvalid++
                $('#specialValidation').addClass('text-danger');
                $('#specialValidation').removeAttr('style');
            }

            if(x.length < 8) {
                isInvalid++
                $('#minValidation').addClass('text-danger');
                $('#minValidation').removeAttr('style');
            }

            $('#ajaxFeedback').remove();

            var newErrorSpan = document.createElement('label');
            newErrorSpan.setAttribute('class', 'col-form-label text-danger');
            newErrorSpan.setAttribute('id', 'ajaxFeedback');
            newErrorSpan.innerHTML = '<i class="far fa-times-circle"></i> &nbsp; Please complete password requirements';

            if(isInvalid > 0)
            {
                $('#password').addClass('is-invalid');
                $('#btnFormSubmit').prop('disabled', true);

                $('#inputGroupNewPassword').after(newErrorSpan);
            }else{
                $('#password').removeClass('is-invalid');
                $('#btnFormSubmit').prop('disabled', false);
            }

            if(x.length <= 0)
            {
                $('#ajaxFeedback').remove();
                $('#password').removeClass('is-invalid');
                $('#btnFormSubmit').prop('disabled', true);
            }

            const xTemp = this.value;
            const yTemp = $('#password-confirm').val();

            var newErrorSpan = document.createElement('label');
            newErrorSpan.setAttribute('class', 'col-form-label text-danger');
            newErrorSpan.setAttribute('id', 'ajaxFeedbackConfirm');
            newErrorSpan.innerHTML = '<i class="far fa-times-circle"></i> &nbsp; Password confirmation does not match';

            $('#ajaxFeedbackConfirm').remove();

            if(xTemp !== yTemp){
                $('#inputGroupNewPasswordConfirm').after(newErrorSpan);
            }

            if(yTemp.length <= 0)
            {
                $('#ajaxFeedbackConfirm').remove();
            }

        })

        $(document).on('keyup', '#password-confirm', function(e){
            var postData = new FormData();
            const x = $('#password').val();
            const y = this.value;

            var newErrorSpan = document.createElement('label');
            newErrorSpan.setAttribute('class', 'col-form-label text-danger');
            newErrorSpan.setAttribute('id', 'ajaxFeedbackConfirm');
            newErrorSpan.innerHTML = '<i class="far fa-times-circle"></i> &nbsp; Password confirmation does not match';

            $('#ajaxFeedbackConfirm').remove();

            if(x !== y){
                $('#inputGroupNewPasswordConfirm').after(newErrorSpan);
            }

            if(y.length <= 0)
            {
                $('#ajaxFeedbackConfirm').remove();
            }
        })

        $(document).on('submit', '#changePassForm', function (e){
            const x = $('#password').val();
            const y = $('#password-confirm').val();

            if(x.length > 0 && y.length > 0 && $('.text-danger').length <= 0)
            {
                return true;
            }else{
                e.preventDefault();
            }
        })
    </script>
@endsection

@section('content')
    <div class="register-box w-50">
        <div class="register-logo">
            <a href="{{ route('home') }}"><b>{{ $env_app_name ?? config('app.name') }}</b></a>
        </div>

        <div class="card">
            <div class="card-body register-card-body">
                <p class="login-box-msg">Reset Password</p>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif
                    <form action="{{ route('ResetPasswordPost') }}" method="POST" id="changePassForm">
                          @csrf

                        <input type="hidden" name="token" value="{{ $token }}">

                        <div class="row">

                            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                                <ul>
                                    <li>Password must contain :</li>
                                    <ul>
                                        <li id="minValidation">At least 8 characters</li>
                                        <li id="upperValidation">At least 1 uppercase letter</li>
                                        <li id="lowerValidation">At least 1 lowercase letter</li>
                                        <li id="numericValidation">At least 1 numeric character</li>
                                        <li id="specialValidation">At least 1 special character</li>
                                    </ul>
                                </ul>
                            </div>

                            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                                <div class="row">
                                    <div class="col-12 rounded mb-2">
                                        <div class="input-group">
                                            <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required placeholder="Email" autocomplete="email" autofocus>
                                            @if ($errors->has('email'))
                                                <span class="text-danger">{{ $errors->first('email') }}</span>
                                            @endif
                                            <div class="input-group-append">
                                                <div class="input-group-text">
                                                    <span class="fas fa-envelope"></span>
                                                </div>
                                            </div>
                                            @error('email')
                                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-12 rounded mb-2" id="inputGroupNewPassword">
                                        <div class="input-group">
                                            <input type="password" id="password" class="form-control" name="password" required placeholder="Password" autofocus>
                                            @if ($errors->has('password'))
                                                <span class="text-danger">{{ $errors->first('password') }}</span>
                                            @endif
                                            <div class="input-group-append">
                                                <div class="input-group-text">
                                                    <span class="fas fa-lock"></span>
                                                </div>
                                            </div>
                                            @error('email')
                                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-12 rounded mb-2" id="inputGroupNewPasswordConfirm">
                                        <div class="input-group">
                                            <input type="password" id="password-confirm" class="form-control" name="password_confirmation" placeholder="Confirm Password"  required autofocus>
                                            @if ($errors->has('password_confirmation'))
                                                <span class="text-danger">{{ $errors->first('password_confirmation') }}</span>
                                            @endif
                                            <div class="input-group-append">
                                                <div class="input-group-text">
                                                    <span class="fas fa-lock"></span>
                                                </div>
                                            </div>
                                            @error('password_confirmation')
                                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                                        <button type="button" class="btn btn-block btn-danger" onclick="window.location.href='{{ route('login') }}'">
                                            Cancel
                                        </button>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                                        <button type="submit" class="btn btn-block btn-primary" id="btnFormSubmit" disabled>
                                            {{ __('Reset Password') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                </form>
            </div>
            <!-- /.form-box -->
        </div><!-- /.card -->
    </div>
@endsection