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.
180 lines
6.8 KiB
180 lines
6.8 KiB
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head th:replace="~{fragments/user-head :: head}"></head>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
.header {
|
|
background-color: #1d495a;
|
|
padding: 10px 20px;
|
|
color: white;
|
|
font-family: Arial, sans-serif;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.header .logo img {
|
|
height: 50px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.center-text {
|
|
font-size: 20px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.header {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
text-align: left;
|
|
}
|
|
|
|
.header .center-text {
|
|
font-size: 24px;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
<header th:replace="~{user/razor-pay :: header}"></header>
|
|
|
|
<body style="background-color: #ebf1fa;">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Responsive Header -->
|
|
<div class="header">
|
|
<div class="logo">
|
|
<img src="https://gccservices.in/gcc/assets/images/logo.png" alt="Logo">
|
|
</div>
|
|
<div class="center-text">GREATER CHENNAI CORPORATION</div>
|
|
</div>
|
|
|
|
<!-- Payment Details Card -->
|
|
<div class="container mt-4 mb-4">
|
|
<div class="card shadow-lg">
|
|
<div class="card-header bg-dark text-white">
|
|
<h4 class="mb-0 text-center text-md-left text-white">Victoria Publichall Payment Details</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Row 1 -->
|
|
<div class="form-group">
|
|
<label class="form-label fw-bold">Name:</label>
|
|
<input type="text" class="form-control" th:value="${booking.name}" readonly />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label fw-bold">
|
|
<span th:text="${booking.mob_no != null && booking.mob_no != '' ? 'Phone No' : 'Email'}"></span>:
|
|
</label>
|
|
<input type="text" id="paymentNumber" class="form-control"
|
|
th:value="${contact}"
|
|
readonly />
|
|
</div>
|
|
|
|
<!-- Row 2 -->
|
|
<div class="form-group">
|
|
<label class="form-label fw-bold">Payment Purpose:</label>
|
|
<input type="text" class="form-control" value="Victoria Hall Visit Charges" readonly />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label fw-bold">Amount:</label>
|
|
<input type="text" class="form-control" th:value="${booking.total_amount}" readonly />
|
|
</div>
|
|
|
|
<!-- Terms and Conditions Checkbox -->
|
|
<div class="form-check mt-3 text-center">
|
|
<input class="form-check-input" type="checkbox" id="termsCheck">
|
|
<label class="form-check-label" for="termsCheck">
|
|
I agree to the <a href="#" data-bs-toggle="modal" data-bs-target="#termsModal">terms and conditions</a>.
|
|
</label>
|
|
</div>
|
|
|
|
<div class="text-center mt-4">
|
|
|
|
<span style="background-color: #f8d7da; color: #721c24; padding: 5px 10px; border-radius: 4px;">
|
|
⚠️ Important: Do not refresh or close the page after clicking the payment button until the payment is confirmed.
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<!-- Confirm Button -->
|
|
<div class="text-center mt-4">
|
|
<button type="button" class="btn btn-success btn-block btn-lg" id="submitBtn"
|
|
th:onclick="paymentStart([[${booking.ref_id}]],[[${booking.total_amount}]],[[${isbulk}]])" disabled>Confirm Payment</button>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-primary text-white">
|
|
<h5 class="modal-title" id="termsModalLabel">Terms and Conditions</h5>
|
|
<!-- <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> -->
|
|
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"
|
|
style="color:black;border: white;background-color: white;">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body border p-4">
|
|
<ol>
|
|
<li>By accepting to make Payment online it is implied that you agree to the terms and conditions of Netbanking System/Credit Card company.</li>
|
|
<li>All payments are processed via secure third-party gateways. Greater Chennai Corporation does not store your card or bank information.</li>
|
|
<li>The actual updation of payment by Greater Chennai Corporation will take place after getting confirmation from the Banks.</li>
|
|
<li>All charges related to waste collection and processing fees are non-refundable once successfully paid.</li>
|
|
<li>If a transaction fails but funds are debited, the refund will be processed automatically by the bank/payment gateway. Greater Chennai Corporation is not responsible for delays in such refunds.</li>
|
|
<li>In the exigency of connection getting timed out or user clicking to close the browser before getting payment confirmation message he/she has to wait for 15 minutes before proceeding to make subsequent payment for the same Request ID.</li>
|
|
</ol>
|
|
</div>
|
|
<div class="modal-footer justify-content-center">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('#termsCheck').on('change', function () {
|
|
$('#submitBtn').prop('disabled', !this.checked);
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|