<?page title="${labels.TravelOrdersFormTitle}" contentType="text/html;charset=UTF-8"?>

<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"?>

	<hbox vflex="1">
		<listbox
				vflex="1"
				hflex="7"
				model="@load(vm.dataList)"
				mold="paging"
				autopaging="true"
				selectedItem="@bind(vm.dataBean)"
				itemRenderer="@load(vm.itemRenderer)"
				onAfterRender="@command('afterRender')"
				selectedIndex="@bind(vm.selIndex)">
			<listhead menupopup="auto">
				<listheader
						label="${labels.TravelOrdersGridNumser}"
						sort="czech(bill.requirement.numser)"
						width="30%" />
				<listheader
						label="${labels.TravelOrdersGridReqDate}"
						sort="auto(bill.requirement.reqDate)"
						width="70%" />
				<listheader
						label="${labels.TravelOrdersGridFrom}"
						sort="czech(bill.requirement.from)"
						width="70%" />
				<listheader
						label="${labels.TravelOrdersGridTo}"
						sort="czech(bill.requirement.to)"
						width="70%" />
				<listheader
						label="${labels.TravelOrdersGridTotal}"
						sort="auto(bill.total)"
						align="right"
						width="70%" />
				<listheader
						label="${labels.ownedBy}"
						width="50%"/>
				<listheader
						label="${labels.TripBillPaid}"
						width="10%"/>
				<listheader
						label="${labels.TripBillPaidDate}"
						width="20%"/>
			</listhead>
			<auxhead
				sclass="category-center"
				visible="@load(vm.filter)">
				<auxheader>
					<div sclass="find-grid-cell">
						<div sclass="find-grid-divtextbox">
							<textbox
								value="@bind(vm.filterTemplate.bill.requirement.numser)"
								instant="true"
								onChange="@command('doFilter')"
								maxlength="@load(vm.lengthText)"
								sclass="find-grid-textbox" />
						</div>
						<div sclass="find-grid-img">
							<image src="/img/funnel.png" />
						</div>
					</div>
				</auxheader>
				<auxheader>
					<div sclass="find-grid-cell">
						<div sclass="find-grid-divtextbox">
							<datebox
									value="@bind(vm.filterTemplate.bill.requirement.reqDate)"
									format="${labels.DateFormat}"
									instant="true"
									onChange="@command('doFilter')"
									sclass="find-grid-textbox"
									width="100%" />
						</div>
						<div sclass="find-grid-img">
							<image src="/img/funnel.png" />
						</div>
					</div>
				</auxheader>
				<auxheader>
					<div sclass="find-grid-cell">
						<div sclass="find-grid-divtextbox">
							<textbox
								value="@bind(vm.filterTemplate.bill.requirement.from)"
								instant="true"
								onChange="@command('doFilter')"
								maxlength="@load(vm.lengthDescription)"
								sclass="find-grid-textbox" />
						</div>
						<div sclass="find-grid-img">
							<image src="/img/funnel.png" />
						</div>
					</div>
				</auxheader>
				<auxheader>
					<div sclass="find-grid-cell">
						<div sclass="find-grid-divtextbox">
							<textbox
									value="@bind(vm.filterTemplate.bill.requirement.to)"
									instant="true"
									onChange="@command('doFilter')"
									maxlength="@load(vm.lengthDescription)"
									sclass="find-grid-textbox" />
						</div>
						<div sclass="find-grid-img">
							<image src="/img/funnel.png" />
						</div>
					</div>
				</auxheader>
				<auxheader>
					<div sclass="find-grid-cell">
						<div sclass="find-grid-divtextbox">
							<textbox
									value="@bind(vm.filterTemplate.bill.total) @converter(vm.bigDecimalConverter)"
									instant="true"
									onChange="@command('doFilter')"
									maxlength="@load(vm.lengthText)"
									sclass="find-grid-textbox" />
						</div>
						<div sclass="find-grid-img">
							<image src="/img/funnel.png" />
						</div>
					</div>
				</auxheader>
				<auxheader>
					<div zclass="find-grid-cell">
						<div sclass="find-grid-divtextbox">
							<combobox
									ctrlKeys="${labels.HandleComboKeyFilter}"
									onCtrlKey="@command('handleComboKeyFilter', ctrl=self, keyEvent=event)"
									onChange="@command('doFilter')"
									width="100%"
									selectedItem="@bind(vm.filterTemplate.bill.ownedBy)"
									model="@load(vm.allUsers)"
									readonly="true">
								<template name="model">
									<comboitem label="@load(each.fullName)" />
								</template>
							</combobox>
						</div>
						<div sclass="find-grid-img">
							<image src="/img/funnel.png" />
						</div>
					</div>
				</auxheader>
				<auxheader>
					<div sclass="find-grid-cell">
						<div sclass="find-grid-divtextbox">
							<checkbox
									checked="@bind(vm.filterTemplate.bill.paid)"
									onClick="@command('doFilter')" />
						</div>
						<div sclass="find-grid-img">
							<image src="/img/funnel.png" />
						</div>
					</div>
				</auxheader>
				<auxheader>
					<div sclass="find-grid-cell">
						<div sclass="find-grid-divtextbox">
							<datebox
									value="@bind(vm.filterTemplate.bill.paidDate)"
									format="${labels.DateFormat}"
									instant="true"
									onChange="@command('doFilter')"
									sclass="find-grid-textbox"
									width="100%" />
						</div>
						<div sclass="find-grid-img">
							<image src="/img/funnel.png" />
						</div>
					</div>
				</auxheader>
			</auxhead>
			<template name="model">
				<listitem>
					<listcell label="@load(each.bill.requirement.numser)" />
					<listcell label="@load(each.bill.requirement.reqDate) @converter('formatedDate', format=labels.DateFormat)" />
					<listcell label="@load(each.bill.requirement.from)" />
					<listcell label="@load(each.bill.requirement.to)" />
					<listcell label="@load(each.bill.total) @converter(vm.standardBigDecimalConverter)"/>
					<listcell label="@load(each.bill.ownedBy)"/>
					<listcell label="@load(each.bill.paid) @converter(vm.standardBoolConverter)"/>
					<listcell label="@load(each.bill.paidDate) @converter('formatedDate', format=labels.DateFormat)"/>
				</listitem>
			</template>
		</listbox>
		<vbox hflex="3">
			<include hflex="1" src="/main/approveStatus.zul"/>
			<button label="${labels.TripBillPay}" image="/img/invoicing-016.png" onClick="@command('pay')" sclass="nicebutton" disabled="@load(not(vm.dataBean.state eq 'APPROVED'))"/>
		</vbox>
	</hbox>

</zk>