VictoriaHallBooking_V1/target/classes/templates/admin/developer.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="~{fragments/head-admin :: head}"></head>
<meta charset="ISO-8859-1">
<!-- Include DataTables CSS -->
</head>
<style>
	.block-content {
		padding-bottom: 10px;
	}

	.small-input {
		width: 150px;
		/* Adjust the width as needed */
	}

	.small-table th,
	.small-table td {
		font-size: 14px;
		/* Adjust font size as needed */
	}

	/* Reduce padding for table cells */
	.small-table td,
	.small-table th {
		padding: 5px;
		/* Adjust padding as needed */
	}

	.card-body table {
		width: 100%;
		padding: 100px;
	}

	.card-body th,
	td {
		padding: 8px;
		text-align: left;
	}

	.amount-cell {
		text-align: right;
		padding-right: 1rem;
		/* Adjust padding as needed */
	}

	.table {
		width: 100% !important;
	}

	.hidden {
		display: none;
	}
</style>

<body>
<!-- Page Container -->
<div id="page-container"
	 class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
	<!-- Side Overlay aside (right)-->
	<aside th:replace="~{fragments/aside-right :: aside}"></aside>
	<!-- END Side Overlay (right)-->
	<!-- Sidebar Nav-->
	<nav th:replace="~{fragments/nav-admin :: nav}"></nav>
	<!-- END Sidebar -->
	<!-- Header -->
	<header th:replace="~{fragments/header-admin :: header}"></header>
	<!-- END Header -->
	<!-- Main Container -->
	<main id="main-container">

		<!-- Page Content -->
		<!-- Card Container -->
		<div class="content">
			<div class="block block-rounded">
				<form id="myForm" th:action="@{/victoriahallbooking/admin/getDeveloperdetails}" onsubmit="return validateme()"
					  method="post">
					<div class="block-header bg-primary text-white">
						<h3 class="block-title">Community Hall Reports</h3>
					</div>
					<div class="block-content">
						<div class="row">
							<div class="col-sm-3 mb-2">
								<label class="form-label" for="fromdate">From:<span
										class="text-danger">*</span></label> <input type="date"
																					th:value="${fromdate}" class="form-control" name="FromDate" id="fromdate"
																					placeholder="From Date" required="required" data-date-format="yyyy-mm-dd" />
							</div>
							<div class="col-sm-3 mb-2">
								<label class="form-label" for="todate">To:<span class="text-danger">*</span></label>
								<input type="date" th:value="${todate}" class="form-control" name="ToDate"
									   id="todate" placeholder="To Date" required="required"
									   data-date-format="yyyy-mm-dd" />
							</div>
							<div class="col-sm-3 mb-2">
								<label class="form-label" for="request">Get Info:<span
										class="text-danger">*</span></label>
								<select type="text" class="form-control text-center" id="request" name="request"
										onchange="myRequest()" required>
									<option value="">Select</option>
									<option value="1" th:selected="${request=='1'}">Transaction Response</option>
									<option value="2" th:selected="${request=='2'}">Refund Response</option>
									<option value="3" th:selected="${request=='3'}">Booking Calendar</option>
								</select>
							</div>
							<!-- bookingDetailsDropdown1 -->
							<div class="col-sm-3 mb-2" id="bookingDetailsDropdown1" style="display: none;">
								<label class="form-label" for="bookingId">Booking Id: </label>
								<input type="number" class="form-control" id="bookingId" name="bookingId"
									   th:value="${bookingId}" placeholder="BookingId">
							</div>
							<!-- bookingDetailsDropdown2 -->
							<div class="col-sm-3 mb-2" id="bookingDetailsDropdown2" style="display: none;">
								<label class="form-label" for="hallId">Hall Id: </label>
								<input type="number" class="form-control" id="hallId" name="hallId"
									   th:value="${hallId}" placeholder="HallId">
							</div>
							<div class="col-sm-3 mb-2" id="bookingDetailsDropdown3" style="display: none;">
								<label class="form-label" for="hallNameDropdown">Hall Name:</label>
								<select class="form-select custom-select" name="hallName" id="hallNameDropdown">
									<option th:value="${hallName}">--Select Hall--</option>
									<!-- Initial population using Thymeleaf -->
									<th:block th:each="hall : ${halls}">
										<option th:value="${hall.hallName}"
												th:text="${hall.hallName}">
										</option>
									</th:block>
								</select>
							</div>




							<div class="col-sm-3">
								<br>
								<button type="submit" class="btn btn-sm btn-primary mt-2" name="submit"
										id="submit">Submit</button>
								<button class="btn btn-danger mt-2" onclick="resetDate()" name="reset"
										type="reset">Reset</button>
							</div>
						</div>
					</div>
				</form>
			</div>

			<div class="table-responsive" id="requestTable1Container" th:if="${request}==1">
				<table id="requestTable1" class="table table-striped table-bordered table-hover dataTable"
					   role="grid" width="99.5%">
					<thead class="thead-dark">
					<tr role="row">
						<th>S.No</th>
						<th>Booking Id</th>
						<th>Hall Id</th>
						<th>Amount</th>
						<th>Status Code</th>
						<th>Transaction Id</th>
						<th>User Id</th>
						<!--<th>Payment Status</th>-->
					</tr>
					</thead>
					<tr th:each="transaction, iterStat : ${TransactionResponse}">
						<td th:text="${iterStat.count}">0</td>
						<td th:text="${transaction[0]}"></td>
						<td th:text="${transaction[1]}"></td>
						<td th:text="${transaction[2]}"></td>
						<td th:text="${transaction[3]}"></td>
						<td th:text="${transaction[4]}"></td>
						<td th:text="${transaction[5]}"></td>
						<!--
                                                    <td th:text="${transaction[6]}"></td>
                        -->
					</tr>

				</table>
			</div>

			<div class="table-responsive" id="requestTable2Container" th:if="${request}==2">
				<table id="requestTable2" class="table table-striped table-bordered table-hover dataTable"
					   role="grid" width="99.5%">
					<thead class="thead-dark">
					<tr role="row">
						<th>S.No</th>
						<th>Booking Id</th>
						<th>Booking Date</th>
						<th>Refund Status</th>
						<th>Amount</th>
						<th>Transaction Id</th>
						<th>User Id</th>
					</tr>
					</thead>
					<tbody>
					<tr th:each="refund, iterStat : ${RefundResponse}">
						<td th:text="${iterStat.count}">0</td>
						<td th:text="${refund[0]}"></td>
						<td th:text="${refund[1] != null ? refund[1] : '-'}"></td>
						<td th:text="${refund[2]}"></td>
						<td th:text="${refund[3]}"></td>
						<td th:text="${refund[4]}"></td>
						<td th:text="${refund[5]}"></td>
					</tr>
					</tbody>

				</table>
			</div>
			<div class="table-responsive" id="requestTable3Container" th:if="${request}==3">
				<table id="requestTable3" class="table table-striped table-bordered table-hover dataTable"
					   role="grid" width="99.5%">
					<thead class="thead-dark">
					<tr role="row">
						<th>S.No</th>
						<th>Booking Date</th>
						<th>Booking Id1</th>
						<th>Booking Id2</th>
						<th>Morning Slot</th>
						<th>Evening Slot</th>
						<th>Hall Name</th>
						<th>Hall Id</th>
					</tr>
					</thead>
					<tbody>
					<tr th:each="booking, iterStat : ${BookingCalendar}">
						<td th:text="${iterStat.count}">0</td>
						<td th:text="${booking[0]}"></td>
						<td th:text="${booking[1] != null ? booking[1] : '-'}"></td>
						<td th:text="${booking[2] != null ? booking[2] : '-'}"></td>
						<td th:text="${booking[3]}"></td>
						<td th:text="${booking[4]}"></td>
						<td th:text="${booking[5]}"></td>
						<td th:text="${booking[6]}"></td>
					</tr>
					</tbody>

				</table>
			</div>


		</div>

	</main>
	<footer th:replace="~{fragments/footer2 :: footer}"></footer>
