JezK
Edit File: addCard.php
<?php include("header.php");?> <style> div.dataTables_wrapper div.dataTables_filter { position: absolute; top: 154px; } </style> <section class="section-padding"> <div class="container"> <!-- Nav tabs --> <ul class="nav nav-tabs border-0" role="tablist"> <li class="nav-item"> <a class="nav-link anc-Color" href="payments.php">Payment History</a> </li> <li class="nav-item"> <a class="nav-link anc-Color active" data-toggle="tab" href="#payment-o">Payment Options</a> </li> </ul> <!-- Tab panes --> <div class="tab-content bg-white my-3"> <div id="payment-h" class="container tab-pane fade"><br> <div class="container pb-3"> <div class="row"> <div class="col-xl-3 col-sm-6 col-md-4 mt-2"> <label class="payment-l">Payments</label> <select class="form-control formField-control filterby" name="plan_type" id="plan_type"> <option value="3">Select</option> <option alue="6">6 Months</option> <option alue="12">12 Months</option> </select> </div> <div class="col-xl-6 col-sm-6 col-md-8 videoConf mt-2"> <label class="payment-l">Select Date Range</label> <div id="reportrange" class=" formField-control" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;"> <i class="fa fa-calendar float-right pt-1"></i> <span></span> </div> </div> <div class="col-xl-3 col-sm-6 col-md-8 videoConf mt-2 "> <label class="payment-l invisible">payments</label> <div class=""><a href="#" class="btn btn-primary w-100">Export Data</a></div> </div> </div> <hr> <a href="#" class="d-block payment-links"> <div class="row"> <div class="col-xl-2 col-sm-6 col-md-4"> <p>july 5 th</p> </div> <div class="col-xl-8 col-sm-6 col-md-4"> <p>Payment to 896523164</p> </div> <div class="col-xl-2 col-sm-6 col-md-4 pull-right"> <p>$500</p> </div> </div> </a> <hr> <a href="#" class="d-block payment-links"> <div class="row"> <div class="col-xl-2 col-sm-6 col-md-4"> <p>july 5 th</p> </div> <div class="col-xl-8 col-sm-6 col-md-4"> <p>Payment to 896523164</p> </div> <div class="col-xl-2 col-sm-6 col-md-4 pull-right"> <p>$500</p> </div> </div> </a> <hr> <div id="more"> <a href="#" class="d-block payment-links"> <div class="row" > <div class="col-xl-2 col-sm-6 col-md-4"> <p>july 5 th</p> </div> <div class="col-xl-8 col-sm-6 col-md-4"> <p>Payment to 896523164</p> </div> <div class="col-xl-2 col-sm-6 col-md-4 pull-right"> <p>$500</p> </div> </div> </a> <hr> </div> <div class=""> <div class="text-right"> <button class="btn btn-primary show-more-trac" id="hide-btn" onclick="showMore()">Show more transactions</button> </div> </div> </div> </div> <div id="payment-o" class="container tab-pane active"><br> <div class="container pb-3"> <!-- <div class="row"> --> <ul class="nav nav-tabs border-0" role="tablist"> <li class="nav-item"> <a class="nav-link anc-Color" data-toggle="tab" href="#m-s-cards" onclick="hideAddCard()">MANAGE SAVED CARDS </a> </li> <li class="nav-item"> <a class="nav-link anc-Color" data-toggle="tab" href="#m-s-accounts" onclick="hideAddCard()">MANAGE BANK ACCOUNTS </a> </li> <li class="nav-item" id="add-card"> <a class="nav-link active anc-Color" data-toggle="tab" href="#addcard">ADD NEW CARD </a> </li> </ul> <!-- </div> --> <div class="tab-content "> <!-- <div id="m-s-cards" class="container tab-pane active "><br> --> <div id="m-s-cards" class="container tab-pane active"><br> <div class=""> <div class="row"> <div class="col-12 col-sm-6 col-xl-6 col-md-6"> <p class="save-bank-head mb-0 mt-3">Saved Cards</p> </div> <div class="col-12 col-sm-6 col-xl-6 col-md-6 text-right"> <a href="addCard.php" class="btn btn-primary add-card-btn">Add New Card</a> </div> </div> <hr> <div class="row"> <div class="col-12 col-sm-5 col-xl-3 col-md-6"> <div class=""> <label for="" class="fieldName">ICICI Credit Card</label> <p class=""><img src="img/visa.png"><span class="card-no">12345</span></p> </div> </div> <div class="col-12 col-sm-4 col-xl-9 col-md-6"> <div class="row"> <div class="col-6 col-sm-6 col-xl-6 col-md-6"> <div><a href="editCardDetails.php" class="bank-edit-link">Edit</a></div> <div> <p class="card-no">12365478934</p> </div> </div> <div class="col-6 col-sm-6 col-xl-6 col-md-6 text-right"> <img src="img/delete.png"> </div> </div> </div> </div> <hr> <div class="row"> <div class="col-12 col-sm-5 col-xl-3 col-md-6"> <div class=""> <label for="" class="fieldName">ICICI Debit Card</label> <p class=""><img src="img/visa.png"><span class="card-no">12345</span></p> </div> </div> <div class="col-12 col-sm-4 col-xl-9 col-md-6"> <div class="row"> <div class="col-6 col-sm-6 col-xl-4 col-md-6"> <div><a href="editCardDetails.php" class="bank-edit-link">Edit</a></div> <div> <p class="card-no">12365478962</p> </div> </div> <div class="col-6 col-sm-6 col-xl-8 col-md-6 text-right"> <img src="img/delete.png"> </div> </div> </div> </div> <hr> </div> </div> <!-- <div id="m-s-accounts" class="container tab-pane active"><br> --> <div id="m-s-accounts" class=" tab-pane fade"><br> <div class=" "> <div class="row"> <div class="col-12 col-sm-6 col-xl-6 col-md-6"><p class="save-bank-head mb-0 mt-3">Saved Bank Account</p></div> <div class="col-12 col-sm-6 col-xl-6 col-md-6 text-right"><a href="addBankAccount.php" class="btn btn-primary">Add New Bank Account</a></div> </div> <hr> <div class="row"> <div class="col-12 col-sm-5 col-xl-5 col-md-6"> <div class="row"> <div class=" col-1 col-sm-1 col-md-1 col-xl-1 pr-0"> <p>1.</p> </div> <div class="col-11 col-sm-11 col-md-6 col-xl-11 pl-0"> <p>Rakesh</p> <p>icici bank ltd</p> <p>account no : 1234659789</p> <p>IFSC code : 001155</p> </div> </div> </div> <div class="col-12 col-sm-4 col-xl-7 col-md-6"> <div class="row"> <div class="col-6 col-sm-6 col-xl-6 col-md-6"> <a href="#" class="bank-edit-link">Edit</a> </div> <div class="col-6 col-sm-6 col-xl-6 col-md-6 text-right"> <img src="img/delete.png"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> <?php include("footer.php");?> <script> function showMore() { var y = document.getElementById("hide-btn"); var x = document.getElementById("more"); if (x.style.display === "block") { x.style.display = "none"; y.innerHTML ="Show more transactions" } else { x.style.display = "block"; y.innerHTML ="Hide more transactions" } } function hideAddCard() { var h = document.getElementById("add-card"); h.style.display = "none"; } </script>