<?php 
ob_start();
session_start();
if($_SESSION['frontuserid']=="")
{header("location:login");exit();}
$userid = $_SESSION['frontuserid'];
?>
<!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">
<link rel="stylesheet" href="assets/css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<style>
body{font-family: "Montserrat", sans-serif !important;}
.home[data-v-432e6ed0]{overflow-y:auto;    padding-bottom: 3%;}
.card-body{padding:10px;}
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: 29%;
    margin: 5px 5px;
    padding: 10px 0;
    box-sizing: border-box;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    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: #6ef6c2;
    color: #05012b;
    border: 0;
    border-radius: 19px;
}
.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: #4F0761 !important;
}
.appBottomMenu .item.active span {
    color: #4F0761 !important;
}

.appBottomMenu .item .ion-md-person{color:#4F0761 !important;}
.appBottomMenu .item .toggleSidebar span{color:#4F0761 !important;}

#appCapsule {
    padding: 12px;
}
.form-control{border-radius:33px;}
.text{font-size:13px;}
.left-addon input {
    padding-left: 62px;
    height: 41px;
}
.recharbtn{    text-transform: uppercase;
    padding: 8px 62px;
    color: #05012b;
    border-radius: 21px;
    font-size: 16px;
    font-weight: 600; background: linear-gradient(90deg, #7afec3, #02afb6);}
@media only screen and (max-width: 600px) {
  .appHeader1{background:none !important;box-shadow:none !important;border-color:none !important;}
  .otbt {
    width: 95%;
    margin: 0 12px;
}
.amount_list p{width:29%;}
.recharge_btn{margin-top:47% !important;}
  
}
    

</style>
</head>

<body>

<div data-v-432e6ed0="" class="home mian game">
    
    
<!-- App Header -->
<div class="appHeader1" style="background:none;box-shadow:none;">
<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;color:#fff;" class="text-center m-2">Balance: <span>₹ <?php echo number_format(wallet($con,'amount',$userid), 2);?></span></h2>
    <form id="rechargeForm" class="card-body" autocomplete="off">
  <!-- keep userid hidden -->
  <input type="hidden" name="userid" value="<?php echo $userid; ?>">

  <div class="inner-addon left-addon">
    <i class="icon ion-md-wallet"></i>
    <input type="number"
           id="userammount"
           name="userammount"
           class="form-control"
           placeholder="Enter recharge amount"
           required>
  </div>

  <!-- Note section (unchanged) -->
  <div>
    <?php $val = mysqli_fetch_array(mysqli_query($con,"SELECT * FROM tbl_paymentsetting")); ?>
    <p style="color:red;font-size:11px;">
      <strong>Note:</strong><br>
      1. Minimum Recharge = <?php echo $val['rechargeamount']; ?> Rs<br>
      2. If recharge fails contact customer service
      <div>
        <a class="badge badge-danger" href="<?php echo $row['name']; ?>">Recharge Support</a>
        <a class="badge badge-danger" href="https://wa.me/+91<?php echo $row['mobile']; ?>">Whatsapp</a>
      </div>
    </p>
  </div>

  <!-- quick amount buttons (unchanged) -->
  <div class="amount_list">
    <p onclick="setAmt(500)">₹ <span>500</span></p>
    <p onclick="setAmt(1000)">₹ <span>1000</span></p>
    <p onclick="setAmt(2000)">₹ <span>2000</span></p>
    <p onclick="setAmt(5000)">₹ <span>5000</span></p>
    <p onclick="setAmt(10000)">₹ <span>10000</span></p>
    <p onclick="setAmt(49999)">₹ <span>49999</span></p>
  </div>

  <div class="recharge_btn text-center">
    <button type="submit" class="btn recharbtn">Recharge</button>
  </div>
</form>

<script>
/* quick-fill buttons */
function setAmt(v) { document.getElementById('userammount').value = v; }

/* ----   PAYMENT API CALL   ---- */
document.getElementById('rechargeForm').addEventListener('submit', async (e) => {
  e.preventDefault();

  const userId  = e.target.userid.value;
  const amount  = e.target.userammount.value;

  if (!amount || amount <= 0)  { alert('Enter a valid amount'); return; }

  try {
    const res = await fetch('https://codepay.codeskit.in/api/initiate-payment.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-API-Key'   : 'maddev'   // ← give them their key
      },
      body: JSON.stringify({ userId, amount })
    });

    const data = await res.json();

    if (res.ok && data.payUrl) {
      window.location.href = data.payUrl;     // off to ColaPay
    } else {
      throw new Error(data.error || 'Payment failed');
    }

  } catch (err) {
    alert('Error: ' + err.message);
  }
});
</script>

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

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