<?php
require_once 'api_helper.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['withdraw_submit'])) {
    $res = apiPost('/withdraw', ['channel'=>$_POST['channel'], 'amount'=>$_POST['amount'], 'walletNo'=>$_POST['number']]);
    if ($res['success']) {
        echo '<script>alert("উইথড্র রিকোয়েস্ট জমা হয়েছে!");window.location.href="wallet.php";</script>';
    } else {
        $error = $res['error'];
    }
}

include 'partials/header.php';
$selectedChannel = $_POST['channel'] ?? 'bKash';
$errorText = $error ?? '';
?>
<div class="space-y-6 pb-28">

  <!-- Header Back -->
  <div class="flex items-center gap-3 border-b border-slate-800 pb-3">
    <button onclick="history.back()" class="p-1 px-2.5 rounded-lg bg-slate-800/100 hover:bg-slate-700 text-slate-100">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline mr-1"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
      Back
    </button>
    <div>
      <h2 class="text-[#f8fafc] text-lg font-black tracking-tight leading-none">Withdrawal</h2>
      <span class="text-xs text-slate-400 font-bold uppercase font-mono">Receive Winnings</span>
    </div>
  </div>

  <form method="POST" action="" class="space-y-5">

    <!-- Choose Payment Channel -->
    <div class="space-y-2">
      <label class="text-[10px] text-slate-400 font-black tracking-widest block font-mono uppercase">Choose your payment channel</label>
      <div class="grid grid-cols-3 gap-3" id="channelGrid">

        <!-- bKash -->
        <div onclick="selectChannel('bKash')" id="card_bKash" class="relative p-3.5 rounded-2xl cursor-pointer text-center border-2 transition-all flex flex-col items-center justify-center gap-2 <?= $selectedChannel === 'bKash' ? 'border-emerald-500 bg-emerald-500/5' : 'border-slate-850 bg-slate-900/60' ?>">
          <div class="w-11 h-11 rounded-xl bg-pink-500 flex items-center justify-center text-white font-serif font-black shadow-md border border-pink-400/30">bK</div>
          <span class="text-xs text-white font-extrabold font-sans">bKash</span>
          <div id="check_bKash" class="absolute top-2 right-2 w-4 h-4 rounded-full flex items-center justify-center shadow <?= $selectedChannel === 'bKash' ? 'bg-emerald-500' : 'hidden' ?>">
            <span class="text-slate-950 font-black text-[9px]">✓</span>
          </div>
          <input type="radio" name="channel" value="bKash" class="hidden" <?= $selectedChannel === 'bKash' ? 'checked' : '' ?>>
        </div>

        <!-- Nagad -->
        <div onclick="selectChannel('Nagad')" id="card_Nagad" class="relative p-3.5 rounded-2xl cursor-pointer text-center border-2 transition-all flex flex-col items-center justify-center gap-2 <?= $selectedChannel === 'Nagad' ? 'border-emerald-500 bg-emerald-500/5' : 'border-slate-850 bg-slate-900/60' ?>">
          <div class="w-11 h-11 rounded-xl bg-orange-600 flex items-center justify-center text-white font-serif font-black shadow-md border border-orange-500/30">Nd</div>
          <span class="text-xs text-white font-extrabold font-sans">Nagad</span>
          <div id="check_Nagad" class="absolute top-2 right-2 w-4 h-4 rounded-full flex items-center justify-center shadow <?= $selectedChannel === 'Nagad' ? 'bg-emerald-500' : 'hidden' ?>">
            <span class="text-slate-950 font-black text-[9px]">✓</span>
          </div>
          <input type="radio" name="channel" value="Nagad" class="hidden" <?= $selectedChannel === 'Nagad' ? 'checked' : '' ?>>
        </div>

        <!-- Rocket -->
        <div onclick="selectChannel('Rocket')" id="card_Rocket" class="relative p-3.5 rounded-2xl cursor-pointer text-center border-2 transition-all flex flex-col items-center justify-center gap-2 <?= $selectedChannel === 'Rocket' ? 'border-emerald-500 bg-emerald-500/5' : 'border-slate-850 bg-slate-900/60' ?>">
          <div class="w-11 h-11 rounded-xl bg-purple-700 flex items-center justify-center text-white font-serif font-black shadow-md border border-purple-600/30">Rt</div>
          <span class="text-xs text-white font-extrabold font-sans">Rocket</span>
          <div id="check_Rocket" class="absolute top-2 right-2 w-4 h-4 rounded-full flex items-center justify-center shadow <?= $selectedChannel === 'Rocket' ? 'bg-emerald-500' : 'hidden' ?>">
            <span class="text-slate-950 font-black text-[9px]">✓</span>
          </div>
          <input type="radio" name="channel" value="Rocket" class="hidden" <?= $selectedChannel === 'Rocket' ? 'checked' : '' ?>>
        </div>

      </div>
    </div>

    <!-- Inputs -->
    <div class="space-y-4 font-semibold text-xs text-slate-400">
      <div class="space-y-1">
        <label class="uppercase tracking-widest block font-mono">Enter your Wallet Number:</label>
        <input type="tel" name="number" value="<?= htmlspecialchars($_POST['number'] ?? '') ?>" placeholder="01XXXXXXXXX" required class="w-full bg-[#131b2e] border border-slate-700 rounded-xl px-4 py-3 text-white font-bold placeholder-slate-600 focus:outline-none focus:border-emerald-500">
      </div>
      <div class="space-y-1">
        <label class="uppercase tracking-widest block font-mono">Amount</label>
        <input type="number" name="amount" value="<?= htmlspecialchars($_POST['amount'] ?? '') ?>" placeholder="Min ৳ 100" required class="w-full bg-[#131b2e] border border-slate-700 rounded-xl px-4 py-3 text-white font-bold placeholder-slate-600 focus:outline-none focus:border-emerald-500">
      </div>
    </div>

    <!-- Dynamic Display of Current winning balance -->
    <div class="bg-slate-950 border border-slate-850 p-4 rounded-xl text-center">
      <span class="text-[10px] text-slate-500 font-bold block uppercase leading-none font-mono">Your Withdrawal Balance is:</span>
      <span class="text-[#facc15] font-black text-2xl tracking-tight block mt-1">৳ <?= number_format($user['winning_balance']) ?></span>
    </div>

    <!-- Display form errors if any -->
    <?php if ($errorText): ?>
    <div class="bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs font-bold rounded-lg p-3 text-center">⚠️ <?= htmlspecialchars($errorText) ?></div>
    <?php endif; ?>

    <!-- Large red withdraw button -->
    <button type="submit" name="withdraw_submit" class="w-full bg-[#dc2626] hover:bg-red-700 text-white font-extrabold tracking-widest uppercase text-sm py-4 rounded-xl shadow-lg active:scale-95 transition-all">WITHDRAW</button>

  </form>

  <!-- Helpful Instructions box -->
  <div class="bg-emerald-500/5 border border-emerald-500/10 rounded-2xl p-4 space-y-2 text-[11px] leading-relaxed font-bold text-emerald-400">
    <p>• Withdraw রিকোয়েস্ট পাঠানোর পর ২৪ ঘণ্টার মধ্যে আপনার টাকা প্রেরণ করা হবে।</p>
    <p>• আরো দ্রুত পেমেন্ট সার্ভিস পেতে QUICK সার্ভিস মেথড সিলেক্ট করুন (সাধারণত bKash সেন্ড মানি দ্রুত সম্পন্ন হয়)।</p>
  </div>

</div>

<script>
function selectChannel(ch) {
  document.querySelectorAll('#channelGrid input[name="channel"]').forEach(function(r) { r.checked = r.value === ch; });
  ['bKash','Nagad','Rocket'].forEach(function(c) {
    var card = document.getElementById('card_' + c);
    var check = document.getElementById('check_' + c);
    if (c === ch) {
      card.className = 'relative p-3.5 rounded-2xl cursor-pointer text-center border-2 transition-all flex flex-col items-center justify-center gap-2 border-emerald-500 bg-emerald-500/5';
      check.className = 'absolute top-2 right-2 w-4 h-4 bg-emerald-500 rounded-full flex items-center justify-center shadow';
    } else {
      card.className = 'relative p-3.5 rounded-2xl cursor-pointer text-center border-2 transition-all flex flex-col items-center justify-center gap-2 border-slate-850 bg-slate-900/60';
      check.className = 'hidden';
    }
  });
}
</script>

<?php include 'partials/footer.php'; ?>