</div>


<div th:replace="~{fragments/resetpassword :: div}"></div>
<script th:replace="~{fragments/loginscript :: script}"></script>
<script>
	$(document).ready(function () {
			// Common buttons configuration
			var buttons = [{
				extend: 'pageLength',
				className: 'btn btn-primary'
			}, {
				title: 'Data export',
				extend: 'copyHtml5',
				text: 'Copy',
				className: 'btn btn-primary',
				id: 'copyBtn'
			}, {
				extend: 'excelHtml5',
				text: 'Excel',
				className: 'btn btn-primary',
				id: 'excelBtn'
			}, {
				extend: 'csvHtml5',
				text: 'CSV',
				className: 'btn btn-primary',
				id: 'csvBtn'
			}, {
				extend: 'pdfHtml5',
				text: 'PDF',
				className: 'btn btn-primary',
				id: 'pdfBtn'
			}];

			// DataTables initialization
			$('#requestTable1, #requestTable2, #requestTable3').DataTable({
				dom: 'Bftip',
				columnDefs: [{
					targets: 'no-sort',
					orderable: false
				}],
				lengthMenu: [
					[50, 100, 200, 500, -1],
					['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
				],
				scrollY: '50vh',
				fixedColumns: {
					left: 1,
					right: 1
				},
				buttons: buttons,
				responsive: true,
				searching: true, // Enable search
				select: false,
				processing: false,
				order: [] // Remove any default sorting
			});

			// Link the search input to DataTable
			$('#searchInput').on('keyup', function () {
				$('#bookinglistdataTable').DataTable().search(this.value).draw();
			});
		});


		function validateme() {
			return true;
		}

		var fromdate = document.getElementById("fromdate"), todate = document
			.getElementById("todate");

		function validateDate() {
			if ($("#fromdate").val() == "" || $("#todate").val() == "") {
				todate.setCustomValidity("FromDate and ToDate Must");
			} else {
				todate.setCustomValidity('');
			}
		}

		fromdate.onchange = validateDate;
		todate.onchange = validateDate;

		$(document).ready(function () {
			var today = new Date();
			$('.datepicker').datepicker({
				dateFormat: 'yy-mm-dd',
				maxDate: '1'
			})
			$('.datepicker').keyup(function () {
				if (this.value.match(/[^0-9]/g)) {
					this.value = this.value.replace(/[^0-9^-]/g, '');
				}
			});
		});
		document.addEventListener("DOMContentLoaded", function () {
			myRequest(); // Initial call to set dropdowns based on initial value
		});
		document.addEventListener("DOMContentLoaded", function () {
			var today = new Date();
			var sixMonthsLater = new Date();
			sixMonthsLater.setMonth(today.getMonth() + 6);

			var minDate = today.toISOString().split('T')[0];
			var maxDate = sixMonthsLater.toISOString().split('T')[0];
			let fromDateInput = document.getElementById('fromdate');
			let toDateInput = document.getElementById('todate');
			fromDateInput.setAttribute('max', maxDate);
			toDateInput.setAttribute('max', maxDate);
			fromDateInput.addEventListener('change', function () {
				let selectedFromDate = this.value;
				let toDateInput = document.getElementById('todate');
				toDateInput.setAttribute('min', selectedFromDate);
				toDateInput.value = ''; // Reset the value of toDate
			});
		});

function myRequest() {
    // Hide all dropdowns initially
    document.getElementById("bookingDetailsDropdown1").style.display = "none";
    document.getElementById("bookingDetailsDropdown2").style.display = "none";
    document.getElementById("bookingDetailsDropdown3").style.display = "none";

    // Get the selected value from the 'Get Info' dropdown
    var requestValue = document.getElementById("request").value;

    // Show relevant dropdowns based on the selected value
    if (requestValue === "1") {
        document.getElementById("bookingDetailsDropdown1").style.display = "block";
        document.getElementById("bookingDetailsDropdown2").style.display = "block";
    } else if (requestValue === "2") {
        document.getElementById("bookingDetailsDropdown1").style.display = "block";
    } else if (requestValue === "3") {
        document.getElementById("bookingDetailsDropdown1").style.display = "block";
        document.getElementById("bookingDetailsDropdown3").style.display = "block";

        // Fetch and populate Hall Names dropdown
        fetch('/victoriahallbooking/user/api/gethallnames')
            .then(response => response.json())
            .then(data => {
                // console.log('Hall Names Data:', data); // Debug log
                const hallNameDropdown = document.getElementById('hallNameDropdown');
                const selectedHall = hallNameDropdown.value; // Retain current selection

                // Reset dropdown options
                hallNameDropdown.innerHTML = '<option value="">--Select Hall--</option>';

                // Populate options dynamically
                data.forEach(hall => {
                    const option = document.createElement('option');
                    option.value = hall.hallName;
                    option.textContent = hall.hallName;

                    // Preserve selection
                    if (hall.hallName === selectedHall) {
                        option.selected = true;
                    }

                    hallNameDropdown.appendChild(option);
                });
            })
            .catch(error => console.error('Error fetching hall names:', error));
    }
}

		 document.addEventListener("DOMContentLoaded", function() {
            document.getElementById("basedon").addEventListener("change", function() {
                const selectedValue = this.value;
                document.getElementById("bookingcountbasedonDropdown").style.display = selectedValue ? "block" : "none";
            });
        });

		// Function to reset date fields
		function resetDate() {

			window.location.href = "/victoriahallbooking/admin/developer";

			document.getElementById('fromdate').value = '';
			document.getElementById('todate').value = '';
		}
		document.addEventListener('DOMContentLoaded', function () {

			document.getElementById('request').addEventListener('change', function () {
				myRequest(); // Handle request change
			});
		});

</script>
</body>

</html>