{% 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;
		}
		.uv-paper-article.uv-paper-form {
			width: fit-content;
			margin: 0 auto;
		}

		.uv-paper-section {
			width: 100% !important;
			padding-right: 0 !important;
		}
	</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 -->

						<!-- Custom Field -->


						<div class="uv-element-block">
							<label class="uv-field-label">{{ 'Custom Field'|trans }}</label>

							<div class="autocomplete-container uv-field-block">
								<input name="customField" class="uv-field create-ticket" type="text" id="autocomplete" placeholder="Type a booth name or number..." autocomplete="off" value="{{ post.customField is defined ? post.customField : '' }}"/>
								<div id="results" class="autocomplete-results"></div>
							</div>

{# 
							<div class="uv-field-block">
								<input name="customField" class="uv-field create-ticket" type="text" >
							</div>
							<span class="uv-field-info">{{ 'Enter custom value'|trans }}</span> #}
						</div>


						 <script>
																		
							let countries = ["A001 1023", "A002 111", "A003 305STOP",
													"A004 A.YA.YOI",
													"A005 abigburger",
													"A006 Adilaam",
													"A007 airi maeyama",
													"A008 Alvinxki",
													"A009 AneArt",
													"A010 Aqiū’s family",
													"A011 archiestudio",
													"A012 Arnoux (อาร์นู)",
													"A013 Art of Pronch",
													"A014 Atelier Pakawan",
													"A015 BAE SUNGKYOU",
													"A016 Bammism",
													"A017 BEEBS PENTHOUSE",
													"A018 Being",
													"A019 Bernadet Putri",
													"A020 Beryl Wu",
													"A021 Bidala",
													"A022 blue!",
													"A023 blueciiel",
													"A024 Bomfha",
													"A025 Bonaventura Kevin",
													"A026 Boniroom",
													"A027 born.kk",
													"A028 Brain Damage",
													"A029 Butterclub",
													"A030 c0w!",
													"A031 Captain Mozmo",
													"A032 Carella Ira",
													"A033 Cerebrum_art.original",
													"A034 Chayanissart",
													"A035 Chickenmew",
													"A036 CHOSKO",
													"A037 chyn.f",
													"A038 Citaaticat",
													"A039 Claudia Clara",
													"A040 CU SciDraw",
													"A041 Cyber Sheep Studios",
													"A042 dday.d",
													"A043 degeha",
													"A044 DESTROYAH BELPH",
													"A045 Dib",
													"A046 DOK",
													"A047 double T",
													"A048 ekaradp",
													"A049 Emen Lo",
													"A050 Erdy",
													"A051 Erikartoon",
													"A052 euangaraya",
													"A053 fahsuwaree",
													"A054 Falafymns",
													"A055 fawnyawns",
													"A056 Fei.Phet",
													"A057 GC",
													"A058 Godmatter",
													"A059 Goodnight.xinqxinq",
													"A060 Guidekk",
													"A061 Halo Q",
													"A062 Herbaria Studio",
													"A063 Hsieying",
													"A064 hwang rokhyu",
													"A065 IAMPER",
													"A066 ILIA",
													"A067 IORI KIKUCHI",
													"A068 Istelaillustrated",
													"A069 Ivy Tsai Illustration",
													"A070 Izary Shojo",
													"A071 Jean8lines",
													"A072 Jeanne Prouvost",
													"A073 Jeff Aphisit",
													"A074 Jerold Sunga",
													"A075 Jimbo",
													"A076 Jin",
													"A077 John & The Gang",
													"A078 JOI3",
													"A079 Jung_P1987",
													"A080 Junyun",
													"A081 Kanya_Kim",
													"A082 Kayla's Palette",
													"A083 ke ai de ke",
													"A084 Kenny Nguyen",
													"A085 Khemtit",
													"A086 KINTARO",
													"A087 KITAYAMA YOSHIHIRO",
													"A088 KT",
													"A089 LALA COMPANY",
													"A090 Lefty Art Store",
													"A091 Linezent",
													"A092 Lowwla",
													"A093 Lun",
													"A094 Lynsey Lin",
													"A095 mairuuumaicheee",
													"A096 Manting",
													"A097 May Wai",
													"A098 Mbetand",
													"A099 meanapas.c",
													"A100 meanlee",
													"A101 Meetmrtwo",
													"A102 meltboy",
													"A103 Memechkin",
													"A104 miminini",
													"A105 Missing The Cat",
													"A106 Mistress Novia Shin",
													"A107 Molvisu",
													"A108 Monning",
													"A109 MONTY",
													"A110 moolinlin",
													"A111 MOORGOZ",
													"A112 MOTO",
													"A113 MOUs",
													"A114 MR.HALFMAN",
													"A115 MUKLAY",
													"A116 Nadhir Nor",
													"A117 namsai k.",
													"A118 NICEJOY",
													"A119 noirphetamine",
													"A120 Nopkarian",
													"A121 notemook",
													"A122 nrlail",
													"A123 Nuchcha",
													"A124 oattor",
													"A125 OCMay",
													"A126 OKD_STUDIO",
													"A127 Ongly",
													"A128 Onlysun",
													"A129 otama",
													"A130 Patpixels",
													"A131 Peaches.arch",
													"A132 Phantomwave Beggarman Iconotactics",
													"A133 pi-near (พิแน)",
													"A134 Ping Sasinan",
													"A135 Plankarn",
													"A136 pnk.ff",
													"A137 Po.loid",
													"A138 POKAPOLAR",
													"A139 Pong Songsai",
													"A140 POON CHAN1NT",
													"A141 Pop Twatpong",
													"A142 PPOLAND",
													"A143 Praefueng",
													"A144 Praewprapha",
													"A145 Push",
													"A146 PYH",
													"A147 remimi",
													"A148 RERUNN",
													"A149 Rinaldo Hartanto",
													"A150 Room.533",
													"A151 Rotten Fish",
													"A152 sa-ard",
													"A153 Sacasso",
													"A154 Shang-Ru Tsai",
													"A155 SHUN",
													"A156 SIMPLESEASUN",
													"A157 Sleepybeee",
													"A158 SRI SU RHA",
													"A159 Stickwithme4ev",
													"A160 Stone Leela",
													"A161 STRXNDEDBOY",
													"A162 Studio Micki",
													"A163 STUMOOH",
													"A164 SUNSABEA",
													"A165 svn",
													"A166 T / E",
													"A167 taanntawan",
													"A168 Tableteee",
													"A169 TAKE TIME TO MAKE KRAAM",
													"A170 tako.toka",
													"A171 tanut.chan",
													"A172 Tanyan",
													"A173 Taweechob",
													"A174 Tent Katchakul",
													"A175 Teparit Chaiyajan",
													"A176 Thani",
													"A177 The 3rd Daughter",
													"A178 TheGroxury沙塵百貨",
													"A179 toddyinthemood",
													"A180 Tomorrowerr",
													"A181 Ton ArtsLaWaad",
													"A182 ToyArch",
													"A183 TROUBLELOOK",
													"A184 truffle soup",
													"A185 Ullahoops",
													"A186 VECTOR",
													"A187 Veiz YauzMiuj",
													"A188 Viwenny",
													"A189 WALNUTBOY",
													"A190 webyeywork",
													"A191 WEIRDOLLS",
													"A192 WHITE HAT. Since 2013",
													"A193 Wild So Serious",
													"A194 Wol bok",
													"A195 YAKKUU",
													"A196 YAMACHEN951",
													"A197 Yhenjai",
													"A198 YONIAM",
													"A199 Yuka Izuhara",
													"A200 Zenavi",
													"A201 鸡屁chickenfart",
													"B01 Jiaern Studio",
													"B02 Willwin Yang",
													"B03 Mister Goat Illustration",
													"B04 DUMPLING CAT FAMILY",
													"B05 Anna Du Toit",
													"B06 Yonnnno",
													"B07 Yangchee",
													"B08 diji_Planet",
													"B09 ROMO DOLDOL STUDIO",
													"B10 Mr. Junk Sticker",
													"B11 Bumi Cha",
													"B12 Hans Djap",
													"B13 Gusde Sidhi",
													"B14 Bo Yang",
													"B15 Olddog",
													"G01 NOMA",
													"G02 Skill",
													"G03 Pol Huiprasert",
													"G04 Urban Sketchers Thailand",
													"G05 WHOSMiNG",
													"G06 The Duang",
													"C01 OHIGE no PON",
													"C02 The Art Auction Center x Autistic Thai Foundation",
													"C03 Cheesy Duck",
													"C04 ThisisBoringday",
													"C05 Cat me five",
													"C06 Switch Panda",
													"C07 Artstory by Autistic Thai",
													"C08 Pass the Hope Forward",
													"D01 Portfolio Review",
													"D02 LINE STICKERS",
													"D03 Koncept Play",
													"D04 MOODY",
													"D05 CloverSeed",
													"D06 BKKIF",
													"D07 Canon",
													"D08 College of Creative Design and Entertainment Technology, Dhurakij Pundit University",
													"D09 Faculty of Fine and Applied Arts, Dhurakij Pundit University",
													"D10 Business to Artist"
												];
						
							
							const input = document.getElementById('autocomplete');
							const results = document.getElementById('results');
						
							input.addEventListener('input', () => {
							const query = input.value.toLowerCase();
							results.innerHTML = ''; // clear previous results
						
							if (!query) return;
						
							const matches = countries.filter(country => country.toLowerCase().includes(query));
							matches.forEach(match => {
								const item = document.createElement('div');
								item.classList.add('autocomplete-item');
								item.textContent = match;
						
								item.addEventListener('click', () => {
								input.value = match;
								results.innerHTML = '';
								});
						
								results.appendChild(item);
							});
							});
						
							// Hide results when clicking outside
							document.addEventListener('click', e => {
							if (!e.target.closest('.autocomplete-container')) {
								results.innerHTML = '';
							}
							});
												
						</script>
						<!-- //Custom 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(/&nbsp;/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 %}