@extends('layouts.home')

@section('title', 'Register a new account or log in!')

@section('sidebar')
    @parent

@stop

@section('content')
    <br><br>
    @if (!empty($error))
        <div class="alert alert-danger" role="alert"> <button type="button" data-dismiss="alert" class="close" aria-hidden="true" id="msg_close">×</button><h4><i class="far fa-thumbs-down"></i> &nbsp;Attenzione</h4> {!! $error !!} </div>
    @elseif (!empty($success))
        <div class="alert alert-success" role="alert"> <button type="button" data-dismiss="alert" class="close" aria-hidden="true" id="msg_close">×</button><h4><i class="far fa-thumbs-up"></i> </h4>&nbsp;{!! $success !!} </div>
    @elseif (!empty($warning))
        <div class="alert alert-warning" role="alert"> <button type="button" data-dismiss="alert" class="close" aria-hidden="true" id="msg_close">×</button><h4>Operazione completata parzialmente</h4>&nbsp;{!! $warning !!} </div>
    @endif

    @if ( $errors->count() > 0 )
        <div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert">&times;</button>
            <h4>Attenzione!</h4>
            <ul>
                @foreach( $errors->all() as $message )
                    <li>{!! $message !!}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="container">
    <div class="col-lg-12 row">
        <div class="col-lg-4">
            <div style="background-color: #2a88bd; color: white; width: auto; min-width: 320px; border-radius: 25px; margin: 30px 0px 30px 0px; padding: 25px 10px 5px 10px; ">
                <form action="/access" method="post" class="form-horizontal">
                    {{ csrf_field() }}
                <span style="text-align: center; width: 100%; padding-top: 20px; font-size: 1.4em;">@lang('messages.login')</span>
                <div class="form-group">
                        <div class="col-lg-12"> @lang('messages.myaddress')</div>
                        <div class="col-lg-12">
                            <input type="email" autocomplete="off" maxlength="80" required name="email" value="" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" class="form-control">
                        </div>

                </div>
                <div class="form-group">
                    <div class="col-lg-12">Password</div>
                    <div class="col-lg-12">
                        <input type="password" autocomplete="off" maxlength="80" required name="password" value=""  class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-12"><button type="submit" id="accessBtn" class="btn btn-warning">@lang('messages.inviaBtn')</button> </div>
                </div>
                </form>
            </div>
        </div>

        <div class="col-lg-2"></div>

        <div class="col-lg-4">
            <div style="background-color: #2a88bd; color: white; width: auto; min-width: 320px; border-radius: 25px; margin: 30px 0px 30px 0px; padding: 25px 10px 5px 10px; ">
                <span style="text-align: center; width: 100%; padding-top: 20px; font-size: 1.4em;">@lang('messages.register')</span>
                <form action="/register" method="post" class="form-horizontal">
                    {{ csrf_field() }}
                <div class="form-group">
                    <div class="col-lg-12">@lang('messages.myaddress')</div>
                    <div class="col-lg-12">
                        <input type="text" autocomplete="off" required name="mynewaddress" value="" class="form-control">
                    </div>

                </div>
                <div class="form-group">

                    <div class="col-lg-12">Password</div>
                    <div class="col-lg-12">
                        <input type="password" autocomplete="off" required name="mynewpassword" maxlength="50" onKeyUp ="checkPasswordStrength();" value="" class="form-control">
                    </div>
                    <div id="password-strength-status"></div>
                </div>
                <div class="form-group">

                    <div class="col-lg-12">@lang('messages.confirmpwd')</div>
                    <div class="col-lg-12">
                        <input type="password" autocomplete="off" required id="pwdc" name="mynewpassword_confirmation" maxlength="50" onKeyUp ="checkPasswordConfirm()" value="" class="form-control">
                    </div>
                    <div id="passwordc-strength-status"></div>
                </div>
                <div class="form-group">
                    <div class="col-lg-12"> {!! Captcha::display() !!} </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-12"><button type="submit" id="confermaBtn" disabled="disabled" class="btn btn-warning">@lang('messages.inviaBtn')</button> </div>
                </div>
                </form>
            </div>
        </div>
    </div>
@stop

@section('js')
    <script type="text/javascript">
        function checkPasswordStrength() {
            var password = $('input[name="mynewpassword"]').val();
            var passwordconfirm = $('input[name="mynewpassword_confirmation"]').val();
            var number = /([0-9])/;
            var alphabets = /([a-z])/;
            var maiusc = /([A-Z])/;
            var special_characters = /([~,!,@,#,$,%,^,£,&,*,\-,_,+,=,?,>,<,\ ,\,,\.,\',è,é,ì,ò,à,ù,\[,\],\(,\),ç,°,\;,\:])/;
            if(password.length<8) {
                $('#password-strength-status').removeClass();
                $('#password-strength-status').addClass('weak-password');
                $('#password-strength-status').html("@lang('messages.weaked')");
                $('#confermaBtn').attr('disabled', true);
                $('#pwdc').prop('disabled', true);
            } else {
                if(password.match(number)  && password.match(maiusc) && password.match(alphabets) && password.match(special_characters)) {
                    $('#password-strength-status').removeClass();
                    $('#password-strength-status').addClass('strong-password');
                    $('#password-strength-status').html("@lang('messages.strong')");
                    $('#confermaBtn').attr('disabled', false);
                    $('#pwdc').prop('disabled', false);
                } else {
                    $('#password-strength-status').removeClass();
                    $('#password-strength-status').addClass('medium-password');
                    $('#password-strength-status').html("@lang('messages.mediumpwd')");
                    $('#confermaBtn').attr('disabled', true);
                    $('#pwdc').prop('disabled', true);
                }
            }
            if (passwordconfirm.length > 0)
                checkPasswordConfirm();
            if (password.length == 0 && passwordconfirm.length == 0) {
                $('#password-strength-status').removeClass();
                $('#passwordc-strength-status').removeClass();
                $('#password-strength-status').html("");
                $('#passwordc-strength-status').html("");
            }
        }

        function checkPasswordConfirm() {
            var password = $('input[name="mynewpassword"]').val();
            var passwordconfirm = $('input[name="mynewpassword_confirmation"]').val();
            if (password != passwordconfirm) {
                if (password.length > 0 && passwordconfirm.length == 0) {
                    $('#confermaBtn').attr('disabled', true);
                } else {
                    $('#passwordc-strength-status').removeClass();
                    $('#passwordc-strength-status').addClass('weak-password');
                    $('#passwordc-strength-status').html("@lang('messages.passwordmismatch')");
                    $('#confermaBtn').attr('disabled', true);
                }
            }
            else {

                $('#passwordc-strength-status').removeClass();
                $('#passwordc-strength-status').addClass('strong-password');
                $('#passwordc-strength-status').html("@lang('messages.passwordok')");
                $('#confermaBtn').attr('disabled', false);
            }

            if (password.length == 0 && passwordconfirm.length == 0) {
                $('#password-strength-status').removeClass();
                $('#passwordc-strength-status').removeClass();
                $('#password-strength-status').html("");
                $('#passwordc-strength-status').html("");
                $('#confermaBtn').attr('disabled', false);
            }
        }
        $(document).ready(function () {
            $('input[name="mynewpassword"]').blur(function() {
                $('#password-strength-status').removeClass();
                $('#password-strength-status').html("");
            });
        });

    </script>
    {!! Captcha::script(); !!}
@stop