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

{% block title %}
	{{ 'Profile'|trans }}
{% endblock %}

{% block templateCSS %}
    <style>
        span.uv-app-list-flag-active {
        font-size: 15px;
        color: #FFFFFF;
        background-color: #2ED04C;
        display: inline-block;
        padding: 0px 7px 1px 7px;
        margin-bottom: 2px;
        border-radius: 3px;
        }
        span.uv-app-list-flag-inactive {
        font-size: 15px;
        color: #FFFFFF;
        background-color: #FF5656;
        display: inline-block;
        padding: 0px 7px 1px 7px;
        margin-bottom: 2px;
        border-radius: 3px;
        }
        .token-list {
            padding-left: 20px;
        }
        .add-token {
            position: absolute;
            right: 10px;
        }
        .token-item .uv-hr {
            margin: 25px 0 15px -20px;
        }
        .token-name {
            margin-right: 5px;
        }
        .mar-right-5 {
            margin-right: 5px;
        }
    </style>  
{% endblock %}

{% block pageContent %}
    <div class="uv-inner-section">
        {# Append Panel Aside #}
		{% set asideTemplate = 'Webkul\\UVDesk\\CoreFrameworkBundle\\Dashboard\\AsideTemplate' %}
		{% set asideSidebarReference = 'Webkul\\UVDesk\\CoreFrameworkBundle\\UIComponents\\Dashboard\\Panel\\Sidebars\\Account' %}

		{{ uvdesk_extensibles.getRegisteredComponent(asideTemplate).renderSidebar(asideSidebarReference) | raw }}

		<div class="uv-view {% if app.request.cookies and app.request.cookies.get('uv-asideView') %}uv-aside-view{% endif %}">
			<h1>{{ 'Profile'|trans }}</h1>
            {%  set agentDetails = user_service.getAgentDetailById(user.id) %}
           
            <div class="uv-tabs">
                <ul>
                    <li for="profile" class="uv-tab-active">{{ 'Edit Profile'|trans }}</li>
                </ul>
            </div>
            {% for message in app.flashes('warning') %}
                <div class="flash-notice">
                    {{ message }}
                </div>
            {% endfor %}
            {% for message in app.flashes('success') %}
                <div class="flash-notice">
                    {{ message }}
                </div>
            {% endfor %}
            <!--Form-->
            <form method="post" action="" id="user-form" enctype="multipart/form-data">
                <div class="uv-tab-view uv-tab-view-active" id="profile">
                    <!-- Profile image -->
                     <div class="uv-image-upload-wrapper">
                        {% set isHaveImage =  agentDetails and agentDetails.profileImagePath ? 1 : 0 %}
                        <div class="uv-image-upload-brick {% if isHaveImage %}uv-on-drop-shadow{% endif %}" {% if isHaveImage %}style="border-color: transparent;"{% endif %}>
                            <input type="file" name="user_form[profileImage]" id="uv-upload-profile">
                            <div class="uv-image-upload-placeholder">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="32px">
                                <path fill-rule="evenodd" d="M28.026,26.003 L19.964,26.003 L19.964,17.962 L13.964,17.962 L23.995,8.050 L34.025,17.962 L28.026,17.962 L28.026,26.003 ZM33.557,3.421 C30.806,1.146 27.619,0.008 23.995,0.008 C21.182,0.008 18.588,0.756 16.214,2.252 C13.838,3.749 11.996,5.712 10.683,8.143 C7.683,8.456 5.152,9.749 3.090,12.024 C1.027,14.300 -0.004,16.965 -0.004,20.019 C-0.004,23.324 1.168,26.144 3.512,28.481 C5.855,30.819 8.682,31.988 11.996,31.988 L37.963,31.988 C40.712,31.988 43.072,31.006 45.040,29.042 C47.009,27.079 47.993,24.726 47.993,21.983 C47.993,19.364 47.087,17.106 45.275,15.203 C43.461,13.302 41.275,12.258 38.713,12.071 C38.024,8.580 36.306,5.698 33.557,3.421 Z"></path>
                                </svg>
                            </div>
                            <img id="dynamic-image-upload" {% if isHaveImage %}src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}{{ agentDetails.profileImagePath }}"{% endif %}>
                        </div>
                        <div class="uv-image-info-brick">
                            <span class="uv-field-info">{{ 'Upload a Profile Image (100px x 100px)<br> in PNG or JPG Format'|trans|raw }}</span>
                        </div>
                    </div>

                    <!-- Field -->
                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'First Name'|trans }}</label>
                        <div class="uv-field-block">
                            <input type="text" name="user_form[firstName]" class="uv-field" value="{{ user.firstName ?: agentDetails.firstName }}" />
                        </div>
                    </div>

                    <!-- Field -->
                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'Last Name'|trans }}</label>
                        <div class="uv-field-block">
                            <input type="text" name="user_form[lastName]" class="uv-field" value="{{ user.lastName ?:agentDetails.lastName }}" />
                        </div>
                    </div>

                    <!-- Field -->
                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'Email'|trans }}</label>
                        <div class="uv-field-block">
                            <input type="text" name="user_form[email]" class="uv-field" value="{{ user.email}}" />
                        </div>
                    </div>

                    <!-- Field -->
                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'Contact Number'|trans }}</label>
                        <div class="uv-field-block">
                            <input type="text" name="user_form[contactNumber]" class="uv-field" value="{{ agentDetails.contactNumber ?: agentDetails.contactNumber }}" />
                        </div>
                    </div>
                   
                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'Timezone'|trans }}</label>
                        <div class="uv-field-block">
                            <select name="user_form[timezone]" class="uv-select">
                                {% for timezone in uvdesk_service.getTimezones() %}
                                    <option value="{{ timezone }}" {% if user.timezone == timezone %}selected{% endif %}>{{ timezone }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <span class="uv-field-info">{{ "Choose your default timezone"|trans }}</span>
                    </div>

                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'Time Format'|trans }}</label>
                        <div class="uv-field-block">
                            <select name="user_form[timeformat]" class="uv-select">
                                {% for key, timeformat in uvdesk_service.getTimeFormats() %}   
                                    <option value="{{ key }}" {% if user.timeformat == key %}selected{% endif %}>{{ timeformat }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <span class="uv-field-info">{{ "Choose your default timezone"|trans }}</span>
                    </div>

                    <!-- Field -->
                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'Signature'|trans }}</label>
                        <div class="uv-field-block">
                            <textarea name="user_form[signature]" class="uv-field">{{ agentDetails.signature ?: agentDetails.signature }}</textarea>
                        </div>
                        <span class="uv-field-info">{{ 'User signature will be append at the bottom of ticket reply box'|trans }}</span>
                    </div>

                    <!-- Field -->
                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'Password'|trans }}</label>
                        <div class="uv-field-block">
                            <input type="password" name="user_form[password][first]" class="uv-field"  />
                            <span class="uv-field-info">{{ 'Password will remain same if you are not entering something in this field'|trans }}</span>
                        </div>
                    </div>

                    <!-- Field -->
                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'Confirm Password'|trans }}</label>
                        <div class="uv-field-block">
                            <input type="password" name="user_form[password][second]" class="uv-field"  />
                        </div>
                    </div>

                    <!-- CSRF token Field -->
                    <input type="hidden" name="user_form[_token]" value="{{ uvdesk_service.generateCsrfToken('user_form') }}"/>
                    <!-- //CSRF token Field -->

                    <input class="uv-btn" id="uv-save-profile" href="#" value="{{ 'Save Changes'|trans }}" type="submit">
                </div>


                <div class="uv-pop-up-overlay" id="confirm-password">
                    <div class="uv-pop-up-box uv-pop-up-slim">
                        <span class="uv-pop-up-close"></span>
                        <p>{{ 'Enter your current Password to continue'|trans }}</p>
                        <div class="uv-element-block">
                            <input type="password" name="user_form[oldPassword]" class="uv-field uv-margin-0">
                        </div>
                        <div class="uv-pop-up-actions">
                            <a href="#" class="uv-btn proceed">{{ 'Continue'|trans }}</a>
                        </div>
                    </div>
                </div>
                
            </form>

            

		</div>
	</div>
    
