{% extends "@UVDeskSupportCenter/Templates/layout.html.twig" %} 
{% block title %}{% trans %}Create Ticket{% endtrans %}{% endblock %} 
{% block ogtitle %}{% trans %}Create Ticket{% endtrans %}{% endblock %} 
{% block twtitle %}{% trans %}Create Ticket{% endtrans %}{% endblock %} 
{% block metaDescription %}{% trans %}create.ticket.metaDescription{% endtrans %}{% endblock %} 
{% block metaKeywords %}{% trans %}create.ticket.metaKeywords{% endtrans %}{% endblock %} 
 
{% set recaptchaDetail = recaptcha_service.getRecaptchaDetails() %} 
 
{% block body %} 
<style> 
.uv-field{ 
padding: 5px 10px; 
} 
.grammarly-fix-message-container { 
overflow: visible !important; 
} 
.grammarly-fix-message { 
max-width: 158%; 
} 
.uv-field-success-icon { 
display: none !important; 
} 
.mce-path { 
display: none !important; 
} 
 
.uv-element-block label.uv-field-label.required::after { 
content: "*"; 
color: #FC6868; 
font-weight: 700; 
display: inline-block; 
} 
</style> 
 
{% set isTicketViewPage = (app.user.id is defined ? true : false) %} 
 
<div class="uv-paper-article uv-paper-form"> 
<div class="uv-paper-section"> 
<section> 
<h1>{{ 'Create Ticket Request'|trans }}</h1> 
 
<div class="uv-form"> 
<form action="{{ path('helpdesk_customer_create_ticket') }}" method="post" id="create-ticket-form" enctype="multipart/form-data"> 
{% if not isTicketViewPage %} 
<!-- Field --> 
<div class="uv-element-block"> 
<label class="uv-field-label required">{{ 'Name'|trans }}</label> 
<div class="uv-field-block"> 
<input name="name" class="uv-field create-ticket" type="text" value="{{ post.name is defined ? post.name : '' }}"> 
</div> 
<span class="uv-field-info">{{ 'Enter your name'|trans }}</span> 
</div> 
<!-- //Field --> 
 
<!-- Field --> 
<div class="uv-element-block"> 
<label class="uv-field-label required">{{ 'Email'|trans }}</label> 
<div class="uv-field-block"> 
<input name="from" class="uv-field create-ticket" type="text" value="{{ post.from is defined ? post.from : '' }}"> 
</div> 
<span class="uv-field-info">{{ 'Enter your email'|trans }}</span> 
</div> 
<!-- //Field --> 
{% endif %} 
<!-- Field --> 
<div class="uv-element-block"> 
<label class="uv-field-label required">{{ 'Type'|trans }}</label> 
<div class="uv-field-block"> 
<select name="type" class="uv-select create-ticket" id="type"> 
<option value="">{{ 'Select type'|trans }}</option> 
 
{% for type in ticket_service.getTypes() %} 
<option value="{{ type.id }}" {{ post.type is defined and post.type == type.id ? 'selected' : '' }}>{{ type.name }}</option> 
{% endfor %} 
</select> 
</div> 
<span class="uv-field-info">{{ 'Choose ticket type'|trans }}</span> 
</div> 
<!-- //Field --> 
 
<!-- Field --> 
<div class="uv-element-block"> 
<label class="uv-field-label required">{{ 'Subject'|trans }}</label> 
<div class="uv-field-block"> 
<input name="subject" class="uv-field create-ticket" type="text" value="{{ post.subject is defined ? post.subject : '' }}"> 
</div> 
<span class="uv-field-info">{{ 'Ticket subject'|trans }}</span> 
</div> 
<!-- //Field --> 
 
<!-- Field --> 
<div class="uv-element-block"> 
<label class="uv-field-label required">{{ 'Message'|trans }}</label> 
<div class="uv-field-block grammarly-fix-message-container"> 
<textarea name="reply" id="create-reply" class="uv-field create-ticket grammarly-fix-message" type="text">{{ post.reply is defined ? post.reply : '' }}</textarea> 
</div> 
<span class="uv-field-info">{{ 'Ticket query message'|trans }}</span> 
</div> 
<!-- //Field --> 
 
<!-- Field --> 
<div class="uv-element-block attachment-block uv-no-error-success-icon" id="uv-attachment-option"> 
<label> 
<span class="uv-file-label">{{ 'Add Attachment'|trans }}</span> 
</label> 
</div> 
<!-- //Field --> 
{% if recaptchaDetail and recaptchaDetail.isActive == true %} 
<div class="clearfix"></div> 
<div class="g-recaptcha" data-sitekey="{{ recaptchaDetail.siteKey }}"></div> 
<div class="clearfix"></div> 
{% else %} 
<!-- Recaptcha will not support --> 
{% endif %} 
 
