@extends('frontend.master')
@section('content')
    <div class="content">
        <div class="container">
            <div  id="signUpGeo">
                <div class="sign-up row">
                    <div class="col-lg-4 offset-lg-4">
                        <form>
                            <div class="form-group">
                                <label for="exampleInputEmail1">{{ __('messages.email_address') }}</label>
                                <input type="email" class="form-control" id="signUpEmail" aria-describedby="emailHelp">
                                <p class="alert-email alert-errors"></p>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">{{ __('messages.password') }}</label>
                                <input type="password" class="form-control" id="signUpPassword">
                                <p class="alert-password alert-errors"></p>

                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">{{ __('messages.confirm_password') }}</label>
                                <input type="password" class="form-control" id="signUpConfirmPassword">
                                <p class="alert-confirmpassword alert-errors"></p>
                            </div>
                        </form>
                    </div>
                    <div class="col-lg-4 offset-lg-4" style="margin-bottom: 10px;">
                        <input type="checkbox" id="checkbox"><span> {{ __('messages.i_accept_the') }} <a  href="/faqs">{{ __('messages.terms_of_use') }}</a> & <a href="/faqs">{{ __('messages.privacy_policy') }}</a></span>
                    </div>
                    <div class="col-lg-4 offset-lg-4">
                        <div style="text-align: center;">
                            <button  class="btn btn-primary" id="confirmSignUp" style="width: 100%;">{{ __('messages.sign_up') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $( document ).ready(function() {
            var input = document.getElementById("signUpEmail");
            input.addEventListener("keyup", function(event) {
                if (event.keyCode === 13) {
                    event.preventDefault();
                    document.getElementById("confirmSignUp").click();
                }
            });

            var input = document.getElementById("signUpPassword");
            input.addEventListener("keyup", function(event) {
                if (event.keyCode === 13) {
                    event.preventDefault();
                    document.getElementById("confirmSignUp").click();
                }
            });

            var input = document.getElementById("signUpConfirmPassword");
            input.addEventListener("keyup", function(event) {
                if (event.keyCode === 13) {
                    event.preventDefault();
                    document.getElementById("confirmSignUp").click();
                }
            });

            $('#confirmSignUp').click(function(){
                $('.alert-errors').html('');
                var email = $.trim($('#signUpEmail').val());
                var pass = $.trim($('#signUpPassword').val());
                var confirmPass = $.trim($('#signUpConfirmPassword').val());
                var x=$("#checkbox").is(":checked");
                if(!x){
                    Swal.fire({
                        type: 'warning',
                        text: "{{ __('messages.to_register_an_account_successfully') }}.",
                        confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
                    })
                    return false;
                }
                var data = {
                    email : email,
                    password : pass,
                    confirmpassword : confirmPass
                };
                $.ajaxSetup({
                    headers:
                        {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                });
                $.ajax({
                    method: "POST",
                    url: '{{ $url_link }}/sign-up-ajax',
                    data: data,
                    dataType: 'json',
                    beforeSend: function(r, a){
                        $(".ajax_waiting").addClass("loading");
                    },
                    complete: function(r, a){
                        $(".ajax_waiting").removeClass("loading");
                    },
                    success: function (response) {
                    if(response.status == 200){
                        Swal.fire({
                            type: 'success',
                            text: '{{ __('messages.sign_up_success') }}',
                            confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
                        }).then((result) => {
                            var package = "{{ Request::get('package') }}";
                            if(package === ""){
                                location.href="/api-key";
                            }
                            else{
                                location.href="/stripe-payment?package=" + package
                            }
                        });

                    }else{
                        alertValidate(response.message, 'login_password')
                    }
                    },
                    error: function (data) {
                        $.each(data.responseJSON.errors, function( index, value ) {
                            $('.alert-' + index).html(value);
                        });
                    }
                });
            })
        })
    </script>
@endsection