VictoriaHallBooking_V1/target/classes/templates/officer/payment-list.html

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

<head th:replace="~{fragments/head-public :: head}"></head>
<style>
	.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;
	}
</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-officer :: nav}"></nav>
		<!-- END Sidebar -->

		<!-- Header -->
		<header th:replace="~{fragments/header-officer :: header}"></header>
		<!-- END Header -->

		<!-- Main Container -->
		<main id="main-container">

			<!-- Page Content -->
			<div class="content">
				<div class="block-header block-header-default">
				<h3 class="block-title">List of Payments</h3>
			</div>
				<div class="block block-rounded">
					<div class="block-header block-header-default" style="display: block;">
						<form class="row" action="javascript:getbydate()">
							<div class="col-6">
								<h3 class="block-title"></h3>
							</div>
							<div class="col-6">
								<div class="row">
									<div class="col-4">
										<input type="text" th:value="${fromdate}" class="datepicker form-control"
											name="From Date" id="fromdate" placeholder="From Date"
											data-date-format="dd-mm-yyyy" required />
									</div>
									<div class="col-4">
										<input type="text" th:value="${todate}" class="datepicker form-control"
											name="To Date" id="todate" placeholder="To Date"
											data-date-format="dd-mm-yyyy" required />
									</div>
									<div class="col-4 p-0 text-center">
										<button type="submit" class="btn btn-primary" id="submit" name="submit"
											style="">Submit</button>
										<button class="btn btn-danger" onclick="resetDate()" name="reset"
											type="reset">Reset</button>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="block-content p-0">
						<div class="p-sm-4 p-0">
							<div class="table-responsive">
								<table class="table table-bordered table-striped table-vcenter js-dataTable-responsive" id="paymentlist">
									<thead class="thead-light">
										<tr class="table-bordered">
											<th class="text-center no-sort">S.No</th>
											<th class="text-center" width="20%">Transaction Id</th>
											<th class="text-center">Payment Status</th>
											<th class="text-center">Payment Type</th>
											<th class="text-center">Amount Received</th>
											<th class="text-center">Created date</th>
											<th class="text-center">User Details</th>
											<th class="text-center">Booking Details</th>
										</tr>
									</thead>
									<tbody id="paymentDetailsBody">
										<tr th:each="list, i : ${paymentlist}" class="${paymentlist}">
											<td th:text="${i.count}"></td>
											<td th:text="${list.transactionId}"></td>
											<td th:text="${list.paymentStatus}"></td>
											<td th:text="${list.paymentType}"></td>
											<td th:text="${list.amountReceived}"></td>
											<td th:text="${list.cdate}"></td>
											<td class="text-center">
												<button type="button" class="btn btn-primary" data-bs-toggle="modal"
													data-bs-target="#exampleModal"
													th:onclick="UserDetails([[${list.bookingDetails.bookingId}]])">View</button>
											</td>
											<td class="text-center">
												<button type="button" class="btn btn-primary" data-bs-toggle="modal"
													data-bs-target="#Bookingdetails"
													th:onclick="BookingDetails([[${list.bookingDetails.bookingId}]])">View</button>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>


			<!--User Details-->
			<div class="modal fade" id="userDetails" tabindex="-1" aria-labelledby="exampleModalLabel"
				aria-hidden="true">
				<div class="modal-dialog modal-lg">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="exampleModalLabel">User Details</h5>
							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						</div>
						<div class="modal-body">
							<div class="row">
								<div class="col-sm-4">
									<label class="form-label" for="name">Name:<span class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="name" id="name"
										readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label" for="mobileno">Mobile Number:<span
											class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="mobileno" id="mobileno"
										readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label" for="email">Email:<span
											class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="email" id="email"
										readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label" for="usertype">User type:<span
											class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="usertype" id="usertype"
										readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label" for="street">Street:<span
											class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="street" id="street"
										readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label" for="area">Area:<span class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="area" id="area"
										readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label" for="location">Location:<span
											class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="location" id="location"
										readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label" for="pincode">Pincode:<span
											class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="pincode" id="pincode"
										readonly />
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
						</div>
					</div>
				</div>
			</div>

			<!--Booking Details-->
			<div class="modal fade" id="Bookingdetails" tabindex="-1" aria-labelledby="exampleModalLabel"
				aria-hidden="true">
				<div class="modal-dialog modal-lg">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="exampleModalLabel">Booking Details</h5>
							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						</div>
						<div class="modal-body">
							<div class="row">
								<div class="col-sm-4">
									<label class="form-label" for="bookingid">Booking ID:<span
											class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="bookingid" id="bookingid"
										readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label" for="hallname">Hall Name:<span
											class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="hallname" id="hallname"
										readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label" for="bookingstatus">Booking Status:<span
											class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="bookingstatus"
										id="bookingstatus" readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label" for="noofdays">No of Days:<span
											class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="noofdays" id="noofdays"
										readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label" for="startdate">Start Date:<span
											class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="startdate" id="startdate"
										readonly />
								</div>
								<div class="col-sm-4">
									<label class="form-label" for="enddate">End Date:<span
											class="text-danger"></span></label>
									<input type="text" class="form-control text-center" name="enddate" id="enddate"
										readonly />
								</div>

							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
						</div>
					</div>
				</div>
			</div> <!-- END Page Content -->
		</main>
		<!-- END Main Container -->

		<!-- Footer -->
		<footer th:replace="~{fragments/footer2 :: footer}"></footer>
		<!-- END Footer -->
	</div>
	<div th:replace="~{fragments/resetpassword :: div}"></div>
	<!-- Scripts -->
	<script th:replace="~{fragments/loginscript :: script}"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script type="text/javascript">
		
		$(document).ready(function () {
			// DataTables 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'
				}
			];

			// Initialize DataTable for each tab on tab shown event
			$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
				var targetTable = $(e.target).attr('href'); // activated tab
				$(targetTable).find('.dataTable').DataTable().columns.adjust();
			});

			// Initialize DataTable for Settlement Approved tab
			$('#paymentlist').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']
				],
				buttons: buttons,
				responsive: true,
				searching: true,
				select: false,
				processing: false,
				// Set width to 100%
				"autoWidth": true
			});
		});
		function UserDetails(bookingId) {
			$.ajax({
				type: "GET",
				url: '/victoriahallbooking/api/officer/getBookingDetails',
				data: {
					'bookingsId': bookingId
				},
				success: function (x) {
					//console.log(x);
					showUserInfo(x)
				}
			});

		}
		function BookingDetails(bookingId) {
			$.ajax({
				type: "GET",
				url: '/victoriahallbooking/api/officer/getBookingDetails',
				data: {
					'bookingsId': bookingId
				},
				success: function (x) {
					//console.log(x);
					showBookingInfo(x)
				}
			});

		}
		function showUserInfo(list) {
			$('#userDetails').modal({
				backdrop: 'static',
				keyboard: false
			});
			$('#userDetails').modal('show');

			// Populate booking information
			$('#name').val(list.users.name);
			$('#mobileno').val(list.users.mobileNo);
			$('#email').val(list.users.email);
			$('#usertype').val(list.users.usertype);
			$('#street').val(list.users.street);
			$('#area').val(list.users.area);
			$('#location').val(list.users.location);
			$('#pincode').val(list.users.pinCode);
		}
		function showBookingInfo(list) {
			$('#Bookingdetails').modal({
				backdrop: 'static',
				keyboard: false
			});
			$('#Bookingdetails').modal('show');

			// Populate booking information
			$('#bookingid').val(list.bookingId);
			$('#hallname').val(list.hallDetails.hallName);
			$('#bookingstatus').val(list.bookingStatus);
			$('#noofdays').val(list.noOfDays);
			$('#startdate').val(list.startDate);
			$('#enddate').val(list.endDate);
		}
	</script>
</body>

</html>