communityhallv22/src/main/resources/templates/fragments/Details.html

<!-- Pre-loader end -->
<div id="pcoded" class="pcoded">
	<div class="pcoded-container">
		<!-- Menu header -->
		<div class="nav-display">
			<nav th:replace="~{fragments/nav-user :: nav}"></nav>
		</div>
		<!-- Main content -->
		<div class="container-fluid" style="margin-top: 4%; padding: 15px;">
			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="card" style="width: 90%; max-width: 1060px; margin: 0 auto;">
						<div class="card-body">
							<!-- Acknowledgement Header -->
							<div style="text-align: center; margin-bottom: 20px;">
								<span><img src="media\images\logo.png" style="width:30px;height:30px;"></span>
								<br>
								<h6 style="font-weight: bold; text-decoration: underline;">
									<ul style="list-style-type: none; margin: 0; padding: 0;">ACKNOWLEDGEMENT COPY</ul>
								</h6>
							</div>

							<!-- User Details and Payment Details Section -->
							<div class="section"
								style="display: flex; justify-content: space-between; margin-bottom: 15px;">
								<!-- User Details Box -->
								<div th:if="${bookingsDetails != null}" class="user-details-box"
									style="border: 1px solid #ddd; border-radius: 8px; padding: 10px; width: 48%; background-color: #f9f9f9;">
									<h6
										style="font-weight: bold;background-color: #404E67;color: white; padding: 8px; border-radius: 5px;">
										User Details:</h6>
									<p><strong>User Name:</strong> <span id="uName"
											th:text="${bookingsDetails.users.name}"></span></p>
									<p><strong>User Type:</strong> <span id="uType"
											th:text="${bookingsDetails.users.usertype}"></span></p>
									<p><strong>Mobile No:</strong> <span id="mobile"
											th:text="${bookingsDetails.users.mobileNo}"></span></p>
									<p><strong>Email:</strong> <span id="eMail"
											th:text="${bookingsDetails.users.email}"></span></p>
								</div>

								<!-- Payment Details Box -->
								<div class="payment-details-box"
									style="border: 1px solid #ddd; border-radius: 8px; padding: 10px; width: 48%; background-color: #f9f9f9;">
									<h6
										style="font-weight: bold; background-color: #404E67; color: white; padding: 8px; border-radius: 5px;">
										Payment Details:</h6>

									<!-- Check if booking is APPROVED / WAITING_FOR_NOC and payment is Success -->
									<div
										th:if="${bookingsDetails.payments != null and (bookingsDetails.bookingStatus.name() == 'APPROVED' or bookingsDetails.bookingStatus.name() == 'WAITING_FOR_NOC') and bookingsDetails.payments.paymentStatus == 'Success'}">
										<!-- Transaction Id -->
										<p><strong>Transaction Id:</strong>
											<span
												th:text="${bookingsDetails.payments.transactionId != null ? bookingsDetails.payments.transactionId : 'NA'}"></span>
										</p>

										<!-- Payment Status -->
										<p><strong>Payment Status:</strong>
											<span
												th:text="${bookingsDetails.payments.paymentStatus != null ? bookingsDetails.payments.paymentStatus : 'NA'}"
												th:class="${bookingsDetails.payments.paymentStatus == 'Success'} ? 'text-success fw-bold' : 'text-danger fw-bold'"></span>
										</p>

										<!-- Total Amount Paid -->
										<p><strong>Total Amount Paid:</strong>
											<span
												th:text="${bookingsDetails.payments.amountReceived != null ? '₹ ' + bookingsDetails.payments.amountReceived : 'NA'}"
												style="font-weight: bold;"></span>
										</p>
									</div>

									<!-- Display failure message otherwise -->
									<div
										th:unless="${bookingsDetails.payments != null and (bookingsDetails.bookingStatus.name() == 'APPROVED' or bookingsDetails.bookingStatus.name() == 'WAITING_FOR_NOC') and bookingsDetails.payments.paymentStatus == 'Success'}">
										<p><strong>Transaction Id:</strong>
											<span
												th:text="${bookingsDetails.payments.transactionId != null ? bookingsDetails.payments.transactionId : 'NA'}"></span>
										</p>
										<p><strong>Payment Status:</strong>
											<span class="text-danger fw-bold">Payment Not Confirmed.</span>
										</p>
										<p class="text-danger fw-bold" style="margin-top: 5px;">
											If your amount is debited, it will be refunded with in 7 to 15 working days.
										</p>
									</div>
								</div>

							</div>

							<!-- Hall Details Section -->
							<div class="section" th:if="${bookingsDetails != null}"
								style="border: 1px solid #ddd; border-radius: 8px; padding: 10px; margin-bottom: 15px; background-color: #f9f9f9;">
								<h6
									style="font-weight: bold; background-color: #404E67;color: white; padding: 8px; border-radius: 5px;">
									Hall Details:</h6>
								<div style="display: flex; justify-content: space-between;">
									<div class="hall-details-left" style="width: 48%;">
										<p><strong>Zone:</strong> <span id="zone"
												th:text="${bookingsDetails.hallDetails.zone}"></span></p>
										<p><strong>Division:</strong> <span id="division"
												th:text="${bookingsDetails.hallDetails.division}"></span></p>
										<p><strong>Hall Name:</strong> <span id="hallname"
												th:text="${bookingsDetails.hallDetails.hallId} + '-' + ${bookingsDetails.hallDetails.hallName}"></span>
										</p>
										<p><strong>Hall Address:</strong> <span id="address">
												<span th:text="${bookingsDetails.hallDetails.doorNo}"></span>,
												<span th:text="${bookingsDetails.hallDetails.street}"></span>,
												<span th:text="${bookingsDetails.hallDetails.area}"></span>,
												<span th:text="${bookingsDetails.hallDetails.pinCode}"></span>
											</span></p>
									</div>
									<div class="hall-details-right" style="width: 48%;">
										<p><strong>Caretaker Name:</strong> <span
												th:text="${bookingsDetails.hallDetails.hallInchargeName}"></span></p>
										<p><strong>Caretaker Mobile No:</strong> <span
												th:text="${bookingsDetails.hallDetails.hallInchargeMobno}"></span></p>
									</div>
								</div>
							</div>

							<!-- Booking Details Section -->
							<div class="section" th:if="${bookingsDetails != null}"
								style="border: 1px solid #ddd; border-radius: 8px; padding: 10px; margin-bottom: 15px; background-color: #f9f9f9;">
								<h6
									style="font-weight: bold; background-color: #404E67;color: white; padding: 8px; border-radius: 5px;">
									Booking Details:</h6>
								<div style="display: flex; justify-content: space-between;">
									<div class="booking-details-left" style="width: 48%;">
										<p><strong>Booking Id:</strong> <span
												th:text="${bookingsDetails.bookingId}"></span></p>
										<p><strong>Starting Date:</strong> <span
												th:text="${bookingsDetails.startDate}"></span></p>
										<p><strong>Starting Slot:</strong> <span
												th:text="${bookingsDetails.startingSlot == 1 ? 'Morning' : 'Evening'}"></span>
										</p>
										<p><strong>No of days Booked:</strong> <span id="bookId"
												th:text="${bookingsDetails.noOfDays}"></span></p>
										<!-- If the booking status is not 'Refunded', display the booking status -->
										<p th:unless="${bookingsDetails.bookingStatus.name() == 'REFUNDED'}">
											<strong>Booking Status:</strong>
											<span th:text="${bookingsDetails.bookingStatus}"
												th:class="${bookingsDetails.bookingStatus.name() == 'APPROVED'} ? 'text-success fw-bold' : 'text-danger fw-bold'">
											</span>
										</p>

										<!-- If booking status is 'Refunded' and refund status is 'Waiting', display refund initiation message -->
										<p
											th:if="${bookingsDetails.bookingStatus.name() == 'REFUNDED' && bookingsDetails.refundStatus.name() == 'WAITING'}">
											<strong>Booking Status:</strong>
											<span
												style="background-color: red;font-weight: bold; padding: 2px 5px;color:white">FAILURE</span><br><br>
											<strong>Refund Status:</strong>
											<span
												style="background-color: yellow; font-weight: bold; padding: 2px 5px;">Refund
												has to be initiated.</span>
										</p>

										<!-- If booking status is 'Refunded' and refund status is 'Completed', display refund initiated message -->
										<p
											th:if="${bookingsDetails.bookingStatus.name() == 'REFUNDED' && bookingsDetails.refundStatus.name() == 'COMPLETED'}">
											<strong>Booking Status:</strong>
											<span
												style="background-color: red;font-weight: bold; padding: 2px 5px;color:white">FAILURE</span><br><br>
											<strong>Refund Status:</strong>
											<span
												style="background-color: green; font-weight: bold; padding: 2px 5px;color:white;">Refund
												Initiated.</span>
										</p>


									</div>
									<div class="booking-details-right" style="width: 48%;">
										<p><strong>Booking Date:</strong> <span
												th:text="${bookingsDetails.bookingDate}"></span></p>
										<p><strong>Ending Date:</strong> <span
												th:text="${bookingsDetails.endDate}"></span></p>
										<p><strong>Ending Slot:</strong> <span
												th:text="${bookingsDetails.endingSlot == 1 ? 'Morning' : 'Evening'}"></span>
										</p>
										<p><strong>Comment:</strong> <span th:text="${bookingsDetails.comments}"
												th:class="${bookingsDetails.comments == 'Booking Confirmed Successfully'} ? 'text-success fw-bold' : 'text-danger fw-bold'"
												class="fw-bold"></span></p>
										<p><strong>Reason For Booking:</strong> <span
												th:text="${bookingsDetails.reason}"></span></p>
									</div>
								</div>
								<div class="amount-details"
									style="display: flex; justify-content: space-between; border-top: 1px solid #ddd; padding-top: 10px; margin-top: 10px;">
									<div class="amount-item" style="flex: 1; text-align: center;">
										<p><strong>Rent:</strong> <span
												th:text=" '₹ ' + ${bookingsDetails.hallAmount}"></span></p>
									</div>
									<div class="amount-item" style="flex: 1; text-align: center;">
										<p><strong>GST:</strong> <span th:text=" '₹ ' + ${bookingsDetails.gst}"></span>
										</p>
									</div>
									<div class="amount-item" style="flex: 1; text-align: center;">
										<p><strong>Deposit:</strong> <span
												th:text=" '₹ ' + ${bookingsDetails.depositAmount}"></span></p>
									</div>
									<div class="amount-item" style="flex: 1; text-align: center;">
										<p><strong>Total:</strong> <span style="font-weight: bold;"
												th:text=" '₹ ' + ${bookingsDetails.amountReceived}"></span></p>
									</div>
								</div>
							</div>


							<!-- Computer Generated Note
							<div class="generated-note" style="border: 1px solid #ddd; border-radius: 8px; padding: 10px; text-align: center; background-color: #f9f9f9;"> -->
							<h6 style="text-align:center;font-size:11px;">* This is a computer-generated document. No
								signature is required *</h6>

							<p><span id="generatedDate" style="font-size:10px;"></span></p>

						</div>
					</div>

					<!-- Buttons -->
					<div class="button-container" th:if="${bookingsDetails != null}"
						style="display: flex; justify-content: flex-end; margin-top: 20px;">
						<button class="btn btn-success" th:onclick="printTables([[${bookingsDetails.bookingId}]])"
							style="background: #FB6340;">Download</button>
						<button class="btn btn-success" th:onclick="return redirect([[${bookingsDetails.bookingtype}]])"
							style="background: rgb(21, 68, 92); border-radius: 5px; padding: 8px 16px;">Back to
							Home</button>
					</div>

				</div>
			</div>
		</div>
	</div>
</div>