<!-- reCAPTCHA -->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <!-- reCAPTCHA -->

    <div class="form-container">
        <h4>Sign Up Form</h4>
        <form id="sign-up-form" autocomplete="off">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" name="name" id="name" class="form-control" placeholder="e.g. Roshan" required>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="text" name="email" id="email" class="form-control" placeholder="e.g example.com" required>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" name="password" id="password" class="form-control" placeholder="******" required>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="form-group">
                        <div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA KEY" data-callback="recaptchaCallback"></div>
                        <div id="g-recaptcha-error"></div>
                    </div>
                </div>
                <div class="col-md-12">
                    <button class="btn btn-danger submit-btn">Sign Up</button>
                </div>
            </div>
        </form>
    </div>

    body {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .form-container {
        background-color: #FFFFFF;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
        width: 500px;
        padding: 20px;
        margin: 20px;
    }
    
    #sign-up-form input {
        height: 40px;
        box-shadow: none;
    }
    
    #sign-up-form input:focus {
        border-color: #D9000D;
    }

    function recaptchaCallback() { // Clear error message
        $('#g-recaptcha-error').html('');
    }
    
    $('#sign-up-form').on('submit', function(e) {
        e.preventDefault();
    
        let form = $('#sign-up-form')[0];
        var formData = new FormData(form);
        var data = {};
        for (var pair of formData.entries()) {
            data[pair[0]] = pair[1];
        }
    
        var captcha = data["g-recaptcha-response"];
    
        if(captcha.length == 0) {
            $('#g-recaptcha-error').html(`<label class="error">This field is required</label>`);
        }
        else saveData(data);
    })
    
    function saveData(data) {
        $.ajax({
            type: "POST",
            url: "/auth/ajax/sign-up",
            data: data,
            dataType: "json",
            success: function (data) {
                console.log('success', data);
            },
            error: function (data) {
                console.log('error', data);
            }
        })
    }

    exports.signUp = (req, res) => {
        let captcha = req.body['g-recaptcha-response'];
        const captchaSecret = 'YOUR_CAPTACHA_SECRET';
    
        if(captcha == undefined || captcha == '' || captcha == null) {
            return res.status(200).send({
                status: false,
                result: "Please select Captcha!"
            });
        }
    
        const verifyCaptcha = `https://www.google.com/recaptcha/api/siteverify?secret=${captchaSecret}&response=${captcha}&remoteip=${req.connection.remoteAddress}`;
    
        axios({
            method: 'get',
            url: verifyCaptcha,
          }).then(response => {
            if(response.data.success) {
                return res.status(201).send({
                    status: true,
                    msg: 'Saved successfully!'
                });
            }
            else {
                return res.status(401).send({
                    status: false,
                    msg: 'Failed to save!'
                });
            }
        })
    }