JezK

Edit File: careclub.php

<?php
$branchId = isset($_POST['branchId']) ? $_POST['branchId'] : 0;
include "header.php";
$careClubsDetails = $user->getCareClubs($branchId);
$count = count($careClubsDetails);
?>
<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;
    }

.modal-content {
        border-radius: 8px;
        padding: 20px;
    }

.modal-header {
        border-bottom: none;
    }

.modal-footer {
        border-top: none;
    }

.hide-section {
        display: none;
    }
.form-select{
margin:10px 0;
}
</style>
  

<div class="modal fade" id="branchModal" tabindex="-1" aria-labelledby="branchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="branchModalLabel">Select Your Branch</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <select class="form-select" id="branchSelect" style="font-weight: bold; border-color: #00adef; width: 100%;">
                    <option value="0">All Branches</option>
                    <?php foreach ($user->getBranches() as $branch) : ?>
                        <option value="<?php echo $branch['brach_id']; ?>"><?php echo $branch['name']; ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="selectBranchBtn">Select</button>
            </div>
        </div>
    </div>
</div>

<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%;">
                    <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>
                        <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-4">
                                <button type="button" class="buy-btn ms-1" onclick="verifyCpn()">Apply</button>
                            </div>
                            
                        </div>
                        <div class="couponCode_error error"></div>
                        <div class="valid_cpn d-none" style="color: green;">Valid Coupon</div>
                    </div>
                </div>

<div class="d-flex pt-2">
                    <p>SubTotal</p>
                    <p style="margin-left: auto;">Rs. <span id="subTotal">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">
                    <p>Tax</p>
                    <p style="margin-left: auto;">Rs. <span id="tax">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="careClubId" id="careClubId" value="">
                <input type="hidden" name="branchId" id="branchId" 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="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>

<section class="dark-bg">
    <h1 class="text-white">Ceramic Club</h1>
</section>

<section class="py-2">
    <div class="container">
        <span><a style="color:#00adef" href=" <?php echo $baseUrl ?>home.php">« Back to Home</a></span>
        <div class="row my-3 justify-content-center">
            <div class="col-md-4">
                <h3 style="color: #00adef;">Please Select The Branch</h3>
                <select class="form-select" id="branchFilter" style="font-weight:bold; border-color: #00adef;">
                    <option value="">Select Branch </option>
                    <?php
                    $branches = $user->getBranches();
                    foreach ($branches as $branch) {
                    ?>
                        <option value="<?php echo $branch['brach_id']; ?>"><?php echo $branch['name']; ?></option>
                    <?php
                    }
                    ?>
                </select>
            </div>
            
        </div>
        <h2 class="text-center mb-4 hide-section">Simple and transparent pricing</h2>
        <p class="text-center hide-section">We apply a state-of-the-art ceramic coating that chemically bonds to your vehicle’s paint, forming a crystal-clear, ultra-durable shield that enhances gloss, resists damage, and preserves perfection.</p>
    </div>
</section>

<section class="py-2 d-flex justify-content-center hide-section">
    <div class="tabs-button hide-section">
        <div class="d-flex">
            <div class="tab-btn active">Ceramic Club</div>
            <div class="tab-btn" id="mp">My Ceramic Club</div>
        </div>
    </div>
</section>

</div>

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

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

<div class="modal fade" id="servicesModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content  de-modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Services</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="servicesAppend">

</div>

</div>
    </div>
</div>

<div class="modal fade" id="callus" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content  de-modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <img src="./images/callus.png" width="50" class="d-block m-auto img-fluid" />
                <p class="text-center">Call Us</p>
                <p class="text-center"><a class="ft-20 text-decoration-none text-center fw-bold text-dark" href="tel:7858965874">7858965874</a></p>
            </div>

</div>
    </div>
</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>

<?php include "footer.php" ?>

$(document).ready(function() {
        // // Show the modal when the page loads
        // $('#branchModal').modal('show');

// // Handle branch selection
        // $('#selectBranchBtn').click(function() {
        //     let branchId = $('#branchSelect').val();
        //     // Close the modal
        //     $('#branchModal').modal('hide');
        //     $('#branchFilter').parent().parent().hide();
        //     $('#pagination-here').show();
        //     // Load care clubs based on the selected branch
        //     displayCareClubs(branchId);
        //     // Set the selected branch in the branch filter dropdown
        //     $('#branchFilter').val(branchId);
        // });

// $('#selectBranchBtn').click(function() {
        //     console.log('hello')
        //     if ($('#branchSelect').val() != '') {
        //         $('.hide-section').show();
        //     } else {
        //         $('.hide-section').hide();
        //     }
        // });

// Update care clubs when branch filter changes
        $('#branchFilter').change(function() {
            let branchId = $(this).val();
            if ($('#branchFilter').val() != '') {
                $('.hide-section').show();
                $('#branchFilter').parent().parent().hide();
                $('#pagination-here').show();
            } else {
                $('.hide-section').hide();
                $('#pagination-here').hide();
            }
            displayCareClubs(branchId);
        });
        $('#pagination-here').hide();
        // Initial call to display care clubs
        // displayCareClubs();

$('#mp').click(function() {
            location.replace('mycareclubs.php');
        });
    });

