payment_method.php

<?php
include("header.php");
// print_r($_REQUEST);

$user_id = $_SESSION['id'];
$savedAddresses = [];

$totalQuantity = 0;
$grandTotal = 0;
// $call = showCart($user_id);

// Fetch cart details for the user
$cartQuery = "SELECT c.quantity, p.price FROM cart c INNER JOIN product p ON c.p_id = p.p_id WHERE c.u_id = '$user_id'";
$cartResult = mysqli_query($conn, $cartQuery);

if (mysqli_num_rows($cartResult) > 0) {
    while ($cartRow = mysqli_fetch_assoc($cartResult)) {
        $totalQuantity += $cartRow['quantity'];
        $grandTotal += $cartRow['quantity'] * $cartRow['price'];
    }
}
// Check if product details are passed in the URL for a single product purchase
if (isset($_REQUEST['product_id']) && isset($_REQUEST['quantity']) && isset($_REQUEST['price'])) {
    $productIds = $_REQUEST['product_id'];
    $quantities = $_REQUEST['quantity'];
    $price = $_REQUEST['price'];  // Ensure this is set before use
} else {
    // If not set, default the price to 0 or calculate it based on cart
    $productIds = [];
    $quantities = [];
    $price = 0;

    // If cart is used, calculate the price based on cart data
    $cartData = mysqli_query($conn, "SELECT cart.p_id, cart.quantity, product.price FROM cart join product on cart.p_id=product.p_id WHERE u_id = '$user_id'");
    while ($row = mysqli_fetch_assoc($cartData)) {
        $productIds[] = $row['p_id'];
        $quantities[] = $row['quantity'];
        $price += $row['quantity'] * $row['price'];  // Summing up price for all cart items
    }
}
?>

<style>
    /* Hide default radio button */
    .custom-radio {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    .custom-radio+.form-check-label {
        position: relative;
        padding-left: 60px;
        cursor: pointer;
        font-size: 16px;
        color: #181167;
        font-family: 'Poppins', sans-serif;
        font-weight: 500;
    }

    .custom-radio+.form-check-label::before {
        content: '';
        position: absolute;
        left: 0;
        width: 40px;
        height: 20px;
        background-color: #ccc;
        border-radius: 50px;
        transition: background-color 0.3s, transform 0.3s;
    }

    .custom-radio+.form-check-label::after {
        content: '';
        position: absolute;
        top: 2.5px;
        left: 2px;
        width: 15px;
        height: 15px;
        background-color: white;
        border-radius: 50%;
        transition: transform 0.3s;
    }

    .custom-radio:checked+.form-check-label::before {
        background-color: #007bff;
    }

    .custom-radio:checked+.form-check-label::after {
        transform: translateX(20px);
    }

    /* UPI Payment Section */
    #upi-section {
        display: none;
        margin-top: 17px;
        background-color: #dfe9fa;
        padding: 20px;
        border-radius: 15px;
        text-align: center;
    }
</style>

<section>
    <div class="container-fluid">
        <form method="post" action="place_order.php" onsubmit="return validateForm()">
            <input type="hidden" name="product_id" value="<?php echo $_REQUEST['product_id'];?>"/>
            <input type="hidden" name="quantity" value="<?php echo $_REQUEST['quantity'];?>"/>
            <input type="hidden" name="price" value="<?php echo $_REQUEST['price'];?>"/>
            <input type="hidden" name="selected_address" value="<?php echo $_REQUEST['selected_address'];?>" />
            <div class="row d-flex w-75" id="box">
                <div class="col-md-12 d-flex">
                    <div class="col-md-8">
                        <div class="col-md-12" style="background-color: #f1f6ff; padding: 50px 30px 30px 30px;">
                            <h3 class="text-center login-heading mb-4" style="font-size: 30px;">Select Payment Method</h3>
                            <!-- <form method="post" action="place_order.php" onsubmit="return validateForm()"> -->
                           

                            <div style="display: grid; justify-content: center; align-items: center; background-color: #cedefa; padding: 35px; border-radius: 10px;">
                                <div style="margin-bottom: 25px;">
                                    <input type="radio" id="cod" class="form-check-input custom-radio" name="payment_method" value="COD" onclick="toggleUPI(false)" required>
                                    <label class="form-check-label" for="cod">Cash on Delivery</label>
                                </div>
                                <div>
                                    <input type="radio" id="upi" class="form-check-input custom-radio" name="payment_method" value="UPI" onclick="toggleUPI(true)">
                                    <label class="form-check-label" for="upi">UPI Payment</label>
                                </div>
                            </div>

                            <div id="upi-section">
                                <p style="font-size: 20px; color: #181167; font-family: 'Poppins'; font-weight: 500;">Scan the QR code to pay:</p>
                                <img src="assest/img/selfqr.jpg" alt="UPI QR Code" style="width: 200px;">
                                <p style="font-size: 16px; margin-top: 20px; color: #181167; font-family: 'Poppins'; font-weight: 500;">Enter Transaction ID:</p>
                                <input type="text" name="transaction_id" id="transaction_id" placeholder="Transaction ID">
                            </div>

                            <div style="padding: 20px; display: flex; justify-content: center;">
                                <button type="submit" name="place_order" class="btn checkoutbtn">Place Order</button>
                            </div>
                            <!-- </form> -->
                        </div>
                    </div>
                    <div class="col-md-4" style="display: flex;justify-content: center;align-items: center;margin-left: 40px;">
                        <div class="grandtotal_box col-md-12" style="margin: 0;">
                            <div class="col-md-12 summary_track">
                                <h6 class="p-0 m-0 summary">Price details</h6>
                            </div>
                            <div class="col-md-12 grandTotal_tray">
                                <h6>Number Of Products: <span id="totalQuantity"><?php echo is_array($quantities) ? array_sum($quantities) : $quantities; ?></span></h6>
                                <h6>Shipping: <span class="text-success">FREE</span></h6>
                            </div>
                            <div class="main_grand_total">
                                <h5 class="text-center">Grand Total: ₹ <span class="actual_price" id="grandTotal"><?php echo number_format($price, 2); ?></span></h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </form>

    </div>
</section>
<?php include("footer.php"); ?>

<script>
    function toggleUPI(show) {
        const upiSection = document.getElementById('upi-section');
        const transactionId = document.getElementById('transaction_id');
        upiSection.style.display = show ? 'block' : 'none';
        if (!show) transactionId.value = ''; 
    }

    function validateForm() {
        const upiChecked = document.getElementById('upi').checked;
        const transactionId = document.getElementById('transaction_id').value.trim();

        if (upiChecked && !transactionId) {
            alert("Please enter a Transaction ID for UPI payment.");
            return false;
        }
        return true;
    }

    document.addEventListener('DOMContentLoaded', function() {
        const upiRadio = document.getElementById('upi');
        if (upiRadio.checked) toggleUPI(true);
    });
</script>