{extends file=$element.methods->getTemplatePath('autocomplete')}

{block name=input append}
	{$JS->loadGroup("remoteHtmlView")}
	{$CSS->loadGroup("remoteHtmlView")}

{/block}

{block name=post append}
	<ul style="list-style-type: none; position: relative; padding: 0; margin: 0; display: inline-block; top: 2px; left:4px;">
		<li>
			<var
				tooltip="suggestions" class="icon-suggestions"
				style="display:inline-block;"
				onclick="
					RemoteHtmlViewHandler
						.attach(this, '{$_LANG['formField']['inputs']['inputAutocompleteImportedOrderCustomer']['labelTitle']}')
						.loadUrl(MVC.appUrl('RemoteData/AutocompleteFieldData/ImportedCustomerSuggestions', 'index', { 'passengerIdx': '{$element.passengerIdx}', 'idImportedService': '{$element.idImportedService}', 'idCustomer':$('{$element.id}').value, 'targetElement': '{$element.id}' }));
				"
			></var>
		</li>
	</ul>

	{if !$element.hideSelector}
		<select size="1" name="{$element.name}[insertType]" id="{$element.id}insertType" onchange="formFieldAutocomplete_{$element.id}_refreshImportedOrderCustomerFields($F(this), '{$element.displayID}')" style="width:150px;margin-left:4px;">
			<option value="manualSelect"
				{if $element.insertType=='manualSelect'}
					selected="1"
				{/if}
			>
				{$_LANG['formField']['inputs']['inputAutocompleteImportedOrderCustomer']['options']['manualSelect']}
			</option>

			<option value="autoInsert"
				{if $element.insertType=='autoInsert'}
					selected="1"
				{/if}
			>
				{$_LANG['formField']['inputs']['inputAutocompleteImportedOrderCustomer']['options']['autoInsert']}
			</option>

			<optgroup label="{$_LANG['formField']['inputs']['inputAutocompleteImportedOrderCustomer']['options']['undefType']}">
				{foreach $element.passengerTypes as $typeCode=>$typeName}
					<option value="{$typeCode}"
						{if $element.insertType==$typeCode}
							selected="1"
						{/if}
					>
						{$typeName} ({$_LANG['formField']['inputs']['inputAutocompleteImportedOrderCustomer']['undefinedPax']})
					</option>
				{/foreach}
			</optgroup>
		</select>
	{/if}

	<div>
		{$_LANG['formField']['inputs']['generalAutocomplete']['text']['name']}:
		<b>
			{if $element.fullName}{$element.fullName}
			{else}-{/if}
		</b>
	</div>
{/block}


<script type="text/javascript">
	{block name=script append}


		MVC.scheduleOnLoad(function(){
			{if $element.insertType!='manualSelect'}
				$('{$element.displayID}').disabled = true;
			{/if}

			$('{$element.id}').observe('ImportedCustomerSuggestions:select', function(evt){
				FormField.setValue(null, 'Engine/Form/Input/Autocomplete', null, evt.element(), {
					value: evt.memo.customerId,
					displayValue: evt.memo.customerName
				});

				RemoteHtmlViewHandler.close();

				// trigger registered onSelect event
				if (window['formFieldAutocomplete_{$element.id}'].options.onSelect) {
					window['formFieldAutocomplete_{$element.id}'].options.onSelect();
				}

				// revalidate input
				_inputValidator.getRegisteredValidatorsForElement(window['formFieldAutocomplete_{$element.id}'].element.value).first().validate();
			});

			$(document).observe('document:pageRefresh', function(evt){
				// check actual input
				if (evt.memo.execOutput && evt.memo.execOutput.transportParams && '{$element.id}' == evt.memo.execOutput.transportParams.target) {
					FormField.setValue(null, 'Engine/Form/Input/Autocomplete', null, $('{$element.id}'), {
						value: evt.memo.execOutput.id,
						displayValue: evt.memo.execOutput.name
					});

					RemoteHtmlViewHandler.close();
				}
			});

			$('{$element.id}_title_').observe('click', function(event) {
  				RemoteHtmlViewHandler.close();
			});

		});


		function formFieldAutocomplete_{$element.id}_refreshImportedOrderCustomerFields(currentOption, fieldName)
		{
			if (currentOption=='manualSelect') {
				$(fieldName).disabled = false;
			} else {
				$(fieldName).disabled = true;
			}
		}
	{/block}
</script>
