JezK

Edit File: products.php

<?php include "header.php";
$count = $user->getTotalProducts();
$getLoyalUserDetails = $user->getLoyalUserDetails($_SESSION['user_id']);
$isLoyal = $getLoyalUserDetails['loyal_user'];
$loyaltyPoints = $getLoyalUserDetails['loyalty_points'];
$referralPoints = $getLoyalUserDetails['referral_points'];
?>
<style>
    /*Generic*/
    .wrapper {
        margin: 60px auto;
        text-align: center;
    }

/*Specific styling*/
    #content {
        padding: 15px;
        border: solid 1px #eee;
        max-width: 660px;
        margin: auto;
        border-radius: 4px;
    }
</style>
 
 <div class="modal" id="cpnModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            
            
            <div class="modal-body">
            <h3 style="font-weight:bold;text-align: center;">Price Details</h3>
                <div style="width: 100%;display: flex;"  >
                    <div class="mt-3" >
                        <p class="pd-title text-left">Coupon code</p>
                        <div class = "d-flex">
                            <div class="col-md-6" style="padding: 0;">
                                <p style='font-size: 12px;padding: 0;'>Enter coupon code if any</p>
                            </div>
                            <div class="col-md-6">
                                <a href="coupons.php" target="_blank">View Coupons</a>
                            </div>
                        </div>
                        <div class="d-flex">
                            <div class="col-md-8" style="padding: 0;">
                                <input type="text" style="width: 100%;height: 100%;" name="couponCode" id="couponCode" value="">
                            </div>
                            <div class="col-md-6" id="vcoupon">
                                <button type="button" class="buy-btn ms-1" onclick="verifyCpn()">Apply Coupon</button>
                            </div>
                            <div class="col-md-6 d-none" id="rcoupon">
                                <button type="button" class="buy-btn ms-1" onclick="removeCpn()">Remove Coupon</button>
                            </div>
                        </div>
                        <div class="couponCode_error error"></div>
                        <div class="valid_cpn d-none" style="color: green;">Valid Coupon</div>
                    </div>
                </div>

<?php if($isLoyal && $loyaltyPoints > 0) { ?>
                <div class="mt-3 d-flex justify-content-between">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="addLoyalPoints" name="addLoyalPoints"  onchange="calculateLoyaltyPoints()">
                        <label class="form-check-label" for="addLoyalPoints">
                            Redeem Loyal Points
                        </label>
                    </div>
                    <span id="points"><?php echo $loyaltyPoints; ?></span>
                </div>
                <?php } ?>

<?php if( $referralPoints > 0) { ?>
                <div class="mt-3 d-flex justify-content-between">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="addReferralPoints" name="addReferralPoints"  onchange="calculateReferralPoints()">
                        <label class="form-check-label" for="addReferralPoints">
                            Add Referral Points
                        </label>
                    </div>
                    <span id="referral_points"><?php echo $referralPoints; ?></span>
                </div>
                <?php } ?>

<div class="d-flex pt-3">
                    <p>SubTotal</p>
                    <p style="margin-left: auto;">Rs. <span id="subTotal">0</span></p>
                </div>
                
                <div class="d-flex">
                    <p>Tax</p>
                    <p style="margin-left: auto;">Rs. <span id="tax">0</span></p>
                </div>
                <div class="d-flex d-none" id="cpnDisplay">
                    <p>Coupon Amount</p>
                    <p style="margin-left: auto;">- Rs. <span id="couponAmount">0</span></p>
                </div>
                <div class="d-flex d-none" id="loyaltyDisplay">
                    <p>Loyalty Points</p>
                    <p style="margin-left: auto;">- Rs. <span id="loyalty">0</span></p>
                </div>
                <div class="d-flex d-none" id="referralDisplay">
                    <p>Referral Points</p>
                    <p style="margin-left: auto;">- Rs. <span id="referral">0</span></p>
                </div>
                <div class="d-flex" style="font-weight: bold;">
                    <p>Grand Total</p>
                    <p style="margin-left: auto;">Rs. <span id="grandTotal">0</span></p>
                </div>
                
                <input type="hidden" name="productId" id="productId" value="">
                <input type="hidden" name="amount" id="amount" value="">
                <input type="hidden" name="couponId" id="couponId" value="">
                <input type="hidden" name="cpnVerify" id="cpnVerify" value="0">
                <input type="hidden" name="cpnAmount" id="cpnAmount" value="">

