VictoriaPublicHall_visitbooking/target/classes/templates/user/paymentrequestform.html

<!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">&times;</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>