function displayCareClubs(branchId = 0) {
       
        $.ajax({
            url: 'App/careclub.php',
            type: "POST",
            data: {
                limit: recordsPerPage,
                offset: 0,
                branchId: branchId,
                carType: $('#carTypeFilter').val(),
            },
            success: function(data) {
                $("#carType").removeClass("d-none");
                $('#appendData').html(data);
            }
        })
    }

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;
        var branchId = $('#branchFilter').val();
        $.ajax({
            url: 'App/careclub.php',
            type: "POST",
            data: {
                limit: recordsPerPage,
                offset: min,
                branchId: branchId
            },
            success: function(data) {
                data1 = JSON.parse(data);
                $('#appendData').html(data1.packageData);
                $('#pgCount').val(data1.count);
            }
        })
    });

function viewServices(packageId) {

$.ajax({
            type: 'POST',
            url: 'App/careclub.php',
            data: {
                services: 'get',
                packageId: packageId
            },
            success: function(data) {
                $('#servicesAppend').html(data)
                $('#servicesModal').modal()

}
        })
    }

document.getElementById('phonepePayBtn').addEventListener('click', function() {
        careClubId = $('#careClubId').val();
        let amount = $('#grandTotal').text();
        let branchId = $('#branchId').val();
        let carType = $('.carType'+careClubId).val();
        let planType = $('.plan'+careClubId).val();
        let couponId = $('#couponId').val();

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: {
                type: 1, // Care Club
                cartItemId: careClubId,
                couponId : couponId,
                branchId: branchId,
                carType: carType,
                planType: planType,
                amount: amount
            },
            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

careClubId = $('#careClubId').val();
        let branchId = $('#branchId').val();
        let carType = $('.carType'+careClubId).val();
        let planType = $('.plan'+careClubId).val();
        let couponId = $('#couponId').val();

// Disable the button to prevent multiple clicks
        $button.prop('disabled', true);
        cartData = {
            addToCart: 'addToCart',
            type: 1, // Care Club
            cartItemId: careClubId,
            couponId : couponId,
            branchId: branchId,
            carType: carType,
            planType: planType
        }

if(carType == 0){
            $button.prop('disabled', false); // Re-enable the button
            toastr.warning('Please select a car type');
            return;
        }
        // if(plan)

$.ajax({
            url: 'App/requestToBuy.php',
            type: 'POST',
            data: cartData,
            success: function(response) {
                toastr.options.timeOut = 500;
                response = JSON.parse(response);
                $button.prop('disabled', false); // Re-enable the button
                if(response  == "Care club purchase limit exceeded"){
                    toastr.warning('Care club purchase limit exceded');
                }
                else if (response != 0) {
                    // toastr.success('Care Club Purchase Request Successfull');
                    $('#cpnModal').modal('hide');
                    $('#successModal').modal('show');
                } else if(response == 0){
                    $('#pendingModal').modal('show');
                } else {
                    toastr.warning('Unable To Request Please Contact Admin')
                }

}
        })

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

//price details
    function priceDetails(amount) 
    {
        let finalAmount = amount;
        let cpn =  $('#cpnVerify').val();
        if(cpn == 1){
            $('#cpnDisplay').removeClass('d-none');
            let cpnAmount = $('#cpnAmount').val();
            $('#couponAmount').html(cpnAmount);
            finalAmount = amount - cpnAmount;
        }
        //calculate tax based on amount
        let tax = (finalAmount * 18) / 100;
        let grandTotal = finalAmount + tax;

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

function setCareClubData(careClubId, branchId,amount) {
        $('#careClubId').val(careClubId);
        $('#branchId').val(branchId);
        $('#amount').val(amount);
        $('#cpnVerify').val(0);
        $('#cpnAmount').val(0);
        $('#couponAmount').html(0);
        $('#cpnDisplay').addClass('d-none');
        priceDetails(amount);
    }

//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/careclub.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);
                    priceDetails(amount);
                    toastr.success('Coupon verified successfully')
                }
            }
        })
    }

$('#cpnModal').on('hidden.bs.modal', function () {
        $('.couponCode_error').html("");
    });

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

$(document).on("change", "#carTypeFilter,#planFilter", function () {
        let packageBox = $(this).closest(".package-box");
        let selectedCarType = packageBox.find("#carTypeFilter").val();
        let selectedPlanType = packageBox.find("#planFilter").val(); 
        let careClubId = packageBox.find(".buy-btn").attr("data-careclub-id");
        let branchId = $('#branchFilter').val();
        let priceElement = packageBox.find(".pc-price");
        let buyButton = packageBox.find(".buy-btn");

if (selectedCarType == 0 || selectedPlanType == 0) {
            priceElement.text("Please select a car type and plan type");
            buyButton.attr("onclick", "setCareClubData(" + careClubId + ", " + branchId + ", 0,0)");
            return;
        }

$.ajax({
            url: "App/careclub.php",
            type: "POST",
            data: { 
                carType: selectedCarType, 
                careClubId: careClubId, 
                branchId: branchId, 
                planType: selectedPlanType, 
                action: "getCareclubPrice" 
            },
            dataType: "json",
            success: function (response) {
                if (response.status == "success") {
                    if(response.amount == 0){
                        priceElement.html("Price not available");
                        buyButton.prop('disabled', true);

}
                    else {
                        priceElement.html(response.carName + " Amount: Rs." + response.amount);
                        buyButton.prop('disabled', false);
                        buyButton.attr("onclick", "setCareClubData(" + careClubId + ", " + branchId + ", " + response.amount + ", " + selectedPlanType + ")");                    
                    }
                    
                } else {
                    priceElement.text("Price not available");
                    buyButton.prop('disabled', true);
                }
            },
            error: function () {
                priceElement.text("Error fetching price");
            }
    });
});

</script>