<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
	<head>
		{include file="{$smarty.const.APP_REAL_PATH}_templates/engine/head.tpl"}

		<style type="text/css">
			@import url('_css/orderForm.css');
		</style>

		<script language="javascript" src="_js/orderForm.js"></script>

		<script language="javascript" src="{$MODULE_REL_PATH}_js/engine/remoteLoad/remoteLoad.js"></script>

	</head>

	<body class="hasStatusBar {$smarty.const.THEME}" style="height:75%">
		{if Theme::getInstance()->compatibilityWithTina2()}{Theme::getInstance()->compatibilityWithTina2()->loadLocalCssRules($smarty.const.MODULE_PATH, $smarty.get)}{/if}

		{include file="{$smarty.const.APP_REAL_PATH}_templates/engine/header.tpl"}
		{include file="{$smarty.const.APP_REAL_PATH}_templates/engine/menu.tpl"}

		{showMessage}

		{if $similarServicesList}
			{include file="_similarServices.tpl"}
		{/if}


		{************************************ STEP 1 - CLIENTS *******************************}
		<div id="step1Div">
			<div id="step1Controls">
				<table width="99%" cellpadding="0" cellspacing="0" align="center">
					<td style="width:240px;" valign="bottom" class="boxTitle">
						{$_LANG.orderForm.clientsTitle}
					</td>
					<td style="white-space:nowrap">
						<div class="tabs" style="border:0;margin:0;">
							<div id="step1MenuTabs" style="float:right; padding-top: 5px;"></div>
						</div>
						<script language="javascript">
							var topPageControl=new DCsTabsFunctions([
									['$(\'passengersFiltersDiv\').show();$(\'corporatesFiltersDiv\').hide();$(\'iframe1\').src=\'./clientsList.php?section=customers&addCustomerId={$addCustomerId}\'', '{$_LANG.orderForm.topTabs.passengers|default:' '}'],
									['$(\'passengersFiltersDiv\').hide();$(\'corporatesFiltersDiv\').show();$(\'iframe1\').src=\'./clientsList.php?section=corporates\'', '{$_LANG.orderForm.topTabs.companies|default:' '}']
								],'step1MenuTabs', 0);
						</script>
					</td>
				</table>

			</div>

			<div class="center">

				<table width="99%" cellpadding="0" cellspacing="0" align="center">

					{* --- PAX DETAILS --- *}

					<td class="detailsBoxTd" id="orderPaxBox" {if $hideOrderPax}style="display:none"{/if}>
						<div id="orderPaxDetailsDiv"></div>
						<div id="orderOwnerDetailsDiv"></div>
						<script>updatePaxDetails();</script>
						<script>updateOwnerDetails('{$idCorporateOwnerOffice}', '{$corporateOwnerOfficeCostCenter}');</script>

					</td>

					<td
						class="detailsBoxButton"
						onClick="
							Effect.toggle('orderPaxBox', 'blindh', {ldelim}duration:0.1{rdelim});

							$('orderPaxArrowsLeft').toggle();
							$('orderPaxArrowsRight').toggle();

						"
					>
						<div id="orderPaxArrowsLeft"  {if $hideOrderPax}style="display:none"{/if}>
							<div>
								<img src="{$smarty.const.SMARTY_BLANKGIF}" alt="" align="absmiddle" class="imgIcon icon-collapseLeft-10" />
							</div>
							<div class="space5">&nbsp;</div>
							<div>
								<img src="{$smarty.const.SMARTY_BLANKGIF}" alt="" align="absmiddle" class="imgIcon icon-collapseLeft-10" />
							</div>
						</div>
						<div id="orderPaxArrowsRight"  {if !$hideOrderPax}style="display:none"{/if}>
							<div>
								<img src="{$smarty.const.SMARTY_BLANKGIF}" alt="" align="absmiddle" class="imgIcon icon-collapseRight-10" />
							</div>
							<div class="space5">&nbsp;</div>
							<div>
								<img src="{$smarty.const.SMARTY_BLANKGIF}" alt="" align="absmiddle" class="imgIcon icon-collapseRight-10" />
							</div>
						</div>
					</td>
					<td style="width:6px"></td>

					{* --- IFRAME 1 --- *}

					<td align="center" class="listingTd">

						<div class="iframeControlsDiv">

							{include file="index_clientControls.tpl"}

						</div>

						<iframe
							name="iframe1" id="iframe1" style="width:100%;height:100px;" class="iframe"
							src="blank.html" scrolling="yes" frameborder="0"
						></iframe>
					</td>
				</table>

			</div>
		</div>

		{************************************ STEP 2 - SERVICES ******************************}
		<form method="post" action="./" style="padding:0;margin:0" id="mainForm">

			<div id="step2Div">


				<div id="step2Controls" style="margin:6px 0px 0px 0px">

					<table width="99%" cellpadding="0" cellspacing="0" align="center">
						<td style="width:240px;" valign="bottom" class="boxTitle">
							{$_LANG.orderForm.servicesTitle}
						</td>
						<td style="white-space:nowrap">

							<div class="tabs" style="border:0;margin:0;">
								<div id="step2MenuTabs" style="float:right; padding-top: 5px;"></div>
							</div>


						</td>
					</table>

				</div>

				<div class="center">
					<table width="99%" cellpadding="0" cellspacing="0" align="center">

						{* --- ORDER DETAILS --- *}

						{if $displayOrderDetailsBox}

							<td class="detailsBoxTd" id="orderDetailsBox" {if $hideOrderDetails}style="display:none"{/if}>
								<div id="orderDetailsDiv" class="orderDetailsDiv">
									{include file="index_orderDetails.tpl"}
								</div>
							</td>
							<td
								class="detailsBoxButton"
								onClick="
									Effect.toggle('orderDetailsBox', 'blindh', {ldelim}duration:0.1{rdelim});

									$('orderFormArrowsLeft').toggle();
									$('orderFormArrowsRight').toggle();

									$('hideOrderDetails').value=Number($('orderFormArrowsRight').visible());
								"
							>
								<div id="orderFormArrowsLeft"  {if $hideOrderDetails}style="display:none"{/if}>
									<div>
										<img src="{$smarty.const.SMARTY_BLANKGIF}" alt="" align="absmiddle" class="imgIcon icon-collapseLeft-10" />
									</div>
									<div class="space5">&nbsp;</div>
									<div>
										<img src="{$smarty.const.SMARTY_BLANKGIF}" alt="" align="absmiddle" class="imgIcon icon-collapseLeft-10" />
									</div>
								</div>
								<div id="orderFormArrowsRight"  {if !$hideOrderDetails}style="display:none"{/if}>
									<div>
										<img src="{$smarty.const.SMARTY_BLANKGIF}" alt="" align="absmiddle" class="imgIcon icon-collapseRight-10" />
									</div>
									<div class="space5">&nbsp;</div>
									<div>
										<img src="{$smarty.const.SMARTY_BLANKGIF}" alt="" align="absmiddle" class="imgIcon icon-collapseRight-10" />
									</div>
								</div>
							</td>
							<td style="width:6px"></td>

							<input id="hideOrderDetails" type="hidden" name="hideOrderDetails" value="{$hideOrderDetails}" />

						{/if}

						{* --- IFRAME 2 --- *}

						<td align="center" class="listingTd">

							<div class="iframeControlsDiv">

								{* ---- services controls ---- *}
								<div class="right">

									{if $userOptionsAccess.reservationProcessFromImportedRes}
										<button type="button" onClick="importedOrderServicesList(0);">{$_LANG.orderForm.addImportedService}</button>
									{/if}

									<button type="button"
										onClick="
											// var fields = { };
											// if ($('reservationResponsibleUserId')) {
											// 	fields = {
											// 		'user[id]':			$F('reservationResponsibleUserId')
											// 		'idMiceProject':	$F('idMiceProject')
											// 	};
											// }
											orderServiceInsert(0, { } )
										"
									>{$_LANG.orderForm.addServiceButton}</button>
								</div>

							</div>

							<iframe id="iframe2" frameborder="0" src="servicesList.php"
								style="width:100%;height:100px;"
								scrolling="yes"
							></iframe>
						</td>
					</table>
				</div>
			</div>

			{************************************ STEP 3 - CANCEL AND OK BUTTONS *******************************}
			<br class="space5" />


			<table width="100%" cellpadding="0" cellspacing="0">
				<tr>
					<td align="left">
						<button
							type="button"
							style="width:150px;"
							onClick="messageBox.showQuestion('{$_LANG.confirm}','{$_LANG.orderForm.cancelOrderMessage}',[ ['{$_LANG.yes}', 'window.location=\'./?resetOrderForm\''], '{$_LANG.no}'])"
						>{$_LANG.orderForm.cancelOrderButton}</button>
					</td>
					<td width="660" align="right">
						<div style="border:1px solid #A7C2E7;margin-right:10px;">
							
							{$_LANG['orderForm']['afterAdding']}:
							<select name="extraActions" id="extraActions" onChange="refreshClientsList()" style="width:150px">
								<option value="ordersList" {if $extraActions=='ordersList'}selected="1"{/if}>{$_LANG['orderForm']['extraActions']['ordersList']}</option>
								<option value="newOrder" {if $extraActions=='newOrder'}selected="1"{/if}>{$_LANG['orderForm']['extraActions']['newOrder']}</option>
								<option value="invoiceInsert" {if $extraActions=='invoiceInsert'}selected="1"{/if}>{$_LANG['orderForm']['extraActions']['invoiceInsert']}</option>
								<option value="invoiceInsertAndIssue" {if $extraActions=='invoiceInsertAndIssue'}selected="1"{/if}>{$_LANG['orderForm']['extraActions']['invoiceInsertAndIssue']}</option>
							</select>
							
							/
							
							<select name="invoiceIdClient" id="invoiceIdClient" style="width:150px" 
								{if $extraActions=='ordersList' or $extraActions=='newOrder'} disabled="1" {/if} 
								onChange="changeCurrencyByClient();"
							>
								<option value=''>-</option> 
								{if $invoiceCorporatesList}
									<optgroup label="{$_LANG['orderForm']['addInvoice_legalEnt']}">
										{foreach $invoiceCorporatesList as $idCorp}
											<option value="{$idCorp}|0" {if $invoiceIdClient=="{$idCorp}|0"}selected="1"{/if}>{corporateLabel ref=$idCorp format="%alias%"}</option>
										{/foreach}
									</optgroup>
								{/if}
								{if $invoiceCustomersList}
									<optgroup label="{$_LANG['orderForm']['addInvoice_individuals']}">
										{foreach $invoiceCustomersList as $idCust}
											<option value="0|{$idCust}" {if $invoiceIdClient=="0|{$idCust}"}selected="1"{/if}>{customerLabel ref=$idCust format="%name%"}</option>
										{/foreach}
									</optgroup>
								{/if}
							</select>
							
							<select name="invoiceCurrency" id="invoiceCurrency" 
								{if $extraActions=='ordersList' or $extraActions=='newOrder'} disabled="1" {/if}
							>
								{foreach \App\Config\Currencies::getInstance()->getSimple() as $currency}
									<option value="{$currency}" {if $invoiceCurrency==$currency}selected="1"{/if}>{$currency}</option>
								{/foreach}
							</select>
							
							&nbsp;
							
							<button type="button"
								id="addOrderButton"
								onclick="$(this).disabled=true;$('mainForm').submit();"
								style="width:150px;"
								disabled="1" class="disabled"
							>{$_LANG.orderForm.addOrderButton}</button>
						</div>
					</td>
				</tr>
			</table>

			<input type="hidden" id="idCorporateOwnerOffice" name="idCorporateOwnerOffice" value="{$idCorporateOwnerOffice}" />
			<input type="hidden" id="corporateOwnerOfficeCostCenter" name="corporateOwnerOfficeCostCenter" value="{$corporateOwnerOfficeCostCenter}" />
			<input type="hidden" name="addOrder" value="1" />
			<input type="hidden" id="forceSaveData" name="forceSaveData" value="0" />

		</form>


		<script language="javascript">
			Event.observe(window, 'resize', resizeOrderForm, false);
			resizeOrderForm();
			setInterval(resizeOrderForm, 3000);

			// after reference service popup page closes - refresh the current iframe

			MVC.pageRefresh = function (module, action, windowName, execOutput){
				// refresh on imported service insert/update
				if ( module=='Orders/Services' && execOutput && (execOutput.currentViewClass=='Modules\\Orders\\Services\\View_Insert' || execOutput.currentViewClass=='Modules\\Orders\\Services\\View_Update') ) {
					$('iframe1').src='clientsList.php?updatePaxDetailsDiv=1&updateOwnerDetailsDiv=1';
					$('iframe2').src='servicesList.php';
				}

				// refresh on service process bulk
				if ( module=='Orders/Services/ProcessBulk' &&  action=='index') {
					$('iframe1').src='clientsList.php?updatePaxDetailsDiv=1&updateOwnerDetailsDiv=1';
					$('iframe2').src='servicesList.php';
				}

				// after customer insert
				if (module=='Partners/Customers' && execOutput && windowName=='customerInsert') {
					$('iframe1').src='clientsList.php?section=customers&addCustomerId='+execOutput['id'];
				}

				// after corporate insert
				if (module=='Partners/Corporates' && execOutput && windowName=='corporateInsert') {
					$('iframe1').src='clientsList.php?section=corporates&addCorporateId='+execOutput['id'];
				}
			}
			
			// by default all currency profile (based on client) is empty and will be filled in via Ajax request
			var autoSelectCurrency = [];

			///////////////////////////////////////////////////////////////////////////////////////
			// RELOADS THE CLIENTS LIST IN THE SELECTOR ///////////////////////////////////////////
			///////////////////////////////////////////////////////////////////////////////////////
			function refreshClientsList()
			{

				var clientsSelector = $('invoiceIdClient');
				var currencySelector = $('invoiceCurrency');

				if ($F('extraActions')=='invoiceInsert' || $F('extraActions')=='invoiceInsertAndIssue') {
					clientsSelector.disabled = false;
					currencySelector.disabled = false;
				} else {
					clientsSelector.disabled = true;
					currencySelector.disabled = true;
					return ;
				}

				// do the request
				importedDocumentTotalTransport = new Ajax.Request( MVC.appUrl('Orders/OrderForm', 'loadClients', { } ) , {
					method: 'get',
					onSuccess:	function(response) {
						
						var clientsListResponse = response.responseJSON;
						if (!clientsListResponse) {
							alert('Invalid response for order clients list.');
							return ;
						}

						// store prev selected value
						var selectedIdClient = clientsSelector.value;
	
						// eliminate existing options
						clientsSelector.select(">optgroup").invoke('remove');
						
						autoSelectCurrency = [];
						
						var corporatesCount = Object.keys(clientsListResponse.corporatesList).length;
						if (corporatesCount) {
							var corpGroup = document.createElement('OPTGROUP');
							corpGroup.label = '{$_LANG['orderForm']['addInvoice_legalEnt']}';
							for (var idCorp in clientsListResponse.corporatesList) {
								corpGroup.insert({
									bottom: new Option(clientsListResponse.corporatesList[idCorp], idCorp + '|0')
								});
								autoSelectCurrency[idCorp + '|0'] = clientsListResponse.currencies[idCorp + '|0'];
							}
							clientsSelector.appendChild(corpGroup);
						}

						var customersCount = Object.keys(clientsListResponse.customersList).length;
						if (customersCount) {
							var custGroup = document.createElement('OPTGROUP');
							custGroup.label = '{$_LANG['orderForm']['addInvoice_individuals']}';
							for (var idCust in clientsListResponse.customersList) {
								custGroup.insert({
									bottom: new Option(clientsListResponse.customersList[idCust], '0|' + idCust)
								});	
								autoSelectCurrency['0|' + idCust] = clientsListResponse.currencies['0|' + idCust];						
							}
							clientsSelector.appendChild(custGroup);

						}

						// enable/disable client selector						
						if (corporatesCount || customersCount) {
							clientsSelector.disabled = false;
							currencySelector.disabled = false;
						} else {
							clientsSelector.disabled = true;
							currencySelector.disabled = true;
						}
						
						// re-select the client
						clientsSelector.setSelectorValue(selectedIdClient);
						
					}
				});
			}


			///////////////////////////////////////////////////////////////////////////////////////
			// UPDATE CURRENCY WHEN CLIENT IS CHANGED /////////////////////////////////////////////
			///////////////////////////////////////////////////////////////////////////////////////
			function changeCurrencyByClient()
			{
				if (autoSelectCurrency[$('invoiceIdClient').value]) {
					$('invoiceCurrency').setSelectorValue( autoSelectCurrency[$('invoiceIdClient').value] );
				}
			}
			
		</script>


		{include file="{$smarty.const.APP_REAL_PATH}_templates/engine/footer.tpl"}

	</body>
</html>