{{-- Register Modal --}}
  <div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="signupModalTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
            <h1>{{ __('modal.signup.title') }}</h1>

            <button type="button" class="close pt-4" data-dismiss="modal" aria-label="Close">
                <img src="{{ asset('img/icon_exit_blue.png') }}" width="25px" height="25px">
            </button>
        </div>
        <div class="modal-body ">
            <div id="registerAlertMessage" class="alert alert-warning d-none" role="alert">
                {{ __('modal.login.inOrder') }}
            </div>

            <div class="modal-sign-text">{{ __('modal.signup.alreadyHaveAnAccount') }} <a href="#" onclick="loginModalShow()" class="sign-up-text">{{ __('modal.signup.logInHere') }}</a></div>

            <form id="signupForm" onkeydown="return event.key != 'Enter';" method="POST" action="{{ route('register', app()->getLocale()) }}">
                @csrf

                <div class="form-group">
                    <label for="emailSignup" class="bmd-label-floating">{{ __('modal.signup.emailAddress') }}</label>
                    <input dusk="emailSignupInput" id="emailSignup" type="email" class="form-control" name="email" autocomplete="false">
                    <span class="invalid-feedback  offset-md-1" role="alert">
                        <strong></strong>
                    </span>
                </div>

                <div class="form-group">
                    <label for="passwordSignup" class="bmd-label-floating">{{ __('modal.signup.password') }}</label>
                    <input dusk="passwordSignupInput" id="passwordSignup" type="password" class="form-control" name="password" autocomplete="false">
                    <span class="invalid-feedback offset-md-1" role="alert">
                        <strong></strong>
                    </span>
                </div>
                
                <p class="modal-sign-text">{{ __('signUp.restrictions.validateText') }}</p>

                <div class="d-flex flex-nowrap mb-2">
                    <div class="mr-2">
                        <input type="checkbox" id="acceptedTermsReg" name="acceptedTermsReg" class="evp_checkbox" style="position: absolute;"/>
                        <label for="acceptedTermsReg"></label>
                    </div>
                    <div class="">
                        <label for="acceptedTermsReg" class="font-weight-bold">{{ __('signUp.acceptTerms') }} <a href="{{ route('privacy', [app()->getLocale()]) }}" target="_blank">{!! __('signUp.termsAndPrivacy') !!}</a></label>
                    </div>
                </div>

                <div class="d-flex flex-nowrap">
                    <div class="mr-2">
                        <input type="checkbox" id="acceptNewsLetterReg" name="acceptNewsLetterReg" class="evp_checkbox" style="position: absolute;"/>
                        <label for="acceptNewsLetterReg"></label>
                    </div>
                    <div class="">
                        <label for="acceptNewsLetterReg" class="font-weight-bold">{{ __('signUp.acceptNewsletter') }}</label>
                    </div>
                </div>

                <div id="sign_up_accept_msg" class="mb-3">
                {{ __('homeScreen.error.facebookError.message') }}
                <span class="invalid-feedback offset-md-1" role="alert">
                    <strong></strong>
                </span>
                </div>

                <div class="form-group" style="margin: 0px; padding: 0px;">
                    <div class="d-flex justify-content-center">
                        <div class="g-recaptcha" name="g-recaptcha" data-sitekey="6LcNV-QZAAAAAKFJgr0ylhG9WOLLwgmUJsufNyzQ"></div>
                        <span class="invalid-feedback offset-md-1" role="alert">
                            <strong></strong>
                        </span>
                    </div>
                </div>

                <div class="form-group text-center mt-3 mb-4 w-100">
                    <button type="button" id="submitSignup" class="submitSignup btn btn-primary w-100 buttonswidth-log-reg" disabled>{{ __('modal.signup.buttonSigUp') }}</button>
                </div>
            </form>
            <div class="row justify-content-center m-0 px-0">
                <div class="px-0 signup_social">
                    <div class="pointer mb-2">
                        <a href="{{ route('login.provider', 'facebook') }}" class="btn btn-fb fb-socbut w-100"><img src="{{ asset('img/fbico.png') }}" class="mr-1 py-1">  {{ __('modal.signup.buttonFacebook') }}</a>
                    </div>
                    <div class="pointer mb-2">
                        <a href="{{ route('login.provider', 'google') }}" class="btn google-socbut w-100"><img src="{{ asset('img/googleico.png') }}" class="mr-1 py-1">  {{ __('modal.signup.buttonGoogle') }}</a>
                    </div>
                    <div id="appleRegButton"></div>
                </div>
            </div>
        </div>
        <div class="modal-footer"></div>
      </div>
    </div>
</div>

@push('scripts')
<script src="https://www.google.com/recaptcha/api.js?hl={{app()->getLocale()}}"></script>
<script>
    $( document ).ready(function() {
        $( 'html' ).on( 'click', '#acceptedTermsReg, #acceptedTerms', function() {
            if($('#acceptedTermsReg').prop("checked") == true) {
                $('.submitSignup').prop( "disabled", false );
                $('#sign_up_accept_msg').css('visibility', 'hidden');;
                setCookie( 'acceptedTerms', true, 40 );
            }
            else if ($('#acceptedTerms').prop("checked") == true)
            {
                $('.submitSignup').prop( "disabled", false );
                $('#sign_up_accept_msg').css('visibility', 'hidden');;
                setCookie( 'acceptedTerms', true, 40 );
            }
            else
            {
                $('.submitSignup').prop( "disabled", true );
                $('#sign_up_accept_msg').css('visibility', 'visible');
                deleteCookie( 'acceptedTerms' );
            }
        });

        $( 'html' ).on('click', '#acceptNewsLetterReg, #acceptNewsLetter', function() {
            if($(this).prop("checked") == true) {
                setCookie( 'acceptNewsLetter', true, 40 );
            } else {
                deleteCookie( 'acceptNewsLetter' );
            }
        });
    })
</script>
@endpush