<div class="text-center mt-4">
                    <button type="button" class="buy-btn ms-1" id="phonepePayBtn">Buy Now</button>
                </div>
            </div>
        </div>
    </div>
</div>
  

<div class="modal" id="successModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            
            
            <div class="modal-body">
                <div style="color: #00adef;text-align: center;"   >
                    <h5>Your booking request has been received. Kindly please wait, our team will contact you for further guidance.</h5>
                </div>

<div class="modal" id="pendingModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            
            <div class="modal-body">
                <div style="color: #00adef;text-align: center;"  >
                    <h5>Your request is already pending. Please wait for it to be processed.</h5>
                </div>

<section class="dark-bg">
    <h1 class="text-white">Loyalty Programs</h1>
</section>
<section class="py-3">
    <div class="container">
        <span><a style="color:#00adef" href="<?php echo getenv('BASE_URL'); ?>home.php">« Back to Home</a></span>
        <h2 class="text-center mb-4">Simple and transparent pricing</h2>
        <p class="text-center">Straight to the point pricing plans. No surprises or hidden charges. All is clear.</p>
    </div>
</section>
<section class="py-4 d-flex justify-content-center">

<div class="tabs-button">
        <div class="d-flex">
            <div class="tab-btn active">Loyalty Programs</div>
            <div class="tab-btn" id="mp">My Loyalty Programs</div>
        </div>
    </div>
</section id="products">
<div class="container">
    <div class="row my-3" id="appendData">
    </div>

</div>
<div class="row row-cols-md-5" id="productData">

</div>
<div class="wrapper">
    <div class="container">
        <p id="pagination-here"></p>
    </div>
</div>

<?php include "footer.php" ?>

$(document).ready(function() {
        $.ajax({
            url: 'App/products.php',
            type: "POST",
            data: {
                limit: recordsPerPage,
                offset: 0
            },
            success: function(response) {
                data = JSON.parse(response);
                $('#appendData').html(data.productData);
            }
        })
        
        $('#mp').click(function() {
            location.replace('myproducts.php');
        })
    });

let pgCount = $('#pgCount').val();

let page_count = Math.ceil(pgCount / recordsPerPage);

$('#pagination-here').bootpag({
        total: page_count,
        page: 1,
        maxVisible: page_count,
        leaps: true,
        wrapClass: 'pagination',
        activeClass: 'active',
        disabledClass: 'disabled',
    })

//page click action
    $('#pagination-here').on("page", function(event, num) {
        $('#pgNum').val(num);
        var min = num * recordsPerPage - recordsPerPage;
        $.ajax({
            url: 'App/products.php',
            type: "POST",
            data: {
                limit: recordsPerPage,
                offset: min
            },
            success: function(data) {
                data1 = JSON.parse(data);
                $('#appendData').html(data1.productData);
                $('#pgCount').val(data1.count);
            }
        })
    });

