- {% 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) {
-                             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': 'formChanegd',
-                     'change input[type=file]': 'formChanegd',
-                 },
-                 formChanegd: 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 %}