<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:i="http://java.sun.com/jsf/composite/imixs"
	xmlns:marty="http://java.sun.com/jsf/composite/marty">

	<!-- zeigt alle rechnungen an die von einem Abteilungsleiter verteilt werden können -->


	<ui:param name="user" value="#{loginController.userPrincipal}"></ui:param>
	<ui:param name="query"
		value="(type:workitem) AND ($modelversion:rechnungseingang-de*) AND ($taskid:5100) AND ($owner:#{user})"></ui:param>
	<ui:param name="invoiceList"
		value="#{workflowController.documentService.find(query,30,0)}"></ui:param>


	<ui:fragment rendered="#{empty invoiceList}">

		<div class="ui-state-highlight ui-corner-all"
			style="margin-bottom: 10px; padding: .5em;">
			<p>Es liegen derzeit keine Rechnungen zur Prüfung für Sie vor.</p>
		</div>
	</ui:fragment>



	<ui:fragment rendered="#{!empty invoiceList}">

		<div class="imixs-form-section">

			<table class="">
				<tr>
					<th></th>
					<th style="">Bereich</th>
					<th style="">#{message['form.company']}</th>
					<th style="">#{message['form.invoicenumber']}</th>
					<th style="">#{message['form.date']}</th>
					<th style="">Fälligkeit</th>
					<th style="">#{message['form.amount']}</th>
					<th style=""></th>

				</tr>
				<c:forEach items="#{invoiceList}" var="invoice">
					<tr>

						<td><input type="checkbox" class="selection_checkbox"
							id="#{invoice.uniqueID}" /></td>

						<td>#{invoice.item['space.name']}</td>
						<td><h:link outcome="/pages/workitems/workitem">
					         #{invoice.item['cdtr.name']}
					         <f:param name="id" value="#{invoice.item['$uniqueid']}" />
							</h:link></td>


						<td>#{invoice.item['invoice.number']}</td>
						<td><h:outputText value="#{invoice.item['invoice.date']}">
								<f:convertDateTime pattern="#{message.datePatternShort}"
									timeZone="#{message.timeZone}" />
							</h:outputText></td>
						<td><h:outputText value="#{invoice.item['invoice.duedate']}">
								<f:convertDateTime pattern="#{message.datePatternShort}"
									timeZone="#{message.timeZone}" />
							</h:outputText></td>

						<td style="text-align: right;"><h:outputText
								value="#{invoice.item['invoice.total']}">
								<f:convertNumber minFractionDigits="2" locale="de" />
							</h:outputText></td>

						<td>#{invoice.item['invoice.currency']}</td>

					</tr>
				</c:forEach>


				<h:inputText style="display:none;" class="invoice_selection_list"
					value="#{workitem.item['invoice.selection']}" />


			</table>
		</div>
	</ui:fragment>



	<script type="text/javascript">
		/*<![CDATA[*/

		// collect all selected ids form the checkboxes in the first column
		$(document).ready(
				function() {

					// clear last selection...
					selection = $('.invoice_selection_list').val('');

					// on change handler....
					$('input[type="checkbox"].selection_checkbox').change(
							function() {
								var id = $(this).attr('id');
								var check = $(this).prop('checked');
								//console.log("Change: " + id + " to " + check);

								// get selection
								var selection = $('.invoice_selection_list')
										.val();
								const selectionArr = selection.split(",");
								// selected
								if (check) {
									selectionArr.push(id);
								}
								// unselected
								if (!check) {
									var i = selectionArr.indexOf(id);
									selectionArr.splice(i, i);
								}
								//console.log("new selection=" + selectionArr.join(','));
								selection = $('.invoice_selection_list').val(
										selectionArr.join(','));
							});
				});

		/*]]>*/
	</script>


</ui:composition>

