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

{% block title %} 
	{{ 'Edit Swift Mailer'|trans }}
{% endblock %}

{% block pageContent %}
	<div class="uv-inner-section">
		{{ include('@UVDeskCore/Templates/panel-sidebar.html.twig') }}
		<div class="uv-view {% if app.request.cookies and app.request.cookies.get('uv-asideView') %}uv-aside-view{% endif %}">
			<h1>
                {{ 'Edit Swift Mailer'|trans }}
			</h1>
			
			<!--Form-->
			<form method="post" action="" id="swift-mailer-form">
				<!-- Field -->
				<div class="uv-element-block">
					<label class="uv-field-label">{{ 'Swift Mailer Id'|trans }}</label>
					<div class="uv-field-block">
						<input type="text" name="name" class="uv-field" value="{{ swiftmailerDetails.name}}"  disabled/>
					</div>
					<span class="uv-field-info">{{ "Swift Mailer Id"|trans }}</span>
				</div>
				<!-- //Field -->

				<div class="uv-element-block">
					<label class="uv-field-label">{{ 'Transport'|trans }}</label>
					<select name="transport" class="uv-select create-ticket">
						<option value="">Select type</option>
						<option value="gmail" {% if (swiftmailerDetails.transport == 'gmail') %} selected = 'selected' {% endif %}>gmail</option>
					</select>
					<span class="uv-field-info">{{ "Transport"|trans }}</span>
				</div>
				
				<!-- Field -->
				<div class="uv-element-block">
					<label class="uv-field-label">{{ 'Email'|trans }}</label>
					<div class="uv-field-block">
						<input type="text" name="username" class="uv-field" value="{{ swiftmailerDetails.username }}" />
					</div>
					<span class="uv-field-info">{{ "Email"|trans }}</span>
				</div>
				<!-- //Field -->

				<!-- Field -->
				<div class="uv-element-block">
					<label class="uv-field-label">{{ 'New Password (if you wish to change old password)'|trans }}</label>
					<div class="uv-field-block">
						<input type="password" name="password" class="uv-field" value=""  />
					</div>
					<span class="uv-field-info">{{ "Password"|trans }}</span>
				</div>
				<!-- //Field -->

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

			</form>
			<!--//Form-->
		</div>
	</div>
{% endblock %}
{% block footer %}
	{{ parent() }}
	<script type="text/javascript">
		$(function () {
			var SavedReplyModel = Backbone.Model.extend({
				validation: {
					'username': [{
							required: true,
							msg: '{{ "This field is mandatory"|trans }}'
						},{
							pattern: /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/,
							msg: '{{ "Email address is invalid"|trans }}'
						}
					],
					'transport': {
						required: true,
						msg: "{{ 'This field is mandatory'|trans }}"
					},
				}
			});

			var SavedReplyForm = Backbone.View.extend({
				events : {
					'click .uv-btn' : "saveSavedReply",
					'blur input': 'formChanegd',
                    'click .uv-dropdown-list li': 'addEntity',
                    'click .uv-filtered-tags .uv-btn-small': 'removeEntity'
				},
				initialize : function() {
					Backbone.Validation.bind(this);
                    this.setAddedIds('#group-filter');
                    this.setAddedIds('#team-filter');
					var jsonContext = JSON.parse('{{ errors|raw }}');
		    		for (var field in jsonContext) {
		    			Backbone.Validation.callbacks.invalid(this, field, jsonContext[field], 'input');
					}
				},
				formChanegd: function(e) {
			    	this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val())
			    	this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
			    },
				saveSavedReply : 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();
			        }
				},
                setAddedIds: function(selector) {
                    var ids = [];
                    $(selector).find('.uv-filtered-tags .uv-btn-small').each(function() {
                        ids.push($(this).attr('data-id'))
                    });

                    $(selector).find("input[type='hidden']").val(ids.join(','))
                },
                addEntity: function(e) {
                    currentElement = Backbone.$(e.currentTarget);
                    if(id = currentElement.attr("data-id")) {
                        parent = currentElement.parents(".uv-field-block");
                        parent.find('input').val('')
                        parent.find("li:not(.uv-no-results)").show();

                        if(!parent.find(".uv-filtered-tags a[data-id='" + id + "']").length) {
                            parent.find('.uv-filtered-tags').append("<a class='uv-btn-small default' href='#' data-id='" + id + "'>"+currentElement.text()+"<span class='uv-icon-remove'></span></a>")
                            this.setAddedIds("#" + parent.attr('id'))
                        }
                    }
                },
                removeEntity: function(e) {
                    var parent = Backbone.$(e.currentTarget).parents(".uv-field-block")
                    Backbone.$(e.currentTarget).remove()
                    this.setAddedIds("#" + parent.attr('id'))
                }
			});

			savedReplyForm = new SavedReplyForm({
				el : $("#swift-mailer-form"),
				model : new SavedReplyModel()
			});	
		});
	</script>
{% endblock %}