<link rel="stylesheet" href="<?php echo plugins_url('opay/');?>css/withdrawal.css?ver=<?php echo $rand;?>" />


<div class="container position-relative" id="main-page">

    <div id="airtime-page-header" class="row p-4 bg-white">
        <div class="col d-flex flex-row justify-content-start align-items-start">
           <span class="general-text"><a href="#" class="back cursor-pointer text-decoration-none text-black"><i class="fa-solid fa-angle-left me-3 "></i></a>Referrals</span>
        </div>
    </div>
<!--REFERAL DETAILS-->

<main>

<div class="album py-5 bg-light">

<div class="container first-level this-ref">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">


<?php
$refs = 	vp_user_array($user_array,$curid, "vp_tot_ref_id", true);
$array = explode(",",$refs);
foreach($array as $id){
$username = get_userdata($id)->user_login;
if(!empty($id) && !empty($username) && $id != "0" && $id != false){
  $user_array = json_decode(get_user_meta($id,"vp_user_data",true),true);
  $username = get_userdata($id)->user_login;
  $email = get_userdata($id)->user_email;
  $phone = vp_user_array($user_array,$id, "vp_phone" , true);
  $plan = vp_user_array($user_array,$id, "vr_plan" , true);
  $reg = get_userdata($id)->user_registered;
  
echo'
<div class="col-12 col-md-6">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>'.$username.' Details</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">'.$username.'</text></svg>

<div class="card-body">
  <p class="card-text"><i class="fas fa-envelope" title="User Email"></i> - '.$email.'</p>
  <p class="card-text"><i class="fas fa-phone-alt" title="User Phone Number"></i> - '.$phone.'</p>
  <p class="card-text"><i class="far fa-calendar-alt" title="User Registeration Date"></i> - '.$reg.'</p>
  <div class="d-flex justify-content-between align-items-center">
    <div class="btn-group">
      <a href="whatsapp://send?phone=234'.vp_option_array($option_array,"vp_whatsapp").'&amp;text=Hi,+I+Wanna+Report+A+Case+On+'.$username.'"><button type="button" class="btn btn-sm btn-outline-secondary">Report</button></a>
      <a href="tel:+234'.$phone.'"><button type="button" class="btn btn-sm btn-outline-secondary">Call</button></a>
    </div>
    <small class="text-muted">'.$plan.'</small>
  </div>
</div>
</div>
</div>
';

}
}

?>

</div>
</div>

</div>

<script>
jQuery(".second-level").hide();
jQuery(".third-level").hide();

jQuery(".first-level-btn").on("click",function(){
jQuery(".this-ref").addClass("visually-hidden");
jQuery(".first-level").removeClass("visually-hidden");
jQuery(".first-level").show();
});

jQuery(".second-level-btn").on("click",function(){
jQuery(".this-ref").addClass("visually-hidden");
jQuery(".second-level").removeClass("visually-hidden");
jQuery(".second-level").show();
});

jQuery(".third-level-btn").on("click",function(){
jQuery(".this-ref").addClass("visually-hidden");
jQuery(".third-level").removeClass("visually-hidden");
jQuery(".third-level").show();
});
</script>
</main>

</div>