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

{% block title %}{{ 'Add Team'|trans }}{% 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\\Users' %}

		{{ 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>{{ 'Add Team'|trans }}</h1>

			<!--Form-->
			<form method="post" action="" id="team-form">
				<!-- Field -->
				<div class="uv-element-block">
					<label class="uv-field-label">{{ 'Name'|trans }}</label>
					<div class="uv-field-block">
						<input type="text" name="name" class="uv-field" value="{{ team.name }}" />
					</div>
				</div>
				<!-- //Field -->

				<!-- Field -->
				<div class="uv-element-block">
					<label class="uv-field-label">{{ 'Description'|trans }}</label>
					<div class="uv-field-block">
						<textarea name="description" class="uv-field">{{ team.description }}</textarea>
					</div>
				</div>
				<!-- //Field -->
				
                <!-- Field -->
				<div class="uv-element-block">
					<label class="uv-field-label">{{ 'Users'|trans }}</label>
					<div class="uv-field-block" id="agent-filter">
						<input type="hidden" name="tempUsers" class="uv-field" value="" />
                        <input name="users" class="uv-field uv-dropdown-other preloaded" type="text" id="user-filter-input">
                        <div class="uv-dropdown-list uv-bottom-left">
                            <div class="uv-dropdown-container">
                                <label>{{ 'Filter With'|trans }}</label>
                            </div>
                            <ul class="uv-agents-list">
                                {% for agent in user_service.getAgentsPartialDetails() %}
                                    <li data-id="{{agent.id}}">
                                        {% if agent.smallThumbnail != null %}
                                            <img src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') ~ agent.smallThumbnail }}"/>
                                        {% else %}
                                           	<img src="{{ asset(default_agent_image_path) }}" alt=""/>
                                        {% endif %}
                                        {{agent.name}}
                                    </li>
                                {% endfor %}
                                <li class="uv-no-results" style="display: none;">
                                    {{ 'No result found'|trans }}
                                </li>
                            </ul>
                        </div>
                        <div class="uv-filtered-tags">
                            {% if team %}
                                {% for user in user_service.getUsersBySubGroupId(team.id) %}
                                    <a class="uv-btn-small default" href="#" data-id="{{ user.udId }}">
                                        {{ user.name }}
                                        <span class="uv-icon-remove"></span>
                                    </a>
                                {% endfor %}
                            {% endif %}
                        </div>
					</div>
				</div>
				<!-- //Field -->

                <!-- Field -->
				<div class="uv-element-block">
					<label class="uv-field-label">{{ 'Groups'|trans }}</label>
					<div class="uv-field-block" id="group-filter">
						<input type="hidden" name="tempGroups" class="uv-field" value="" />
                        <input name="groups" class="uv-field uv-dropdown-other preloaded" type="text" id="group-filter-input">
                        <div class="uv-dropdown-list uv-bottom-left">
                            <div class="uv-dropdown-container">
                                <label>{{ 'Filter With'|trans }}</label>
                                <ul class="">
                                    {% for group in user_service.getSupportGroups() %}
                                        <li data-id="{{group.id}}">
                                            {{group.name}}
                                        </li>
                                    {% endfor %}
                                    <li class="uv-no-results" style="display: none;">
                                        {{ 'No result found'|trans }}
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="uv-filtered-tags">
                            {% if team %}
                                {% for group in team.getSupportGroups() %}
									{% if group.isActive %}
										<a class="uv-btn-small default" href="#" data-id="{{group.id }}">
											{{ group.name }}
											<span class="uv-icon-remove"></span>
										</a>
									{% endif %}
                                {% endfor %}
                            {% endif %}
                        </div>
					</div>
				</div>
				<!-- //Field -->

				<!-- Field -->
                <div class="uv-element-block">
					<label class="uv-field-label">{{ 'Team Status'|trans }}</label>
					<div class="uv-element-block">
						<label>
							<div class="uv-checkbox">
								<input type="checkbox" name="isActive" {{ team and team.isActive ? 'checked' : '' }}>
								<span class="uv-checkbox-view"></span>
							</div>
							<span class="uv-checkbox-label">{{ 'Team is Active'|trans }}</span>
						</label>
					</div>
                </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 TeamModel = Backbone.Model.extend({
				validation: {
					'name': [{
                        required: true,
                        msg: "{{ 'This field is mandatory'|trans }}"
                    },{
                        pattern: /^((?![!@#$%^&*()<_+]).)*$/,
                        msg: "{{ 'This field must have characters only'|trans }}"
                    },{
						maxLength:50,
                        msg: "{{ 'Maximum character length is 50'|trans }}"
					}],
					'description': {
						required: true,
						msg: "{{ 'This field is mandatory'|trans }}"
					}
				}
			});

			var TeamForm = Backbone.View.extend({
				events : {
					'click .uv-btn': "saveTeam",
					'blur input, textarea': 'formChanegd',
                    'click .uv-dropdown-list li': 'addEntity',
                    'click .uv-filtered-tags .uv-btn-small': 'removeEntity'
				},
				initialize : function() {
					Backbone.Validation.bind(this);
                    this.setAddedIds('#agent-filter')
                    this.setAddedIds('#group-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')])
			    },
				saveTeam : function (e) {
					e.preventDefault();
			        this.model.set(this.$el.serializeObject());
					if(this.model.isValid(true) && this.checkCustomValidation()) {
						this.$el.find('.uv-btn').attr('disabled', 'disabled');
						this.$el.submit();
			        } else {
						this.checkCustomValidation()
					}
				},
				checkCustomValidation: function() {
					var isValid = 1;
					if(!this.setAddedIds('#agent-filter').length || !this.setAddedIds('#group-filter').length) {
						isValid = 0;
						if(!this.setAddedIds('#agent-filter').length)
							Backbone.Validation.callbacks.invalid(this, 'users', "{{ 'This field is mandatory'|trans }}", 'input');
						if(!this.setAddedIds('#group-filter').length)
							Backbone.Validation.callbacks.invalid(this, 'groups', "{{ 'This field is mandatory'|trans }}", 'input');
					}

					return isValid;
				},
                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(','))

					return ids;
                },
                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'))
                }
			});

			teamForm = new TeamForm({
				el : $("#team-form"),
				model : new TeamModel()
			});	
		});
	</script>
{% endblock %}