JezK

Edit File: services.php

<?php
include "header.php";
$count = $user->getTotalServices();
$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;
    }

.valid_cpn {
        color: green;
        font-weight: 500;
        font-family: sans-serif;
        letter-spacing: 1px;
    }
</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-5" style="padding: 0;">
                                <p style='font-size: 12px;padding: 0;'>Enter coupon code if any</p>
                            </div>
                            <div class="col-md-7">
                                <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="serviceId" id="serviceId" 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">Services </h1>
</section>

<section class="py-4">
    <div class="container">
        <h2 class="text-center mb-4">Simple and transparent pricing</h2>
        <p class="text-center">we don’t just clean cars—we bring them back to life. Our professional car wash and detailing services are designed to restore your vehicle’s shine, protect its finish, and leave it looking showroom-new. Whether you’re looking for a quick exterior wash or a full interior and exterior detail, we use high-quality products and expert techniques to deliver results you can see and feel.</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">Services</div>
            <div class="tab-btn " id="ms">My Services</div>
        </div>
    </div>
</section>

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

<input type="hidden" name="pgCount" id="pgCount" value="<?php echo $count; ?>">
        <input type="hidden" name="pgNum" id="pgNum" value="1">
        <input type="hidden" name="carType" id="carType" value="">
    </div>
</section>

<?php include "footer.php"; ?>

$(document).ready(function() {
        $.ajax({
            url: 'App/services.php',
            type: "POST",
            data: {
                limit: recordsPerPage,
                offset: 0,
                action: "getServices"
            },
            success: function(response) {
                data = JSON.parse(response);
                $('#appendData').html(data.serviceData);
            }
        })

$('#ms').click(function() {
            location.replace('myservices.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/services.php',
            type: "POST",
            data: {
                limit: recordsPerPage,
                offset: min,
                action: "getServices"
            },
            success: function(data) {
                data1 = JSON.parse(data);
                $('#appendData').html(data1.serviceData);
                $('#pgCount').val(data1.count);
            }
        })
    });

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

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: serviceId,
                couponId: couponId,
                loyalty: loyalty,
                referral: referral,
                type: 2,// Service,
                amount: amount,
                carType: carType
            },
            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 serviceId = $('#serviceId').val();
        let couponId = $('#couponId').val();
        let cpnVerify = $('#cpnVerify').val();
        let carType = $('#carType').val();
        let loyalty = $('#loyalty').html();
        let referral = $('#referral').html();

let cartData = {
            addToCart: 'addToCart',
            type: 2, // Service
            cartItemId: serviceId,
            couponId : couponId,
            carType : carType,
            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
                $('#cpnModal').modal('hide');
                if (response != 0) {
                    // toastr.success('Service Purchase Request Successfull')
                    $('#successModal').modal('show');
                }
                else if(response == 0){
                    $('#pendingModal').modal('show');
                }
                else {
                    toastr.warning('Unable To Request Service')
                }
               
            }
        })
    }

//set service id in the cpn model
    function setServiceData(id, amount, carType) {
        if (carType == 0 || amount == 0) {
            alert("Please select car type.");
            return;
        }
        // If valid, proceed with modal opening logic
        $("#cpnModal").modal("show");

$('#serviceId').val(id);
        $('#amount').val(amount);
        $('#carType').val(carType);
        $('#cpnVerify').val(0);
        $('#cpnAmount').val(0);
        $('#couponAmount').html(0);
        $('#cpnDisplay').addClass('d-none');
        priceDetails(amount);
    }

//price details
    function priceDetails(amount) 
    {
        let finalAmount = amount;
        let cpn =  $('#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();

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
    });

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

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

$(document).on("change", "#carTypeFilter", function () {
        let selectedCarType = $(this).val();
        let productBox = $(this).closest(".product-box");
        let serviceId = productBox.find(".buy-btn").attr("data-service-id");
        let priceElement = productBox.find(".product-price");
        let buyButton = productBox.find(".buy-btn");

if (selectedCarType == 0) {
            priceElement.text("Please select a car type");
            buyButton.attr("onclick", "setServiceData(" + serviceId + ", 0, 0)");
            return;
        }

// Send AJAX request to get updated price
        $.ajax({
            url: "App/services.php", // This backend script fetches the price
            type: "POST",
            data: { carType: selectedCarType, serviceId: serviceId, action: "getServicePrice" },
            dataType: "json",
            success: function (response) {
                if (response.status == "success") {
                    priceElement.html(response.carName + " Amount: Rs." + response.amount);
                    // Update the "Request To Buy" button with the correct amount and carType
                    buyButton.attr("onclick", "setServiceData(" + serviceId + ", " + response.amount + ", " + selectedCarType + ")");
                } else {
                    priceElement.text("Price not available");
                    buyButton.attr("onclick", "setServiceData(" + serviceId + ", 0, " + selectedCarType + ")");
                }
            },
            error: function () {
                priceElement.text("Error fetching price");
            }
        });
    });

//loyaty points
    function calculateLoyaltyPoints() 
    {
        const checkbox = document.getElementById('addLoyalPoints');
        let totalAmount = parseFloat($('#grandTotal').html());
        const loyaltyPoints = parseFloat(document.getElementById('points').textContent);
        let amount = parseFloat($('#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 = parseFloat($('#amount').val());
        let couponAmount = $('#couponAmount').html();
        let loyaltyPoints = $('#loyalty').html();

if (checkbox.checked) {
            // Calculate how much we can actually deduct (can't deduct more than total amount)
            let finalAmount = 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>