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.
|
|
<!-- 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;">COLLECTION PENDING 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 payments is not null --> <div th:if="${bookingsDetails.extrapayments != null}"> <!-- Transaction Id --> <p><strong>Transaction Id:</strong> <span th:text="${bookingsDetails.extrapayments.transactionId != null ? bookingsDetails.extrapayments.transactionId : 'NA'}"></span> </p> <!-- Payment Status --> <p><strong>Payment Status:</strong> <span th:text="${bookingsDetails.extrapayments.paymentStatus != null ? bookingsDetails.extrapayments.paymentStatus : 'NA'}" th:class="${bookingsDetails.extrapayments.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.extrapayments.amountReceived != null ? '₹ ' + bookingsDetails.extrapayments.amountReceived : 'NA'}" style="font-weight: bold;"></span> </p> </div> <!-- Display NA if payments is null --> <div th:if="${bookingsDetails.extrapayments == null}"> <p><strong>Transaction Id:</strong> <span>NA</span></p> <p><strong>Payment Status:</strong> <span>NA</span></p> <p><strong>Total Amount Paid:</strong> <span>NA</span></p> </div> </div> </div> <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;">Collection Pending Details:</h6> <div style="display: flex; justify-content: space-between;"> <div class="hall-details-left" style="width: 48%;"> <p><strong>Deposite Amount:</strong> <span id="deposiamount" th:text="${bookingsDetails.depositAmount}"></span></p> <p><strong>EB Amount:</strong> <span id="ebAmount" th:text="${bookingsDetails.settlement.ebAmount}"></span></p> <p><strong>Damage Amount:</strong> <span id="DamageAmount" th:text="${bookingsDetails.settlement.damageAmount}"></span></p> <p><strong>Collection Pending Amount:</strong> <span id="collectionPending"> <span th:text="${bookingsDetails.settlement.collectionPending}"></span> </span></p> <p><strong>Collection Pending Status:</strong> <span id="collectionPendingstatus"> <span th:text="${bookingsDetails.settlement.collectionStatus}"></span> </span></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> <p><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> </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>
<!-- 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>
|
