{% 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 %}