JezK

Edit File: payment.php

<?php include('mainHeader.php');
?>
<section class="mt-5 pt-4 loginUser-margin">
  <div class="container-fluid bg-white text-dark border">
        <div class="row py-4">
            <div class="col-12 col-xl-8 col-sm-6 col-md-4 border-right">
                <div class="row">
                    <div class="col-xl-3 border-right">
                        <br>
                        <h6>Payment Options</h6>
                        <ul class="nav nav-pills flex-column" role="tablist">
                            <li class="nav-item pr-4" onclick="changeImg1()">
                                <a class="nav-link nav-pills-active active" data-toggle="pill" href="#debit">
                                <img src="img/debitcard_selected.png" id='img1'>&nbsp;Debit Card</a>
                            </li>
                            <li class="nav-item pr-4" onclick="changeImg2()">
                                <a class="nav-link nav-pills-active" data-toggle="pill" href="#net"><img id='img2' src="img/netbanking.png">&nbsp;Net Banking</a>
                            </li>
                            <li class="nav-item pr-4" onclick="changeImg3()">
                                <a class="nav-link nav-pills-active pb-1" data-toggle="pill" href="#upi"><img id='img3' src="img/upi.png">&nbsp;UPI</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-xl-9 videoConf">
                    <div class="tab-content">
                        <div id="debit" class="container tab-pane active"><br>
                        <h6>Amount to Pay $500</h6>
                                <form action="" method="POST">
                                    <h6>Confirm Appointment</h6>
                                    <div class="form-group">
                                        <label for="cardNumber" class="fieldName">Card Number</label>
                                        <input type="text" class="form-control formField-control" name="cardNumber" id="cardNumber">
                                    </div>
                                    <div class="form-group">
                                        <label for="cardholderName" class="fieldName">Cardholder Name</label>
                                        <input type="text" class="form-control formField-control" name="cardholderName" id="cardholderName">
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-6">
                                            <label for="validUpto" class="fieldName">Valid up to</label>
                                            <input type="text" class="form-control formField-control" name="validUpto" id="validUpto">
                                        </div>
                                        <div class="form-group col-6">
                                            <label for="cvv" class="fieldName">CVV</label>
                                            <input type="text" class="form-control formField-control" name="cvv" id="cvv">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <input type="checkbox" id="test4">
                                        <label for="test4" class="fieldName">Remember this card</label>
                                        <div class="text-warning px-3 py-2 card-cvv">(Your CVV won't be saved)</div>
                                    </div>
                                    <div class="form-group mb-5">
                                        <button class="btn basic-btn-color w-100">Proceed to Pay</button>
                                    </div>
                                </form>
                            </div>
                            <div id="net" class="container tab-pane fade"><br>
                            <h3>Menu 1</h3>
                            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            </div>
                            <div id="upi" class="container tab-pane fade"><br>
                            <h3>Menu 2</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-xl-4 col-sm-6 col-md-4 pt-5">
                <div class="payillustration pt-5">
                   <img src="img/payillustration.png" width="100%">
                </div>
            </div>
        </div>
    </section>
  
<?php include('mainFooter.php')?>
<script>
   
    function changeImg1(){
        let imageName  = document.getElementById("img1").src.split('/').pop()   
        if ( imageName == "debitcard.png") 
        {
            document.getElementById("img2").src = "img/netbanking.png";
            document.getElementById("img3").src = "img/upi.png";
            document.getElementById("img1").src = "img/debitcard_selected.png";
        }
        else 
        {
            document.getElementById("img1").src = "img/debitcard_selected.png";
        }
    }
    function changeImg2(){
        let imageName  = document.getElementById("img2").src.split('/').pop()   
        if ( imageName == "netbanking.png") 
        {
            document.getElementById("img1").src = "img/debitcard.png";
            document.getElementById("img3").src = "img/upi.png";
            document.getElementById("img2").src = "img/netbanking_selected.png";
        }
        else 
        {
            document.getElementById("img2").src = "img/netbanking_selected.png";
        }
    }
    function changeImg3(){
        let imageName  = document.getElementById("img3").src.split('/').pop()   
        if( imageName == "upi.png") 
        {
            document.getElementById("img1").src = "img/debitcard.png";
            document.getElementById("img3").src = "img/upi_selected.png";
            document.getElementById("img2").src = "img/netbanking.png";
        }
        else 
        {
            document.getElementById("img3").src = "img/upi_selected.png";
        }
    }
    
</script>