{% extends "@UVDeskSupportCenter/Templates/layout.html.twig" %}

{% block title %}{{ 'Customer Login'|trans }}{% endblock %}
{% block ogtitle %}{{ 'Customer Login'|trans }}{% endblock %}
{% block twtitle %}{{ 'Customer Login'|trans }}{% endblock %}
{% block metaDescription %}{% trans %}customer.login.metaDescription{% endtrans %}{% endblock %}
{% block metaKeywords %}{% trans %}customer.login.metaKeywords{% endtrans %}{% endblock %}

{% set recaptchaDetail = recaptcha_service.getRecaptchaDetails() %}

{% block body %}
    <div class="uv-paper-article uv-paper-form">
        <div class="uv-paper-section">
            <form action="{{ path('helpdesk_customer_login') }}" method="post" id="loginForm">
                <section>
                    <h1>{{ 'Sign In to %websitename%'|trans({ '%websitename%': '<span class="uv-brand">' ~ websiteDetails.name|e ~ '</span>' })|raw }}</h1>
                    <div class="uv-element-block">
                        <p>{{ 'If you have ever contacted our support previously, your account would have already been created.'|trans }}</p>
                    </div>

                    <div class="uv-form">
                        <div class="uv-element-block">
                            <label class="uv-field-label">{{ 'Email'|trans }}</label>
                            <div class="uv-field-block">
                                <input class="uv-field" type="email" name="_username">
                            </div>
                        </div>

                        <div class="uv-element-block">
                            <label class="uv-field-label">{{ 'Password'|trans }}</label>
                            <div class="uv-field-block uv-relative">
                                <a class="uv-forgot-pwd" href="{{ path('helpdesk_forgot_account_password') }}" tabIndex="-1">{{ 'Forgot Password?'|trans }}</a>
                                <input class="uv-field" type="password" name="_password">
                            </div>
                        </div>
                        {% if recaptchaDetail and recaptchaDetail.isActive == true %}
							<div class="clearfix"></div>
							<div class="g-recaptcha" data-sitekey="{{ recaptchaDetail.siteKey }}"></div>
							<div class="clearfix"></div>
                        {% else %}
                            <!-- Recaptcha will not support -->
                        {% endif %}
                        <button class="uv-btn">{{ 'Sign In'|trans }}</button>
                    </div>
                </section>
            </form>
        </div>
    </div>
{% endblock %}

{% block footer %}
    {{ parent() }}
    {% if recaptchaDetail and recaptchaDetail.isActive == true %}
        <script src='https://www.google.com/recaptcha/api.js'></script>
    {% endif %}

    <script type="text/javascript">
        $(function () {
            var LoginModel = Backbone.Model.extend({
                validation: {
                    '_username': [{
                        required: true,
                        msg: '{{ "This field is mandatory"|trans }}'
                    },{
                        pattern: 'email',
                        msg: '{{ "This is not a valid email address"|trans }}'
                    }],
                    '_password': [{
                        required: true,
                        msg: '{{ "This field is mandatory"|trans }}'
                    },{
                        minLength: 8,
                        msg: '{{ "Password must contains 8 Characters"|trans }}'
                    }],
                    {% if recaptchaDetail and recaptchaDetail.isActive == true %}
                        'g-recaptcha-response' : {
                            fn: function(value) {
                                if(grecaptcha.getResponse().length > 0)
                                    return false;
                                else
                                    return true;
                            },
                            msg : '{{ "Please select CAPTCHA"|trans }}'
                        }
				    {% endif %}
                }
            });

            var LoginForm = Backbone.View.extend({
                events: {
                    'click .uv-btn': 'submit',
                    'blur input': 'formChanegd'
                },
                initialize: function () {
                    Backbone.Validation.bind(this);
                    {% if error.messageKey is defined %}
                        app.appView.renderResponseAlert({'alertClass': 'danger', 'alertMessage': '{{ error.messageKey|trans}}'})
                    {% endif %}
                },
                formChanegd: function(e) {
			    	this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val())
			    	this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
			    },
                submit: function (e) {
                    e.preventDefault();

                    var data = this.$el.serializeObject();
                    this.model.set(data);
                    if(this.model.isValid(true)){
                        this.$el.submit();
                    }
                }
            });

            var Login = new LoginForm({
		        el: $('#loginForm'),
		        model: new LoginModel()
		    });
        });
    </script>
{% endblock %}