<?php 
ob_start();
session_start();
if($_SESSION['frontuserid']=="")
{header("location:login.php");exit();}?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<?php include'head.php' ?>
<link rel="stylesheet" href="assets/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="description" content="Brozers Mall">
<meta name="keywords" content="Brozers Mall" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<style>
h3{ font-weight:normal; font-size:14px;}


    .btn { background-image: linear-gradient(
#29B6F6, 
#29B6F6);
    border-radius: 5px 5px 5px 5px;
    border: 0.5px solid white;
    color: white;
    transition: 0.5s;
    
}

.amount_list{
    width: 100%;
    padding: 15px 10% 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}
.left-addon .icon {
    left: 5px;
    top: 0px;
}

.amount_list p {
    width: 11%;
    margin: 5px 5px;
    padding: 10px 0;
    box-sizing: border-box;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
    transition: .3s cubic-bezier(.25,.8,.5,1),color 1ms;
    background: #f5f5f5;
    border: 0;
        border-radius: 6px;
}
.payment_box{
    width: 100%;
    padding-left: 4%;
    box-sizing: border-box;
}

.van-radio {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.payment_box .van-radio {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
}
.van-radio__icon {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    height: 1em;
    font-size: 20px;
    line-height: 1em;
    cursor: pointer;
}
.payment_box .van-radio__icon--checked .van-icon {
    color: #333;
    background-color: transparent;
    border-color: transparent;
    font-size: 20px;
    width: 25px;
    display: inline-block;
}
.payment_box .van-radio__icon .van-icon {
    border: transparent;
    width: 25px;
    display: inline-block;
}
.van-radio__label {
        margin-left: 8px;
    color: #323233;
    margin-top: -23px;
}

.payment_text {
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    color: #757575;
}
.recharge_btn {
    width: 100%;
    padding: 15px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /*margin: 12px 0 24px;*/
    margin-top:3% !important;
    margin-bottom:50px;
}

.recharge_btn button {
    background: #009688;
    color: #fff;
    font-size: 14px;
    border-radius: 2px;
    border: 0;
    padding: 14px 0;
    text-align: center;
    width: 52%;
}
.btn-primary:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #333;
}
.appBottomMenu .item.active i {
    color: var(--background-color) !important;
}
.appBottomMenu .item.active span {
    color: var(--background-color) !important;
}

.appBottomMenu .item .ion-md-person{color:var(--background-color) !important;}
.appBottomMenu .item .toggleSidebar span{color:var(--background-color) !important;}

#appCapsule {
    padding: 12px;
}
.form-control{border-radius:33px;}
.text{font-size:13px;}
.left-addon input {
    padding-left: 62px;
    height: 41px;
}
.options{background: #fff;
    padding: 25px 15px;
    border-radius:5px;
    -webkit-box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}

.custom-control .custom-control-label{font-size:15px;}

.modal-header {background-color:var(--background-color);}
.vb .fa-user{
    display:none;
    position: absolute;
    top: 33px;
    left: 31px;
    font-size: 20px;
}
.vb .fa-mobile{
    display:none;
    position: absolute;
    left: 34px;
    top: 42%;
    font-size: 22px;
}
.vb .fa-envelope{
    display:none;
        position: absolute;
    left: 30px;
    top: 142px;
}
.vb .form-control{height:40px;}
.vb ::placeholder{padding-left:5%;}
@media only screen and (max-width: 600px) {
  .vb .fa-user{top:25px;}
  .otbt {
    width: 95%;
    margin: 0 12px;
}
.amount_list p{width:29%;}
.recharge_btn{margin-top:47% !important;}
  
}
    

</style>
</head>

<body>



<!-- App Header -->
<div class="appHeader1">
<div class="left">
            <a href="#" onClick="goBack();" class="icon goBack">
                <i class="icon ion-md-arrow-back"></i>
            </a>
            <div class="pageTitle">Recharge</div>
        </div>
        
        <div class="right"> 
        
        <a href="rechargehistory.php"><i style="font-size:18px;" class="icon ion-md-list"></i></a>
  <!--<div class="dropdown">
  <a class="" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="font-size:25px;">
    <i class="icon ion-md-list"></i></a>
  

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <!--<a class="dropdown-item" href="promotionrecord.php">Promotion Record</a>->
    <a class="dropdown-item" href="bonusrecord.php">Bonus Record</a>
    <a class="dropdown-item" href="promotion_apply_record.php">Apply Record</a>
  </div>
</div>-->
  </div>
 
