{% extends '@App/base.html.twig' %}
{% block title %}
    Forgot Password
{% endblock %}
{% block body %}
    <div class="row">
        <div class="col-xs-12">
            <div class="widget">
                <div class="row">
                    <div class="col-xs-12 col-md-6 push-md-3">
                        <div style="color: red; display: none;" id="forgot_error"></div>
                    </div>
                </div>
                <div class="row">
                    <div id="form_1" class="col-xs-12 col-md-6 push-md-3">
                        <p>If you are trying to change your dealership password, use
                            <a href="http://iserviceauto.com/wp-login.php?action=lostpassword" class="color-primary"
                               target="_blank">this</a> link.</p>
                        <div class="form-group bmd-form-group">
                            <label class="bmd-label-floating" for="email">Email</label>
                            <input type="text" class="form-control" id="forgot_email" name="forgot_email" required/>
                            <span class="bmd-help">Please enter your email</span>
                        </div>
                        <br/>
                        <div class="form-group">
                            <button id="forgot_submit" class="btn btn-primary">Continue</button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div id="form_2" class="col-xs-12 col-md-6 push-md-3" style="display: none;">
                        <p>To continue, please answer the following security question.</p>
                        <p id="security_question"></p>
                        <div class="form-group bmd-form-group">
                            <label class="bmd-label-floating" for="answer">Answer</label>
                            <input class="form-control" id="fogot_answer" name="fogot_answer" required/>
                            <span class="bmd-help">Please enter your answer</span>
                        </div>
                        <div class="form-group">
                            <button id="security_question_submit" class="btn btn-primary">Continue</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        $('body').on('click', '#forgot_submit', function () {
            $('#forgot_error').hide();
            $('#form_1').hide();

            var username = $('#forgot_email').val();

            if (username == "") {
                show_error("No email entered");
                return;
            }

            $.post('/api/authentication/get-security-question', {
                username: username
            }, function (resp) {
                if (resp.securityQuestion == '' || resp.securityQuestion == null) {
                    show_error("You have not set up a security question yet. Please contact your manager for a new password.");
                    $('#form_1').show();
                    return;
                }

                $('#security_question').html(resp.securityQuestion);
                $('#form_2').show();
            }).fail(function (resp) {
                console.log(resp);
                show_error("User not found");
                $('#form_1').show();
            });
        });

        $('body').on('click', '#security_question_submit', function () {
            $('#forgot_error').hide();

            var security_answer = $('#fogot_answer').val();
            var username        = $('#forgot_email').val();

            if (security_answer == "") {
                show_error("No answer entered");
                return;
            }

            $.post('/api/authentication/forgot-password', {
                security_answer: security_answer,
                username       : username
            }, function (resp) {
                alert('Please check your inbox for a link to reset your password.');
                window.location = "{{ path('authentication_login') }}";
            }).fail(function (resp) {
                console.log(resp);
                show_error("Invalid security answer. Please try again.");
            });
        });

        function show_error (message) {
            $('#forgot_error').css('display', 'block');
            $('#forgot_error').html("<p>" + message + "</p>");
        }
    </script>
{% endblock %}