document.getElementById('phonepePayBtn').addEventListener('click', function() {
        let productId = $('#productId').val();
        let amount = $('#grandTotal') .text();
        let couponId = $('#couponId').val();
        let loyalty = $('#loyalty').text() || 0;
        let referral = $('#referral').text() || 0;

if(couponId != "" && cpnVerify == 0){ 
            $('.couponCode_error').html("Please verify the coupon");
            $('#couponCode').focus();
            $('.valid_cpn').addClass('d-none');
            return;
        }

$.ajax({
            url: 'phonepe/create_payment.php',
            type: 'POST',
            data: {
                cartItemId: productId,
                amount: amount,
                couponId: couponId,
                loyalty: loyalty,
                referral: referral,
                type: 3
            },
            dataType: 'json', // Let jQuery parse JSON automatically
            success: function(res) {
                if(res.redirectUrl){
                     // Redirect current page to PhonePe
                    location.href = res.redirectUrl;
                } else if(res.error) {
                    toastr.error(res.error);
                } else {
                    toastr.error("Unable to initiate payment");
                }
            }
        });
    });

function addToCart() {
        var $button = $(".buy-btn"); // Cache the button element

// Disable the button to prevent multiple clicks
        $button.prop('disabled', true);

let couponId = $('#couponId').val();
        let cpnVerify = $('#cpnVerify').val();
        let productId = $('#productId').val();
        let loyalty = $('#loyalty').html();
        let referral = $('#referral').html();

cartData = {
            addToCart: 'addToCart',
            type: 3, // Product
            cartItemId:productId,
            couponId : couponId,
            loyalty : loyalty,
            referral: referral
        }

$.ajax({
            url: 'App/requestToBuy.php',
            type: 'POST',
            data: cartData,
            success: function(response) {
                toastr.options.timeOut = 500;
                $button.prop('disabled', false); // Re-enable the button
                if (response != 0) {
                    // toastr.success('Product Purchase Request Successfull')
                    $('#cpnModal').modal('hide');
                    $('#successModal').modal('show');
                } 
                else if(response == 0){
                    $('#cpnModal').modal('hide');
                    $('#pendingModal').modal('show');
                }
                else {
                    toastr.warning("Unable Request Product");
                }

}
        })
    }

//set service id in the cpn model
    function setProductData(id, amount) {
        $('#productId').val(id);
        $('#amount').val(amount);
        $('#cpnVerify').val(0);
        $('#cpnAmount').val(0);
        $('#couponAmount').html(0);
        $('#cpnDisplay').addClass('d-none');
        priceDetails(amount);
    }

//price details
    function priceDetails(amount) 
    {
        let finalAmount = parseFloat(amount);
        let cpn =  parseInt($('#cpnVerify').val());
        let loyaltyPoints = $('#loyalty').html();
        let referralPoints = $('#referral').html();

if(cpn == 1){
            $('#cpnDisplay').removeClass('d-none');
            let cpnAmount = $('#cpnAmount').val();
            $('#couponAmount').html(cpnAmount);
            finalAmount = amount - cpnAmount;
        }
        else {
            $('#cpnDisplay').addClass('d-none');
        }

if(loyaltyPoints > 0){
            finalAmount = finalAmount - loyaltyPoints;
        }

if(referralPoints > 0){
            finalAmount = finalAmount - referralPoints;
        }

//calculate tax based on amount
        let tax = (finalAmount * 18) / 100;
        let grandTotal = finalAmount + tax;

$('#subTotal').html(amount);
        $('#tax').html(tax);
        $('#grandTotal').html(grandTotal);
    }

//verify coupon
    function verifyCpn() {
        $('.error').html("");
         $('.valid_cpn').addClass('d-none');
        let couponCode = $('#couponCode').val();
        // console.log(couponCode);
        if (couponCode.trim() == "") {
            $('.couponCode_error').html("Enter Coupon Code");
            $('#couponCode').focus();
            return false;
        }

let amount = $('#amount').val();

$.ajax({
            url: 'App/requestToBuy.php',
            type: 'POST',
            data: {
                couponValue: couponCode,
                amount,
                couponCheck: 1
            },
            success: function(response) {
                let data = JSON.parse(response);
                if (data.status == 1) {
                    $('.couponCode_error').html("Bill amount is less than coupon amount");
                    $('#couponCode').focus();
                    return false;
                } 
                else if(data.status == 0 || data.status == 2) {
                    $('.couponCode_error').html("Invalid Coupon code");
                    $('#couponCode').focus();
                    return false;
                }
                else {
                    $('#couponId').val(data.couponId);
                    $('#cpnVerify').val(1);
                    $('#cpnAmount').val(data.couponAmount);
                    $('#vcoupon').addClass('d-none');
                    $('#rcoupon').removeClass('d-none');
                    priceDetails(amount);
                    toastr.success('Coupon verified successfully')
                }
            }
        })
    }

