{% extends "@UVDeskSupportCenter/Templates/layout.html.twig" %}
{% block title %}{% trans %}Edit Profile{% endtrans %}{% endblock %}
{% block ogtitle %}{% trans %}Edit Profile{% endtrans %}{% endblock %}
{% block twtitle %}{% trans %}Edit Profile{% endtrans %}{% endblock %}

{% block tabHeader %}
	<div class="uv-nav-bar uv-nav-tab">
		<div class="uv-container">
			<div class="uv-nav-bar-lt">
				<ul class="uv-nav-tab-label">
					<li><a href="#" for="profile" class="uv-nav-tab-active">{{ 'Profile'|trans }}</a></li>
				</ul>
			</div>
			<div class="uv-nav-bar-rt">
				<form method="get" action="{{path('helpdesk_customer_front_article_search')}}">
					<input name="s" class="uv-nav-search" type="text" placeholder="{{ 'Search'|trans }}">
				</form>
			</div>
		</div>
	</div>
{% endblock %}

{% block body %}
    <style>
        .uv-nav-tab-view {
            display: none;
        }
        .uv-nav-tab-view.uv-nav-tab-view-active {
            display: block;
        }
        .uv-image-upload-wrapper {
            padding: 5px 0px 10px 0px;
        }
        .uv-image-upload-wrapper .uv-image-upload-brick {
            display: inline-block;
            vertical-align: middle;
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 5px;
            border: dashed 1px #B1B1AE;
            overflow: hidden;
            margin-right: 15px;
            transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .uv-image-upload-wrapper .uv-image-upload-brick input[type="file"] {
            width: 100px;
            height: 100px;
            position: absolute;
            opacity: 0;
            z-index: 3;
        }
        .uv-image-upload-wrapper img {
            width: 100px;
            height: 100px;
            position: absolute;
            z-index: 2;
            border-radius: 5px;
            display: block;
            border: solid 2px #FFFFFF;
        }
        .uv-image-upload-wrapper img:not([src]) {
            display: none;
        }
        .uv-image-upload-wrapper .uv-image-upload-placeholder {
            position: absolute;
            width: 48px;
            height: 32px;
            left: 50%;
            top: 50%;
            margin-left: -24px;
            margin-top: -16px;
            z-index: 1;
        }
        .uv-image-upload-wrapper .uv-image-upload-brick-48 {
            width: 48px;
            height: 48px;
        }
        .uv-image-upload-wrapper .uv-image-upload-brick-48 input[type="file"] {
            width: 48px;
            height: 48px;
        }
        .uv-image-upload-wrapper .uv-image-upload-brick-48 img {
            width: 48px;
            height: auto;
            }
        .uv-image-upload-wrapper .uv-image-upload-brick-200 {
            width: 200px;
            height: 48px;
        }
        .uv-image-upload-wrapper .uv-image-upload-brick-200 input[type="file"] {
            width: 200px;
            height: 48px;
        }
        .uv-image-upload-wrapper .uv-image-upload-brick-200 img {
            width: 200px;
            height: auto;
        }
        .uv-image-upload-wrapper .uv-image-upload-placeholder svg path {
            fill: #7C70F4;
        }
        .uv-image-upload-wrapper .uv-image-upload-brick:hover .uv-image-upload-placeholder svg path {
            fill: #BA81F1;
        }
        .uv-image-upload-wrapper .uv-image-upload-brick .uv-image-upload-placeholder svg {
            transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .uv-image-upload-wrapper .uv-image-upload-brick:hover .uv-image-upload-placeholder svg {
            transform: translateY(-2px);
        }
        .uv-image-upload-wrapper .uv-image-info-brick {
            display: inline-block;
            vertical-align: middle;
            margin: 10px 0px;
        }
        .uv-image-upload-wrapper .uv-on-drag {
            transform: scale(1.08);
            border: dashed 1px #333333;
        }
        .uv-image-upload-wrapper .uv-on-drop-shadow {
            box-shadow: 0px 0px 4.75px 0.25px rgba(0, 0, 0, 0.05), 0px 8px 24px 0px rgba(0, 0, 0, 0.15);
        }
		.accounts-panel {
			border: solid 1px #D3D3D3;
            padding: 15px 15px 5px 15px;
            border-radius: 3px;
            margin: 25px 0px;
		}
		.social-accounts-table {
			margin: 20px 0px 10px;
		}
		.social-accounts-table table {
			border: solid 1px #D3D3D3;
		}
		.social-accounts-table table > tbody > tr > td {
			border-bottom: dashed 1px #D3D3D3;
		}
		.social-accounts-table table > tbody > tr:last-child > td {
			border-bottom: unset;
		}
		.social-accounts-table .social-accounts-pta {
			text-align: right;
		}
		.social-accounts-table .social-accounts-pta > * {
			text-align: left;
		}
		.social-account-banner {
			min-width: 220px;
			display: inline-block;
			padding: 3px;
			border-radius: 3px;
		}
		.social-account-banner > * {
			display: inline-block;
			vertical-align: middle;
		}
		.social-account-name {}
		.social-account-img {
			width: 40px;
			height: 40px;
			background-size: cover;
			background-position: center;
			margin-right: 10px;
		}
    </style>
    <div class="uv-nav-tab-view uv-nav-tab-view-active" id="profile">
        <h1>{{ 'Profile'|trans }}</h1>
        {% set customerDetails = user_service.getCustomerDetailsById(user.id) %}
        <!--Form-->
        <form method="post" action="" id="user-form" enctype="multipart/form-data">
            <!--Tab View-->
            <div class="uv-tab-view uv-tab-view-active" id="profile">
                <!-- Profile image -->
                <div class="uv-image-upload-wrapper">
                    {% set isHaveImage =  customerDetails and customerDetails.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('') }}{{ customerDetails.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>
                <!-- //Profile image -->
               
                {% if isHaveImage %} 
                    <div class="uv-element-block"> 
                        <label>
                            <div class="uv-checkbox">
                                <input name="removeImage" id="removeImage" type="checkbox">
                                <span class="uv-checkbox-view"></span>
                            </div><span class="uv-checkbox-label">{{ 'Remove profile picture'|trans }}</span>
                        </label>
                    </div>
                {% endif %}
                
                <!-- 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 ?: customerDetails.firstName }}" />
                    </div>
                </div>
                <!-- //Field -->

                <!-- 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 ?:customerDetails.lastName }}" />
                    </div>
                </div>
                <!-- //Field -->

                <!-- 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 -->

                <!-- 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="{{ customerDetails.contactNumber ?: customerDetails.contactNumber }}" />
                    </div>
                </div>
                <!-- //Field -->

                <!-- Field -->
                <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 user_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>
                <!-- //Field -->
                <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 timeformat"|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" value="" />
                    </div>
                </div>
                <!-- //Field -->

                <!-- 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" value="" />
                    </div>
                </div>
                <!-- //Field -->

                <!-- CSRF token Field -->
              
                <!-- //CSRF token Field -->

                <!--CTA-->
                <input class="uv-btn" href="#" value="{{ 'Save Changes'|trans }}" type="submit">
                <!--//CTA-->
            </div>
            <!--//Tab View-->

        </form>
        <!--//Form-->
    </div>