</div>
<!-- * App Header --> 
<!-- App Capsule -->
<div id="appCapsule">
  <div class="appContent1">
    <!--<h3 class="text-center m-2" style="color:red;">Any Problem? Contact </span></h3>
    <?php
$Query=mysqli_query($con,"select * from tbl_website WHERE id=1");
$row=mysqli_fetch_array($Query);
//print_r($row);exit;
?>
<h3 class="text-center m-2"><span style="color:#29B6F6;"><?php echo $row['mail'] ;?></span></h3>-->

<h2 style="font-weight:bold; font-size: 15px;" class="text-center m-2">Balance: <span>₹ <?php echo number_format(wallet($con,'amount',$userid), 2);?></span></h2>
    <form action="recharge_amount.php"  method="post" class="card-body" autocomplete="off">
      <div class="inner-addon left-addon">
      <i class="icon ion-md-wallet"></i>
        <input type="number" id="userammount" name="userammount" class="form-control" value="" placeholder="Enter recharge amount" required >
      </div>
            <div>
        <p style="color: red; font-size:11px;" ><strong>Note:</strong> <br>
        <?php   
         $data=mysqli_query($con,"select * from tbl_paymentsetting");
      $val=mysqli_fetch_array($data);
        ?>
        1.Minimmum Recharge = <?php echo $val['rechargeamount']; ?> Rs 
        <br>

  2. If any one  not add Rechrge amount in wallet contact our customer service 
      
      <a class="badge badge-danger" href="https://t.me/+6tSkiRqVak8wMzJl">Recharge Support</a>
        </p>
            </div>
            <div class="amount_list">
                
                <p class="" onclick="myfunction(500)">
                  ₹ <span data-v-d269120a="">500</span>
                  </p>
                  
                  <p class="" onclick="myfunction(1000)">
                  ₹ <span data-v-d269120a="">1000</span>
                  </p>
                  
                  <p class="" onclick="myfunction(2000)">
                  ₹ <span data-v-d269120a="">2000</span>
                  </p>
                  
                  <p class="" onclick="myfunction(5000)">
                  ₹ <span data-v-d269120a="">5000</span>
                  </p>
                  
                  <p class="" onclick="myfunction(10000)">
                  ₹ <span data-v-d269120a="">10000</span>
                  </p>
                  
                  <p class="" onclick="myfunction(49999)">
                  ₹ <span data-v-d269120a="">49999</span>
                  </p>
                
                
            </div>
           <script>
               function myfunction(val)
               {
                   
                  document.getElementById("userammount").value = val;
               }
           </script> 
           
           <!-- <div class="payment_text" >
                <p class="payment_text">Payment</p>
                <div role="radiogroup " class="van-radio-group">
                    <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
                        <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" name="payment" id="customCheck1" value="EkPay" onchange="Check24(this)" checked>
                        <label class="custom-control-label" for="customCheck1"></label>
                      </div>
                      
                      
                    <span class="van-radio__label">
                        <span class="text">EkPay</span><br>
                        
                        </span>
                        </div>
                        </div>
                        
                        <div role="radiogroup " class="van-radio-group">
                    <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
                        <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" value="WowPay" name="payment" id="customCheck2"  onchange="Check25(this)" disabled>
                        <label class="custom-control-label" for="customCheck2"></label>
                      </div>
                      
                      
                    <span class="van-radio__label">
                        <span class="text">WowPay</span><br>
                        
                        </span>
                        </div>
                        </div>
                        
                        <div role="radiogroup " class="van-radio-group">
                   <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
                        <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" value="WinPay" name="payment" id="customCheck3" onchange="Check26(this)" disabled>
                        <label class="custom-control-label" for="customCheck3"></label>
                      </div>
                      
                      
                    <span class="van-radio__label">
                        <span class="text">WinPay</span><br>
                        
                        </span>
                        </div>
                        </div>
                
            </div>-->
            
            <div class="container-fluid options">
  <div class="row">
    <div class="col-8">
      <div class="custom-control custom-radio" style="padding-bottom: 25px;">
        <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked>
        <label class="custom-control-label" for="customRadio1">Upi pay</label>
      </div>
      <div class="custom-control custom-radio">
        <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
        <label class="custom-control-label" for="customRadio2">QR pay</label>
      </div>
    </div>
  </div>
</div>
            
            
            
    <div class="recharge_btn text-center ">
        <input data-toggle="modal" data-target="#form" type="submit" class="btn btn-primary" style="width:206px;color:#fff;background:var(--background-color) !important;background-image: none;" value="Recharge">
        
        <input data-toggle="modal" data-target="#form2" type="submit" class="btn btn-primary" style="width:206px;color:#fff;background:var(--background-color) !important;background-image: none;" value="Recharge">
        </div>
        
       
    </form>
  </div>
