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

{% block title %}Login{% endblock %}

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

{% block templateCSS %}
<style>
    #loginForm h1 {
        font-size: 28px;
        color: #6F6F6F;
        font-weight: 600;
        margin: 0px 0px 10px 0px;
    }

    .forgot-password-cta {
        position: absolute;
        font-size: 15px !important;
        right: 0px;
        top: 0px;
    }
</style>
{% endblock %}

{% block pageWrapper %}
    <div class="uv-large-box-plank">
		<div class="uv-large-box-rt">
			<div class="uv-center-box uv-text-center">
                <form action="" method="post" id="loginForm">
                    <div class="uv-adjacent-center">
                        <h1>{{ "Log in to your"|trans }} <span class="uv-brand">{{ website.name }}</span></h1>
                        <p>{{ "Enter your credentials below to gain access to your helpdesk account."|trans }}</p>
                        <div class="uv-adjacent-form">
                            <div class="uv-adjacent-element-block">
                                <label>{{ "Email" |trans}}</label>
                                <div class="uv-max-field">
                                    <input type="email" name="_username">
                                </div>
                            </div>
                            <div class="uv-adjacent-element-block" style="position: relative;">
                                <label>{{ "Password" |trans}}</label>
                                <div class="uv-max-field">
                                    <a class="forgot-password-cta" href="{{ path('helpdesk_forgot_account_password') }}" tabindex="-1">{{ "Forgot Password?" |trans}}</a>
                                    <input type="password"  name="_password">
                                </div>
                            </div>

                            <div class="uv-adjacent-element-block">
                                <label>
                                    <div class="uv-checkbox">
                                        <input type="checkbox" name="_remember_me" checked>
                                        <span class="uv-checkbox-view"></span>
                                    </div>
                                    <span class="uv-checkbox-label">{{ "Keep me logged in" |trans}}</span>
                                </label>
                            </div>
                            <div class="uv-adjacent-element-block">
                                {% 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 %}
                            </div>
                            <button class="uv-btn">{{ 'Sign In'|trans }}</button>
                        </div>
                    </div>
                </div>
            </form>
		</div>

		<div class="uv-large-box-lt">
			<div class="uv-center-box uv-text-center">
				<a href="https://www.uvdesk.com">
                    <img alt="UVdesk" title="UVdesk" src="{{ asset('bundles/uvdeskcoreframework/images/uvdesk-logo-symbol.svg') }}">
				</a>
            </div>
		</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 () {
             _.extend(Backbone.Validation.callbacks, {
                valid : function (view, attr, selector) {
                    var $el = view.$('[name="' + attr + '"]');
                    $el.removeClass('uv-field-error');
                    $el.parents('.uv-adjacent-element-block').find('.uv-field-message').remove();
                },
                invalid : function (view, attr, error, selector) {
                    var $el = view.$('[name="' + attr + '"]');
                    $el.addClass('uv-field-error');
                    $el.parents('.uv-adjacent-element-block').find('.uv-field-message').remove();
                    $el.parents('.uv-adjacent-element-block').append("<span class='uv-field-message'>" + error + "</span>");
                }
            });

            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 %}