Skip to content

Commit

Permalink
up
Browse files Browse the repository at this point in the history
  • Loading branch information
@PhemcodeJay
PhemcodeJay committed Nov 10, 2024
1 parent 1292cb0 commit 017acde
Show file tree
Hide file tree
Showing 2 changed files with 1,034 additions and 9 deletions.
186 changes: 177 additions & 9 deletions pay.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -370,9 +370,19 @@ function savePayment($amount, $method, $status, $extraData = []) {
}

.buy-btn:hover {
background-color: #218838;
background-color: red;
}

.buy-btn.selected {
background-color: red; /* Keep the color red when selected */
}


.buy-btn:active {
background-color: red; /* Color stays on click */
}


.payment-options {
display: flex;
justify-content: space-evenly;
Expand Down Expand Up @@ -517,6 +527,81 @@ function savePayment($amount, $method, $status, $extraData = []) {
<button type="button" class="pay-button" onclick="window.location.href='index.html';">Home</button>
</form>
</main>
<!-- Bank Transfer Modal -->
<div class="modal fade" id="bankTransferModal" tabindex="-1" role="dialog" aria-labelledby="bankTransferModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="bankTransferModalLabel">Bank Transfer Instructions</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<h6>Please follow the instructions below to complete your bank transfer:</h6>
<ul>
<li><strong>Bank Name:</strong> STANBIC IBTC NIGERIA</li>
<li><strong>Account Name:</strong> OLUWAFEMI JEGEDE</li>
<li><strong>Account Number:</strong> 0010414317</li>
<li><strong>Bill Amount:</strong> <span id="bankAmountDisplay"></span></li>
<li><strong>Exchange Rate:</strong> <span id="Naira Equivalent">Loading...</span></li>
<li><strong>Total (NGN):</strong> <span id="totalAmountDisplay"></span></li>
</ul>
<h6>Once you have completed the transfer, please upload your payment proof:</h6>
<form id="paymentProofForm" action="submit_payment_proof.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="paymentProof">Upload Payment Proof</label>
<input type="file" class="form-control" id="paymentProof" name="payment_proof" required>
</div>
<input type="hidden" name="order_id" id="order_id" value="">
<button type="submit" class="btn btn-primary">Submit Payment Proof</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<!-- Triggering Bank Transfer Modal -->
<script>
// Function to show the Bank Transfer modal
function showBankTransferModal() {
// Set the total amount for the bank transfer in the modal
var amount = <?php echo json_encode($total_price); ?>;
document.getElementById("bankAmountDisplay").textContent = "$" + amount;

// Set order_id if available
var orderId = "<?php echo uniqid(); ?>";
document.getElementById("order_id").value = orderId;

// Show the modal
$('#bankTransferModal').modal('show');
}

// Listen for when the form is submitted
document.getElementById("paymentProofForm").addEventListener("submit", function(e) {
e.preventDefault(); // Prevent default form submission

var formData = new FormData(this);

// AJAX request to submit the payment proof
var xhr = new XMLHttpRequest();
xhr.open("POST", "pay.php", true);
xhr.onload = function() {
if (xhr.status === 200) {
// Handle success, maybe notify the user and close the modal
alert("Payment proof submitted successfully!");
$('#bankTransferModal').modal('hide');
} else {
alert("Error submitting payment proof. Please try again.");
}
};
xhr.send(formData);
});
</script>


<!-- Footer -->
<footer>
Expand Down Expand Up @@ -576,14 +661,7 @@ function updateTotalPrice(selectedPlan) {
document.getElementById('total-price').textContent = '$' + totalPrice.toFixed(2);
}
</script>
<script>
document.getElementById('createButton').addEventListener('click', function() {
// Optional: Validate input or perform any additional checks here

// Redirect to invoice-form.php
window.location.href = 'invoice-form.php';
});
</script>

<script>
async function getNairaEquivalent() {
try {
Expand Down Expand Up @@ -616,5 +694,95 @@ function updateTotalPrice(selectedPlan) {


</script>
<script>
// Function to handle plan selection
function selectPlan(plan) {
document.getElementById('selected-plan').value = plan;
document.getElementById('plan-summary').textContent = plan.charAt(0).toUpperCase() + plan.slice(1);
updateTotalPrice(plan);
}

// Function to handle payment method selection
function selectPaymentMethod(paymentMethod) {
// Deselect all radio buttons
const options = document.querySelectorAll('input[name="payment"]');
options.forEach(option => option.checked = false);

// Select the chosen payment method
const selectedOption = document.querySelector(`input[value="${paymentMethod}"]`);
selectedOption.checked = true;

// Add a visual highlight to the selected option
const paymentOptions = document.querySelectorAll('.payment-option');
paymentOptions.forEach(option => option.style.backgroundColor = ''); // Reset background color
selectedOption.parentElement.style.backgroundColor = '#87CEEB'; // Light blue for selected option
}

// Function to update the total price based on the selected plan and cycle
function updateTotalPrice(selectedPlan) {
const cycle = document.getElementById('selected-cycle').value;

// Prices could be dynamically fetched or predefined
const prices = {
'starter': { 'monthly': <?php echo $plans['starter']['monthly']; ?> },
'growth': { 'monthly': <?php echo $plans['growth']['monthly']; ?> },
'enterprise': { 'monthly': <?php echo $plans['enterprise']['monthly']; ?> },
};

const totalPrice = prices[selectedPlan][cycle];
document.getElementById('total-price').textContent = '$' + totalPrice.toFixed(2);

// Store the total price to use later in the exchange rate conversion
window.selectedPlanPrice = totalPrice;
}

// Function to fetch the Naira equivalent exchange rate and calculate the total in NGN
async function getNairaEquivalent() {
try {
const apiKey = 'cc688057dc86274ff7958e5e'; // Replace with your Exchangerate-API key
const response = await fetch(`https://v6.exchangerate-api.com/v6/${apiKey}/latest/USD`);
const data = await response.json();

if (data && data.conversion_rates && data.conversion_rates.NGN) {
const exchangeRate = data.conversion_rates.NGN;
const formattedExchangeRate = parseFloat(exchangeRate).toLocaleString();

// Update exchange rate display
document.getElementById('Naira Equivalent').textContent = `${formattedExchangeRate} NGN`;

// Calculate total in NGN based on the selected plan's price
if (window.selectedPlanPrice) {
const amountInNaira = (window.selectedPlanPrice * exchangeRate).toFixed(2);
const formattedAmountInNaira = parseFloat(amountInNaira).toLocaleString();
document.getElementById('totalAmountDisplay').textContent = `${formattedAmountInNaira} NGN`;
}

} else {
document.getElementById('Naira Equivalent').textContent = "Exchange rate unavailable.";
document.getElementById('totalAmountDisplay').textContent = "Error calculating total.";
}

} catch (error) {
console.error('Error fetching exchange rate:', error);
document.getElementById('Naira Equivalent').textContent = "Error fetching exchange rate.";
document.getElementById('totalAmountDisplay').textContent = "Error fetching exchange rate.";
}
}

// Trigger the exchange rate conversion and default plan selection on page load
document.addEventListener('DOMContentLoaded', () => {
// Default to 'starter' plan
selectPlan('starter');
getNairaEquivalent(); // Fetch exchange rate on page load
});
</script>

<!-- HTML structure for displaying the details -->
<ul>
<li><strong>Bill Amount:</strong> <span id="bankAmountDisplay">$0.00</span></li>
<li><strong>Exchange Rate:</strong> <span id="Naira Equivalent">Loading...</span></li>
<li><strong>Total (NGN):</strong> <span id="totalAmountDisplay">Loading...</span></li>
</ul>

</body>
</html>
Loading

0 comments on commit 017acde

Please sign in to comment.