{# CustomFields #} 
{% set CustomerCustomFields = ticket_service.getCustomerCreateTicketCustomFieldSnippet() %} 
{% set removeMe = [] %} 
{% if CustomerCustomFields %} 
<div class="custom-fields clearfix"> 
{% for key, customField in CustomerCustomFields %} 
<div class="uv-element-block input-group {{ customField.customFieldsDependency|length ? 'dependent' : '' }} {% for customFieldCustomFieldsDependency in customField.customFieldsDependency %} dependency{{customFieldCustomFieldsDependency.id}}{% endfor %}" style="position: relative; {{ customField.customFieldsDependency|length ? 'display: none;' : '' }}"> 
<label class="uv-field-label" for="for{{customField.name~customField.id}}">{{ customField.name }}</label> 
{% if customField.fieldType == 'text' %} 
<div class="uv-field-block"> 
<input type="{{ customField['validation']['fieldtype'] is defined ? customField['validation']['fieldtype'] :'text' }}" name="customFields[{{customField.id}}]" class="uv-field create-ticket" value="" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}" placeholder="{{customField.placeholder}}"> 
</div> 
 
{% elseif customField.fieldType in ['date', 'time', 'datetime'] %} 
<div class="uv-field-block"> 
<input class="uv-field form-control create-ticket uv-date-picker {% if customField.fieldType == 'time' %}time{% else %}calendar{% endif %} uv-header-{{ customField.fieldType }}" type="text" name="customFields[{{customField.id}}]" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}" value=""> 
</div> 
{% elseif customField.fieldType == 'textarea' %} 
<div class="uv-field-block"> 
<textarea name="customFields[{{customField.id}}]" class="uv-field create-ticket" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}"></textarea> 
</div> 
 
{% elseif customField.fieldType in ['file'] %} 
<div class="uv-field-block"> 
<input type="file" name="customFields[{{customField.id}}]" class="uv-field create-ticket" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}"> 
</div> 
 
{% elseif customField.fieldType in ['select'] %} 
{% if customField.customFieldValues is not empty %} 
<div class="uv-field-block"> 
<select name="customFields[{{customField.id}}]" class="uv-select create-ticket" id="for{{customField.name~customField.id}}" {{ customField.required ? "required" : "" }}> 
<option value="">{{ 'Select option' }}</option> 
{% for customFieldValues in customField.customFieldValues %} 
<option value="{{customFieldValues.id}}">{{customFieldValues.name}}</option> 
{% endfor %} 
</select> 
</div> 
{% else %} 
<!--Hide this beacause choices aren't available--> 
{% set removeMe = removeMe|merge(["for"~customField.name~customField.id]) %} 
{% endif %} 
 
{% elseif customField.fieldType in ['checkbox'] %} 
{% if customField.customFieldValues is not empty %} 
{% for customFieldValues in customField.customFieldValues %} 
<div class="uv-split-field"> 
<label> 
<div class="uv-checkbox"> 
<input type="checkbox" name="customFields[{{customField.id}}][]" value="{{customFieldValues.id}}" id="for{{customFieldValues.name~customFieldValues.id}}" class="create-ticket"/> 
<span class="uv-checkbox-view"></span> 
</div> 
<span class="uv-radio-label" for="for{{customFieldValues.name~customFieldValues.id}}">{{ customFieldValues.name }}</span> 
</label> 
</div> 
{% endfor %} 
{% else %} 
<!--Hide this beacause choices aren't available--> 
{% set removeMe = removeMe|merge(["for"~customField.name~customField.id]) %} 
{% endif %} 
 
{% elseif customField.fieldType in ['radio'] %} 
{% if customField.customFieldValues is not empty %} 
{% for customFieldValues in customField.customFieldValues %} 
<div class="uv-split-field"> 
<label> 
<div class="uv-radio"> 
<input type="radio" name="customFields[{{customField.id}}]" value="{{customFieldValues.id}}" id="for{{customFieldValues.name~customFieldValues.id}}" class="create-ticket"/> 
<span class="uv-radio-view"></span> 
</div> 
<span class="uv-radio-label" for="for{{customFieldValues.name~customFieldValues.id}}">{{ customFieldValues.name }}</span> 
</label> 
</div> 
{% endfor %} 
{% else %} 
<!--Hide this beacause choices aren't available--> 
{% set removeMe = removeMe|merge(["for"~customField.name~customField.id]) %} 
{% endif %} 
 
{% endif %} 
{% if formErrors['customFields['~customField.id~']'] is defined %} 
<div class="text-danger">{{formErrors['customFields['~customField.id~']']}}</div> 
{% endif %} 
</div> 
{% endfor %} 
</div> 
{% endif %} 
 
<div class="uv-element-block"> 
<button type="submit" id="create-ticket-btn" class="uv-btn">{{ 'Create Ticket'|trans }}</button> 
</div> 
</form> 
</div> 
</section> 
</div> 
</div> 
 
{% if user_service.isFileExists('apps/uvdesk/form-component') %} 
{{ include('@_uvdesk_extension_uvdesk_form_component/CustomFields/customFieldValidation.html.twig') }} 
{% elseif user_service.isFileExists('apps/uvdesk/custom-fields') %} 
{{ include('@_uvdesk_extension_uvdesk_custom_fields/CustomFields/customFieldValidation.html.twig') }} 
{% endif %} 
{% endblock %} 
 
