<?php
session_start();
require "db.php";

/* CHECK LOGIN */
if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit;
}

$user_id = $_SESSION['user_id'];

/* FETCH USER BALANCE */
$balQ = $conn->prepare("SELECT balance FROM users WHERE id=?");
$balQ->bind_param("i", $user_id);
$balQ->execute();
$balRes = $balQ->get_result()->fetch_assoc();
$balance = $balRes ? $balRes['balance'] : "0.00";

/* ===================== FETCH RECHARGES ===================== */
/* NORMAL RECHARGES */
$recharges = [];
$rq = $conn->prepare("SELECT amount,status,created_at,'NGN' as type FROM recharges WHERE user_id=?");
$rq->bind_param("i", $user_id);
$rq->execute();
$normal_recharges = $rq->get_result()->fetch_all(MYSQLI_ASSOC);

/* USDT RECHARGES */
$urq = $conn->prepare("SELECT amount,status,created_at,'USDT' as type FROM usdt_recharges WHERE user_id=?");
$urq->bind_param("i", $user_id);
$urq->execute();
$usdt_recharges = $urq->get_result()->fetch_all(MYSQLI_ASSOC);

/* MERGE BOTH RECHARGES */
$recharges = array_merge($normal_recharges, $usdt_recharges);

/* SORT BY CREATED_AT DESCENDING */
usort($recharges, function($a,$b){
    return strtotime($b['created_at']) - strtotime($a['created_at']);
});

/* ===================== FETCH WITHDRAWALS ===================== */
/* NORMAL WITHDRAWALS */
$withdrawals = [];
$wq = $conn->prepare("SELECT amount,status,created_at,'NGN' as type FROM withdrawals WHERE user_id=?");
$wq->bind_param("i", $user_id);
$wq->execute();
$normal_withdrawals = $wq->get_result()->fetch_all(MYSQLI_ASSOC);

/* USDT WITHDRAWALS */
$uwq = $conn->prepare("SELECT amount,status,created_at,'USDT' as type FROM usdt_withdrawals WHERE user_id=?");
$uwq->bind_param("i", $user_id);
$uwq->execute();
$usdt_withdrawals = $uwq->get_result()->fetch_all(MYSQLI_ASSOC);

/* MERGE BOTH WITHDRAWALS */
$withdrawals = array_merge($normal_withdrawals, $usdt_withdrawals);

/* SORT BY CREATED_AT DESCENDING */
usort($withdrawals, function($a,$b){
    return strtotime($b['created_at']) - strtotime($a['created_at']);
});
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Wallet</title>

<style>
*{box-sizing:border-box;font-family:Arial,Helvetica,sans-serif;}
body::before{
    content:"";
    position:fixed;
    inset:0;
    background:url("bodyw.jpg") center/cover no-repeat;
    filter:blur(40px);
    transform:scale(1.1);
    z-index:-2;
}
body{
  margin:0;
  min-height:100vh;
}
.header{
  height:56px;
  background:#147238;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  font-weight:600;
  position:relative;
}
.back{
  position:absolute;
  left:15px;
  font-size:26px;
  cursor:pointer;
}
.wallet-card{
  position:relative;
  z-index:1;
  width:90%;
  margin:20px auto 12px;
  background:#147238;
  border-radius:16px;
  padding:22px 18px 14px;
  color:#fff;
  overflow:hidden;
}
.wallet-card::before,
.wallet-card::after{
  content:"";
  position:absolute;
  width:200%;
  height:200%;
  background:rgba(255,255,255,0.15);
  top:-120%;
  left:-50%;
  transform:rotate(45deg);
}
.wallet-card::after{
  background:rgba(0,0,0,0.08);
  top:-60%;
  left:-80%;
}
.balance{
  position:relative;
  z-index:1;
  text-align:center;
}
.balance h1{
  margin:0;
  font-size:38px;
  font-weight:700;
}
.balance p{
  margin:4px 0 18px;
  opacity:0.9;
}
.tabs{
  display:flex;
  width:90%;
  margin:15px auto 0;
}
.tab{
  flex:1;
  text-align:center;
  padding:10px;
  cursor:pointer;
  background:#ddd;
  font-size:14px;
}
.tab.active{
  background:#147238;
  color:#fff;
}
.records{
  width:90%;
  margin:15px auto;
}
.row{
  background:#fff;
  margin-bottom:10px;
  padding:12px;
  border-radius:8px;
  font-size:14px;
}
.status{
  float:right;
  font-weight:bold;
}
.success{color:green;}
.pending{color:orange;}
.failed{color:red;}
.type-badge{
  float:left;
  font-weight:bold;
  background:#eee;
  padding:2px 6px;
  border-radius:4px;
  font-size:12px;
  margin-right:6px;
}
.clear{clear:both;}
</style>
</head>

<body>

<div class="header">
  <div class="back" onclick="history.back()">‹</div>
  My Wallet
</div>

<div class="wallet-card">
  <div class="balance">
    <h1><?php echo number_format($balance,2); ?></h1>
    <p>Balance</p>
  </div>
</div>

<div class="tabs">
  <div class="tab active" onclick="showTab('recharge')">
    Recharge History
  </div>

  <div class="tab" onclick="showTab('withdrawal')">
    Withdrawal History
  </div>
</div>

<!-- RECHARGE RECORDS -->
<div class="records" id="recharge">

<?php if (empty($recharges)): ?>

  <div class="row">
    No recharge records
  </div>

<?php else: ?>

<?php foreach($recharges as $r): ?>

  <div class="row">

    <span class="type-badge">
      <?php echo $r['type']; ?>
    </span>

    Amount :
    <?php echo number_format($r['amount'],2); ?>

    <span class="status <?php echo strtolower($r['status']); ?>">
      <?php echo ucfirst($r['status']); ?>
    </span>

    <div class="clear"></div>

    <small>
      <?php echo $r['created_at']; ?>
    </small>

  </div>

<?php endforeach; ?>

<?php endif; ?>

</div>


<!-- WITHDRAWAL RECORDS -->
<div class="records" id="withdrawal" style="display:none;">

<?php if (empty($withdrawals)): ?>

  <div class="row">
    No withdrawal records
  </div>

<?php else: ?>

<?php foreach($withdrawals as $w): ?>

  <div class="row">

    <span class="type-badge">
      <?php echo $w['type']; ?>
    </span>

    Amount :
    <?php echo number_format($w['amount'],2); ?>

    <span class="status <?php echo strtolower($w['status']); ?>">
      <?php echo ucfirst($w['status']); ?>
    </span>

    <div class="clear"></div>

    <small>
      <?php echo $w['created_at']; ?>
    </small>

  </div>

<?php endforeach; ?>

<?php endif; ?>

</div>


<script>

function showTab(type){

  document.querySelectorAll('.tab')
    .forEach(t => t.classList.remove('active'));

  document.querySelectorAll('.records')
    .forEach(r => r.style.display = 'none');


  if(type === 'recharge'){

    document.querySelectorAll('.tab')[0]
      .classList.add('active');

    document.getElementById('recharge')
      .style.display = 'block';

  }else{

    document.querySelectorAll('.tab')[1]
      .classList.add('active');

    document.getElementById('withdrawal')
      .style.display = 'block';

  }

}

</script>

</body>
</html>