{% endblock %}

{% block footer %}
	{{ parent() }}
	<script type="text/javascript">
		$(function () {
            var AccountLinkModel = Backbone.Model.extend({
                validation: {
                    'merge_token': function(value) {
                        if (value != undefined && value !== '') {
                            if (value == this.attributes.presentToken) {
                                return "{% trans %}You can't merge an account with itself.{% endtrans %}";
                            }
                        } else {
                            return '{{ "This field is mandatory"|trans }}';
                        }
                    },
                }
            });

			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]': [{
                        required: true,
                        msg: '{{ "This field is mandatory"|trans }}'
                        },{
                        pattern: /^(?=(.*[a-zA-Z].*){2,})(?=.*\d.*)(?=.*\W.*)[a-zA-Z0-9\S]{8,}$/,
                        msg: '{{ "Password must contain minimum 8 character length, at least two letters (not case sensitive), one number, one special character(space is not allowed)."|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-btn' : "saveUser",
					'blur input, textarea': 'formChanegd',
                    'click a.select': 'selectAll',
		            'click a.deselect': 'deselectAll',
				},
				initialize : function() {
					Backbone.Validation.bind(this);
                    var jsonContext = {};
		    		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()
                        }
                    })
				},
				formChanegd: 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();
			        this.model.set(this.$el.serializeObject());
			        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);
		        },
			});

			var userForm = new UserForm({
				el : $("#user-form"),
				model : new UserModel()
			});

			var HelpdeskResourcesView = Backbone.View.extend({
	            el: '.uv-view',
	            events: {
	                'click .initiate-backup': 'initiateBackup',
	            },
	            initiateBackup: function(e) {
	                e.preventDefault();
	                $(e.target).attr('disabled', 'disabled');
	                $(e.target).closest('form').submit();
	            },
	        });

	        var helpdeskResources = new HelpdeskResourcesView();
			
            $('.uv-nav-tab-label li a').on('click', function(e) {
                e.preventDefault();

                $('.uv-nav-tab-label li a').removeClass('uv-nav-tab-active');
                $(this).addClass('uv-nav-tab-active');
                $('.uv-nav-tab-view').removeClass('uv-nav-tab-view-active')
                $('#' + $(this).attr('for')).addClass('uv-nav-tab-view-active')
            });
		});
	</script>
{% endblock %}