{% block footer %} 
{% set isTicketViewPage = (app.user.id is defined ? true : false) %} 
 
{{ parent() }} 
 
{% if recaptchaDetail and recaptchaDetail.isActive == true %} 
<script src='https://www.google.com/recaptcha/api.js'></script> 
{% endif %} 
 
{{ include("@UVDeskSupportCenter/Templates/tinyMCE.html.twig") }} 
{{ include('@UVDeskCoreFramework/Templates/attachment.html.twig') }} 
 
<script type="text/javascript"> 
{% if user_service.isFileExists('apps/uvdesk/form-component') == false %} 
customFieldValidation = {}; 
{% endif %} 
 
$(function () { 
sfTinyMce.init({ 
height: '155px', 
selector : '#create-reply', 
images_upload_url: "", 
setup: function(editor) { 
}, 
plugins: [ 
], 
toolbar: '| undo redo | bold italic forecolor ', 
}); 
 
{% if (removeMe is defined) %} 
$.each({{ removeMe | json_encode |raw }}, function(key, value){ 
$('label[for="' + value + '"]').parent().hide(); 
}); 
{% endif %} 
 
$('.uv-header-date').datetimepicker({ 
format: 'YYYY-MM-DD', 
}); 
 
$('.uv-header-time').datetimepicker({ 
format: 'LT', 
}); 
 
$('.uv-header-datetime').datetimepicker({ 
format: 'YYYY-MM-DD H:m:s' 
}); 
 
var CreateTicketModel = Backbone.Model.extend({ 
idAttribute : "id", 
defaults : { 
path : "", 
}, 
validation: _.extend(customFieldValidation, { 
{% if not isTicketViewPage %} 
'name' : { 
required : true, 
msg : '{{ "This field is mandatory"|trans }}' 
}, 
'from' :[{ 
required : true, 
msg : '{{ "This field is mandatory"|trans }}' 
}, { 
pattern : 'email', 
msg : '{{ "Email address is invalid"|trans }}' 
}], 
{% endif %} 
'type' : { 
required : true, 
msg : '{{ "This field is mandatory"|trans }}' 
}, 
'subject' : { 
required : true, 
msg : '{{ "This field is mandatory"|trans }}' 
}, 
'reply' : { 
fn: function(value) { 
var content = tinyMCE.activeEditor.getContent(); 
content = content.replace(/ /g, '').replace(/<[^>]*>/g, ''); 
 
if (content.trim() == '') { 
return true; 
} else { 
return false; 
} 
 
if (! tinyMCE.get("uv-edit-create-thread")) 
return false; 
 
var html = tinyMCE.get("uv-edit-create-thread").getContent(); 
if (app.appView.stripHTML(html) != '') { 
return false; 
} 
 
return true; 
}, 
msg : '{{ "This field is mandatory"|trans }}' 
}, 
{% if recaptchaDetail and recaptchaDetail.isActive == true %} 
'g-recaptcha-response' : { 
fn: function(value) { 
if (grecaptcha.getResponse().length > 0) 
return false; 
else 
return true; 
}, 
msg : '{{ "Please select CAPTCHA"|trans }}' 
} 
{% endif %} 
}), 
urlRoot : "{{ path('helpdesk_customer_create_ticket') }}" 
}); 
var CreateTicketForm = Backbone.View.extend({ 
initialize : function() { 
Backbone.Validation.bind(this); 
var jsonContext = JSON.parse('{{ errors is defined ? errors|raw : "{}"  }}'); 
for (var field in jsonContext) { 
Backbone.Validation.callbacks.invalid(this, field, jsonContext[field], 'input'); 
} 
}, 
events : { 
'click #create-ticket-btn' : "saveTicket", 
'change #type' : "updateCustomFields", 
'blur input:not(input[type=file]), textarea, select, checkbox': 'formChanged', 
'change input[type=file]': 'formChanged', 
}, 
formChanged: function(e) { 
this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val()) 
this.model.isValid([Backbone.$(e.currentTarget).attr('name')]) 
}, 
saveTicket : function (e) { 
e.preventDefault(); 
var currentElement = Backbone.$(e.currentTarget); 
var data = currentElement.closest('form').serializeObject(); 
this.model.set(data); 
if (this.model.isValid(true)) { 
$('#create-ticket-form').submit(); 
$('form').find('#create-ticket-btn').attr('disabled', 'disabled'); 
} 
}, 
updateCustomFields : function (e) { 
var dependentFields = e.currentTarget.value; 
this.$('.dependent').hide(); 
this.$('.dependency' + dependentFields).show(); 
} 
}); 
var createticketForm = new CreateTicketForm({ 
el : $("#create-ticket-form"), 
model : new CreateTicketModel() 
}); 
}); 
</script> 
{% endblock %}