245 lines
12 KiB
PHP
245 lines
12 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Subscription Renewal</title>
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="shortcut icon" href="<?= $favicon; ?>">
|
|
|
|
<style>
|
|
body {
|
|
background-color: #f8f9fa;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
.container {
|
|
padding: 10px;
|
|
}
|
|
.card {
|
|
margin: 20px auto;
|
|
max-width: 90%;
|
|
padding: 15px;
|
|
}
|
|
.card-header {
|
|
background-color: #40acdc;
|
|
color: white;
|
|
padding: 10px;
|
|
font-size: 1.2rem;
|
|
}
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
font-size: 0.7rem;
|
|
}
|
|
.subscription-status {
|
|
font-size: 0.85rem;
|
|
|
|
}
|
|
.hidden-details {
|
|
margin-top: 10px;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 10px;
|
|
}
|
|
p {
|
|
margin: 0;
|
|
}
|
|
.logo{
|
|
.center {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 50%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="card">
|
|
<div class="logo">
|
|
<img src="<?= base_url() . 'public/uploads/Vijayabharatham_withname_1.png' ?>" alt="Vijayabharatham Prasuram" />
|
|
</div><div><br></div>
|
|
<div class="card-header text-center">
|
|
<h4 class="mb-1">Renew Your Subscription</h4>
|
|
</div>
|
|
<!-- <p class="text-center" style="font-size: 0.8rem;">Please fill in your details to renew your subscription.</p> -->
|
|
<div class="card-body">
|
|
<form action="<?= base_url('pay') ?>" method="post">
|
|
<div class="form-group">
|
|
<label style="font-size: 1.25rem; " for="membership_id">Membership ID</label>
|
|
<input type="text" value="<?= isset($membership_id) && ($membership_id != null) ? $membership_id : '' ?>" class="form-control" id="membership_id" name="membership_id" placeholder="Enter your Membership ID" required>
|
|
</div>
|
|
<input type="hidden" id="amount" name = 'amount' value = "<?=isset($amount)?$amount: ''?>">
|
|
<input type="hidden" id="CustomerID" name = 'CustomerID' value = <?=isset($CustomerID)? $CustomerID['customer_id']: '' ?>>
|
|
<!-- Customer Information Section (Hidden Initially) -->
|
|
<div id="customerInfo" class="hidden-details d-none">
|
|
<div>
|
|
<p id="customerName">N/A</p>
|
|
<p id="customerMobile">N/A</p>
|
|
<p id="customerAddress">N/A</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Subscription Plans and Expiration Message -->
|
|
<div class="mt-3">
|
|
<h5 class="subscription-status text-center" id="expirationMessage"></h5><br>
|
|
<h5 class="mb-2">Renewal Options</h5>
|
|
<div class="form-group">
|
|
<select required class="form-control" id="subscriptionPlans">
|
|
<option value="" disabled selected>Select a plan</option>
|
|
<option value="<?= isset($amount)?$amount: '' ?>">PUSTHAKAM Membership - 1 Year (RENEWAL) - ₹<?= isset($amount)?$amount: '' ?> </option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<button type="submit" class="btn btn-primary btn-rounded waves-effect waves-light" style="background-color: #40acdc;">Proceed to Pay</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>© 2024 - 2025 Vijayabharatham Prasuram. All rights reserved.</p>
|
|
</div>
|
|
|
|
<!-- AJAX Script -->
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
|
<script>
|
|
<?php
|
|
if (isset($membership_id)){?>
|
|
$(document).ready(function(){
|
|
var membership_id = $('#membership_id').val();
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: "<?= base_url('/subscription_renewal') ?>",
|
|
data: {membership_id: membership_id},
|
|
dataType: 'json',
|
|
success: function(response) {
|
|
if (response.customer_details) {
|
|
// Populate the information
|
|
$('#customerName').text(response.customer_details.first_name+"," || 'N/A');
|
|
$('#customerMobile').text(response.customer_details.mobile_no+"," || 'N/A');
|
|
$('#customerAddress').text(
|
|
[
|
|
response.customer_details.address_1,
|
|
response.customer_details.city,
|
|
response.customer_details.state,
|
|
response.customer_details.country
|
|
].filter(Boolean).join(', ')
|
|
);
|
|
console.log("Customer Details received");
|
|
// Display customer information
|
|
$('#customerInfo').removeClass('d-none');
|
|
|
|
if (response.scheme) {
|
|
// Calculate expiration
|
|
var date = new Date();
|
|
var remaining = new Date(response.scheme.to_subscription);
|
|
var remainingDays = Math.ceil((remaining - date) / (1000 * 60 * 60 * 24));
|
|
var expirationMessage = '';
|
|
if (remainingDays == 0){
|
|
remainingDays = Math.abs(remainingDays);
|
|
expirationMessage = 'Your Subscription plan, "' + response.scheme.short_code + '" expires today, ' + remaining.toLocaleDateString('en-GB') + '.';
|
|
}
|
|
else if(remainingDays == 1){
|
|
remainingDays = Math.abs(remainingDays);
|
|
expirationMessage = 'Your Subscription plan, "' + response.scheme.short_code + '" will expire tomorrow, ' + remaining.toLocaleDateString('en-GB') + '.';
|
|
}
|
|
else if (remainingDays > 0) {
|
|
expirationMessage = 'Your Subscription plan "' + response.scheme.short_code + '" is going to expire in ' + remainingDays +
|
|
' days on ' + remaining.toLocaleDateString('en-GB') + '.';
|
|
} else {
|
|
remainingDays = Math.abs(remainingDays);
|
|
expirationMessage = 'Your Subscription plan "' + response.scheme.short_code + '" has already expired ' + remainingDays +
|
|
' days ago on ' + remaining.toLocaleDateString('en-GB') + '.';
|
|
}
|
|
$('#expirationMessage').text(expirationMessage);
|
|
}
|
|
}
|
|
},
|
|
error: function() {
|
|
alert('Error retrieving customer details. Please try again.');
|
|
}
|
|
});
|
|
});
|
|
<?php } ?>
|
|
$(document).ready(function(){
|
|
$('#membership_id').on('change', function(){
|
|
var membership_id = $(this).val();
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: "<?= base_url('/subscription_renewal') ?>",
|
|
data: {membership_id: membership_id},
|
|
dataType: 'json',
|
|
success: function(response) {
|
|
if (response.customer_details) {
|
|
// Populate the information
|
|
$('#customerName').text(response.customer_details.first_name+"," || 'N/A');
|
|
$('#customerMobile').text(response.customer_details.mobile_no+"," || 'N/A');
|
|
$('#customerAddress').text(
|
|
[
|
|
response.customer_details.address_1,
|
|
response.customer_details.city,
|
|
response.customer_details.state,
|
|
response.customer_details.country
|
|
].filter(Boolean).join(', ')
|
|
);
|
|
// Display customer information
|
|
$('#customerInfo').removeClass('d-none');
|
|
$('#CustomerID').val(response.CustomerID.customer_id);
|
|
$('#amount').val(response.amount);
|
|
$('#subscriptionPlans').val(response.amount);
|
|
$('#subscriptionPlans').html(`
|
|
<option value="${response.amount}">
|
|
PUSTHAKAM Membership - 1 Year (RENEWAL) - ₹${response.amount}
|
|
</option>
|
|
`);
|
|
if (response.scheme) {
|
|
// Calculate expiration
|
|
var date = new Date();
|
|
var remaining = new Date(response.scheme.to_subscription);
|
|
var remainingDays = Math.ceil((remaining - date) / (1000 * 60 * 60 * 24));
|
|
console.log(response.scheme.to_subscription);
|
|
console.log(remainingDays);
|
|
var expirationMessage = '';
|
|
if (remainingDays == 0){
|
|
remainingDays = Math.abs(remainingDays);
|
|
expirationMessage = 'Your Subscription plan, "' + response.scheme.short_code + '" expires today, ' + remaining.toLocaleDateString('en-GB') + '.';
|
|
}
|
|
else if(remainingDays == 1){
|
|
remainingDays = Math.abs(remainingDays);
|
|
expirationMessage = 'Your Subscription plan, "' + response.scheme.short_code + '" will expire tomorrow, ' + remaining.toLocaleDateString('en-GB') + '.';
|
|
}
|
|
else if (remainingDays > 0) {
|
|
expirationMessage = 'Your Subscription plan "' + response.scheme.short_code + '" is going to expire in ' + remainingDays +
|
|
' days on ' + remaining.toLocaleDateString('en-GB') + '.';
|
|
} else {
|
|
remainingDays = Math.abs(remainingDays);
|
|
expirationMessage = 'Your Subscription plan "' + response.scheme.short_code + '" has already expired ' + remainingDays +
|
|
' days ago on ' + remaining.toLocaleDateString('en-GB') + '.';
|
|
}
|
|
$('#expirationMessage').text(expirationMessage);
|
|
}
|
|
|
|
|
|
}
|
|
},
|
|
error: function() {
|
|
alert('Error retrieving customer details. Please try again.');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Bootstrap JS and dependencies -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
|
</body>
|
|
</html>
|