{% endblock %}
{% block footer %}
	{{ parent() }}
	<script type="text/javascript">
		$(function () {
			var UserModel = Backbone.Model.extend({
				validation: {
					'user_form[firstName]': {
                        required: true,
                        msg: '{{ "This field is mandatory"|trans }}'
                    },
                    'user_form[lastName]': function(value) {
                        if(value != undefined && value !== '') {
                            [{
                                pattern: /^[A-Za-z][A-Za-z]*[\sA-Za-z]*$/,
                                msg: '{{ "This field must have characters only"|trans }}'
                            },{
                                maxLength:40,
                                msg: '{{ "Maximum character length is 40"|trans }}'
                            }]
                        }
                    },
                    'user_form[email]': [{
                        required: true,
                        msg: '{{ "This field is mandatory"|trans }}'
                    },{
                        pattern: 'email',
                        msg: '{{ "Email address is invalid"|trans }}'
                    }],
                    'user_form[contactNumber]': function(value) {
                        if(value != undefined && value !== '') {
                            if(!value.match('^\\s*(?:\\+?(\\d{1,3}))?[-. (]*(\\d{3})[-. )]*(\\d{3})[-. ]*(\\d{4})(?: *x(\\d+))?\\s*$'))
                                return '{{ "Contact number is invalid"|trans }}';
                        }
                    },
                    'user_form[password][first]' : function(value) { 
                        if(value != undefined && value !== '') {
                             if(value.length < 8)
                            return '{{ "Password must contains 8 Characters"|trans }}';
                        }                      
                    },
                    'user_form[password][second]': {
                        equalTo: 'user_form[password][first]',
                        msg: '{{ "The passwords does not match"|trans }}'
                    }
				}
			});

			var UserForm = Backbone.View.extend({
				events : {
					'click #uv-save-profile' : "saveUser",
					'blur input, textarea': 'formChanged',
                    'click a.select': 'selectAll',
                    'click a.deselect': 'deselectAll',
                    'click #confirm-password .proceed': 'confirmChange',
                },
              
				initialize : function() {
					Backbone.Validation.bind(this);
					var jsonContext = JSON.parse('{{ errors|raw }}');
		    		for (var field in jsonContext) {
                        if(field == 'first') {
                            Backbone.Validation.callbacks.invalid(this, "user_form[password][" + field + "]", jsonContext[field], 'input');
                        } else {
		    			    Backbone.Validation.callbacks.invalid(this, "user_form[" + field + "]", jsonContext[field], 'input');
                        }
					}

                    $('#notifications .uv-scroll-plank .uv-scroll-block').each(function() {
                        if(!$(this).find('.uv-element-block').length) {
                            $(this).parents('.uv-scroll-plank').remove()
                        }
                    })
                },
                confirmChange: function(e) {
                    var target = $('#confirm-password input[name="user_form[oldPassword]"]');
                    var oldPass = target.val();
                    var that = this;
                    if(oldPass && oldPass.length > 7) {
                        $('#confirm-password .uv-pop-up-close,#uv-save-profile').trigger('click');
                        target.next('.uv-field-message').remove();
                    } else {                    
                        target.addClass('uv-field-error');
                        if(!(target.next() && target.next().hasClass('uv-field-message')) ) {
                            target.after('<span class="uv-field-message">'+ '{{ "Password must contains 8 Characters"|trans }}'+ '</span>');
                        }
                    }
                },
				formChanged: function(e) {
                    var fieldName = Backbone.$(e.currentTarget).attr('name');
                    if(fieldName == 'user_form[password][second]') {
                        if($("input[name='user_form[password][first]']").val().length) {
                            this.model.set(fieldName, Backbone.$(e.currentTarget).val())
                            this.model.isValid([fieldName])
                        } else {
                            if($("input[name='user_form[password][second]']").val().length) {
		    			        this.model.set(fieldName, Backbone.$(e.currentTarget).val())
                                this.model.isValid([fieldName])
                            } else {
		    			        Backbone.Validation.callbacks.valid(this, fieldName, 'input');
                            }
                        }
                    } else {
                        this.model.set(fieldName, Backbone.$(e.currentTarget).val())
                        this.model.isValid([fieldName])
                        if(fieldName == 'user_form[password][first]' && !$("input[name='user_form[password][second]']").val().length) {
		    			    Backbone.Validation.callbacks.valid(this, 'user_form[password][second]', 'input');
                        }
                    }
			    },
				saveUser : function (e) {
                    e.preventDefault();
                    var data = this.$el.serializeObject();
                    this.model.set(data);

			        if (this.model.isValid(true)) {
                        this.$el.find('.uv-btn').attr('disabled', 'disabled');
                        this.$el.submit();
			        }
				},
                selectAll: function (e) {
                    e.preventDefault();
                    this.$(e.currentTarget).parents('.uv-scroll-plank')
                            .find('input')
                            .prop('checked', true)
                },
                deselectAll: function (e) {
                    e.preventDefault();
                    this.$(e.currentTarget).parents('.uv-scroll-plank')
                            .find('input')
                            .prop('checked', false);
		        },
			});

			userForm = new UserForm({
				el : $("#user-form"),
				model : new UserModel()
			});
		});
	</script>
{% endblock %}