function removeCpn() {
        let amount = $('#amount').val(); 
        $('#couponId').val('');
        $('#couponCode').val('');
        $('#cpnVerify').val(0);
        $('#cpnAmount').val(0);
        $('#couponAmount').html(0);
        $('#rcoupon').addClass('d-none');
        $('#vcoupon').removeClass('d-none');
        priceDetails(amount);
        toastr.success('Coupon removed successfully')
    }

$('#couponCode').on('input', function() {
        if(this.value === '') {
            $('#couponId').val('');
            $('#couponCode').val(''); // Clear the input field
        }
    });

$('#cpnModal').on('hidden.bs.modal', function () {
        $('.couponCode_error').html("");
        $('#couponId').val('');
        $('#couponCode').val(''); // Clear the input field
    });
    // Inside the verifyCpn function, add the following code to remove the couponCode_error message when the model is closed and reopened:

function success() {
        $('#successModal').modal('hide');
        location.reload();
    }

function okBtn() {
        $('#pendingModal').modal('hide');
        location.reload();
    }

//loyaty points
    function calculateLoyaltyPoints() 
    {
        const checkbox = document.getElementById('addLoyalPoints');
        const loyaltyPoints = parseFloat(document.getElementById('points').textContent);
        let amount = $('#amount').val();
        let couponAmount = $('#couponAmount').html();
        let referralAmount = $('#referral').html();

if (checkbox.checked) {
            // Calculate how much we can actually deduct (can't deduct more than total amount)
            const pointsValue = loyaltyPoints; // Assuming 1 point = 1 currency unit
            let finalAmount = amount;
            if(referralAmount > 0){
                finalAmount = finalAmount - referralAmount;
            }

if(couponAmount > 0) {
                finalAmount = finalAmount - couponAmount;
            }

const maxDeductible = Math.min(pointsValue, finalAmount);
        
            // Update UI to show used points
            // document.getElementById('points').textContent = (loyaltyPoints - maxDeductible);
            $('#loyaltyDisplay').removeClass('d-none');
            $('#loyalty').html(maxDeductible);
            priceDetails(amount);
        } else {
            // If unchecked, restore the original values 
            $('#loyaltyDisplay').addClass('d-none');
            $('#loyalty').html(0);
            priceDetails(amount);
        }
    }

function calculateReferralPoints() 
    {
        const checkbox = document.getElementById('addReferralPoints');
        const referralPoints = parseFloat(document.getElementById('referral_points').textContent);
        let amount = $('#amount').val();
        let couponAmount = $('#couponAmount').html();
        let loyaltyPoints = $('#loyalty').html();

if (checkbox.checked) {
            let finalAmount = amount;
            // Calculate how much we can actually deduct (can't deduct more than total amount)
            const pointsValue = referralPoints; // Assuming 1 point = 1 currency unit

if(loyaltyPoints > 0){
                finalAmount = finalAmount - loyaltyPoints;
            }

if(couponAmount > 0) {
                finalAmount = finalAmount - couponAmount;
            }

const maxDeductible = Math.min(pointsValue, finalAmount);

// Update UI to show used points
            $('#referralDisplay').removeClass('d-none');
            $('#referral').html(maxDeductible);
            priceDetails(amount);
        } 
        else {
            // If unchecked, restore the original values 
            $('#referralDisplay').addClass('d-none');
            $('#referral').html(0);
            priceDetails(amount);
        }
    }
</script>