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

{% block title %} 
    {% if type.id %}
		{{ 'Edit Ticket Type'|trans }}
	{% else %}
		{{ 'Add Ticket Type'|trans }}
	{% endif %}
{% 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\\Productivity' %}

		{{ 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>
				{% if type.id %}
					{{ 'Edit Ticket Type'|trans }}
				{% else %}
					{{ 'Add Ticket Type'|trans }}
				{% endif %}
			</h1>
			
			<!--Form-->
			<form method="post" action="{% if type.id %}{{ path('helpdesk_member_update_ticket_type', {ticketTypeId: type.id}) }}{% else %}{{ path('helpdesk_member_create_ticket_type') }}{% endif %}" id="ticket-type-form">
				<!-- Field -->
				<div class="uv-element-block">
					<label class="uv-field-label">{{ 'Code'|trans }}</label>
					<div class="uv-field-block">
						<input type="text" name="code" class="uv-field" value="{{ type.code }}" />
					</div>
					<span class="uv-field-info">{{ "Ticket Type code"|trans }}</span>
				</div>
				<!-- //Field -->

                <!-- Field: Ticket Type Visibility -->
                <div class="uv-element-block">
                				<label class="uv-field-label">{{ 'Visibility'|trans }}</label>
                
                				<div class="uv-element-block" style="display: flex; gap: 20px; align-items: center; margin-top: 10px; flex-wrap: wrap;">
                					<label style="display: flex; align-items: center; gap: 5px;">
                						<div class="uv-radio">
                							<input type="radio" name="visibility" value="0" {% if type and type.visibility == 0 %}checked{% endif %}>
                							<span class="uv-radio-view"></span>
                						</div>
                						<span class="uv-radio-label">{{ 'Customer'|trans }}</span>
                					</label>
                
                					<label style="display: flex; align-items: center; gap: 5px;">
                						<div class="uv-radio">
                							<input type="radio" name="visibility" value="1" {% if type and type.visibility == 1 %}checked{% endif %}>
                							<span class="uv-radio-view"></span>
                						</div>
                						<span class="uv-radio-label">{{ 'Agent'|trans }}</span>
                					</label>
                
                					<label style="display: flex; align-items: center; gap: 5px;">
                						<div class="uv-radio">
                							<input type="radio" name="visibility" value="2" {% if type and type.visibility == 2 %}checked{% endif %}>
                							<span class="uv-radio-view"></span>
                						</div>
                						<span class="uv-radio-label">{{ 'Both'|trans }}</span>
                					</label>
                					
                					<label style="display: flex; align-items: center; gap: 5px;">
										<div class="uv-radio">
											<input type="radio" name="visibility" value="3" {% if type and type.visibility == 3 %}checked{% endif %}>
											<span class="uv-radio-view"></span>
										</div>
										<span class="uv-radio-label">{{ 'None'|trans }}</span>
									</label>
                				</div>
                
                				<span class="uv-field-info">{{ 'Select who can view this Ticket Type'|trans }}</span>
                </div>

				<!-- 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">{{ type.description }}</textarea>
					</div>
					<span class="uv-field-info">{{ 'Ticket Type description'|trans }}</span>
				</div>
				<!-- //Field -->

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

			var TypeForm = Backbone.View.extend({
				events : {
					'click .uv-btn' : "saveType",
					'blur input, textarea': 'formChanegd'
				},
				initialize : function() {
					Backbone.Validation.bind(this);
					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')])
			    },
				saveType : 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();
			        }
				}
			});

			typeForm = new TypeForm({
				el : $("#ticket-type-form"),
				model : new TypeModel()
			});	
		});
	</script>
{% endblock %}