You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
234 lines
12 KiB
234 lines
12 KiB
<!-- 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>
|