</div>



<!--upipay--popupsubmit-->
<div class="modal fade" id="form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header border-bottom-0">
        <h5 class="modal-title" id="exampleModalLabel">Upi pay</h5>
        
      </div>
      <form>
        <div class="modal-body vb">
            <div class="form-group">
            <i class="fa fa-user" ></i>
            <input type="name" class="form-control" id="name" placeholder="Actual Name">
          </div>
           <div class="form-group">
            <i class="fa fa-mobile" ></i>
            <input type="mobile" class="form-control" id="mobile" placeholder="Mobile Number">
          </div>
          <div class="form-group">
            <i class="fa fa-envelope" ></i>
            <input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="Enter email">
            <!--<small id="emailHelp" class="form-text text-muted">Your information is safe with us.</small>-->
          </div>
         
         
         
          
        </div>
        <div class="modal-footer border-top-0 d-flex justify-content-center">
            <button style="background:#f0f0f0;padding:7px;color:#333;" type="button" class="btn close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">Cancel</span>
        </button>
            
            
          <button  type="submit" class="btn btn-success"><a style="color:#000;" href="checkbtn.php">Submit</a></button>
          
        </div>
      </form>
    </div>
  </div>
</div>
<!--end-->


<!--qrpay--popupsubmit-->
<div class="modal fade" id="form2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header border-bottom-0">
        <h5 class="modal-title" id="exampleModalLabel">QR pay</h5>
        
      </div>
      <form>
        <div class="modal-body vb">
            <div class="form-group">
            <i class="fa fa-user" ></i>
            <input type="name" class="form-control" id="name" placeholder="Actual Name">
          </div>
           <div class="form-group">
            <i class="fa fa-mobile" ></i>
            <input type="mobile" class="form-control" id="mobile" placeholder="Mobile Number">
          </div>
          <div class="form-group">
            <i class="fa fa-envelope" ></i>
            <input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="Enter email">
            <!--<small id="emailHelp" class="form-text text-muted">Your information is safe with us.</small>-->
          </div>
         
          
        </div>
        <div class="modal-footer border-top-0 d-flex justify-content-center">
            <button style="background:#f0f0f0;padding:7px;color:#333;" type="button" class="btn close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">Cancel</span>
        </button>
            
            
          <button type="submit" class="btn btn-success"><a style="color:#000;" href="checkbtn2.php">Submit</a></button>
          
        </div>
      </form>
    </div>
  </div>
</div>
<!--end-->


<script>
    

 function Check24(value){
      var val = value.checked;
     //console.log(val);
     if(val == true){
	$("#customCheck1").prop('disabled', false);
	$("#customCheck2").prop('disabled', true);
	$("#customCheck3").prop('disabled', true);
     }else{
    $("#customCheck1").prop('disabled', false);
	$("#customCheck2").prop('disabled', false);
	$("#customCheck3").prop('disabled', false);
     }
 };


 function Check25(value){
     var val = value.checked;
     //console.log(val);
     if(val == true){
	$("#customCheck1").prop('disabled', true);
	$("#customCheck2").prop('disabled', false);
	$("#customCheck3").prop('disabled', true);
     }else{
        $("#customCheck1").prop('disabled', false);
	$("#customCheck2").prop('disabled', false);
	$("#customCheck3").prop('disabled', false);
     }
};
 function Check26(value){
      var val = value.checked;
     //console.log(val);
     if(val == true){
	$("#customCheck1").prop('disabled', true);
	$("#customCheck2").prop('disabled', true);
	$("#customCheck3").prop('disabled', false);
     }else{
     $("#customCheck1").prop('disabled', false);
	$("#customCheck2").prop('disabled', false);
	$("#customCheck3").prop('disabled', false);
     }
 };


 
 


</script>


<?php include("include/footer.php");?>
<?php
$Query=mysqli_query($con,"select * from tbl_walletsummery WHERE userid='$userid'");
$row=mysqli_fetch_array($Query);
?>

<script src="assets/js/lib/jquery-3.4.1.min.js"></script> 
<!-- Bootstrap--> 
<script src="assets/js/lib/popper.min.js"></script> 
<script src="assets/js/lib/bootstrap.min.js"></script> 
<!-- Owl Carousel --> 
<script src="assets/js/plugins/owl.carousel.min.js"></script> 
<!-- Main Js File --> 
<script src="assets/js/app.js"></script>
<script src="assets/js/jquery.validate.min.js"></script>
<script src="assets/js/payment.js.php"></script>

</body>
</html>