<zk xmlns="http://www.zkoss.org/2005/zul"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
	<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>

	<grid>
		<columns visible="false">
			<column hflex="min"/>
			<column hflex="min"/>
			<column hflex="2"/>
			<column hflex="2"/>
			<column hflex="2"/>
		</columns>
		<auxhead>
			<auxheader label="${labels.TripBillTravelBegin}" colspan="2"/>
			<auxheader label="${labels.TripBillTravelTarget}"/>
			<auxheader label="${labels.TripBillPurpose}"/>
			<auxheader label="${labels.TripBillTravelEnd}"/>
		</auxhead>
		<rows>
			<row>
				<cell colspan="2">
					<label value="@load(vm.dataBean.requirement.from)"/>
				</cell>
				<cell>
					<label value="@load(vm.dataBean.requirement.to)"/>
				</cell>
				<cell>
					<label value="@load(vm.dataBean.requirement.description)"/>
				</cell>
				<cell>
					<label value="@load(vm.dataBean.requirement.end)"/>
				</cell>
			</row>
			<row>
				<label value="@load(vm.dataBean.requirement.tripDate) @converter('formatedDate', format=labels.DateFormat)"/>
				<label value="@load(vm.dataBean.requirement.tripDate) @converter('formatedDate', format='hh:mm')"/>
				<cell/>
				<cell/>
				<label value="@load(vm.dataBean.requirement.endDate) @converter('formatedDate', format=labels.DateFormat)"/>
			</row>
		</rows>
	</grid>
	<grid>
		<columns>
			<column/>
			<column/>
		</columns>
		<rows>
			<row>
				<label value="${labels.TripBillResultMessage}"/>
				<datebox value="@bind(vm.dataBean.resultMessageDate)" disabled="${disabled}"/>
			</row>
			<row>
				<cell colspan="2">
					<checkbox label="${labels.TripBillFreeMeals}"
							  checked="@bind(vm.dataBean.freeMeals)"
							  onCheck="@command('calculate')"
							  disabled="${disabled}"/>
				</cell>
			</row>
			<row>
				<cell colspan="2">
					<checkbox label="${labels.TripBillFreeHousing}"
							  checked="@bind(vm.dataBean.freeHousing)"
							  disabled="${disabled}" />
				</cell>
			</row>
			<row>
				<cell colspan="2">
					<checkbox label="${labels.TripBillFreeCarfare}"
							  checked="@bind(vm.dataBean.freeCarfare)"
							  disabled="${disabled}" />
				</cell>
			</row>
		</rows>
	</grid>
	<grid
			model="@load(vm.dataBean.billItems)"
			vflex="1">
		<auxhead>
			<auxheader rowspan="2">
				<div sclass="vertikaal" height="50px">
					<label value="${labels.TripBillDate}" sclass="bold"/>
				</div>
			</auxheader>
			<auxheader colspan="2">
				<label value=""/>
			</auxheader>
			<!-- <auxheader >
				<label value=""/>
			</auxheader> -->
			<auxheader colspan="2" align="center">
				<label value="${labels.TripBillDepartureArrival}" sclass="bold"/>
			</auxheader>
			<!-- <auxheader>
				<label value=""/>
			</auxheader> -->
			<auxheader rowspan="2"  valign="bottom" height="110px">
				<div sclass="vertikaal" height="88px" width="88px">
					<vbox>
						<label value="${labels.TripBillUsed}" sclass="bold"/>
						<label value="${labels.TripBillVehicle}" sclass="bold"/>
					</vbox>
				</div>

			</auxheader>
			<auxheader rowspan="2" valign="bottom" height="112px">
				<div sclass="vertikaal" height="101px" width="90px">
					<vbox>
						<label value="${labels.TripBillBeginEnd}" sclass="bold"/>
						<label value="${labels.TripBillWork}" sclass="bold"/>
					</vbox>
				</div>
			</auxheader>
			<auxheader>
				<html>
				<![CDATA[${labels.TripBillTraveled}  <br /> ${labels.TripBillKm} ]]>
				</html>
			</auxheader>
			<auxheader>
				<html>
				<![CDATA[${labels.TripBillConsumption}  <br /> ${labels.TripBillPHM} ]]>
				</html>
			</auxheader>
			<auxheader rowspan="2">
				<html>
				<![CDATA[${labels.TripBillCarfare}  <br /> ${labels.TripBillLocal} <br /> ${labels.TripBillTransportation} ]]>
				</html>
			</auxheader>
			<auxheader rowspan="2">
				<label value="${labels.TripBillHousing}" sclass="bold"/>
			</auxheader>
			<auxheader rowspan="2">
				<html>
				<![CDATA[${labels.TripBillNumber}  <br /> ${labels.TripBillMeals} <br /> ${labels.TripBillFree} ]]>
				</html>
			</auxheader>
			<auxheader rowspan="2">
				<label value="${labels.TripBillMealExpenses}" sclass="bold"/>
			</auxheader>
			<auxheader rowspan="2">
				<html>
				<![CDATA[${labels.TripBillNecessary}  <br /> ${labels.TripBillOther} <br /> ${labels.TripBillExpenses} ]]>
				</html>
			</auxheader>
			<auxheader rowspan="2">
				<label value="${labels.TripBillTotal}" sclass="bold"/>
			</auxheader>
			<auxheader rowspan="2">
				<label value="${labels.TripBillAdjusted}" sclass="bold"/>
			</auxheader>
		</auxhead>
		<auxhead>
			<!-- <auxheader>
				<label value=""/>
			</auxheader>  -->
			<auxheader colspan="2" align="center">
				<label value="${labels.TripBillTravelTarget}" sclass="bold"/>
			</auxheader>
			<!-- <auxheader >
				<label value=""/>
			</auxheader>  -->
			<auxheader>
				<label value="${labels.TripBillHourMin}" sclass="bold"/>
			</auxheader>
			<auxheader>
				<label value="${labels.TripBillHourMin}" sclass="bold"/>
			</auxheader>
			<!--  <auxheader>
				<label value=""/>
			</auxheader>-->
			<!-- <auxheader>
				<label value=""/>
			</auxheader> -->
			<auxheader>
				<html>
				<![CDATA[<div> ${labels.TripBillTraveled}  <br /> ${labels.TripBillKm} <br /> ${labels.TripBillInKc}</div> ]]>
				</html>
			</auxheader>
			<auxheader>
				<html>
				<![CDATA[${labels.TripBillConsumption}  <br /> ${labels.TripBillPHM} <br /> ${labels.TripBillInKc}]]>
				</html>
			</auxheader>
			<!-- <auxheader>
				<label value=""/>
			</auxheader>
			<auxheader>
				<label value=""/>
			</auxheader>
			<auxheader>
				<label value=""/>
			</auxheader>
			<auxheader>
				<label value=""/>
			</auxheader>
			<auxheader>
				<label value=""/>
			</auxheader>
			<auxheader>
				<label value=""/>
			</auxheader>-->
		</auxhead>
		<columns visible="false">
			<column width="60px"/>
			<column width="60px"/>
			<column hflex="max"/>
			<column width="70px"/>
			<column width="70px"/>
			<column width="70px"/>
			<column width="70px"/>
			<column width="70px"/>
			<column width="70px"/>
			<column width="70px"/>
			<column width="70px"/>
			<column width="70px"/>
			<column width="70px"/>
			<column width="70px"/>
			<column width="70px"/>
			<column width="70px"/>
		</columns>
		<rows>
			<template name="model">
				<row>
					<label value="@load(each.date) @converter('formatedDate', format='dd.MM')"/>
					<vbox>
						<label value="${labels.TripBillTo}"/>
						<label value="${labels.TripBillBack}"/>
					</vbox>
					<vbox hflex="max">
						<textbox inplace="true"
								 value="@load(each.to)"
								 maxlength="@load(vm.lengthText)"
								 sclass="grid-textbox-max-left"
								 readonly="${disabled}"/>
						<textbox inplace="true"
								 value="@load(each.back)"
								 maxlength="@load(vm.lengthText)"
								 sclass="grid-textbox-max-left"
								 readonly="${disabled}"/>
					</vbox>
					<vbox>
						<timebox inplace="true"
								 width="68px"
								 value="@bind(each.toArrival)"
								 onChange="@command('calculate')"
								 format="short"
								 disabled="${disabled}"/>
						<timebox inplace="true"
								 width="68px"
								 value="@bind(each.backArrival)"
								 onChange="@command('calculate')"
								 format="short"
								 disabled="${disabled}"/>
					</vbox>
					<vbox>
						<timebox inplace="true"
								 width="68px"
								 value="@bind(each.toDeparture)"
								 onChange="@command('calculate')"
								 format="short"
								 disabled="${disabled}"/>
						<timebox inplace="true"
								 width="68px"
								 value="@bind(each.backDeparture)"
								 onChange="@command('calculate')"
								 format="short"
								 disabled="${disabled}"/>
					</vbox>
					<vbox>
						<combobox inplace="true"
								  model="@load(vm.vehicles)"
								  selectedItem="@bind(each.toVehicle)"
								  width="67px"
								  readonly="true"
								  disabled="${disabled}">
							<template name="model">
								<comboitem label="@load(each.code)"/>
							</template>
						</combobox>

						<combobox inplace="true"
								  model="@load(vm.vehicles)"
								  selectedItem="@bind(each.backVehicle)"
								  width="67px"
								  readonly="true"
								  disabled="${disabled}">
							<template name="model">
								<comboitem label="@load(each.code)"/>
							</template>
						</combobox>
					</vbox>
					<vbox>
						<timebox inplace="true"
								 width="68px"
								 value="@bind(each.beginWork)"
								 format="short"
								 disabled="${disabled}"/>
						<timebox inplace="true"
								 width="68px"
								 value="@bind(each.endWork)"
								 format="short"
								 disabled="${disabled}"/>
					</vbox>
					<vbox>
						<textbox
								inplace="true"
								width="68px"
								maxlength="@load(vm.lengthText)"
								value="@bind(each.distance) @converter(vm.standardBigDecimalConverter)"
								readonly="${disabled}"/>
						<textbox
								inplace="true"
								width="68px"
								value="@bind(each.distanceAmount) @converter(vm.standardBigDecimalConverter)"
								maxlength="@load(vm.lengthText)"
								onChange="@command('calculate')"
								readonly="${disabled}"/>
					</vbox>
					<vbox>
						<textbox
								inplace="true"
								width="68px"
								maxlength="@load(vm.lengthText)"
								value="@bind(each.fuelConsumption) @converter(vm.standardBigDecimalConverter)"
								readonly="${disabled}"/>
						<textbox
								inplace="true"
								width="68px"
								value="@bind(each.fuelAmount) @converter(vm.standardBigDecimalConverter)"
								maxlength="@load(vm.lengthText)"
								onChange="@command('calculate')"
								readonly="${disabled}"/>
					</vbox>
					<textbox
							inplace="true"
							value="@bind(each.carefare) @converter(vm.standardBigDecimalConverter)"
							maxlength="@load(vm.lengthText)"
							onChange="@command('calculate')"
							readonly="${disabled}"/>
					<textbox
							inplace="true"
							value="@bind(each.housing) @converter(vm.standardBigDecimalConverter)"
							maxlength="@load(vm.lengthText)"
							onChange="@command('calculate')"
							readonly="${disabled}"/>
					<combobox inplace="true" selectedIndex="@bind(each.freeMealsCount)"
							  readonly="true"
							  disabled="${disabled}"
							  width="60px"

							  onBlur="@command('calculate')">
						<comboitem value="0" label="0"/>
						<comboitem value="1" label="1"/>
						<comboitem value="2" label="2"/>
						<comboitem value="3" label="3"/>
					</combobox>
					<label value="@load(each.meals) @converter(vm.standardBigDecimalConverter)"/>
					<textbox
							inplace="true"
							value="@bind(each.otherExpenses) @converter(vm.standardBigDecimalConverter)"
							maxlength="@load(vm.lengthText)"
							onChange="@command('calculate')"
							readonly="${disabled}"/>
					<label value="@load(each.total) @converter(vm.standardBigDecimalConverter)"/>
					<label value="@load(each.adjustedTotal) @converter(vm.standardBigDecimalConverter)"/>
				</row>
			</template>
		</rows>
	</grid>
	<div hflex="1" align="end" >
		<vbox>
			<hbox>
				<label value="Záloha: " style="font-size: 14px;"/>
				<label value="@load(vm.dataBean.requirement.downPayment) @converter(vm.standardBigDecimalConverter)" style="font-size: 14px;"/>
			</hbox>
			<hbox>
				<label value="${labels.TripBillTotal}: " style="font-size: 14px; font-weight: bold;"/>
				<label value="@load(vm.dataBean.total) @converter(vm.standardBigDecimalConverter)" style="font-size: 14px; font-weight: bold;"/>
			</hbox>
		</vbox>
	</div>

</zk>