@extends('base')

@section('content')
<div class="ui grid" id="email_reset">
    <div class="four wide column"></div>
    <div class="eight wide column">
        <div class="ui grid">
            <div class="row">
                <div class="sixteen wide column">
                    {{__('Password Reset')}}
                </div>
            </div>

            <div class="row">
                <form class="form-horizontal" method="POST" action="{{ route('password.request') }}" onsubmit="validate()">
                    {{ csrf_field() }}
                    <input type="hidden" name="token" value="{{ $token }}">

                    <div class="field relativeContainer">
                        <div class="field relativeContainer">
                            @php
                                $userEmail = isset($email) ? $email : (old('email') ? old('email') : '');
                            @endphp
                            <input placeholder="{{__('E-mail address')}}" id="email" type="email" class="form-control" name="email" value="{{$userEmail}}" required autofocus onfocusout="verifyRegEmail($(this), 'userEmail')">
                            <img src="{{ config('locations.systemImage.asset').'error.png'  }}" class="validate-image err">
                            <img src="{{ config('locations.systemImage.asset').'correct.png'  }}" class="validate-image corr">
                        </div>
                    </div>
                    <span class="errorMsg reset userEmail">{{__('Incorrect e-mail format')}}</span>

                    <div class="field passwdContainer relativeContainer">
                        <div class="field relativeContainer">
                            <input placeholder="{{__('New Password')}}" id="password" type="password" class="form-control" name="password" onfocusout="verifyRegPass($(this), 'passwdContainer');" required>

                            <img src="{{ config('locations.systemImage.asset').'error.png'  }}" class="validate-image err">
                            <img src="{{ config('locations.systemImage.asset').'correct.png'  }}" class="validate-image corr">
                        </div>
                    </div>
                    <span class="errorMsg reset passwdContainer">{{__('Use at least 8-16 characters and a number')}}</span>

                    <div class="field passwdRepeatContainer relativeContainer">
                        <div class="field relativeContainer">
                            <input placeholder="{{__('Confirm Password')}}" id="password-confirm" type="password" class="form-control" name="password_confirmation" onfocusout="verifyRegConfirmPass($(this), $('#password'), 'passwdRepeatContainer');" required>

                            <img src="{{ config('locations.systemImage.asset').'error.png'  }}" class="validate-image err">
                            <img src="{{ config('locations.systemImage.asset').'correct.png'  }}" class="validate-image corr">
                        </div>
                    </div>
                    <span class="errorMsg reset passwdRepeatContainer">{{__('Password do not match')}}</span>

                    <button type="submit" class="ui button">
                        {{ __('Reset Password') }}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $(function(){
       $('.container.main-content').css('height', 'calc(100vh - 421px)');
    });

    function validate(){
        var errors = 0;

        verifyRegEmail($("#email"), 'userEmail')
        verifyRegPass($('#password'), 'passwdContainer');
        verifyRegConfirmPass($('#password-confirm'), $('#password'), 'passwdRepeatContainer');

        errors = $('.errorMsg.register.visible').length;

        if(errors > 0){
            return false;
        } else {
            return true;
        }
    }

    function verifyRegEmail(element,container){
      var input = $(element);
      var errorIcon = $('.'+container+' .err');
      var correctIcon = $('.'+container+' .corr');
      var errorMsg = $('.'+container+'.errorMsg');

      var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

      var value = input.val();

      errorIcon.removeClass('visible');
      correctIcon.removeClass('visible');
      errorMsg.removeClass('visible');
      input.removeClass('errorBorder');

      if (value == '') {
          input.addClass('errorBorder');
          errorIcon.addClass('visible');
          errorMsg.empty().append("{{__('The email cannot be empty')}}").addClass('visible');
      } else if (!myreg.test(value)) {
            input.addClass('errorBorder');
            errorIcon.addClass('visible');
            errorMsg.empty().append("{{__('Incorrect e-mail format')}}").addClass('visible');
        } else {
            input.removeClass('errorBorder');
            errorIcon.removeClass('visible');
            correctIcon.addClass('visible');
            errorMsg.removeClass('visible');
        }
    }

    function verifyRegPass(element, container) {
        var input = $(element);
        var errorIcon = $('.'+container+' .err');
        var correctIcon = $('.'+container+' .corr');
        var errorMsg = $('.'+container+'.errorMsg');

        var value = input.val();

        var regExpLetter = /[A-Za-z]/;
        var regExpDigit = /[0-9]/;
        var regExpSpace = /\s/g;

        errorIcon.removeClass('visible');
        correctIcon.removeClass('visible');
        errorMsg.removeClass('visible');
        input.removeClass('errorBorder');

        if (value == '') {
            input.addClass('errorBorder');
            errorIcon.addClass('visible');
            errorMsg.empty().append("{{__('Password mustnt be empty')}}").addClass('visible');
        } else if (value.length < 8 || value.length > 16) {
            input.addClass('errorBorder');
            errorIcon.addClass('visible');
            errorMsg.empty().append("{{__('Password must contain between 8 and 16 characters')}}").addClass('visible');
        }else if (!regExpLetter.test(value)) {
            input.addClass('errorBorder');
            errorIcon.addClass('visible');
            errorMsg.empty().append("{{__('Password must contain a letter')}}").addClass('visible');
        } else if (!regExpDigit.test(value)) {
            input.addClass('errorBorder');
            errorIcon.addClass('visible');
            errorMsg.empty().append("{{__('Password must contain a digit')}}").addClass('visible');
        } else if (regExpSpace.test(value)) {
            input.addClass('errorBorder');
            errorIcon.addClass('visible');
            errorMsg.empty().append("{{__('Password mustnt contain spaces')}}").addClass('visible');
        } else {
            input.removeClass('errorBorder');
            errorIcon.removeClass('visible');
            correctIcon.addClass('visible');
            errorMsg.removeClass('visible');
        }
    }

    function verifyRegConfirmPass(element1, element2, container) {
        var input1 = $(element1);
        var input2 = $(element2);
        var errorIcon = $('.'+container+' .err');
        var correctIcon = $('.'+container+' .corr');
        var errorMsg = $('.'+container+'.errorMsg');


        var value1 = input1.val();
        var value2 = input2.val();

        errorIcon.removeClass('visible');
        correctIcon.removeClass('visible');
        errorMsg.removeClass('visible');
        input1.removeClass('errorBorder');

        if (value1 == '') {
            input1.addClass('errorBorder');
            errorIcon.addClass('visible');
            errorMsg.empty().append("{{__('Please confirm that the password cannot be empty')}}").addClass('visible');
        } else if (value1 != value2) {
            input1.addClass('errorBorder');
            errorIcon.addClass('visible');
            errorMsg.empty().append("{{__('Passwords dont match')}}").addClass('visible');
        } else {
            input1.removeClass('errorBorder');
            errorIcon.removeClass('visible');
            correctIcon.addClass('visible');
            errorMsg.removeClass('visible');
        }
    }
</script>
@endsection