<!DOCTYPE html>
<html th:lang="${#locale.toString()}"
	th:lang-direction="#{language.direction}"
	xmlns:th="http://www.thymeleaf.org">

<th:block
	th:insert="~{fragments/common :: head(title=#{addPageNumbers.title})}"></th:block>


<body>
	<th:block th:insert="~{fragments/common :: game}"></th:block>
	<div id="page-container">
		<div id="content-wrap">
			<div th:insert="~{fragments/navbar.html :: navbar}"></div>
			<br> <br>
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-md-6">
						<h2 th:text="#{addPageNumbers.header}"></h2>
						<form method="post" enctype="multipart/form-data"
							th:action="@{add-page-numbers}">
							<div
								th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
							<br>
							<div class="mb-3">
								<label for="customMargin" th:text="#{addPageNumbers.selectText.2}"></label> <select
									class="form-control" id="customMargin" name="customMargin"
									required>
									<option value="small" th:text="#{sizes.small}"></option>
									<option value="medium" selected th:text="#{sizes.medium}"></option>
									<option value="large" th:text="#{sizes.large}"></option>
									<option value="x-large" th:text="#{sizes.x-large}"></option>
								</select>
							</div>
							<style>
.a4container {
	position: relative;
	width: 50%;
	aspect-ratio: 0.707;
	border: 1px solid #ddd;
	box-sizing: border-box;
	background-color: white;
}

.pageNumber {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1em;
	color: #333;
	cursor: pointer;
	background-color: #ccc;
	width: 15%;
	height: 15%;
	transform: translate(-50%, -50%);
}

.pageNumber:hover {
	background-color: #eee;
}

#myForm {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

.selectedPosition {
	background-color: #0a0;
}

.selectedPosition.selectedHovered {
	background-color: #006600;
}
</style>


							<div class="mb-3">
								<label for="position" th:text="#{addPageNumbers.selectText.3}"></label>
								<div class="a4container">
									<div class="pageNumber" id="1" style="top: 10%; left: 10%;">1</div>
									<div class="pageNumber" id="2" style="top: 10%; left: 50%;">2</div>
									<div class="pageNumber" id="3" style="top: 10%; left: 90%;">3</div>
									<div class="pageNumber" id="4" style="top: 50%; left: 10%;">4</div>
									<div class="pageNumber" id="5" style="top: 50%; left: 50%;">5</div>
									<div class="pageNumber" id="6" style="top: 50%; left: 90%;">6</div>
									<div class="pageNumber" id="7" style="top: 90%; left: 10%;">7</div>
									<div class="pageNumber" id="8" style="top: 90%; left: 50%;">8</div>
									<div class="pageNumber" id="9" style="top: 90%; left: 90%;">9</div>
								</div>
							</div>

							<input type="hidden" id="numberInput" name="position" min="1"
								max="9" required>
							<div class="mb-3">
								<label for="startingNumber" th:text="#{addPageNumbers.selectText.4}"></label> <input
									type="number" class="form-control" id="startingNumber"
									name="startingNumber" min="1" required value="1" />
							</div>
							<div class="mb-3">
								<label for="pagesToNumber" th:text="#{addPageNumbers.selectText.5}"></label> <input
									type="text" class="form-control" id="pagesToNumber"
									name="pagesToNumber"
									th:placeholder="#{addPageNumbers.numberPagesDesc}" />
							</div>
							<div class="mb-3">
								<label for="customText" th:text="#{addPageNumbers.selectText.6}"></label> <input type="text"
									class="form-control" id="customText" name="customText"
									th:placeholder="#{addPageNumbers.customNumberDesc}" />
							</div>
							<button type="submit" id="submitBtn" class="btn btn-primary"
								th:text="#{addPageNumbers.submit}"></button>
						</form>

					</div>
				</div>
			</div>
			<script>
			let cells = document.querySelectorAll('.pageNumber');
			let inputField = document.getElementById('numberInput');
			
			cells.forEach(cell => {
			  cell.addEventListener('click', function(e) {
			    cells.forEach(cell => {
			      cell.classList.remove('selectedPosition'); // Remove selected class from all cells
			      cell.classList.remove('selectedHovered'); // Also remove selectedHovered class
			    });
			    let selectedLocation = e.target.id;
			    inputField.value = selectedLocation;
			    e.target.classList.add('selectedPosition'); // Add selected class to clicked cell
			    e.target.classList.add('selectedHovered'); // Add selectedHovered class
			  });
		
			  cell.addEventListener('mouseenter', function(e) {
			    if(e.target.classList.contains('selectedPosition')) {
			      e.target.classList.add('selectedHovered');
			    }
			  });
		
			  cell.addEventListener('mouseleave', function(e) {
			    if(e.target.classList.contains('selectedPosition')) {
			      e.target.classList.remove('selectedHovered');
			    }
			  });
			});	
		</script>

		</div>
		<div th:insert="~{fragments/footer.html :: footer}"></div>
	</div>
</body>
</html>
