<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" layout:decorate="~{template}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<title>Camp Organizer Business</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<th:block layout:fragment="content">
		<div class="mainpage">
			<div class="card" sec:authorize="hasRole('business_booking')">
				<div class="card-header d-flex justify-content-between">
					<div>Angemeldete Personen</div>
					<div>im Jahr
					  <span class="ml-2" th:each="y : ${years}">
					    <a th:class="${year == y ? '' : 'tablelink'}" th:href="@{/business/bookings/{year}(year=${y})}" th:text="${y}"></a>
					  </span>
					</div>
				</div>
				<div class="card-body">
					<table id="bookers" class="table table-striped">
						<thead>
							<tr>
								<th>Name</th>
								<th>Geschlecht</th>
								<th>Freizeit</th>
								<th>Rolle</th>
								<th>Kontostand</th>
								<th>Status</th>
								<th>Bestätigt</th>
							</tr>
						</thead>
						<tbody>
							<th:block th:each="b : ${bookers}">
								<tr>
									<td class="middled"><a class="tablelink" th:href="@{/business/bookings_by_id/{id}(id=${b.pk})}" title="bearbeiten" th:text="${b.name}"></a></td>
									<td class="middled" th:text="${b.sex}"></td>
									<td class="middled" th:text="${b.camp}"></td>
									<td class="middled" th:text="${b.role}"></td>
									<td class="middled">
										<form action="#" th:action="@{/business/bookings/listpayment/{id}/{year}(id=${b.pk},year=${year})}" th:object="${addBean}" method="post">
											<input th:id="'searchfield' + ${b.pk}" type="hidden" th:name="search" />
											<div class="container">
												<div class="row">
													<div class="col-sm-4" style="text-align: right">
														<span th:text="${#numbers.formatDecimal(b.paid, 1, 2) + ' €'}" style="font-size: x-large" th:if="${b.paid != null}"></span>
													</div>
													<div class="col-sm-4">
														<input type="number" step="0.01" class="form-control" th:field="*{payment}" />
													</div>
													<div class="col-sm-4">
														<input type="submit" class="btn btn-outline-primary" th:onclick="'setSearchField(' + ${b.pk} + ')'" style="padding: 4px" value="einzahlen" />
													</div>
												</div>
											</div>
										</form>
									</td>
									<td class="middled" th:text="${#temporals.format(b.bookingDate, 'dd.MM.yyyy')}"></td>
									<td class="middled" th:text="${b.progress}"></td>
								</tr>
							</th:block>
						</tbody>
					</table>
					<script th:inline="javascript">
						/*<![CDATA[*/
						var searchValue = /*[[${search}]]*/'';

						$(document).ready(function() {
							$("#bookers").DataTable({
								language : locale_de,
								search : {
									search : searchValue
								}
							});
						});

						function setSearchField(x) {
							$("#searchfield" + x).val($("#bookers").DataTable().search());
						}
						/*]]>*/
					</script>
				</div>
			</div>
		</div>
	</th:block>
</body>
</html>